UITabBar边框与阴影问题:保留阴影同时移除顶部边框
解决UITabBar保留阴影同时移除顶部边框的问题
嘿,我之前刚好遇到过一模一样的问题!你说得太对了,设置clipsToBounds = true确实能去掉顶部边框,但阴影是绘制在TabBar的layer边界之外的,一裁剪就跟着没了。不过咱们换个思路,不用裁剪也能搞定,给你两个靠谱的方案:
方案1:利用系统API隐藏顶部边框(首选)
UITabBar默认的顶部边框其实是由它的shadowImage属性控制的。咱们只需要把这个阴影图设为透明,同时配合设置backgroundImage(避免系统用默认样式覆盖),就能轻松去掉顶部边框,而且你之前设置的layer阴影完全不受影响:
// 先移除系统默认的顶部边框 tabBar.backgroundImage = UIImage() tabBar.shadowImage = UIImage() // 保留你原来的阴影设置 tabBar.layer.shadowOffset = CGSize(width: 0, height: 0) tabBar.layer.shadowRadius = 4.0 tabBar.layer.shadowColor = UIColor.gray.cgColor tabBar.layer.shadowOpacity = 0.6 // 划重点:这里千万不要设置 clipsToBounds = true!
这个方法完全用系统原生API实现,没有额外视图,性能最优,适配性也最好。
方案2:添加自定义阴影视图(兼容特殊场景)
如果第一种方案在某些老版本iOS上不生效,咱们可以换个思路:放弃TabBar自身的layer阴影,专门加一个阴影视图放在TabBar的父视图里,这样就算设置clipsToBounds = true移除边框,阴影也能正常显示:
// 先移除顶部边框 tabBar.clipsToBounds = true // 创建自定义阴影视图 let shadowView = UIView() shadowView.translatesAutoresizingMaskIntoConstraints = false shadowView.layer.shadowOffset = CGSize(width: 0, height: 0) // 跟你原来的阴影参数一致 shadowView.layer.shadowRadius = 4.0 shadowView.layer.shadowColor = UIColor.gray.cgColor shadowView.layer.shadowOpacity = 0.6 // 将阴影视图添加到TabBar的父视图,放在TabBar上方 tabBar.superview?.insertSubview(shadowView, aboveSubview: tabBar) // 设置约束让阴影视图和TabBar大小位置完全一致 NSLayoutConstraint.activate([ shadowView.leadingAnchor.constraint(equalTo: tabBar.leadingAnchor), shadowView.trailingAnchor.constraint(equalTo: tabBar.trailingAnchor), shadowView.topAnchor.constraint(equalTo: tabBar.topAnchor), shadowView.bottomAnchor.constraint(equalTo: tabBar.bottomAnchor) ])
这个方案兼容性拉满,适合一些特殊的自定义TabBar场景。
建议先试方案1,基本能解决90%以上的情况~
内容的提问来源于stack exchange,提问作者Abhishek Mitra
相关产品推荐
相关产品推荐

