How to set top left and right corner radius with desired drop shadow in UITabbar?

Question

I've spent almost a couple of hours to figure it out. However, it did not happen and finally, I had to come here. Two things are required to be achieved:

Firstly I'd like to have a spontaneous corner radius at the top (which is basically TopRight & TopLeft) of UITabbar.

Secondly, I'd like to have a shadow above those corner radius(shown in below image).

Please have a look at below image

Let me know if anything further required from my side, I'll surely provide that.

Any help will be appreciated.

Edit 1

One more little question arose here along, suppose, Even if, However, we were able to accomplish this, Would Apple review team accept the application? I'm being little nervous and curious about it.

Answer 1

Q : One more little question arose here along, suppose, Even if, However, we were able to accomplish this, Would Apple review team accept the application? A: Yes They are accept your app I have Add This Kind Of TabBar.

Create Custom TabBar

HomeTabController

import UIKit

class HomeTabController: UITabBarController
{
    var viewCustomeTab : CustomeTabView!
    var lastSender : UIButton!

    //MARK:- ViewController Methods
    override func viewDidLoad()
    {
        super.viewDidLoad()

        UITabBar.appearance().shadowImage = UIImage()

        allocateTabItems()
    }

    //MARK:- Prepare Methods
    // Allocate shop controller with tab bar
    func allocateTabItems()
    {

        let vc1 = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "Avc") as? Avc
        let item1 = UINavigationController(rootViewController: vc1!)
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.viewControllers = [item1]
        createTabBar()
    }

    func createTabBar()
    {
        viewCustomeTab = CustomeTabView.instanceFromNib()
        viewCustomeTab.translatesAutoresizingMaskIntoConstraints = false
        viewCustomeTab.call()

        self.view.addSubview(viewCustomeTab)

        if #available(iOS 11, *)
        {
            let guide = view.safeAreaLayoutGuide
            NSLayoutConstraint.activate([guide.bottomAnchor.constraint(equalToSystemSpacingBelow: viewCustomeTab.bottomAnchor, multiplier: 0), viewCustomeTab.leadingAnchor.constraint(equalToSystemSpacingAfter: guide.leadingAnchor, multiplier: 0), guide.trailingAnchor.constraint(equalToSystemSpacingAfter: viewCustomeTab.trailingAnchor, multiplier: 0), viewCustomeTab.heightAnchor.constraint(equalToConstant: 70) ])
        }
        else
        {
            let standardSpacing: CGFloat = 0
            NSLayoutConstraint.activate([viewCustomeTab.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing), bottomLayoutGuide.topAnchor.constraint(equalTo: viewCustomeTab.bottomAnchor, constant: standardSpacing)
                ])
        }

        viewCustomeTab.btnTab1.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)
        viewCustomeTab.btnTab2.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)
        viewCustomeTab.btnTab3.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)
        viewCustomeTab.btnTab4.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)
        viewCustomeTab.btnTab5.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)

        //self.view.layoutIfNeeded()
        viewCustomeTab.layoutIfNeeded()
        viewCustomeTab.btnTab1.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab2.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab3.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab4.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab5.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab1.isSelected = true
    }

    //MARK:- Button Click Actions
    //Manage Tab From Here
    func setSelect(sender:UIButton)
    {
        viewCustomeTab.btnTab1.isSelected = false
        viewCustomeTab.btnTab2.isSelected = false
        viewCustomeTab.btnTab3.isSelected = false
        viewCustomeTab.btnTab4.isSelected = false
        viewCustomeTab.btnTab5.isSelected = false
        sender.isSelected = true
    }

    @objc func buttonTabClickAction(sender:UIButton)
    {
        //self.selectedIndex = sender.tag
        if sender.tag == 0
        {
            let vc1 = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "Bvc") as? Bvc

             let item1 = UINavigationController(rootViewController: vc1!)
            item1.navigationBar.isHidden = false
            self.viewControllers = [item1]
            setSelect(sender: viewCustomeTab.btnTab1)
            return
        }

        if sender.tag == 1
        {
            let vc2 = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "Cvc") as? Cvc
            let item2 = UINavigationController(rootViewController: vc2!)
            item2.navigationBar.isHidden = false
            item2.navigationBar.isTranslucent = false
            self.viewControllers = [item2]
            setSelect(sender: viewCustomeTab.btnTab2)
            return
        }

        if sender.tag == 2
        {
            let vc3 = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "Dvc") as? Dvc
            let item3 = UINavigationController(rootViewController: vc3!)
            item3.navigationBar.isHidden = false
             item3.navigationBar.isTranslucent = false
            self.viewControllers = [item3]
            setSelect(sender: viewCustomeTab.btnTab3)
            return
        }

        if sender.tag == 3
        {

        }

        if sender.tag == 4
        {

        }
    }
}


