最近一段時(shí)間項(xiàng)目沒有那么近也颤,發(fā)現(xiàn)Github上有個(gè)關(guān)于iOS的使用純代碼的布局庫MyLayout(github地址:MyLayout地址),下載下來發(fā)現(xiàn)還不錯(cuò)侵贵,故就把自己使用的一些經(jīng)驗(yàn)分享給大家堪遂。
iOS中有個(gè)很重的控件叫做UIView,該控件也就是iOSUIKit框架中的一個(gè)類,簡稱視圖控件斥扛。自從蘋果推出了iPhone6/iPhone 6Plus以后入问,iOS開發(fā)屏幕適配的問題也變得越來越重要了,單純的用frame去進(jìn)行布局來達(dá)到適配所有的屏幕尺寸稀颁,經(jīng)常會(huì)出現(xiàn)大量的判斷語句以及常數(shù)計(jì)算芬失,因此一套強(qiáng)大的UI布局庫的出現(xiàn)是必然的。
MyLayout布局庫十分強(qiáng)大匾灶,該庫擁有:
線性布局TGLinearLayout:
線性布局里面的所有子視圖都按照添加的順序依次從上到下或者依次從左到右進(jìn)行排列棱烂。
框架布局TGFrameLayout:?
框架布局里面的所有子視圖布局時(shí)和添加的順序無關(guān),而是按照設(shè)定的位置徒着靠在布局視圖的:左上颊糜、左中哩治、左下、中上衬鱼、中中业筏、中下、右上鸟赫、右中蒜胖、右下、填充這個(gè)10個(gè)方位中的任何一個(gè)位置上抛蚤。
表格布局TGTableLayout:
表格布局里面的子視圖可以進(jìn)行多行多列的排列台谢。在使用時(shí)要先添加行,然后再在行里面添加列岁经,每行的列數(shù)可以隨意確定朋沮。
相對(duì)布局TGRelativeLayout:?
相對(duì)布局里面的子視圖和添加的順序無關(guān),而是按照子視圖之間設(shè)定的尺寸約束依賴和位置約束依賴進(jìn)行布局排列蒿偎。
流式布局TGFlowLayout:?
流式布局里面的子視圖按照添加的順序依次從某個(gè)方向排列朽们,而當(dāng)遇到了這個(gè)方向上的排列數(shù)量限制或者容器的尺寸限制后將會(huì)另起一行,而重新按照原先的方向依次排列诉位。
浮動(dòng)布局TGFloatLayout:
浮動(dòng)布局里面的子視圖按照添加的順序骑脱,并且按照每個(gè)子視圖自身設(shè)定的浮動(dòng)規(guī)則向某個(gè)方向進(jìn)行浮動(dòng)停靠苍糠。
路徑布局TGPathLayout:?
路徑布局里面的子視圖按照一個(gè)提供的數(shù)學(xué)函數(shù)得到的曲線路徑等距離的根據(jù)添加的順序依次排列叁丧。
接下來我們就來看看MyLayout是怎么使用的。
1.下載官方的MyLayout庫地址
demo主要文件目錄如下
2.新建自己的一個(gè)練習(xí)工程
導(dǎo)入示例工程中的Lib庫岳瞭,在自己新建的控制器中導(dǎo)入MyLayout.h文件就可以進(jìn)行UI布局的開發(fā)了拥娄。
今天主要講的是MyLayout中的線性布局,那么什么是線性布局呢瞳筏?
線性布局里面的所有子視圖都按照添加的順序依次從上到下或者依次從左到右進(jìn)行排列稚瘾。根據(jù)排列的方向可以分為垂直線性布局和水平線性布局。
也就是說線性布局是根據(jù)視圖加入的順序進(jìn)行先后順序進(jìn)行排列的姚炕。在MyLayout布局庫中的線性布局中有垂直線性布局和水平線性布局摊欠。
垂直線性布局:
MyLinearLayout *vertLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];
對(duì)于垂直線性布局里面的子視圖來說:
1 如果不設(shè)置任何邊距則每個(gè)子視圖的左邊距都跟父視圖左對(duì)齊,而上下則一次按加入的順序排列柱宦。
2 myLeftMargin, myRightMargin的意義是子視圖距離父視圖的左右邊距些椒。
3 myTopMargin, myBottomMargin的意義是子視圖和兄弟視圖之間的上下間距。
4 如果同時(shí)設(shè)置了myLeftMargin,myRightMargin則除了能確定左右邊距掸刊,還能確定子視圖的寬度免糕。
5 如果同時(shí)設(shè)置了myTopMargin,myBottomMargin則只能確定和其他兄弟視圖之間的上下間距,但不能確定子視圖的高度。
6 myCenterXOffset表示子視圖的水平中心點(diǎn)再父視圖的水平中心點(diǎn)上的偏移石窑。
7 myCenterYOffset的設(shè)置沒有意義牌芋。
水平線性布局:
MyLinearLayout *horzLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Horz];
對(duì)于水平線性布局里面的子視圖來說:
1 如果不設(shè)置任何邊距則每個(gè)子視圖的上邊都跟父視圖上對(duì)齊,而左右則依次按加入的順序排列尼斧。
2 myTopMargin,myBottomMargin的意義是子視圖距離父視圖的上下邊距
3 myLeftMargin,myRightMargin的意義是子視圖和兄弟視圖之間的左右間距
4 如果同時(shí)設(shè)置了myTopMargin,myBottomMargin則除了能確定上下邊距姜贡,還能確定子視圖的高度。
5 如果同時(shí)設(shè)置了myLeftMargin,myRightMargin則只能確定和其他兄弟視圖之間的左右間距棺棵,但不能確定子視圖的寬度楼咳。
6 myCenterYOffset表示子視圖的垂直中心點(diǎn)再父視圖的垂直中點(diǎn)上的偏移
7 myCenterXOffset的設(shè)置表示沒有意義
運(yùn)行Demo中的示例
從運(yùn)行的結(jié)果來看模擬器中的上部分是一個(gè)垂直布局視圖,視圖的顯示按照子視圖的添加的順序依次排序烛恤。
下部是一個(gè)水平布局視圖母怜,視圖的顯示按照子視圖的添加順序依次排列。
需要注意的是:在垂直布局視圖中缚柏,我們?nèi)绻O(shè)置了子視圖的左邊距和右邊距可以確定視圖的寬度苹熏,而同時(shí)設(shè)置了上下邊距是不能確定子視圖的高度的,因此我們要指定子視圖的高度才能確定子視圖的高度币喧。
同理水平布局視圖中轨域,我們?nèi)缭O(shè)置了子視圖的上下邊距可以確定子視圖的高度,同時(shí)設(shè)置了左右邊距卻不可以確定子視圖的寬度杀餐,需要明確指明子視圖的寬度干发。
在線性布局中,也可以設(shè)置frame屬性史翘,它與myLeftMargin,myRightMargin,myTopMargin,myBottomMargin等屬性不同的是枉长,frame設(shè)置以后會(huì)立即生效,后者是等布局完成以后才會(huì)生效琼讽。但是都是可以通過frame獲取布局完成以后的origin和size屬性值必峰。
這是對(duì)于線性布局的牛刀小試,詳細(xì)信息請(qǐng)參考iOS界面布局的核心以及TangramKit介紹钻蹬。