This is the 27th day of my participation in the More Text Challenge. For more details, see more text Challenge

SnapKit profile

  • SnapKitIt is an excellent third-party adaptive Layout library that makes it easier for iOS and OS X applications to implement Auto Layout.
  • Download the link SnapKit

SnapKit configuration

  • Using the Pods method to introduce the library,pod 'SnapKit'
  • Importing header filesimport SnapKit

SnapKit use

Example:

testView.snp.makeConstraints { (make) in
    make.left.equalToSuperview().offset(50)
    make.right.equalToSuperview().offset(-50)
    make.top.equalToSuperview().offset(50)
    make.bottom.equalToSuperview().offset(-50)}Copy the code

Basic format :(make. Specifies one of its properties. Constraints)

make.attr.constrains
Copy the code

Make: can be considered to the layout of the view of agent constrains: constraints may be the combination of multi-level, such as make. Left. EqualToSuperview (). The offset (50) two-stage combination, according to find the parent view to the left of the location, and then to the right (X) mobile 50 points

Add, update, reference, disable, and enable constraints to controls

  • Adding a new constraint

    testView.snp.makeConstraints { (make) in
      
    }
    Copy the code
  • Delete all previous constraints on the control and add a new constraint

    testView.snp.remakeConstraints { (make) in
      
    }
    Copy the code
  • Update constraint, which one you write, update which one you write, and the other constraints stay the same

    testView.snp.updateConstraints { (make) in
     
    }
    Copy the code
  • Reference constraint: declare a local variable or class attribute that references the constraint to be modified

    var topConstraint: Constraint? = nil
      
    override func viewDidLoad() {
        super.viewDidLoad()        
    
        lettestView = UIView() testView.backgroundColor = UIColor.red self.view.addSubview(testView) testView.snp.makeConstraints {  (make)in
            self.topConstraint = make.left.equalToSuperview().offset(100).constraint
            make.right.equalToSuperview().offset(-100)
            make.top.equalToSuperview().offset(100)
            make.bottom.equalToSuperview().offset(-100)}}Copy the code
  • disable

    self.topConstraint? .deactivate()Copy the code
  • To enable the

    self.topConstraint? .activate()Copy the code

Setting constraints

The constraint relations instructions
equalTo() Sets the property to be equal to some numeric value
greaterThanOrEqualTo() Sets the property to be greater than or equal to a certain value
lessThanOrEqualTo() Sets the property to be less than or equal to a certain value
multipliedBy() Sets the value of the property multiplied by the factor
dividedBy() Sets the value of the property divided by the factor

Sets the control layout properties

The layout properties instructions
size width,height,size
margin left,top,right,bottom,leading,trailing
center center,centerX,centerY
The border edges
// I'll let you know what I'll let you know.
/ / distance border, is equal to select the Storyboard Constrain to add constraint public var leftMargin: after margins SnapKit. ConstraintMakerExtendable {get}
public var rightMargin: SnapKit.ConstraintMakerExtendable { get }
public var topMargin: SnapKit.ConstraintMakerExtendable { get }
public var bottomMargin: SnapKit.ConstraintMakerExtendable { get }
public var leadingMargin: SnapKit.ConstraintMakerExtendable { get }
public var trailingMargin: SnapKit.ConstraintMakerExtendable { get }
public var centerXWithinMargins: SnapKit.ConstraintMakerExtendable { get }
public var centerYWithinMargins: SnapKit.ConstraintMakerExtendable { get }
Copy the code

Leading and left, trailing and right are normally equivalent, but are reversed when some layouts are right-to-left (such as in Arabic)

Set constraint migration

methods parameter instructions
offset(CGFloat offset) CGFloat How much the control property is offset relative to the reference
insets(MASEdgeInsets insets) MASEdgeInsets How much the edges of the control are offset relative to the reference

Offset the sample

testView.snp.makeConstraints { (make) in
      make.left.equalToSuperview().offset(20)
      make.right.equalToSuperview().offset(-20)
      make.top.equalToSuperview().offset(20)
      make.bottom.equalToSuperview().offset(-20)}Copy the code

Insets sample

// The specific parent control has a spacing of 20 around it
testView.snp.makeConstraints { (make) in
      make.edges.equalToSuperview().inset(UIEdgeInsets.init(top: 20.left: 20.bottom: 20.right: 20))}Copy the code

Set the constraint priority

  • SnapKit gives us three default methods,required,high,medium,low, the maximum value of the priority is 1000
    public static var required: ConstraintPriority {
          return 1000.0
    }
    public static var high: ConstraintPriority {
          return 750.0
    }
    public static var medium: ConstraintPriority {
          #if os(OSX)
              return 501.0
          #else
              return 500.0
          #endif
     }
    public static var low: ConstraintPriority {
          return 250.0
     }
    Copy the code
  • You can set the value of the priority by yourselfpriority()Method to set
    testView.snp.makeConstraints { (make) in
        make.center.equalToSuperview()
        make.width.equ  alTo(100).priority(ConstraintPriority.low)
        make.width.equalTo(100).priority(ConstraintPriority.high)
       
        make.height.equalTo(100).priority(200)
        make.height.equalTo(50).priority(800)}Copy the code

SnapKit note

  • Before you can add constraints using SnapKit, you need toaddSubviewYou can use it later, otherwise it will crash
  • When adding constraints, there are often two causes of constraint problems: constraint conflicts and lack of constraints. For both of these problems, you can debug and log

Common layout screen adaptation methods

  • Autoresizing
  • AutoLayou
  • VFL
  • Masonry
  • SnapKit