IOS不用AutoLayout也能實現自動佈局的類(4)----MyTableLayout表格佈局

時間  2019-11-12
標籤 ios 不用 autolayout 實現 自動 佈局 mytablelayout 表格 欄目 iOS 简体版
原文   原文鏈接

  前面的幾篇文章裏我分別介紹了線性佈局(MyLinearLayout)，相對佈局(MyRelativeLayout)，框架佈局(MyFrameLayout)這三種佈局。這三種佈局中 ：git

線性佈局主要應用於容器視圖裏面的全部子視圖依次從上往下排列或者從左往右排列的場景。github

 

垂直線性佈局
子視圖1
子視圖2
子視圖3
子視圖4

 

水平線性佈局
子視圖1 子視圖2 子視圖3 子視圖4

 

 

固然咱們也能夠用線性佈局嵌套線性佈局的方法來實現一些複雜的界面佈局，好比(這個例子若是用MyTableLayout實現將更加簡單)：xcode

 

 

複雜佈局
水平線性佈局子視圖1 水平線性佈局子視圖2
子視圖1 子視圖2 子視圖3
子視圖1
子視圖2
子視圖3

 

 

相對佈局主要用於容器視圖中的各個子視圖之間的位置和高寬以及子視圖和容器視圖之間具備必定的依賴和約束關係的場景。好比說子視圖1的位置在子視圖2的右下角，而且寬度等於子視圖3的寬度，而子視圖3的底部又在容器視圖的底部。app

           

相對佈局
子視圖1(等寬3)    
  子視圖2  
    子視圖3(等寬1)

 

相對佈局由於須要指定各子視圖之間的依賴關係，所以若是設置不當就會產生遞歸死循環的狀況，並且在某種程度上不利於子視圖之間的位置的更新和變化等等，其中IOS自帶的AutoLayout其實就是一套相對佈局的實現，相對佈局功能很強大也能夠很容易佈局複雜的界面，缺點是使用不當的話就容易形成約束死循環的狀況。框架

 

框架佈局主要用於容器視圖中的個子視圖在容器視圖的上，中，下，左，中，右，拉昇填充，居中顯示等11種狀況。函數

 

框架佈局
左上 中上 右上
左中 居中 右中
左下 中下 右下

 

 

框架佈局中的子視圖只跟容器視圖之間產生關係，子視圖之間沒有任何關聯關係。oop

 

1、表格佈局的介紹佈局

 

    在一些實際的應用界面中，咱們但願咱們的子視圖以表格的形式展現出來，這些表格展現能夠是正規的幾行幾列而且固定高寬的形式，也多是每一行的列數都不一樣，也多是每行的高度不同，也多是一行內的各列的寬度也不同，atom

 

               水平表格佈局spa

                                                                                                                                       

                                                                                                                                                 垂直表格佈局

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

要實現上面的兩種界面風格，咱們能夠藉助MyTableLayout來實現。

 

MyTableLayout是從MyLinearLayout中繼承而來，所以表格佈局也分爲垂直表格佈局和水平表格佈局，樣式請參考上面的圖例的展現風格。而表格的風格樣式一樣經過

orientation屬性來設置。不論是垂直表格佈局仍是水平表格佈局。咱們在創建了表格佈局視圖並指定了表格風格後，咱們首先的步驟是要爲表格添加行(若是是水平表格其實就是添加列，下面若是爲說明都是如此概念)，那這個步驟能夠經過MyTableLayout的方法：

 

 

-(void)addRow:(CGFloat)rowHeight colWidth:(CGFloat)colWidth;

-(void)insertRow:(CGFloat)rowHeight colWidth:(CGFloat)colWidth atIndex:(NSInteger)rowIndex;

 

