IOS自動布局-UIStackPanel和UIGridPanel(一)

2019-11-14 20:00:41

字體：大中小

供稿：網(wǎng)友

我以前是做windows phone開發(fā)的，后來轉(zhuǎn)做IOS的開發(fā)，因此很多windows phone上面的開發(fā)經(jīng)驗也被我?guī)У搅薎OS中。其實有些經(jīng)驗本身跟平臺無關(guān)，跟平臺有關(guān)的無非就是實現(xiàn)方法而已。好了，廢話不多說。

我今天給大家介紹一個IOS自動華布局的輔助類(Uipanel UIStackPanel UIGridPanel)，做過windows phone開發(fā)的同學看到這三個類肯定很眼熟，沒錯，這三個類正是windows phone布局的核心，只是名稱稍微有點不一樣而已。

我先介紹下我開發(fā)這個類庫的背景，有助于大家理解我為什么要這么做。

在IOS上開發(fā)程序的界面目前有三種方式，第一種純代碼開發(fā)，第二種使用XIB開發(fā)，第三種是使用storyboard開發(fā)。先不說哪種方式好吧，三種方式各有優(yōu)劣，我本身開發(fā)是傾向于純代碼開發(fā)的，因為我一開是學IOS的時候使用XIB做的，有可能是我對XIB不是很熟練，XIB跟windows phone的界面開發(fā)兩項一比較，我實在沒有興趣繼續(xù)使用XIB來開了，storyboard是后來才出的一種技術(shù)，所以我一開始幾乎就是一直采用純代碼的方式來開發(fā)IOS的界面。

純代碼的方式在固定分辨率下開發(fā)還是不錯的選擇，但是遇到可以旋轉(zhuǎn)界面或者要適配ipad那就有點力不從心了。對于這個問題，在蘋果還沒推出autolayout這個技術(shù)之前基本沒辦法。但是蘋果從IOS6.0開始引入了autolayout的技術(shù)，自從這個技術(shù)的引入使用xib來開發(fā)界面就變得相對比較方便了，如果還是用純代碼來做autolayout就顯得無比的蛋疼了，當然熟悉以后還是很好用的啦(但是看著一堆的約束信息就顯得郁悶了)。

最近在考慮這個問題的時候靈機一動，突然想到能否參考windows phone上面的布局方式呢，既然IOS6.0已經(jīng)加入了autolayout技術(shù)，那么我是否可以使用autolayout技術(shù)開發(fā)一個類似windows phone中的stackpanle和gridview 那樣的控件呢，想到就干。花了幾天時間的研究還真被我研究出來了。這就是我前面提到的(UIPanel UIStackPanel UIGridPanel)三個類。

我先介紹下這三個類的使用方法

UIPanel，UIPanel是所有其他派生panel的基類。添加到其中的subview的大小都跟uipanel的大小一樣。
UIStackPanel，UIStackPanel繼承UIPanel，UIStackPanel有一個屬性isHorizontal，就是subviews的排列是否是水平排列，默認是垂直自上而下的排列，添加到UIStackPanel中的subview如果是垂直排序，那么subview的寬度跟UIStackPanel的寬度一樣，高度通過UIView的擴展屬性size來控制。反之如果是水平排列，那么subview的高度跟UIStackPanel的高度一樣，寬度通過UIView的擴展屬性size來控制。
UIGridPanel，UIGridPanel繼承UIPanel，UIGridPanel類似表格，有rows和colums的兩個屬性，可以指定subview的row和colum的擴展屬性來實現(xiàn)詳細的排列，甚至可以通過subview的rowSpan和columSpan兩個擴展屬性實現(xiàn)跨多列或多行布局。

下面先放兩張豎屏和橫屏的對比截圖

上面是豎屏的。

上圖是橫屏的

上面的截圖中除了黑色的是uilable和一個clicke me的一個按鈕以外，其他每種顏色代表一個uipanel，panel里面嵌套其他的panel就組成了如上圖的布局界面。點擊按鈕以后還能看到隨著屬性的改變，布局的方式也會改變。

下面我以代碼的形式介紹各個panel的用法。

首先是gridpanel。

    gridPanel=[[UIGridPanel alloc] init];    gridPanel.rows=3;    gridPanel.colums=3;    gridPanel.isBindSizeToSuperView=YES;    gridPanel.margin=UIEdgeInsetsMake(20, 0, 0, 0);    gridPanel.backgroundColor=[UIColor grayColor];    [self.view addSubview:gridPanel];    currentPanle=gridPanel;

rows和colums屬性指定該gridpanel有三行三列。isBindSizeToSuperView屬性指定該panel的高寬是否綁定到父視圖的高寬。如果綁定了，那么只要父視圖的高寬改變，子視圖的高寬也一并跟著變。margin屬性指定該視圖左上右下四個方向的間距，這個指定gridpanel永遠距離頂部20像素。現(xiàn)在gridpanel已經(jīng)初始化完畢，后面就是添加各個子視圖了。既然是gridpanel，那么我可能希望里面的子視圖是對角線排列的。也就是我們需要三個子視圖。代碼如下：

    UILabel *label = [[UILabel alloc] init];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label1";    label.textAlignment = NSTextAlignmentCenter;    label.size=CGSizeMake(50, 50);    label.row=0;//第一行    label.colum=0;//第一列    [currentPanle addSubview:label];            label = [[UILabel alloc] init];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label2";    label.textAlignment = NSTextAlignmentCenter;    label.size=CGSizeMake(50, 30);    label.row=1;//第二行    label.colum=1;//第二列    [currentPanle addSubview:label];        label = [[UILabel alloc] init];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label3";    label.textAlignment = NSTextAlignmentCenter;    label.size=CGSizeMake(50, 30);    label.row=2;//第三行    label.colum=2;//第三列    [currentPanle addSubview:label];

效果如下：

如果我想把lable2改成橫跨兩列，并且下間距為5，那么代碼如下：

    label = [[UILabel alloc] init];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label2";    label.textAlignment = NSTextAlignmentCenter;    label.size=CGSizeMake(50, 30);    label.row=1;//第二行    label.colum=1;//第二列    label.columSpan=2;//跨兩列    label.margin=UIEdgeInsetsMake(0, 0, 5, 0);    [currentPanle addSubview:label];

效果如下：

下面介紹stackpanel的用法

先看下初始化的代碼：

    UILabel *label = [[UILabel alloc] init];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label1";    label.textAlignment = NSTextAlignmentCenter;    label.size=CGSizeMake(50, 50);    [currentPanle addSubview:label];            label = [[UILabel alloc] init];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label2";    label.textAlignment = NSTextAlignmentCenter;    label.size=CGSizeMake(50, 30);    label.margin=UIEdgeInsetsMake(5, 0, 5, 0);    [currentPanle addSubview:label];            label = [[UILabel alloc] init];    label.backgroundColor = [UIColor blackColor];    label.textColor=[UIColor whiteColor];    label.font=[UIFont systemFontOfSize:12];    label.text = @"Label3";    label.textAlignment = NSTextAlignmentCenter;    label.size=CGSizeMake(50, 30);    [currentPanle addSubview:label];