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教程