如何在iOS swift中定位顶部？

Question

我尝试在视图顶部添加一个材质 swift 卡片，但它总是显示得太高。设置卡片的高度可以解决问题，但我不想设置高度。

这是它的样子。

这是一张图片的链接，该图片显示了卡片的正常外观： https://camo.githubusercontent.com/f22d27c712a6fba12237a3e4b11f6e10c893d9ab/687474703a2f2f7777772e636f736d69636d696e642e636f6d2f676966732f77686974652f636172642e676966

这是我的观点的代码：

import UIKit
import Material

class UserProfileView: UIView {


    fileprivate var card: Card!

    fileprivate var toolbar: Toolbar!
    fileprivate var moreButton: IconButton!

    fileprivate var contentView: UILabel!

    fileprivate var bottomBar: Bar!
    fileprivate var dateFormatter: DateFormatter!
    fileprivate var dateLabel: UILabel!
    fileprivate var favoriteButton: IconButton!

    convenience init(){
        self.init(frame: CGRect.zero)
        self.backgroundColor = UIColor(red:0.15, green:0.24, blue:0.37, alpha:1.0)

        prepareDateFormatter()
        prepareDateLabel()
        prepareFavoriteButton()
        prepareMoreButton()
        prepareToolbar()
        prepareContentView()
        prepareBottomBar()
        prepareImageCard()
        prepareMainView()
    }


    fileprivate func prepareMainView() {
        self.addSubview(self.card!)

        let views = [
            "card": self.card!
        ]
        self.card?.translatesAutoresizingMaskIntoConstraints = false
        let cardHorizontalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[card]-10-|", metrics: nil, views: views)
        let cardVerticalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|-10-[card]", metrics: nil, views: views)

        self.addConstraints(cardHorizontalConstraint)
        self.addConstraints(cardVerticalConstraint)
    }

}

extension UserProfileView {
    fileprivate func prepareDateFormatter() {
        dateFormatter = DateFormatter()
        dateFormatter.dateStyle = .medium
        dateFormatter.timeStyle = .none
    }

    fileprivate func prepareDateLabel() {
        dateLabel = UILabel()
        dateLabel.font = RobotoFont.regular(with: 12)
        dateLabel.textColor = Color.blueGrey.base
        dateLabel.text = dateFormatter.string(from: Date.distantFuture)
    }

    fileprivate func prepareFavoriteButton() {
        favoriteButton = IconButton(image: Icon.favorite, tintColor: Color.red.base)
    }

    fileprivate func prepareMoreButton() {
        moreButton = IconButton(image: Icon.cm.moreVertical, tintColor: Color.blueGrey.base)
    }

    fileprivate func prepareToolbar() {
        toolbar = Toolbar(rightViews: [moreButton])

        toolbar.title = "Material"
        toolbar.titleLabel.textAlignment = .left

        toolbar.detail = "Build Beautiful Software"
        toolbar.detailLabel.textAlignment = .left
        toolbar.detailLabel.textColor = Color.blueGrey.base
    }

    fileprivate func prepareContentView() {
        contentView = UILabel()
        contentView.numberOfLines = 0
        contentView.text = "Material is an animation and graphics framework that is used to create beautiful applications."
        contentView.font = RobotoFont.regular(with: 14)
    }

    fileprivate func prepareBottomBar() {
        let clipboardButton = IconButton(image: UIImage(named: "clipboard_darken1.png"))
        let dashboardButton = IconButton(image: UIImage(named: "dashboard_darken1.png"))
        let bookmarkButton = IconButton(image: UIImage(named: "bookmark_darken1.png"))
        let dotsButton = IconButton(image: UIImage(named: "dots_darken1.png"))

        bottomBar = Bar()
        bottomBar.centerViews = [clipboardButton, dashboardButton, bookmarkButton, dotsButton]
    }

    fileprivate func prepareImageCard() {
        card = Card()

        card.toolbar = toolbar
        card.toolbarEdgeInsetsPreset = .square3
        card.toolbarEdgeInsets.bottom = 0
        card.toolbarEdgeInsets.right = 8

        card.contentView = contentView
        card.contentViewEdgeInsetsPreset = .wideRectangle3

        card.bottomBar = bottomBar
        card.bottomBarEdgeInsetsPreset = .wideRectangle2
    }
}

这是加载视图的控制器的代码：

import UIKit
import Material

class UserProfileViewController: UIViewController {

    override func loadView(){
        self.view = UserProfileView()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

有谁知道问题出在哪里？

Answer 1

问题似乎是状态栏高 20 点，并且视图控制器的视图固定在屏幕顶部。您的card 低于超级视图顶部 10 点，因此它最终位于状态栏下方（低于状态栏底部边缘 10 点）。

解决方法是使用UIViewController的topLayoutGuide：

override func loadView() {
    // this will create default blank view and set it to the 'view' property
    super.loadView()

    let userProfileView = UserProfileView()
    view.addSubview(userProfileView)

    // pin userProfileView left and right edge to superview's left and right edges 
    // its top to view controller's topLayoutGuide
    // and its bottom to view controller's bottomLayoutGuide
}

Answer 2

试着调整一下：

views["topLayoutGuide"] = topLayoutGuide
let cardVerticalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|[topLayoutGuide]-10-[card]", metrics: nil, views: views)

另一种选择是替换它

fileprivate func prepareMainView() {
    self.addSubview(self.card!)

    let views = [
        "card": self.card!
    ]
    self.card?.translatesAutoresizingMaskIntoConstraints = false
    let cardHorizontalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[card]-10-|", metrics: nil, views: views)
    let cardVerticalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|-10-[card]", metrics: nil, views: views)

    self.addConstraints(cardHorizontalConstraint)
    self.addConstraints(cardVerticalConstraint)
}

与

fileprivate func prepareMainView() {
    view.layout(card!).horizontally(left: 10, right: 10).top(10)
}

就是这样:)

编辑

更新到Material 2.4.3 以完美完成这项工作。