Create Custom View For Shadow Effect and For + Button. 

import UIKit

class CustomeTabView: UIView
{
    @IBOutlet weak var btnTab5: UIButton!
    @IBOutlet weak var btnTab4: UIButton!
    @IBOutlet weak var btnTab3: UIButton!
    @IBOutlet weak var btnTab2: UIButton!
    @IBOutlet weak var btnTab1: UIButton!
    @IBOutlet weak var vRadius: UIView!


    class func instanceFromNib() -> CustomeTabView
    {
        return UINib(nibName: "CustomeTabView", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! CustomeTabView
    }

    private var shadowLayer: CAShapeLayer!

    override func layoutSubviews()
    {
        super.layoutSubviews()

        let shadowSize : CGFloat = 2.0

        let shadowPath = UIBezierPath(roundedRect: CGRect(x: -shadowSize / 2,   y: -shadowSize / 2, width: self.vRadius.frame.size.width, height: self.vRadius.frame.size.height), cornerRadius : 20)

        self.vRadius.layer.masksToBounds = false
        self.vRadius.layer.shadowColor = UIColor.black.cgColor
        self.vRadius.layer.shadowOffset = CGSize.zero//(width: self.vRadius.frame.size.width, height: self.vRadius.frame.size.height)
        self.vRadius.layer.shadowOpacity = 0.5
        self.vRadius.layer.shadowPath = shadowPath.cgPath
        self.vRadius.layer.cornerRadius = 20
      }

OpenImg

Answer 2

Swift 4.2

You can achieve this with some custom view with a custom tab bar controller. You can customize the colors and shadows by editing only the custom views.

Custom Tab Bar Controller

import UIKit
class MainTabBarController: UITabBarController{

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        tabBar.backgroundImage = UIImage.from(color: .clear)
        tabBar.shadowImage = UIImage()

        let tabbarBackgroundView = RoundShadowView(frame: tabBar.frame)
        tabbarBackgroundView.cornerRadius = 25
        tabbarBackgroundView.backgroundColor = .white
        tabbarBackgroundView.frame = tabBar.frame
        view.addSubview(tabbarBackgroundView)

        let fillerView = UIView()
        fillerView.frame = tabBar.frame
        fillerView.roundCorners([.topLeft, .topRight], radius: 25)
        fillerView.backgroundColor = .white
        view.addSubview(fillerView)

        view.bringSubviewToFront(tabBar)
    }

Rounded Shadow View

import UIKit

class RoundShadowView: UIView {

    let containerView = UIView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        layoutView()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func layoutView() {

        // set the shadow of the view's layer
        layer.backgroundColor = UIColor.clear.cgColor
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: -8.0)
        layer.shadowOpacity = 0.12
        layer.shadowRadius = 10.0
        containerView.layer.cornerRadius = cornerRadius
        containerView.layer.masksToBounds = true

        addSubview(containerView)
        containerView.translatesAutoresizingMaskIntoConstraints = false

        // pin the containerView to the edges to the view
        containerView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        containerView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        containerView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        containerView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    }
}

UIImage extension

import UIKit

extension UIImage {
    static func from(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(color.cgColor)
        context!.fill(rect)
        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return img!
    }
}