This is the 27th day of my participation in the More Text Challenge. For more details, see more text Challenge
SnapKit profile
SnapKit
It 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 files
import 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 1000public 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 yourself
priority()
Method to settestView.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 to
addSubview
You 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