你如何制作一个彩色和半透明的导航栏(iOS)?
Posted
技术标签:
【中文标题】你如何制作一个彩色和半透明的导航栏(iOS)?【英文标题】:How do you make a navigation bar colored and translucent (iOS)? 【发布时间】:2017-11-11 20:10:53 【问题描述】:如何使导航栏既是半透明的,又是有色调的,如下图所示:
我还希望它保留半透明导航栏的默认模糊效果(所以我不希望它看起来与图片一模一样,因为我也想要模糊效果。) 我觉得这应该很容易,但我花了一个小时寻找解决方案,但没有什么能按我想要的方式工作。 另外,我更喜欢 Interface Builder 解决方案,但如果没有 swift 也可以。
【问题讨论】:
【参考方案1】:变色部分来from here。我刚刚添加了模糊部分from here。我不知道它是否是模糊的最佳解决方案,但它正在工作。您将需要对导航栏进行子类化,但没有什么痛苦的。发现如果模糊视图稍微降低 alpha 效果会更好,您将不得不稍微尝试一下。
extension UIColor
func toImage() -> UIImage?
return toImageWithSize(size: CGSize(width: 1, height: 1))
func toImageWithSize(size: CGSize) -> UIImage?
UIGraphicsBeginImageContext(size)
if let ctx = UIGraphicsGetCurrentContext()
let rectangle = CGRect(x: 0, y: 0, width: size.width, height: size.height)
ctx.setFillColor(self.cgColor)
ctx.addRect(rectangle)
ctx.drawPath(using: .fill)
let colorImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return colorImage
else
return nil
extension UIImage
func imageWithAlpha(alpha: CGFloat) -> UIImage?
UIGraphicsBeginImageContextWithOptions(size, false, scale)
draw(at: CGPoint.zero, blendMode: .normal, alpha: alpha)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
class CustomNavBar: UINavigationBar
required init?(coder aDecoder: NSCoder)
super.init(coder: aDecoder)
setBackgroundImage(UIColor.blue.toImage()?.imageWithAlpha(alpha: 0.5), for: .default)
addBlurEffect()
func addBlurEffect()
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
var frame = bounds
frame.origin.y -= 20
frame.size.height += 20
visualEffectView.frame = frame
visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
visualEffectView.alpha = 0.9
insertSubview(visualEffectView, at: 0)
sendSubview(toBack: visualEffectView)
【讨论】:
很好的解决方案。我唯一需要做的就是在addBlurEffect方法中将visualEffectView的z位置设置为-1(visualEffectView.layer.zPosition = -1),否则导航标题会出现在模糊效果后面,(我想这只是一个问题在 ios 11 中。我找到了这个解决方案 here)【参考方案2】:只需设置导航栏的颜色,然后设置透明度。
navigationController?.navigationBar.barTintColor = UIColor.green
navigationController?.navigationBar.alpha = 0.5
应该可以的。
【讨论】:
【参考方案3】:只需在界面生成器中选择 UINavigationController 的“导航栏”(不是其他 ViewController 的 NavigationItem)并更改“barTintColor”
【讨论】:
我试过了,但是当我设置条形颜色时,它会产生纯色背景色,而不是像我发布的图片中那样的半透明色。以上是关于你如何制作一个彩色和半透明的导航栏(iOS)?的主要内容,如果未能解决你的问题,请参考以下文章