How can I build a custom UITabBar?

问题

I want to build a custom UITabBar with a white background color, rounded corners, a smaller width, and a custom indicator (see picture). Can I subclass UITabBar/UITabBarController or do I have to create a new view manually? And how can I do that?

Many thanks!

回答1:

Ok... firstly you can open the storyboard and set a nice pink background color, then you can add a UIView.

You can set a proportional height and width to the superview like a 0.9 to the width and a 0.12 to the height, then a center X constraint and a align to bottom of the superview.

Into the view add an horizontal stackView with three buttons embedded with a fill equally in the "Distribution".

Now set a background image to the button in all of the states, a black and white version of the image for the default state and a colored version for the highlighted and the selected state.

Now go to the code and add something like this to create a method for the rounded corners:

extension UIView{
func roundedView(){
    let maskPath1 = UIBezierPath(roundedRect: bounds,
                                 byRoundingCorners: [.topLeft , .topRight],
                                 cornerRadii: CGSize(width: 15, height: 15))
    let maskLayer1 = CAShapeLayer()
    maskLayer1.frame = bounds
    maskLayer1.path = maskPath1.cgPath
    layer.mask = maskLayer1
  }
}

Now in your viewWillAppear add a tabBar?.roundedView()

And if you connect the IBOutlet of the tabBar UIView as if by magic you can see your "tabBar" with the rounded corner.

Now connect the IBOutlet to the buttons and select and deselect when you tap on it.

If you want clarifications you can tell me. Byee..

来源：https://stackoverflow.com/questions/51540786/how-can-i-build-a-custom-uitabbar

标签

ios