UITabBar 的圆角

Posted

技术标签:

【中文标题】UITabBar 的圆角【英文标题】:Rounded corners for UITabBar 【发布时间】:2016-06-30 15:44:31 【问题描述】:

我想创建一个带有圆角的 UITabBar。有没有办法让 UITabBar 有圆角?它将采用第二张图片的形状。

应用程序从 tableView 开始。当用户点击一个主题时,它们会被发送到一个 tabBar 控制器。

-----编辑-----

这是我的 AppDelegate:

func application(_application: UIApplication,
willFinishLaunchingWithOptions launchOptions: [NSObject : AnyObject]?) -> Bool

    let tabBarController = window?.rootViewController as! UITabBarController
    let image = UIImage(named: "bar")
    let tabBarImage = resize(image: image!, newWidth: tabBarController.view.frame.width)
    tabBarController.tabBar.backgroundImage = tabBarImage
    

    return true


func resize(image: UIImage, newWidth: CGFloat) -> UIImage 

UIGraphicsBeginImageContext(CGSize(width: newWidth, height: image.size.height))
image.drawInRect( CGRect(x: 0, y: 0, width: newWidth, height: image.size.height))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

return newImage!

编辑:21 年 12 月 替换图像以省略项目名称。

【问题讨论】:

github.com/satishVekariya/SUITabView 【参考方案1】:

希望对你有所帮助

self.tabBar.layer.masksToBounds = true 
self.tabBar.isTranslucent = true 
self.tabBar.barStyle = .blackOpaque 
self.tabBar.layer.cornerRadius = 20 
self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

【讨论】:

经过大量搜索后,这个答案救了我!【参考方案2】:

它对我来说很好用

override func viewWillLayoutSubviews() 
        super.viewWillLayoutSubviews()

        self.tabBarController?.tabBar.layer.masksToBounds = true
        self.tabBarController?.tabBar.isTranslucent = true
        self.tabBarController?.tabBar.barStyle = .default
        self.tabBarController?.tabBar.layer.cornerRadius = 25
        self.tabBarController?.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

    

【讨论】:

【参考方案3】:

嘿,我使用了 tabBar 的一个简单属性,即 backgroundImage。

所以,我在didFinisLaunchingWithOptions的appDelegate中添加了:

let tabBarController = window?.rootViewController as! UITabBarController
    let image = UIImage(named: "bar")
    let tabBarImage = resize(image: image!, newWidth: tabBarController.view.frame.width)
    tabBarController.tabBar.backgroundImage = tabBarImage

还有我自定义的改变图片大小的方法:

func resize(image: UIImage, newWidth: CGFloat) -> UIImage 

    UIGraphicsBeginImageContext(CGSize(width: newWidth, height: image.size.height))
    image.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: image.size.height)) // image.drawInRect( CGRect(x: 0, y: 0, width: newWidth, height: image.size.height))  in swift 2
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return newImage!

我使用 png 图像作为背景,与您发布的相同,但颜色清晰而不是黑色。

希望对你有帮助

【讨论】:

另外,它说“UIiimage has no member of 'Draw'” 你不应该得到那个错误,你确定你在添加代码: func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool 好吧 UIImage 一个是因为我使用的是 swift3,你使用的是哪个版本?在 swift 2.2 中使用它: image.drawInRect( CGRect(x: 0, y: 0, width: newWidth, height: image.size.height)) 图片消失了。我在 swift 2.2。窗口错误仍然存​​在。是的。它在“didFinishLaunchingWithOptions”中 我编辑了问题,以便您可以看到我的应用委托【参考方案4】:
self.tabBarController?.tabBar.layer.cornerRadius = 20
self.tabBarController?.tabBar.layer.masksToBounds = true

【讨论】:

【参考方案5】:
override func viewWillLayoutSubviews() 
    super.viewWillLayoutSubviews()
    let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: view.frame.width, height: tabBar.frame.height), cornerRadius: 15)
    let mask = CAShapeLayer()
    mask.path = path.cgPath
    tabBar.layer.mask = mask


【讨论】:

以上是关于UITabBar 的圆角的主要内容,如果未能解决你的问题,请参考以下文章

iOS 8 UITabBar selectionIndicatorImage 留下圆角矩形

Swift iOS UITabBar 自定义

UITabBar 看起来像 UIToolBar(改变 UITabBar 的颜色)

UITabBar的隐藏

计算UITabBar的高度

如何将UITabBar嵌入故事板xcode中的另一个UITabBar