在開發(fā)中,很多細節(jié)的東西常常忘記,類似于快速登錄的界面場景中,往往需要進行多個按鈕等寬并且占據(jù)屏幕寬度的布局,在這種情況下,如果一個一個去設置寬高等約束那無疑是件非常繁瑣的事情, 下面簡要說一種很快速的簡單且易用的布局方式,其實只有幾個步驟
使用場景示例圖:
下面開始布局:
1佃延、在界面中拖入三個按鈕,讓三個按鈕等寬
2缕减、設置左邊第一個按鈕的左邊上下左右的約束全部為0
3、設置中間的按鈕上右下的約束為0,左邊的約束已經(jīng)設置不必再重復設置
4池户、設置右邊的按鈕上右下的約束為0,最后更新約束
跟新完約束后的界面如下圖的模樣:
這時,這三個按鈕的寬度已經(jīng)寬度一致的占據(jù)屏幕的寬度了
-
5混坞、我們只需要修改按鈕內(nèi)部的文字和圖片的位置就可以了,當然通過代碼來實現(xiàn)按鈕內(nèi)圖片和文字的位置順序的方法很多,我這里只提供一種方法,當然做下面的事情之前最好是讓三個按鈕繼承一個自定義的按鈕,并在自定義的方法中實現(xiàn)下面的方法
- (void)layoutSubviews { [super layoutSubviews]; self.imageView.width = self.width * 0.5; self.imageView.height = self.imageView.width; self.imageView.y = self.height * 0.1; self.imageView.centerX = self.width * 0.5; self.titleLabel.width = self.width; self.titleLabel.y = CGRectGetMaxY(self.imageView.frame); self.titleLabel.x = 0; self.titleLabel.height = self.height - self.titleLabel.y; }
以上所有步驟完成后布局的結果就會變成上面的成果示例圖的樣子
- 6日戈、下面說一種不是很常用的方法,在Xib中也可以實現(xiàn)的方法:
圖中Edge的位置可選擇為圖片或者文字,選擇后在Inset的位置設置左右上下的距離,不過這個距離是指距離左右上下的空白處的距離,小伙伴可以自行嘗試
