Awesome Open Source
Awesome Open Source

Petral-UI是一个以Swift实现的 UI布局框架,以最少的代码,实现UI的搭建、属性设置以及布局控制。

Petral-UI主要是下面两个部分:

1.连续点方法

连续设置UIView的属性,例如

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

通过直接调用.pt_为前缀的方法,直接连续设置View的UI属性,与调用系统方法的API类似。可实现对View的连续设置,减少代码。 现有的API可以基本满足UI设置,大家可以根据实际需要自行添加更多的API方法。

2.自动布局

通过最少的代码,实现类似AutoLayout/Masory自动布局的功能,但代码量远少于这两个框架。

自动布局的使用步骤:

  1. View初始化后,通过addSubview()方法添加到当前页面。必须先执行addSubview()方法,才能使用Petral-UI进行自动布局的设置。
self.view.addSubview(nameLabel);

2.访问View的petralRestraint属性,通过以pt_为前缀的方法设置布局。

nameLabel.petralRestraint
.pt_topIn(self.view, distance: 10) // View的顶部与父View的距离为10
.pt_leftIn(self.view, distance: 20);// View的左边与父View的距离为20

自动布局的API

1.同级间View的约束

View a与View b是属于同一层级的两个View,View b的位置可以由View a决定。

注意:如果a与b不是属于同一层级,调用以下方法将报错。

(1)to方法
  • pt_leftTo()

View b的左边与View a的距离是n

b.petralRestraint.pt_leftTo(a, distance: n)


  • pt_rightTo()

View b的右边与View a的距离是n

b.petralRestraint.pt_rightTo(a, distance: n)


  • pt_topTo()

View b的顶部与View a的距离是n

b.petralRestraint.pt_topTo(a, distance: n)


  • pt_bottomTo()

View b的底部与View a的距离是n

b.petralRestraint.pt_bottomTo(a, distance: n)

(2)as方法
  • pt_leftAs

View b的左边与View a的左边的水平位置一致

b.petralRestraint.pt_leftAs(a)


  • pt_rightAs

View b的右边与View a的右边的水平位置一致

b.petralRestraint.pt_rightAs(a)


  • pt_topAs

View b的顶部与View a的顶部的水平位置一致

b.petralRestraint.pt_topAs(a)


  • pt_bottomAs

View b的底部与View a的底部的水平位置一致

b.petralRestraint.pt_bottomAs(a)


  • pt_xCenterAs
b.petralRestraint.pt_xCenterAs(a)

View b的中间水平位置与View a的中间水平位置一致


  • pt_yCenterAs
b.petralRestraint.pt_yCenterAs(a)

View b的中间垂直位置与View a的中间垂直位置一致


  • pt_centerAs
b.petralRestraint.pt_centerAs(a)

View b的中间点与View a的中间点位置一致

2.父子间View的约束

View a与View b的父View,View b的位置可以由View a决定。

注意:如果a不是b的父View,调用以下方法将报错。

  • pt_leftIn()

View b的左边与父View a的左边的距离为n

b.petralRestraint.pt_leftIn(a, distance: n)


  • pt_rightIn()

View b的右边与父View a的y右边的距离为n

b.petralRestraint.pt_rightIn(a, distance: n)


  • pt_topIn()

View b的顶部与父View a的顶部的距离为n

b.petralRestraint.pt_topIn(a, distance: n)


  • pt_bottomIn()

View b的底部与父View a的底部的距离为n

b.petralRestraint.pt_bottomIn(a, distance: n)


  • pt_xCenterIn()

View b的水平位置位于父View a的中间

b.petralRestraint.pt_xCenterIn(a)


  • pt_yCenterIn()

View b的垂直位置位于父View a的中间

b.petralRestraint.pt_yCenterIn(a)


  • pt_centerIn()

View b的水平和垂直位置位于父View a的中间

b.petralRestraint.pt_centerIn(a)

3.指定View的固定宽高

  • pt_width()

View b的固定宽度为n

b.petralRestraint.pt_width(n)


  • pt_height()

View b的固定高度为n

b.petralRestraint.pt_height(n)

布局的级联更新

  • pt_updateDependeds()

View b的位置受到View a的制约,View c的位置受到View b的制约,若View a的位置或者大小发生改变,要保持之前的制约条件(Restraint),需要手动调用API方法a.petralRestraint.pt_updateDependeds();进行更新,使View b和View c的位置和大小发生改变。不手动调用该方法,将不主动实现UI的级联更新。

a.petralRestraint.pt_updateDependeds();

布局冲突的情况

以下的情形会发生布局冲突,运行时抛出fatalError:

  • 同时设置view的left、right和width约束
  • 同时设置view的top、bottom和height约束
  • 同时设置view的left、xCenter约束
  • 同时设置view的right、xCenter约束
  • 同时设置view的top、yCenter约束
  • 同时设置view的bottom、yCenter约束

运行时发现fatalError的情形,请修改约束条件后重新运行。

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Command Line (131,631
Swift (64,698
Xml (18,329
Layout (13,815
Iphone (6,379
Swiftui (2,051
Autolayout (1,043
Masonry (691
Snapkit (281
Flexlib (3