一個UI佈局框架,以最少的代碼實現UI設置及佈局控制

Petral-UI是一個以Swift實現的 UI佈局框架,以最少的代碼,實現UI的搭建、屬性設置以及佈局控制。git

源碼

Github地址:github.com/HuangZhiBin…github

接入條件

swift.version >= 4.2.0
複製代碼

接入方式

pod 'Petral-UI'
複製代碼

Petral-UI主要是下面兩個部分:swift

1.連續點方法

連續設置UIView的屬性,例如bash

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自動佈局的功能,但代碼量遠少於這兩個框架。佈局

自動佈局的使用步驟:ui

  1. View初始化後,經過addSubview()方法添加到當前頁面。必須先執行addSubview()方法,才能使用Petral-UI進行自動佈局的設置。
self.view.addSubview(nameLabel);
複製代碼

2.訪問View的petralRestraint屬性,經過以pt_爲前綴的方法設置佈局。spa

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決定。3d

注意:若是a與b不是屬於同一層級,調用如下方法將報錯。code

(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的情形,請修改約束條件後從新運行。

相關文章
相關標籤/搜索