使标签栏上的自定义按钮圆形

Make custom button on Tab Bar rounded(使标签栏上的自定义按钮圆形)

问题描述

这是我想要做的:

注意:截图取自早期版本的 iOS

我能够实现的目标:

代码:

 覆盖 func viewWillAppear(animated: Bool) {//创建按钮的图像让 imageCameraButton: UIImage！= UIImage(命名:cameraIcon")//创建一个按钮让 cameraButton = UIButton(type: .Custom)//设置按钮的宽度和高度cameraButton.frame = CGRectMake(0.0, 0.0, imageCameraButton.size.width, imageCameraButton.size.height);//将图像设置为按钮cameraButton.setBackgroundImage(imageCameraButton, forState: .Normal)//将 Button 的中心设置为 TabBar 的中心cameraButton.center = self.tabBar.center//给按钮设置一个动作cameraButton.addTarget(self, action: "doSomething", forControlEvents: .TouchUpInside)//将按钮添加到视图self.view.addSubview(cameraButton)}

我确实尝试以正常方式创建一个圆形按钮，但结果如下:

圆形按钮的代码片段:

//圆形按钮的创建cameraButton.layer.cornerRadius = cameraButton.frame.size.width/2cameraButton.clipsToBounds = true

解决方案

您需要继承 UITabBarController，然后在 TabBar 的视图上方添加按钮.按钮操作应该通过设置 selectedIndex 触发 UITabBarController 选项卡更改.

代码

下面的代码只是一种简单的方法，但是对于完全支持 iPhone(包括 X 系列)/iPad 版本，您可以在此处查看完整的存储库:

Here is what I am trying to do:

Note: The screenshot is taken from an earlier version of iOS

What I have been able to achieve:

Code:

 override func viewWillAppear(animated: Bool) {
    // Creates image of the Button
    let imageCameraButton: UIImage! = UIImage(named: "cameraIcon")

    // Creates a Button
    let cameraButton = UIButton(type: .Custom)
    // Sets width and height to the Button
    cameraButton.frame = CGRectMake(0.0, 0.0, imageCameraButton.size.width, imageCameraButton.size.height);
    // Sets image to the Button
    cameraButton.setBackgroundImage(imageCameraButton, forState: .Normal)
    // Sets the center of the Button to the center of the TabBar
    cameraButton.center = self.tabBar.center
    // Sets an action to the Button
    cameraButton.addTarget(self, action: "doSomething", forControlEvents: .TouchUpInside)

    // Adds the Button to the view
    self.view.addSubview(cameraButton)
}

I did try to create a rounded button in the normal way, but this was the result:

Code Snippet for rounded button:

//Creation of Ronded Button
    cameraButton.layer.cornerRadius = cameraButton.frame.size.width/2
    cameraButton.clipsToBounds = true

Solution

You need to subclass UITabBarController and then add the button above TabBar's view. A button action should trigger UITabBarController tab change by setting selectedIndex.

Code

The code below only is a simple approach, however for a full supporting iPhone (including X-Series)/iPad version you can check the full repository here: EBRoundedTabBarController

class CustomTabBarController: UITabBarController {

    // MARK: - View lifecycle

    override func viewDidLoad() {
        super.viewDidLoad()

        let controller1 = UIViewController()
        controller1.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 1)
        let nav1 = UINavigationController(rootViewController: controller1)

        let controller2 = UIViewController()
        controller2.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 2)
        let nav2 = UINavigationController(rootViewController: controller2)

        let controller3 = UIViewController()
        let nav3 = UINavigationController(rootViewController: controller3)
        nav3.title = "IgoKICAgICAgICBsZXQgY29udHJvbGxlcjQgPSBVSVZpZXdDb250cm9sbGVyKCkKICAgICAgICBjb250cm9sbGVyNC50YWJCYXJJdGVtID0gVUlUYWJCYXJJdGVtKHRhYkJhclN5c3RlbUl0ZW06IC5jb250YWN0cywgdGFnOiA0KQogICAgICAgIGxldCBuYXY0ID0gVUlOYXZpZ2F0aW9uQ29udHJvbGxlcihyb290Vmlld0NvbnRyb2xsZXI6IGNvbnRyb2xsZXI0KQoKICAgICAgICBsZXQgY29udHJvbGxlcjUgPSBVSVZpZXdDb250cm9sbGVyKCkKICAgICAgICBjb250cm9sbGVyNS50YWJCYXJJdGVtID0gVUlUYWJCYXJJdGVtKHRhYkJhclN5c3RlbUl0ZW06IC5jb250YWN0cywgdGFnOiA1KQogICAgICAgIGxldCBuYXY1ID0gVUlOYXZpZ2F0aW9uQ29udHJvbGxlcihyb290Vmlld0NvbnRyb2xsZXI6IGNvbnRyb2xsZXI1KQoKCiAgICAgICAgdmlld0NvbnRyb2xsZXJzID0gW25hdjEsIG5hdjIsIG5hdjMsIG5hdjQsIG5hdjVdCiAgICAgICAgc2V0dXBNaWRkbGVCdXR0b24oKQogICAgfQoKICAgIC8vIE1BUks6IC0gU2V0dXBzCgogICAgZnVuYyBzZXR1cE1pZGRsZUJ1dHRvbigpIHsKICAgICAgICBsZXQgbWVudUJ1dHRvbiA9IFVJQnV0dG9uKGZyYW1lOiBDR1JlY3QoeDogMCwgeTogMCwgd2lkdGg6IDY0LCBoZWlnaHQ6IDY0KSkKCiAgICAgICAgdmFyIG1lbnVCdXR0b25GcmFtZSA9IG1lbnVCdXR0b24uZnJhbWUKICAgICAgICBtZW51QnV0dG9uRnJhbWUub3JpZ2luLnkgPSB2aWV3LmJvdW5kcy5oZWlnaHQgLSBtZW51QnV0dG9uRnJhbWUuaGVpZ2h0CiAgICAgICAgbWVudUJ1dHRvbkZyYW1lLm9yaWdpbi54ID0gdmlldy5ib3VuZHMud2lkdGgvMiAtIG1lbnVCdXR0b25GcmFtZS5zaXplLndpZHRoLzIKICAgICAgICBtZW51QnV0dG9uLmZyYW1lID0gbWVudUJ1dHRvbkZyYW1lCgogICAgICAgIG1lbnVCdXR0b24uYmFja2dyb3VuZENvbG9yID0gVUlDb2xvci5yZWQKICAgICAgICBtZW51QnV0dG9uLmxheWVyLmNvcm5lclJhZGl1cyA9IG1lbnVCdXR0b25GcmFtZS5oZWlnaHQvMgogICAgICAgIHZpZXcuYWRkU3VidmlldyhtZW51QnV0dG9uKQoKICAgICAgICBtZW51QnV0dG9uLnNldEltYWdlKFVJSW1hZ2UobmFtZWQ6IA=="example"), for: .normal)
        menuButton.addTarget(self, action: #selector(menuButtonAction(sender:)), for: .touchUpInside)

        view.layoutIfNeeded()
    }


    // MARK: - Actions

    @objc private func menuButtonAction(sender: UIButton) {
        selectedIndex = 2
    }
}

Output

这篇关于使标签栏上的自定义按钮圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！