iOS CGRectDivide快速进行界面布局

最新推荐文章于 2019-06-17 11:43:01 发布

转载最新推荐文章于 2019-06-17 11:43:01 发布 · 1.3k 阅读

文章标签：

本文介绍如何利用CoreGraphics的CGRectDivide函数简化界面布局代码，并通过添加padding实现更灵活的布局。通过结合循环和封装，可以方便地构造网状布局。同时，提供了一个简单的封装函数QZRectDivideWithPadding，用于在切割时加入padding，使得布局更加方便。最后，展示如何利用这些函数快速构造规则和不规则样式布局。

在项目中由于不是使用 Storyboard 所以很多地方需要进行手动的布局，一些比较复杂的界面会让布局的代码变得很难维护，这时我们可以用 CoreGraphic 提供的一个函数 CGRectDivide 来简化我们的布局代码：

void CGRectDivide (
   CGRect rect,
   CGRect *slice,
   CGRect *remainder,
   CGFloat amount,
   CGRectEdge edge
);

这个函数的功能很简单，就是将一个 CGRect 切割成两个 CGRect ；其中， rect 参数是你要切分的对象； slice 是一个指向切出的 CGRect 的指针； remainder 是指向切割后剩下的 CGRect 的指针； amount 是你要切割的大小；最后一个参数 edge 是一个枚举值，代表 amount 开始计算的方向，假设 amount 为 10.0 那么：

CGRectMinXEdge 代表在 rect 从左往右数 10 个单位开始切割
CGRectMaxXEdge 代表在 rect 从右往左数 10 个单位开始切割
CGRectMinYEdge 代表在 rect 从上往下数 10 个单位开始切割
CGRectMaxYEdge 代表在 rect 从下往上数 10 个单位开始切割

代码如下：

CGRect rect = CGRectMake(0.0, 0.0, 100.0, 80.0);
CGRect slice, remainder;
CGRectDivide(rect, &slice, &remainder, 40.0, CGRectMinXEdge);

和循环结合起来就可以方便构造一个网格布局：

void (^addGrid)(CGRect) = ^(CGRect frame) {
  UIView *grid = [[UIView alloc] initWithFrame:frame];
  grid.backgroundColor = [UIColor colorWithHue:drand48()
                                    saturation:1.0
                                    brightness:1.0
                                         alpha:1.0];
  grid.layer.borderColor = [[UIColor grayColor] CGColor];
  grid.layer.borderWidth = 0.5;
  [self.view addSubview:grid];
};

CGFloat gridWidth = 40.0, gridHeight = 30.0;
NSInteger numberOfRow = 10, numberOfColumn = 8;

CGRect slice, rowRemainder, columnRemainder;

rowRemainder = self.view.bounds;
for (NSInteger i = 0; i < numberOfRow; i++) { // 行
  CGRectDivide(rowRemainder, &slice, &rowRemainder, gridHeight, CGRectMinYEdge);

  columnRemainder = slice;
  for (NSInteger j = 0; j < numberOfColumn; j++) { // 列
      CGRectDivide(columnRemainder, &slice, &columnRemainder, gridWidth, CGRectMinXEdge);
      addGrid(slice);
  }
}

在实际应用过程中，布局经常要设计到添加加各种padding，为此，我们可以对 CGRectDivide 进行一个简单的封装，让它支持在切割时加入padding：

void QZRectDivideWithPadding(CGRect rect, CGRect *slice, CGRect *remainder, CGFloat amount, CGFloat padding, CGRectEdge edge) {

    CGRect tmpSlice;

    CGRectDivide(rect, &tmpSlice, &rect, amount, edge);
    if (slice) {
        *slice = tmpSlice;
    }

    CGRectDivide(rect, &tmpSlice, &rect, padding, edge);
    if (remainder) {
        *remainder = rect;
    }
}

下面是增加 padding 后的代码：

CGFloat paddingX = 3.0, paddingY = 5.0;
CGFloat gridWidth = 40.0, gridHeight = 30.0;
NSInteger numberOfRow = 10, numberOfColumn = 8;

CGRect slice, rowRemainder, columnRemainder;

rowRemainder = bounds;
for (NSInteger i = 0; i < numberOfRow; i++) { // 10 行
   QZRectDivideWithPadding(rowRemainder, &slice, &rowRemainder, gridHeight, paddingY, CGRectMinYEdge);

   columnRemainder = slice;
   for (NSInteger j = 0; j < numberOfColumn; j++) { // 8 列
      QZRectDivideWithPadding(columnRemainder, &slice, &columnRemainder, gridWidth, paddingX, CGRectMinXEdge);
      addGrid(slice);
   }
}