IOS 22 自定义标题栏（Toolbar）
标题栏实现效果https://i-blog.csdnimg.cn/direct/e7fbaf3e91d04877b4f0b563ac7ee0b2.png
实现逻辑
自定义标题栏，我们可以基于系统NavigationBar定制，也可以利用控件完全自定义。本文利用控件完全自定义来实现自定义标题栏效果。
SuperToolbarView
创建一个自定义控件SuperToolbarView，可以把SuperToolbarView分成左中右三个部分；创建左中右布局，添加到SuperToolbarView中；对外提供相应的方法，将添加到左中右布局的方法暴暴露去，末了将SuperToolbarView添加到界面。
1）SuperToolbarView继承自TGRelativeLayout布局
class SuperToolbarView : TGRelativeLayout{
} 2）初始化SuperToolbarView，必须要重写required init?(coder: NSCoder) {}，便于在可视化布局中利用。
class SuperToolbarView : TGRelativeLayout{
init() {
super.init(frame: CGRect.zero)
initViews()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
initViews()
}
func initViews(){
}
} 3）利用懒加载创建左中右和标题布局
class SuperToolbarView : TGRelativeLayout{
init() {
super.init(frame: CGRect.zero)
initViews()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
initViews()
}
func initViews(){
}
lazy var leftContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_space = PADDING_MEDDLE
r.tg_gravity = TGGravity.vert.center
r.tg_leading.equal(12)
r.tg_trailing.equal(centerContainer.tg_leading).offset(PADDING_MEDDLE)
r.tg_height.equal(.fill)
return r
}()
lazy var centerContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_width.equal(.wrap)
r.tg_height.equal(.fill)
r.tg_gravity = TGGravity.vert.center
r.tg_centerX.equal(0)
r.tg_centerY.equal(0)
return r
}()
private lazy var rightContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_space = PADDING_MEDDLE
r.tg_gravity =
r.tg_trailing.equal(12)
r.tg_leading.equal(centerContainer.tg_trailing).offset(PADDING_MEDDLE)
r.tg_height.equal(.fill)
return r
}()
lazy var titleView: UILabel = {
let result=UILabel()
result.tg_width.equal(SCREEN_WIDTH - 150)
result.tg_height.equal(.wrap)
result.numberOfLines=1
result.textAlignment = .center
result.font = UIFont.systemFont(ofSize: TEXT_LARGE3)
result.textColor = .colorOnSurface
return result
}()
} 4）设置SuperToolbarView宽高，并将左中右布局添加到SuperToolbarView中，默认将标题添加到中间布局。
class SuperToolbarView : TGRelativeLayout{
init() {
super.init(frame: CGRect.zero)
initViews()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
initViews()
}
func initViews(){
tg_width.equal(.fill)
//系统导航栏高度是44，但看着太低了，所以增大
tg_height.equal(50)
//左侧按钮容器
addSubview(leftContainer)
//标题容器
addSubview(centerContainer)
centerContainer.addSubview(titleView)
//右侧按钮容器
addSubview(rightContainer)
}
lazy var leftContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_space = PADDING_MEDDLE
r.tg_gravity = TGGravity.vert.center
r.tg_leading.equal(12)
r.tg_trailing.equal(centerContainer.tg_leading).offset(PADDING_MEDDLE)
r.tg_height.equal(.fill)
return r
}()
lazy var centerContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_width.equal(.wrap)
r.tg_height.equal(.fill)
r.tg_gravity = TGGravity.vert.center
r.tg_centerX.equal(0)
r.tg_centerY.equal(0)
return r
}()
private lazy var rightContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_space = PADDING_MEDDLE
r.tg_gravity =
r.tg_trailing.equal(12)
r.tg_leading.equal(centerContainer.tg_trailing).offset(PADDING_MEDDLE)
r.tg_height.equal(.fill)
return r
}()
lazy var titleView: UILabel = {
let result=UILabel()
result.tg_width.equal(SCREEN_WIDTH - 150)
result.tg_height.equal(.wrap)
result.numberOfLines=1
result.textAlignment = .center
result.font = UIFont.systemFont(ofSize: TEXT_LARGE3)
result.textColor = .colorOnSurface
return result
}()
} 5）对外暴露添加内容到左中右布局的方法。
class SuperToolbarView : TGRelativeLayout{
init() {
super.init(frame: CGRect.zero)
initViews()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
initViews()
}
func initViews(){
tg_width.equal(.fill)
//系统导航栏高度是44，但看着太低了，所以增大
tg_height.equal(50)
//左侧按钮容器
addSubview(leftContainer)
//标题容器
addSubview(centerContainer)
centerContainer.addSubview(titleView)
//右侧按钮容器
addSubview(rightContainer)
}
@discardableResult
/// 添加左侧菜单
func addLeftItem(_ data:UIView) -> SuperToolbarView {
leftContainer.addSubview(data)
return self
}
/// 中间容器添加控件
@discardableResult
func addCenterView(_ data:UIView) -> SuperToolbarView {
//隐藏标题
titleView.hide()
centerContainer.addSubview(data)
return self
}
/// 添加右侧菜单
@discardableResult
func addRightItem(_ data:UIView) -> SuperToolbarView {
rightContainer.addSubview(data)
return self
}
lazy var leftContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_space = PADDING_MEDDLE
r.tg_gravity = TGGravity.vert.center
r.tg_leading.equal(12)
r.tg_trailing.equal(centerContainer.tg_leading).offset(PADDING_MEDDLE)
r.tg_height.equal(.fill)
return r
}()
lazy var centerContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_width.equal(.wrap)
r.tg_height.equal(.fill)
r.tg_gravity = TGGravity.vert.center
r.tg_centerX.equal(0)
r.tg_centerY.equal(0)
return r
}()
private lazy var rightContainer: TGLinearLayout = {
let r = TGLinearLayout(.horz)
r.tg_space = PADDING_MEDDLE
r.tg_gravity =
r.tg_trailing.equal(12)
r.tg_leading.equal(centerContainer.tg_trailing).offset(PADDING_MEDDLE)
r.tg_height.equal(.fill)
return r
}()
lazy var titleView: UILabel = {
let result=UILabel()
result.tg_width.equal(SCREEN_WIDTH - 150)
result.tg_height.equal(.wrap)
result.numberOfLines=1
result.textAlignment = .center
result.font = UIFont.systemFont(ofSize: TEXT_LARGE3)
result.textColor = .colorOnSurface
return result
}()
}
BaseTitleController
封装BaseTitleController，将SuperToolbarView添加到界面。
class BaseTitleController : BaseLogicController{
override func initLinearLayoutSafeArea() {
super.initLinearLayoutSafeArea()
prepareInitToolbar()
}
func prepareInitToolbar() {
if isAddToolBar() {
initToolbar()
}
}
func isAddToolBar() -> Bool {
return true
}
func initToolbar() {
superHeaderContentContainer.addSubview(toolbarView)
//添加返回按钮
if navigationController?.viewControllers.count != nil && navigationController?.viewControllers.count != 1 {
let r = addLeftImageButton(R.image.arrowLeft()!.withTintColor())
r.tag = VALUE10
}
}
@discardableResult
/// 添加左侧图片按钮
/// - Parameter data: <#data description#>
func addLeftImageButton(_ data:UIImage) -> QMUIButton {
let leftButton=ViewFactoryUtil.button(image: data)
leftButton.addTarget(self, action: #selector(leftClick(_:)), for: .touchUpInside)
toolbarView.addLeftItem(leftButton)
return leftButton
}
/// 添加右侧图片按钮
func addRightImageButton(_ data:UIImage) {
let rightButton = ViewFactoryUtil.button(image: data)
rightButton.addTarget(self, action: #selector(rightClick(_:)), for: .touchUpInside)
toolbarView.addRightItem(rightButton)
}
@discardableResult
/// 添加右侧按钮
/// - Parameter data: <#data description#>
func addRightButton(_ data:String) -> QMUIButton{
let rightButton = ViewFactoryUtil.linkButton()
rightButton.setTitle(data, for: .normal)
rightButton.setTitleColor(.colorOnSurface, for: .normal)
rightButton.addTarget(self, action: #selector(rightClick(_:)), for: .touchUpInside)
rightButton.sizeToFit()
toolbarView.addRightItem(rightButton)
return rightButton
}
/// 左侧按钮点击方法
/// - Parameter sender: <#sender description#>
@objc func leftClick(_ sender:QMUIButton) {
if sender.tag == VALUE10 {
navigationController?.popViewController(animated: true)
}
}
/// 右侧按钮点击方法
/// - Parameter sender: <#sender description#>
@objc func rightClick(_ sender:QMUIButton) {
}
lazy var toolbarView: SuperToolbarView = {
let r = SuperToolbarView()
return r
}()
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]