來實現，前者是往表格佈局尾部添加一行，然後者則是在指定的位置插入一行。這裏須要說明的參數是rowHeight,colWidth的意義，咱們知道只要咱們插入一行時咱們老是須要指出插入的這一行的行高是多少，同時要指出插入的這行的列單元格的寬度是如何指定的(每列的寬度固定，仍是有單元格本身指定等等)

 

 

 rowHeight爲-1時表示由最高的單元格視圖決定本行高度，每一個單元格視圖須要本身設置高度；爲0表示均分高度，單元格視圖不須要設置高度；大於0表示固定高度，單元格視圖不須要設置高度.

 

 colWidth 爲-2時表示每一個單元格視圖須要本身指定寬度，總體行寬和表格佈局一致；爲-1表示每一個單元格視圖須要本身指定寬度，整個行寬包裹全部子視圖；爲0表示均分寬度，這時候單元格視圖沒必要設置寬度；大於0表示單元格視圖固定寬度，這時候單元格視圖能夠沒必要設置寬度。

 

同時咱們也提供了對行操做的其餘方法：

 

//刪除指定的行

 

-(void)removeRowAt:(NSInteger)rowIndex;

//交行兩個行的內容

-(void)exchangeRowAt:(NSInteger)rowIndex1 withRow:(NSInteger)rowIndex2;

//獲得行視圖，從返回咱們能夠看出，咱們調用插入行操做時，系統內部會自動創建一個MyLinearLayout線性佈局視圖做爲行視圖，若是是垂直表格則默認是水平線性佈局，而若是是水平表格則默認是垂直線性佈局，所以咱們能夠經過這個方法來設置行的其餘的各類屬性，好比說行間距(xxxMargin來實現)。

-(MyLinearLayout*)viewAtRowIndex:(NSInteger)rowIndex;

//返回當前有多少行

-(NSUInteger)countOfRow;

 
 
當咱們插入了一行後，咱們就須要爲這一行添加單元格視圖(列視圖)，每一行均可以無限制的添加單元格視圖，也就是說一行能夠有不少的列，每一行的列數均可以不同，咱們能夠經過以下的方法來添加或者刪除列：
 

-(void)addCol:(UIView*)colView atRow:(NSInteger)rowIndex;

-(void)insertCol:(UIView*)colView atIndexPath:(NSIndexPath*)indexPath;

-(void)removeColAt:(NSIndexPath*)indexPath;

-(void)exchangeColAt:(NSIndexPath*)indexPath1 withCol:(NSIndexPath*)indexPath2;

 
注意上面的添加列時，須要指定在哪一行添加列，在添加列以前必需要把行添加進去，也就是說行索引rowIndex不能越界，爲了簡單的描述行索引和列索引的關係咱們使用了NSIndexPath這個對象來描述，咱們對NSIndexPath進行了擴展，以便用於方便的指定行和列的索引：
 

@interface NSIndexPath(MyTableLayoutEx)

 

+(instancetype)indexPathForCol:(NSInteger)col inRow:(NSInteger)row;

 

@property(nonatomic,assign,readonly)NSInteger col;

 

@end

 

 

同時咱們也方便的提供了單元格列視圖的獲取和數量的獲取的方法

 

//返回列視圖

-(UIView*)viewAtIndexPath:(NSIndexPath*)indexPath;

//返回指定行的列的數量。

-(NSUInteger)countOfColInRow:(NSInteger)rowIndex;

 
 
上面就是咱們對錶格佈局的全部函數的介紹，使用起來也很簡單，步驟就是先添加行，而後在每行中依次一個個的添加列視圖，也就是單元格視圖。
 
咱們將分別創建兩個風格的表格進行例子的說明。
 
 
2、垂直表格
 
   所謂垂直表格就是行是從上往下，一行一行佈局起來的，全部行內的單元格視圖都是從左往右一列一列布局起來的，創建垂直表格是默認的表格。先看界面佈局效果。
 
 
 
 
 
咱們分別創建了6行不一樣尺寸的表格，上能夠看出每一行的列數不同，每一行的高度不同，每一行的整體列寬不同，每一行的每一列的寬度都不同，而這些咱們都是經過在插入行時經過設置不一樣的rowHeight,colWidth來達到效果的。具體代碼參考以下：
 
