Petral-ui is a UI layout framework implemented by Swift, which implements UI construction, attribute setting and layout control with minimal code.

The source code

Github address: github.com/HuangZhiBin…

Access conditions

Swift. Version > = 4.2.0Copy the code

access

pod 'Petral-UI'
Copy the code

Petral-ui consists of the following two parts:

1. Continuous point method

Continuously set UIView properties, for example

let nameLabel = UILabel.init()
.pt_frame(x: 0, y: 0, width: 80, height: 20)
.pt_text("Name")
.pt_font(size: 14, bold: true)
.pt_textColor(UIColor.init(hexString: "#1f1f1f"));
Copy the code

The UI attributes of the View are set consecutively by directly calling a method prefixed with.pt_, similar to the API used to call system methods. Can achieve the View of the continuous setting, reduce the code. The existing API can basically meet the UI Settings, you can add more API methods according to actual needs.

2. Automatic layout

Implements functionality similar to AutoLayout/Masory automatic layout with minimal code, but much less code than these two frameworks.

How to use automatic layout:

  1. After the View is initialized, it is added to the current page using the addSubview() method. The addSubview() method must be executed before petral-UI can be used to set up the automatic layout.
self.view.addSubview(nameLabel);
Copy the code

2. Access the petralRestraint property of View and set the layout with the pt_ prefix method.

nameLabel.petralRestraint
.pt_topIn(self.view, distance: 10) // The top of the View is 10 away from the parent View
.pt_leftIn(self.view, distance: 20);// The left side of the View is 20 away from the parent View
Copy the code

Automatic layout API

1. Constraints on peer views

View A and View B are two views in the same hierarchy. The position of View B can be determined by View A.

Note: If A and B do not belong to the same level, calling the following method will result in an error.

(1) To method
  • pt_leftTo()

The left side of View B is n away from View A

b.petralRestraint.pt_leftTo(a, distance: n)
Copy the code

  • pt_rightTo()

The right side of View B is n away from View A

b.petralRestraint.pt_rightTo(a, distance: n)
Copy the code

  • pt_topTo()

The top of View B is n away from View A

b.petralRestraint.pt_topTo(a, distance: n)
Copy the code

  • pt_bottomTo()

The bottom of View B is n away from View A

b.petralRestraint.pt_bottomTo(a, distance: n)
Copy the code

(2) AS method
  • pt_leftAs

The left side of View B is aligned horizontally with the left side of View A

b.petralRestraint.pt_leftAs(a)
Copy the code

  • pt_rightAs

The right side of View B is the same horizontal position as the right side of View A

b.petralRestraint.pt_rightAs(a)
Copy the code

  • pt_topAs

The top of View B is the same horizontal position as the top of View A

b.petralRestraint.pt_topAs(a)
Copy the code

  • pt_bottomAs

The bottom of View B is in the same horizontal position as the bottom of View A

b.petralRestraint.pt_bottomAs(a)
Copy the code

  • pt_xCenterAs
b.petralRestraint.pt_xCenterAs(a)
Copy the code

The middle horizontal position of View B is consistent with the middle horizontal position of View A

  • pt_yCenterAs
b.petralRestraint.pt_yCenterAs(a)
Copy the code

The middle vertical of View B is the same as the middle vertical of View A

  • pt_centerAs
b.petralRestraint.pt_centerAs(a)
Copy the code

The midpoint of View B is the same as the midpoint of View A

2. Constraints on views between parent and child

The parent View of View A and View B. The position of View B can be determined by View A.

Note: If A is not b’s parent View, calling the following method will result in an error.

  • pt_leftIn()

The left side of View B is n away from the left side of parent View A

b.petralRestraint.pt_leftIn(a, distance: n)
Copy the code

  • pt_rightIn()

The distance between the right side of View B and the y side of parent View A is n

b.petralRestraint.pt_rightIn(a, distance: n)
Copy the code

  • pt_topIn()

The top of View B is n away from the top of parent View A

b.petralRestraint.pt_topIn(a, distance: n)
Copy the code

  • pt_bottomIn()

The distance between the bottom of View B and the bottom of parent View A is n

b.petralRestraint.pt_bottomIn(a, distance: n)
Copy the code

  • pt_xCenterIn()

View B is positioned horizontally in the middle of parent View A

b.petralRestraint.pt_xCenterIn(a)
Copy the code

  • pt_yCenterIn()

View B’s vertical position is in the middle of parent View A

b.petralRestraint.pt_yCenterIn(a)
Copy the code

  • pt_centerIn()

View B is positioned horizontally and vertically in the middle of parent View A

b.petralRestraint.pt_centerIn(a)
Copy the code

3. Specify the View’s fixed width and height

  • pt_width()

View B has a fixed width n

b.petralRestraint.pt_width(n)
Copy the code

  • pt_height()

View B has a fixed height of N

b.petralRestraint.pt_height(n)
Copy the code

Cascading layout updates

  • pt_updateDependeds()

The position of View B is constrained by View A, and the position of View C is constrained by View B. If the position or size of View A changes, the previous Restraint shall be maintained. Call API method a.petralrestraint. Pt_updateDependeds (); Update to change the position and size of views B and C. If you do not call this method manually, you will not actively implement cascading UPDATES to the UI.

a.petralRestraint.pt_updateDependeds();
Copy the code

Layout conflicts

A fatalError is raised at runtime in the following cases where layout conflicts occur:

  • Set the left, right, and width constraints of the view
  • Set the view’s top, bottom, and height constraints at the same time
  • Set the left and xCenter constraints of the view
  • Set the right and xCenter constraints for the view
  • Set the top and yCenter constraints for the view
  • Set the view’s bottom and yCenter constraints

If fatalError is found during runtime, please modify the constraints and run again.