导航栏中的 Stackview答案

【问题标题】：Stackview in navigation bar导航栏中的 Stackview
【发布时间】：2018-04-24 12:06:01
【问题描述】：

是否可以使用 swift 以编程方式将 UIStackView 放置在 NavigationBar 中？我想在 StackView 中放置两个排列好的 stackview。但是当我这样做时，它在导航栏中没有显示任何内容。如果可能，请提供示例。谢谢

【问题讨论】：

从 UIStackView 创建您自己的自定义导航。据我所知，没有办法将 stackView 添加到导航栏

标签： swift xcode navigationbar uistackview titleview

【解决方案1】：

终于找到解决办法了

let btnSort   = UIButton(type: .system)
    btnSort.frame =  CGRect(x: 0, y: 0, width: 120, height: 40)
    btnSort.tintColor = UIColor.white
    btnSort.setImage(UIImage(named:"ic_controls_icon.png"), for: .normal)
    btnSort.imageEdgeInsets = UIEdgeInsets(top: 6,left: -10,bottom: 6,right: 34)
    btnSort.titleEdgeInsets = UIEdgeInsets(top: 0,left: 0,bottom: 0,right: 14)
    btnSort.setTitle("SORT", for: .normal)
    btnSort.layer.borderWidth = 1.0
    btnSort.backgroundColor = UIColor.red //--> set the background color and check
    btnSort.layer.borderColor = UIColor.white.cgColor

    let btnControl   = UIButton(type: .system)
    btnControl.frame =  CGRect(x: 0, y: 0, width: 120, height: 40)
    btnControl.tintColor = UIColor.white
    btnControl.setImage(UIImage(named:"ic_controls_icon.png"), for: .normal)
    btnControl.imageEdgeInsets = UIEdgeInsets(top: 6,left: -10,bottom: 6,right: 34)
    btnControl.titleEdgeInsets = UIEdgeInsets(top: 0,left: 0,bottom: 0,right: 14)
    btnControl.setTitle("SORT", for: .normal)
    btnControl.layer.borderWidth = 1.0
    btnControl.backgroundColor = UIColor.red //--> set the background color and check
    btnControl.layer.borderColor = UIColor.white.cgColor

    let view = UIStackView(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
    view.axis = .horizontal
    view.distribution = .fillEqually
    view.spacing = 5
    view.addArrangedSubview(btnSort)
    view.addArrangedSubview(btnControl)

    let mainTitleView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
    mainTitleView.addSubview(view)


    navigationItem.titleView = mainTitleView

【讨论】：

【解决方案2】：

您可以使用视图控制器的navigationItem.titleView 属性将任何UIView 子类（其中UIStackView 是其中之一）导航栏的标题。

你可以在操场上测试一下……

import UIKit
import PlaygroundSupport

let vc = UIViewController()
vc.view.backgroundColor = .white
let nav = UINavigationController(rootViewController: vc)

let topLabel = UILabel()
topLabel.font = UIFont.boldSystemFont(ofSize: 20)
topLabel.text = "Hello"

let bottomLabel = UILabel()
bottomLabel.font = UIFont.systemFont(ofSize: 16)
bottomLabel.text = "World!"

let stackView = UIStackView(arrangedSubviews: [topLabel, bottomLabel])
stackView.axis = .vertical

vc.navigationItem.titleView = stackView

PlaygroundPage.current.liveView = nav.view
PlaygroundPage.current.needsIndefiniteExecution = true

【讨论】：

【解决方案3】：

var navTitle: String? = "Preview Checklist"
var navSubTitle: String? = "Edit Checklist >"

  lazy var titleStackView: UIStackView = {
    
    let titleLabel = UILabel()
    titleLabel.textAlignment = .left
    titleLabel.text = navTitle
  //titleLabel.font = UIFont(name: "RawlineMedium-Regular", size:CGFloat(15))
    titleLabel.textColor = .white
    
    
    let subtitleLabel = UILabel()
    subtitleLabel.textAlignment = .left
    subtitleLabel.text = navSubTitle
  //subtitleLabel.font = UIFont(name: "RawlineMedium-Regular", size:CGFloat(11))
    subtitleLabel.textColor = .white
    
    let stackView = UIStackView(arrangedSubviews: [ titleLabel, subtitleLabel])
    stackView.axis = .vertical
    stackView.backgroundColor = .blue
    
    return stackView
}()

  override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationItem.titleView = titleStackView
  }

【讨论】：