[objc]  view plain copy
  1. -(void)loadView  
  2. {  
  3.     [super loadView];  
  4.       
  5.     /* 
  6.      有的時候咱們但願讓一個佈局視圖放入到非佈局視圖中去，但又但願佈局視圖的寬高和非佈局父視圖寬高一致。 
  7.      這時候咱們能夠設置height,width來指定自身的高寬，咱們也能夠經過leftMargin = 0,rightMargin = 0來讓其跟父視圖保持同樣的寬度，但若是是這樣的話還須要設置wrapContentWidth = NO. 設置高度同理。 
  8.      */  
  9.     MyTableLayout *tbll = [MyTableLayout new];  
  10.     tbll.wrapContentHeight = NO;  //對於線性佈局來講必需要設置爲NO才能高度和非佈局的父視圖同樣高  
  11.     tbll.leftMargin = tbll.rightMargin = 0;  //寬度和非佈局父視圖同樣寬  
  12.     tbll.topMargin = tbll.bottomMargin = 0;  //高度和非佈局父視圖同樣高  
  13.     [self.view addSubview:tbll];  
  14.   
  15.       
  16.     //第一行固定高度固定寬度  
  17.     [tbll addRow:30 colWidth:30];  
  18.     [tbll viewAtRowIndex:0].backgroundColor = [UIColor colorWithWhite:0.1 alpha:1];  
  19.       
  20.     UIView *colView = [UIView new];  
  21.     colView.leftMargin = 10; //可使用leftMargin,topMargin,rightMargin,bottomMargin來調整間隔  
  22.     colView.topMargin = 5;  
  23.     colView.bottomMargin = 5;  
  24.     colView.rightMargin = 40;  
  25.       
  26.     colView.backgroundColor = [UIColor redColor];  
  27.     [tbll addCol:colView atRow:0];  
  28.       
  29.     colView = [UIView new];  
  30.     colView.leftMargin = 20;  
  31.     colView.backgroundColor = [UIColor greenColor];  
  32.     [tbll addCol:colView atRow:0];  
  33.       
  34.     colView = [UIView new];  
  35.     colView.backgroundColor = [UIColor blueColor];  
  36.     [tbll addCol:colView atRow:0];  
  37.       
  38.     //第二行固定高度，均分寬度  
  39.     [tbll addRow:40 colWidth:0];  
  40.     [tbll viewAtRowIndex:1].backgroundColor = [UIColor colorWithWhite:0.2 alpha:1];  
  41.   
  42.       
  43.     colView = [UIView new];  
  44.     colView.backgroundColor = [UIColor redColor];  
  45.     [tbll addCol:colView atRow:1];  
  46.       
  47.     colView = [UIView new];  
  48.     colView.backgroundColor = [UIColor greenColor];  
  49.     [tbll addCol:colView atRow:1];  
  50.       
  51.     colView = [UIView new];  
  52.     colView.backgroundColor = [UIColor blueColor];  
  53.     [tbll addCol:colView atRow:1];  
  54.       
  55.     colView = [UIView new];  
  56.     colView.backgroundColor = [UIColor yellowColor];  
  57.     [tbll addCol:colView atRow:1];  
  58.       
  59.     //第三行固定高度，子視圖本身決定寬度。  
  60.     [tbll addRow:30 colWidth:-1];  
  61.     [tbll viewAtRowIndex:2].backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];  
  62.     colView = [UIView new];  
  63.     colView.width = 100;  
  64.     colView.backgroundColor = [UIColor redColor];  
  65.     [tbll addCol:colView atRow:2];  
  66.   
  67.     colView = [UIView new];  
  68.     colView.width = 200;  
  69.     colView.backgroundColor = [UIColor greenColor];  
  70.     [tbll addCol:colView atRow:2];  
  71.       
  72.     //第四行固定高度，子視圖本身決定寬度。  
  73.     [tbll addRow:30 colWidth:-2];  
  74.     [tbll viewAtRowIndex:3].backgroundColor = [UIColor colorWithWhite:0.4 alpha:1];  
  75.     colView = [UIView new];  
  76.     colView.width = 80;  
  77.     colView.backgroundColor = [UIColor redColor];  
  78.     [tbll addCol:colView atRow:3];  
  79.       
  80.     colView = [UIView new];  
  81.     colView.width = 200;  
  82.     colView.backgroundColor = [UIColor greenColor];  
  83.     [tbll addCol:colView atRow:3];  
  84.       
  85.     //第五行高度均分.這裏設置爲0表示剩餘高度再均分。寬度均分,  
  86.     [tbll addRow:0 colWidth:0];  
  87.     MyLinearLayout *row4 = [tbll viewAtRowIndex:4];  
  88.     //能夠設置行的屬性.好比padding, 線條顏色，  
  89.     row4.padding = UIEdgeInsetsMake(3, 3, 3, 3);  
  90.     row4.topBorderLine = [[MyBorderLineDraw alloc] initWithColor:[UIColor blackColor]];  
  91.     row4.topBorderLine.thick = 2;  
  92.     row4.backgroundColor = [UIColor colorWithWhite:0.5 alpha:1];  
  93.   
  94.     colView = [UIView new];  
  95.     colView.backgroundColor = [UIColor redColor];  
  96.     [tbll addCol:colView atRow:4];  
  97.       
  98.     colView = [UIView new];  
  99.     colView.backgroundColor = [UIColor greenColor];  
  100.     [tbll addCol:colView atRow:4];  
  101.       
  102.     //第六行高度由子視圖決定，均分寬度  
  103.     [tbll addRow:-1 colWidth:0];  
  104.     [tbll viewAtRowIndex:5].backgroundColor = [UIColor colorWithWhite:0.6 alpha:1];  
  105.       
  106.     colView = [UIView new];  
  107.     colView.height = 80;  
  108.     colView.backgroundColor = [UIColor redColor];  
  109.     [tbll addCol:colView atRow:5];  
  110.       
  111.     colView = [UIView new];  
  112.     colView.height = 120;  
  113.     colView.backgroundColor = [UIColor greenColor];  
  114.     [tbll addCol:colView atRow:5];  
  115.       
  116.     colView = [UIView new];  
  117.     colView.height = 70;  
  118.     colView.backgroundColor = [UIColor blueColor];  
  119.     [tbll addCol:colView atRow:5];  
  120.   
  121.   
  122.   
  123.   
  124.   
  125.       
  126.       
  127. }  

