如何构建自定义 UITabBar? [英] How can I build a custom UITabBar?

问题描述

我想构建一个带有白色背景色、圆角、较小宽度和一个自定义指示器的自定义 UITabBar(见图).我可以继承 UITabBar/UITabBarController 还是必须手动创建一个新视图?我该怎么做?

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?

非常感谢！

推荐答案

好的...首先你可以打开storyboard并设置一个漂亮的粉红色背景，然后你可以添加一个UIView.

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

您可以为超级视图设置成比例的高度和宽度，例如宽度为 0.9，高度为 0.12，然后是中心 X 约束和与父视图底部对齐.

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.

在视图中添加一个水平的 stackView，其中三个按钮嵌入在分布"中.

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
  }
}

现在在你的 viewWillAppear 添加一个 tabBar?.roundedView()

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

如果你连接了 tabBar UIView 的 IBOutlet 就像魔法一样，你可以看到你的tabBar"带有圆角.

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

现在将 IBOutlet 连接到按钮，并在您点击它时选择和取消选择.

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..

这篇关于如何构建自定义 UITabBar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！