如何制作像 Bumble 一样的导航栏
Posted
技术标签:
【中文标题】如何制作像 Bumble 一样的导航栏【英文标题】：How to make a navigation bar like that of Bumble 【发布时间】：2015-09-03 19:30:58 【问题描述】：在 mumble 的设置页面中，存在这个导航栏/标签栏，可让您在配置文件和设置之间切换。你能告诉我如何在我的应用中模仿它吗？
【问题讨论】：
【参考方案1】：您可以使用初学者自定义视图自定义UINavigationItem 的titleView 属性。将UISegmentedControl 添加到该自定义视图可能是您的解决方案。
【讨论】：
谢谢！ UISegmentedControl 是我一直在寻找的。你能告诉我自定义 UINavigationItem 的 titleView 属性是什么意思吗？不只是去掉标题，在其位置添加分段控件吗？ 其实不是这样的。您可以检查here 您可以将 UISegmentedControl 添加为要添加到 titleView 的子视图。【参考方案2】：UINavigationBar 有 3 个属性，分别称为 leftBarButtonItem、rightBarButtonItem 和 titleView。
使用[[UIBarButtonItem alloc] initWithCustomView:aCustomView] 创建leftBarButtonItem 和rightBarButtonItem。
对于titleView，您可以使用UISegmentedControl，但如果您想实现这种自定义外观，您将不得不实现自己的分段控件。
【讨论】：
【参考方案3】：刚刚构建了这个 - 看看它，让我知道你的想法。
import UIKit
class CDSlideView: UIView
var leftBackView: UIView!
var leftBackLabel: UILabel!
var leftFrontView: UIView!
var leftFrontLabel: UILabel!
var rightBackView: UIView!
var rightBackLabel: UILabel!
var rightFrontView: UIView!
var rightFrontLabel: UILabel!
var foregroundView: UIView!
var backgroundView: UIView!
var slideGesture: UIPanGestureRecognizer!
let lightColor: UIColor = UIColor.whiteColor()
let darkColor: UIColor = UIColor.blueColor()
let leftText: String = "Search"
let rightText: String = "New"
var viewWidth: CGFloat!
var viewHeight: CGFloat!
var leftOrigin: CGFloat!
var rightOrigin: CGFloat!
var foregroundPadding: CGFloat = 4
override init(frame: CGRect)
super.init(frame: frame)
// Init variables variables
viewWidth = self.frame.size.width
viewHeight = self.frame.size.height
leftOrigin = foregroundPadding / 2
rightOrigin = (viewWidth - foregroundPadding) / 2 + foregroundPadding / 2
backgroundView = UIView()
backgroundView.frame = CGRectMake(0, 0, viewWidth, viewHeight)
backgroundView.layer.cornerRadius = backgroundView.frame.size.height / 2
self.addSubview(backgroundView)
leftBackView = UIView()
leftBackView.frame = CGRectMake(0, 0, backgroundView.frame.size.width / 2, backgroundView.frame.size.height)
self.backgroundView.addSubview(leftBackView)
leftBackLabel = UILabel()
leftBackLabel.frame = CGRectMake(0, 0, leftBackView.frame.size.width, leftBackView.frame.size.height)
leftBackLabel.font = UIFont.systemFontOfSize(13, weight: UIFontWeightSemibold)
leftBackLabel.backgroundColor = UIColor.clearColor()
leftBackLabel.lineBreakMode = .ByClipping
leftBackLabel.textAlignment = .Center
self.leftBackView.addSubview(leftBackLabel)
rightBackView = UIView()
rightBackView.frame = CGRectMake(backgroundView.frame.size.width / 2, 0, backgroundView.frame.size.width / 2, backgroundView.frame.size.height)
self.backgroundView.addSubview(rightBackView)
rightBackLabel = UILabel()
rightBackLabel.frame = CGRectMake(0, 0, rightBackView.frame.size.width, rightBackView.frame.size.height)
rightBackLabel.font = UIFont.systemFontOfSize(13, weight: UIFontWeightSemibold)
rightBackLabel.backgroundColor = UIColor.clearColor()
rightBackLabel.lineBreakMode = .ByClipping
rightBackLabel.textAlignment = .Center
self.rightBackView.addSubview(rightBackLabel)
foregroundView = UIView()
foregroundView.frame = CGRectMake(foregroundPadding / 2, foregroundPadding / 2, (backgroundView.frame.size.width - foregroundPadding) / 2, backgroundView.frame.size.height - foregroundPadding)
foregroundView.clipsToBounds = true
foregroundView.layer.cornerRadius = (foregroundView.frame.size.height - foregroundPadding / 2) / 2
self.addSubview(foregroundView)
slideGesture = UIPanGestureRecognizer(target: self, action: #selector(CDSlideView.slideAction))
self.foregroundView.addGestureRecognizer(slideGesture)
leftFrontView = UIView()
leftFrontView.frame = CGRectMake(0, 0, backgroundView.frame.size.width / 2, backgroundView.frame.size.height)
self.foregroundView.addSubview(leftFrontView)
leftFrontLabel = UILabel()
leftFrontLabel.font = UIFont.systemFontOfSize(13, weight: UIFontWeightSemibold)
leftFrontLabel.backgroundColor = UIColor.clearColor()
leftFrontLabel.translatesAutoresizingMaskIntoConstraints = false
leftFrontLabel.lineBreakMode = .ByClipping
leftFrontLabel.textAlignment = .Center
self.leftFrontView.addSubview(leftFrontLabel)
let leftFrontLabelLeadingConstraint = NSLayoutConstraint(item: leftFrontLabel, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1, constant: self.backgroundView.frame.origin.x)
self.addConstraint(leftFrontLabelLeadingConstraint)
let leftFrontLabelTopConstraint = NSLayoutConstraint(item: leftFrontLabel, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: self.backgroundView.frame.origin.y)
self.addConstraint(leftFrontLabelTopConstraint)
let leftFrontLabelWidthConstraint = NSLayoutConstraint(item: leftFrontLabel, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: leftFrontView.frame.size.width)
self.addConstraint(leftFrontLabelWidthConstraint)
let leftFrontLabelHeightConstraint = NSLayoutConstraint(item: leftFrontLabel, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: leftFrontView.frame.size.height)
self.addConstraint(leftFrontLabelHeightConstraint)
rightFrontView = UIView()
rightFrontView.frame = CGRectMake(backgroundView.frame.size.width / 2, 0, backgroundView.frame.size.width / 2, backgroundView.frame.size.height)
self.foregroundView.addSubview(rightFrontView)
rightFrontLabel = UILabel()
rightFrontLabel.font = UIFont.systemFontOfSize(13, weight: UIFontWeightSemibold)
rightFrontLabel.backgroundColor = UIColor.clearColor()
rightFrontLabel.translatesAutoresizingMaskIntoConstraints = false
rightFrontLabel.lineBreakMode = .ByClipping
rightFrontLabel.textAlignment = .Center
self.rightFrontView.addSubview(rightFrontLabel)
let rightFrontLabelTrailingConstraint = NSLayoutConstraint(item: self, attribute: .Trailing, relatedBy: .Equal, toItem: rightFrontLabel, attribute: .Trailing, multiplier: 1, constant: self.backgroundView.frame.origin.x)
self.addConstraint(rightFrontLabelTrailingConstraint)
let rightFrontLabelTopConstraint = NSLayoutConstraint(item: rightFrontLabel, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: self.backgroundView.frame.origin.y)
self.addConstraint(rightFrontLabelTopConstraint)
let rightFrontLabelWidthConstraint = NSLayoutConstraint(item: rightFrontLabel, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: rightFrontView.frame.size.width)
self.addConstraint(rightFrontLabelWidthConstraint)
let rightFrontLabelHeightConstraint = NSLayoutConstraint(item: rightFrontLabel, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: rightFrontView.frame.size.height)
self.addConstraint(rightFrontLabelHeightConstraint)
let leftTapGesture: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(CDSlideView.leftTap(_:)))
self.leftBackView.addGestureRecognizer(leftTapGesture)
let rightTapGesture: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(CDSlideView.rightTap(_:)))
self.rightBackView.addGestureRecognizer(rightTapGesture)
self.setLabelText(leftText, rightText: rightText)
self.setLightColor(lightColor)
self.setDarkColor(darkColor)
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
// MARK: Setup
func setLightColor(lightColor: UIColor)
let lightColor = lightColor
self.foregroundView.backgroundColor = lightColor
self.leftBackLabel.textColor = lightColor
self.rightBackLabel.textColor = lightColor
func setDarkColor(darkColor: UIColor)
let darkColor = darkColor
self.backgroundView.backgroundColor = darkColor
self.leftFrontLabel.textColor = darkColor
self.rightFrontLabel.textColor = darkColor
func setLabelText(leftText: String, rightText: String)
self.leftFrontLabel.text = leftText
self.leftBackLabel.text = leftText
self.rightFrontLabel.text = rightText
self.rightBackLabel.text = rightText
// MARK: Actions
func slideAction(sender: UIPanGestureRecognizer)
if sender.state == .Began || sender.state == .Changed
let translation = sender.translationInView(self)
// note: 'view' is optional and need to be unwrapped
// Figure out where the user is trying to drag
var newCenter: CGPoint = CGPointMake(sender.view!.center.x + translation.x, sender.view!.center.y)
// Limit the bounds & update the center
newCenter.x = max(self.frame.size.width * 0.25 + foregroundPadding / 2, newCenter.x)
newCenter.x = min(self.frame.size.width * 0.75 - foregroundPadding / 2, newCenter.x)
// Set new center
sender.view!.center = newCenter
sender.setTranslation(CGPointMake(0,0), inView: self)
else if sender.state == .Ended
let senderVCX = sender.view?.center.x
// Snap to side
if senderVCX <= viewWidth / 2
print("called left")
sender.view?.frame.origin.x = self.leftOrigin
else
print("called right")
sender.view?.frame.origin.x = self.rightOrigin
func leftTap(sender: UITapGestureRecognizer)
UIView.animateWithDuration(0.05)
self.foregroundView.frame.origin.x = self.leftOrigin
func rightTap(sender: UITapGestureRecognizer)
UIView.animateWithDuration(0.05)
self.foregroundView.frame.origin.x = self.rightOrigin
【讨论】：
这是大量未记录的代码。我不会声称知道 Swift。但是，为了找到相关解决方案而阅读所有这些内容的想法让我头晕目眩。以上是关于如何制作像 Bumble 一样的导航栏的主要内容，如果未能解决你的问题，请参考以下文章
如何制作像 iOS 11“新闻应用”这样的自定义大型导航栏？