上面的代碼中咱們在插入行時分別爲rowHeight,colWidth設置了6種不一樣的參數的組合，咱們看到其中有些行中須要指定每一個單元格的列寬和行高，而有的則不須要。是否須要單元格指定行高和列寬則是有rowHeight,colWidth的不一樣的參數值決定的。 有時候咱們的表格可能須要指定行間距和列間距，而這些均可以經過行視圖的xxMargin, 和列視圖的xxxMargin的設置來進行個性化的定製，這裏須要強調一下rowHeight,colWidth都等於0的狀況，他們的意義是表示行和列會均分高度和寬度。
 
  舉例來講，假設咱們創建了一個寬高爲100*100的表格佈局，而咱們第一行的rowHeight,colWidth設置爲0時，則當插入第一行時則這一行的高度就是100，而這一行插入第一列時則這一列的寬度就是100，而若是再插入一列時則兩列的寬度都會調整爲50，一樣當咱們再次插入一行時則兩行的高度都將會調整爲50. （這個像不像HTML中的表格的行列的寬高指定的風格）
 
 
 
 
3、水平表格（瀑布流）
 
   所謂水平表格就是行是從左往右，一行一行佈局起來的，全部行內的單元格視圖都是從上往下一列一列布局起來的，創建水平表格須要將

orientation = LVORIENTATION_HORZ， 水平表格也就是一個瀑布流風格的表格，咱們能夠經過將表格放入到UIScrollView中進行從上到下的滾動以便展現全部內容。先看界面佈局效果：

 

 

 

