如何使UILable的底部正好對應UIImageVIew的中部

在開發(fā)中我們經(jīng)常會遇到下面圖片這種需求


Paste_Image.png

左邊一個UIImageView 右邊兩個UILable,然后這兩個lable分別底部和頂部對應imageView的中間,如果用Masonry代碼寫就比較簡答,那如果用xib呢,之前一直回避這個問題,全是用代碼寫的,今天就研究了下用xib如何實現(xiàn)。

首先建立一個工程,

Paste_Image.png

在Main.storyboard里面拖入兩個UILable和一個UIImageVIew,和一個UIView,這個UIView是當一個容器來放置label的,這個思路來源于里脊串的一篇博客,具體是這個uiview的中部對應imageview的中部,uiview的top,bottom,left,right對應lable。廢話不多說,一步步實現(xiàn)。

1,選中uiimageview,給uiimageview加約束,寬高100,距離左邊10,上邊10.

Paste_Image.png

2,把兩個uilab拖入空視圖中,給第一個lable加約束,距離空白視圖頂部0,lef 為0;

Paste_Image.png

3,選中第2個lable,添加約束,距離空白 view left 為0,頂部距離第一個lable底部為0;

Paste_Image.png

4,選中空白uiview按著Ctr鍵拖動到第2個lable,選擇 Bottom Space to Container

Paste_Image.png

5,選中空白uiview按著Ctr鍵拖動到第1個lable(其實第2個也行,到時間就看你那個lable長,依據(jù)就是哪一個),選擇Trailing Space to Container

Paste_Image.png

6,選中空白uiview按著Ctr鍵拖動到imageview 選擇Center Vertically

Paste_Image.png

7,選中空白uiview,設置其跟uiimageview的間距是10

Paste_Image.png

8,然后更新視圖 大概會看到這樣的視圖,跟我們需要的視圖還不太一樣,接下來修改,

Paste_Image.png

9,選中空白uiview,然后點擊右邊這個選項,會看到一系列的約束。

Paste_Image.png

其中有兩個選項是這樣的帶有數(shù)字,分別表示,uilable的右邊到空白view的右邊距離是70,和uilable的底部到空白view的底部距離是54,把這兩個值修改為0;

Paste_Image.png

10,接下來如果不出意外的話,視圖就是我們想要的效果了。

Paste_Image.png

其實一堆約束拖下來,感覺還沒有寫起來的約束快,但是有些頁面,使用xib拖的話,要不手寫的代碼快多了,如果你看了覺得我描述不清楚的話,我上傳了一個demo,地址在這里https://github.com/yunisSong/YunisTool

里面還包含了兩個小工具。
des加解密,
獲取地理位置及地理位置坐標

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容