Wie positioniere ich Top in iOS swift?

Question

Ich versuche, eine Material-Swift-Karte an den Anfang meiner Ansicht hinzuzufügen, aber es wird immer zu hoch angezeigt. Um die Höhe der Karte einzustellen behebt das Problem, aber ich möchte nicht die Höhe einstellen.

Hier ist, wie es aussieht.

Hier ist ein Link zu einem Bild, das zeigt, wie die Karte wie normaly aussieht: https://camo.githubusercontent.com/f22d27c712a6fba12237a3e4b11f6e10c893d9ab/687474703a2f2f7777772e636f736d69636d696e642e636f6d2f676966732f77686974652f636172642e676966

Und hier ist der Code meiner Ansicht:

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 
    } 
} 

Hier ist die Code des Controllers, auf dem die Ansicht geladen ist:

Weiß jemand, was das Problem ist?

Answer 1

Das Problem scheint zu sein, dass die Statusleiste 20 Punkte hoch ist und die Ansicht des Ansichtscontrollers auf dem Bildschirm oben fixiert ist. Ihr card 10 Punkte unter Superview oben, so dass es unter Statusleiste endet (10 Punkte unter Statusleiste unteren Rand).

Die Lösung ist die Verwendung UIViewController ‚s 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

Versuchen Einstellung dieses:

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

Eine andere Möglichkeit, diese

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) 
} 

mit

zu ersetzen ist

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

Das ist es :)

bearbeiten

Update Material 2.4.3 perfekt, diese Arbeit zu haben.