這個例子咱們也跟上面同樣，創建了6行(注意水平表格里面行的概念就是指列，而列則是指行)，同時咱們把表格佈局加入到了一個UIScrollView下，以便能有滾動的效果。咱們爲了延長表格的高度，咱們對第三行的第三個單元格視圖特地設置了一個很高的高度。代碼以下：

 

 

[objc]  view plain copy
  1. -(void)loadView  
  2. {  
  3.     [super loadView];  
  4.       
  5.     UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];  
  6.     scrollView.autoresizingMask =  UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;  
  7.     [self.view addSubview:scrollView];  
  8.       
  9.       
  10.       
  11.     /* 
  12.      有的時候咱們但願讓一個佈局視圖放入到非佈局視圖中去，但又但願佈局視圖的寬高和非佈局父視圖寬高一致。 
  13.      這時候咱們能夠設置height,width來指定自身的高寬，咱們也能夠經過leftMargin = 0,rightMargin = 0來讓其跟父視圖保持同樣的寬度，但若是是這樣的話還須要設置wrapContentWidth = NO. 設置高度同理。 
  14.      */  
  15.     MyTableLayout *tbll = [MyTableLayout new];  
  16.     tbll.orientation = LVORIENTATION_HORZ;  
  17.     tbll.wrapContentWidth = NO;  //對於線性佈局來講必需要設置爲NO才能寬度和非佈局的父視圖同樣寬  
  18.     tbll.wrapContentHeight = YES; //這裏設定高度由子視圖決定。  
  19.     tbll.leftMargin = tbll.rightMargin = 0;  //寬度和非佈局父視圖同樣寬  
  20.     [scrollView addSubview:tbll];  
  21.       
  22.       
  23.     //須要注意的是由於這裏的表格設置爲水平表格，因此下面所的行高，實際上是行寬，而列寬，實際上是列高  
  24.       
  25.       
  26.     //第一行固定高度固定寬度  
  27.     [tbll addRow:30 colWidth:30];  
  28.     [tbll viewAtRowIndex:0].backgroundColor = [UIColor colorWithWhite:0.1 alpha:1];  
  29.       
  30.     UIView *colView = [UIView new];  
  31.     colView.leftMargin = 5; //可使用leftMargin,topMargin,rightMargin,bottomMargin來調整間隔  
  32.     colView.topMargin = 5;  
  33.     colView.bottomMargin = 5;  
  34.     colView.rightMargin = 5;  
  35.       
  36.     colView.backgroundColor = [UIColor redColor];  
  37.     [tbll addCol:colView atRow:0];  
  38.       
  39.     colView = [UIView new];  
  40.     colView.topMargin = 20;  
  41.     colView.backgroundColor = [UIColor greenColor];  
  42.     [tbll addCol:colView atRow:0];  
  43.       
  44.     colView = [UIView new];  
  45.     colView.backgroundColor = [UIColor blueColor];  
  46.     [tbll addCol:colView atRow:0];  
  47.       
  48.     //第二行固定高度，均分寬度  
  49.     [tbll addRow:40 colWidth:0];  
  50.     [tbll viewAtRowIndex:1].backgroundColor = [UIColor colorWithWhite:0.2 alpha:1];  
  51.       
  52.       
  53.     colView = [UIView new];  
  54.     colView.backgroundColor = [UIColor redColor];  
  55.     [tbll addCol:colView atRow:1];  
  56.       
  57.     colView = [UIView new];  
  58.     colView.backgroundColor = [UIColor greenColor];  
  59.     [tbll addCol:colView atRow:1];  
  60.       
  61.     colView = [UIView new];  
  62.     colView.backgroundColor = [UIColor blueColor];  
  63.     [tbll addCol:colView atRow:1];  
  64.       
  65.     colView = [UIView new];  
  66.     colView.backgroundColor = [UIColor yellowColor];  
  67.     [tbll addCol:colView atRow:1];  
  68.       
  69.     //第三行固定高度，子視圖本身決定寬度。  
  70.     [tbll addRow:30 colWidth:-1];  
  71.     [tbll viewAtRowIndex:2].backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];  
  72.     colView = [UIView new];  
  73.     colView.height = 100;  
  74.     colView.backgroundColor = [UIColor redColor];  
  75.     [tbll addCol:colView atRow:2];  
  76.       
  77.     colView = [UIView new];  
  78.     colView.height = 200;  
  79.     colView.backgroundColor = [UIColor greenColor];  
  80.     [tbll addCol:colView atRow:2];  
  81.       
  82.     colView = [UIView new];  
  83.     colView.height = 1000;  
  84.     colView.backgroundColor = [UIColor blueColor];  
  85.     [tbll addCol:colView atRow:2];  
  86.       
  87.     //第四行固定高度，子視圖本身決定寬度。  
  88.     [tbll addRow:30 colWidth:-2];  
  89.     [tbll viewAtRowIndex:3].backgroundColor = [UIColor colorWithWhite:0.4 alpha:1];  
  90.     colView = [UIView new];  
  91.     colView.height = 80;  
  92.     colView.backgroundColor = [UIColor redColor];  
  93.     [tbll addCol:colView atRow:3];  
  94.       
  95.     colView = [UIView new];  
  96.     colView.height = 200;  
  97.     colView.backgroundColor = [UIColor greenColor];  
  98.     [tbll addCol:colView atRow:3];  
  99.       
  100.     //第五行高度均分.這裏設置爲0表示剩餘高度再均分。寬度均分,  
  101.     [tbll addRow:0 colWidth:0];  
  102.     MyLinearLayout *row4 = [tbll viewAtRowIndex:4];  
  103.     //能夠設置行的屬性.好比padding, 線條顏色，  
  104.     row4.padding = UIEdgeInsetsMake(3, 3, 3, 3);  
  105.     row4.leftBorderLine = [[MyBorderLineDraw alloc] initWithColor:[UIColor blackColor]];  
  106.     row4.leftBorderLine.thick = 2;  
  107.     row4.backgroundColor = [UIColor colorWithWhite:0.5 alpha:1];  
  108.       
  109.     colView = [UIView new];  
  110.     colView.backgroundColor = [UIColor redColor];  
  111.     [tbll addCol:colView atRow:4];  
  112.       
  113.     colView = [UIView new];  
  114.     colView.backgroundColor = [UIColor greenColor];  
  115.     [tbll addCol:colView atRow:4];  
  116.       
  117.     //第六行高度由子視圖決定，均分寬度  
  118.     [tbll addRow:-1 colWidth:0];  
  119.     [tbll viewAtRowIndex:5].backgroundColor = [UIColor colorWithWhite:0.6 alpha:1];  
  120.       
  121.     colView = [UIView new];  
  122.     colView.width = 80;  
  123.     colView.backgroundColor = [UIColor redColor];  
  124.     [tbll addCol:colView atRow:5];  
  125.       
  126.     colView = [UIView new];  
  127.     colView.width = 120;  
  128.     colView.backgroundColor = [UIColor greenColor];  
  129.     [tbll addCol:colView atRow:5];  
  130.       
  131.     colView = [UIView new];  
  132.     colView.width = 70;  
  133.     colView.backgroundColor = [UIColor blueColor];  
  134.     [tbll addCol:colView atRow:5];  
  135.       
  136.       
  137.       
  138.       
  139.       
  140.       
  141. }  

這段代碼的內容和上面的垂直表格類似，只是把一些原來的寬度值改成了高度值而已。

 

 

4、總結

    好了，表格佈局的內容就介紹到這裏了，表格佈局的內部實現其實就是一個線性佈局套線性佈局的封裝，可是他簡化了咱們插入視圖的方法，從而很容易的佈局出各類風格的佈局，咱們能夠從上往下依次佈局，也能夠從左往右依次佈局。若是您以爲這篇文章可以幫助到您，或者能成爲您界面佈局的解決方案，那麼請到個人github：

 

https://github.com/youngsoft/MyLinearLayout 中下載這套界面解決框架庫，若是您以爲好用就記得給我點贊哦，若是有什麼不明確的能夠加我QQ:156355113聯繫我。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程