IOS 自動佈局-UIStackPanel和UIGridPanel – iPhone手機開發技術文章 iPhone軟體開發教學課程

我以前是做windows phone開發的,後來轉做IOS的開發,因此很多windows phone上面的開發經驗也被我帶到瞭IOS中。其實有些經驗本身跟平臺無關,跟平臺有關的無非就是實現方法而已。好瞭,廢話不多說。

 

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

 

我先介紹下我開發這個類庫的背景,有助於大傢理解我為什麼要這麼做。

 

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

 

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

 

最近在考慮這個問題的時候靈機一動,突然想到能否參考windows phone上面的佈局方式呢,既然IOS6.0已經加入瞭autolayout技術,那麼我是否可以使用autolayout技術開發一個類似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的擴展屬性來實現詳細的排列,甚至可以通過subview的rowSpan和columSpan兩個擴展屬性實現跨多列或多行佈局。

 

 

 

 

 

上面的截圖中除瞭黑色的是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像素。現在gridpanel已經初始化完畢,後面就是添加各個子視圖瞭。既然是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];

復制代碼

 

 

這個是垂直排列的,如果要是實現水平排列,那麼隻要把stackPanel的isHorizontal屬性設為yes就可以瞭。

 

以上的佈局不管在橫屏和豎屏下都能正常佈局。而且自適應。

 

而要實現第一張圖裡面那麼復雜的佈局,直接看我的demo就可以瞭。

 

 

發佈留言