IOS 自动布局-UIStackPanel和UIGridPanel(三)

在这一篇了我将继续讲解UIGridPanel。

在iphone的app里面可以经常看到一些九宫格布局的应用，做过html开发的对这类布局应该是很熟悉的。在IOS中要实现这样的布局方法还是蛮多的，但是我这次主要是讲解直接通过控件来实现，我直接指定某个subview处于gridpanel的某行某列。甚至我要求该subview跨多行多列来显示。

要实现以上的需求，那么首先就得要求该panel具有行和列的属性，也就是该panel可以被拆分成多少行多少列。用代码表示如下：

@interface UIGridPanel : UIPanel
@property (nonatomic,assign)NSInteger rows;//行数,默认未1
@property (nonatomic,assign)NSInteger colums;//列数，默认未1
@end

而对于subview来说，需要有四个属性，row和colum，rowSpan和columSpan。用代码表示如下：

@interface UIView(UIGridPanelSubView)
//行索引
@property (nonatomic,assign)NSInteger row;
//跨越的行数
@property (nonatomic,assign)NSInteger rowSpan;//默认是1
//列索引
@property (nonatomic,assign)NSInteger colum;
//跨越的列数
@property (nonatomic,assign)NSInteger columSpan;//默认是1
@end

既然所需的属性都有了，那么下面就是具体怎么实现了。

既然要对某个subview指定某行某列(这里假定是第一行第一列，row=colum=1)，那么我们就得有个约束，该subview的left距离panel(假定该panel的rows=colums=3)的left是三分之一panel的宽度，该subview的right距离panel的left是三分之二的panel的宽度。但是这样的表述方法没法使用NSLayoutConstraint来实现，为什么？我们先把上面的描述转换成代码试试

 [NSLayoutConstraint constraintWithItem:subView
                                 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeft multiplier:1.0 constant:self.frame.size.width/3];

但是我们这里做的panel都是自适应的，也就意味着当父视图的高宽变化的时候，所有的subviews的高宽也应该跟着变化，而前面的表述我们把panel的宽度当做参数来处理了，而事实上这个参数是会改变的，很显然，此路不通。

那么我们换个思路考虑下，这样行不行?

[NSLayoutConstraint constraintWithItem:subView
                                 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0/3 constant:0];

NSLayoutAttributeLeft和NSLayoutAttributeWidth两种属性压根就不匹配，这样的方法也不行。

再换一个思路看看，我们能不能把panel的中心点做参考呢？如果以中心点做参考的话，该subview的left距离panel的中心点是多少呢？我先说下我当时找出这个算法的过程。

我们先在草图上画一个长方形，将他3等分，宽度定位90，那么每一列的宽度为30，中心点为45。这样我们得出一个比例，第一列的left跟中心点的比为0/45,

第二列的left跟中心点的比为30/45，第三列的left跟中心点的比为60/45，整理下得出:0/3,2/3,4/3。

继续，我们在草图上画一个长方形，将他4等分，宽度定位100，那么每一列的宽度为25，中心点为50。这样我们得出一个比例，第一列的left跟中心点的比为0/50,第二列的left跟中心点的比为25/50，第三列的left跟中心点的比为50/50，第四列的left跟中心点的比75/50，整理下得出:0/4,2/4,4/4,6/4。

继续，我们在草图上画一个长方形，将他5等分，宽度定位200，那么每一列的宽度为40，中心点为100。这样我们得出一个比例，第一列的left跟中心点的比为0/100,第二列的left跟中心点的比为40/100，第三列的left跟中心点的比为80/100，第四列的left跟中心点的比120/100，第五列的left跟中心点的比160/100,整理下得出:0/5,2/5,4/5,6/5,8/5。

看到规律了没？分母永远是等分的数量，对于列来说，也就是分母永远是colums，而分子是2*colum。这样我们就能用NSLayoutConstraint来表示了。

 [self addConstraint:[NSLayoutConstraint constraintWithItem:subView
                                                     attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:((2.0f*subViewColum)/self.colums) constant:margin.left]];

现在算法出来了。那么后续的处理就简单了，包括跨行和跨列的算法也能明白了。直接贴出代码：

@implementation UIView(UIGridPanelSubView)
char* const uiviewRow_str = "UIViewRowIndex";
-(void)setRow:(NSInteger)row{
    if(row!=self.row){
        objc_setAssociatedObject(self, uiviewRow_str, @(row), OBJC_ASSOCIATION_RETAIN);
        [self resetConstraints];
    }
}

-(NSInteger)row{
    return [objc_getAssociatedObject(self, uiviewRow_str) integerValue];
}

char* const uiviewColum_str = "UIViewColumIndex";
-(void)setColum:(NSInteger)colum{
    if(colum!=self.colum){
        objc_setAssociatedObject(self, uiviewColum_str, @(colum), OBJC_ASSOCIATION_RETAIN);
        [self resetConstraints];
    }
}

-(NSInteger)colum{
     return [objc_getAssociatedObject(self, uiviewColum_str) integerValue];
}

char* const uiviewColumSpan_str = "UIViewColumSpan";
-(void)setColumSpan:(NSInteger)columSpan{
    if(columSpan!=self.columSpan){
        objc_setAssociatedObject(self, uiviewColumSpan_str, @(columSpan), OBJC_ASSOCIATION_RETAIN);
        [self resetConstraints];
    }
}

-(NSInteger)columSpan{
    NSInteger columSpan=[objc_getAssociatedObject(self, uiviewColumSpan_str) integerValue];
    if(columSpan<1){
        return 1;
    }
    return columSpan;
}

char* const uiviewRowSpan_str = "UIViewRowSpan";
-(void)setRowSpan:(NSInteger)rowSpan{
    if(rowSpan!=self.rowSpan){
        objc_setAssociatedObject(self, uiviewRowSpan_str, @(rowSpan), OBJC_ASSOCIATION_RETAIN);
        [self resetConstraints];
    }
}

-(NSInteger)rowSpan{
    NSInteger rowSpan=[objc_getAssociatedObject(self, uiviewRowSpan_str) integerValue];
    if(rowSpan<1)
        return 1;
    return rowSpan;
}
@end

@implementation UIGridPanel
@synthesize rows=_rows;
@synthesize colums=_colums;

-(NSInteger)rows{
    if(_rows<1){
        return 1;
    }
    return _rows;
}

-(NSInteger)colums{
    if(_colums<1){
        return 1;
    }
    return _colums;
}

-(void)setRows:(NSInteger)rows{
    if(_rows!=rows){
        _rows=rows;
        [self updateConstraints];
    }
}

-(void)setColums:(NSInteger)colums{
    if(_colums!=colums){
        _colums=colums;
        [self updateConstraints];
    }
}

-(void)updateSubViewConstraints:(UIView *)subView{
    if(subView.row>=self.rows){
        NSException *e = [NSException
                          exceptionWithName: @"UIGridPanel异常"
                          reason: @"子视图的row索引必须小于父视图的rows"
                          userInfo: nil];
        @throw e;
    }

    if(subView.colum>=self.colums){
        NSException *e = [NSException
                          exceptionWithName: @"UIGridPanel异常"
                          reason: @"子视图的colum索引必须小于父视图的colums"
                          userInfo: nil];
        @throw e;
    }

    UIEdgeInsets margin=subView.margin;

    NSInteger columSpan=subView.columSpan;
    NSInteger rowSpan=subView.rowSpan;
    NSInteger subViewRow=subView.row;
    NSInteger subViewColum=subView.colum;
    if(columSpan+subViewColum>=self.colums){
        columSpan=self.colums-subViewColum;
    }

    if(rowSpan+subViewRow>=self.rows){
        rowSpan=self.rows-subViewRow;
    }

    [self addConstraint:[NSLayoutConstraint constraintWithItem:subView
                                                     attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:((2.0f*subViewColum)/self.colums) constant:margin.left]];

    [self addConstraint:[NSLayoutConstraint constraintWithItem:subView
                                                     attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:(2.0f*(subViewColum+columSpan))/self.colums constant:-margin.right]];

    [self addConstraint:[NSLayoutConstraint constraintWithItem:subView
                                                     attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterY multiplier:((2.0f*subViewRow)/self.rows) constant:margin.top]];

    [self addConstraint:[NSLayoutConstraint constraintWithItem:subView
                                                     attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterY multiplier:(2.0f*(subViewRow+rowSpan))/self.rows constant:-margin.bottom]];

}

-(void)willRemoveSubview:(UIView *)subview{

}

-(void)dealloc{
    [self removeConstraints:self.constraints];
}
@end

至此，UIGridPanel已经介绍完了。

下一篇会介绍自动布局的难点-UIScrollView

时间： 2024-10-28 16:35:04

IOS 自动布局-UIStackPanel和UIGridPanel(三)的相关文章

IOS 自动布局-UIStackPanel和UIGridPanel

我以前是做windows phone开发的,后来转做IOS的开发,因此很多windows phone上面的开发经验也被我带到了IOS中.其实有些经验本身跟平台无关,跟平台有关的无非就是实现方法而已.好了,废话不多说. 我今天给大家介绍一个IOS自动华布局的辅助类(UIPanel   UIStackPanel  UIGridPanel),做过windows phone开发的同学看到这三个类肯定很眼熟,没错,这三个类正是windows phone布局的核心,只是名称稍微有点不一样而已. 我先介绍下我

IOS 自动布局-UIStackPanel和UIGridPanel(四)

为什么说scrollview的自动化布局是难点? 对scrollview做自动化布局,无非就是想对scrollview里面的subviews来做自动化布局.但是scrollview里面的subviews的自动化布局不是由scrollview的高宽来决定的,而是由scrollview的contentSize共同决定的,这样就出现一个问题了,就算scrollview的高宽是改变了,但是只要contentSize不变,那么对于scrollview里面的subviews的高宽其实是没有影响的.而实现自动

IOS 自动布局-UIStackPanel和UIGridPanel(五)

试想这样的一个需求场合,一个button靠右显示,并且距离superView的顶部和右边间距分别为10和5.如下图所示: 要实现这样的需求,如果不用自动布局技术,那么我们能想到的就是老老实实的使用绝对布局的坐标计算来实现了,假如这个button宽高都是100,父视图的宽是300,那么这个button的坐标就是:(300-100-5,10).但要是父视图的宽度变了,我们还得重新计算一遍.颇为麻烦. 幸好我们有自动布局技术.要实现这样的需求还是相对比较简单的. 既然我们要实现这样的需求,而且这个需求

iOS Core Animation Advanced Techniques(三)：专用图层

到目前为止,我们已经探讨过CALayer类了,同时我们也了解到了一些非常有用的绘图和动画功能.但是Core Animation图层不仅仅能作用于图片和颜色而已.本章就会学习其他的一些图层类,进一步扩展使用Core Animation绘图的能力. CAShapeLayer 在第四章『视觉效果』我们学习到了不使用图片的情况下用CGPath去构造任意形状的阴影.如果我们能用同样的方式创建相同形状的图层就好了. CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类.你指定诸如颜色

iOS自动布局——Masonry详解

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环.代码的布局是设计语言与用户视觉感受沟通的桥梁,不论它看起来多么简单或是琐碎,但不得不承认,绝大部分软件开发的问题,都是界面问题.那么,如何高效的完成UI开发,也是软件行业一直在克服的问题. 所以,软件界面开发的核心点即是:如何减少UI设计稿的建模难度和减少建模转化到代码的实现难度 最初iOS提供了

iOS 自动布局

自动布局框架 Masonry PureLayout FLKAutoLayout KeepLayout UIView+Autolayout 相关教程: iOS 开发实践之 Auto Layout Masonry介绍与使用实践(快速上手Autolayout) IOS自动布局之Autoresizing iOS中的相对布局:AutoLayout

直接拿来用！最火的iOS开源项目（一~三）

结束了GitHub平台上“最受欢迎的Android开源项目”系列盘点之后,我们正式迎来了“GitHub上最受欢迎的iOS开源项目”系列盘点.今天,我们将介绍20个在GitHub上非常受开发者欢迎的iOS开源项目,你准备好了吗? 1. AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS.Mac OS X网络通信类库,现在是GitHub上第三大Objective-C库.它建立在NSURLConne

iOS Crash 分析（文三）- 符号化崩溃日志

iOS Crash 分析(文三)- 符号化崩溃日志 未符号化的崩溃日志就象一本天书,看不懂,更别谈分析崩溃原因了.所以我们在分析日志之前,要把日志翻译成我们可以看得懂的文字.这一步我们称之为符号化. 在iOS Crash分析(文一)中已经提到过符号化的两种方式: 1.利用Xcode符号化 2.利用symbolicatecrash脚本符号化 其实这两种分析方式都使用了同一个工具符号化:***atos***. atos是苹果提供的符号化工具,在Mac OS系统下默认安装. 使用***atos***符

iOS 自动布局详细介绍

1. 自动布局的理解 iOS自动布局很有用,可以在不同size的屏幕上运行,原先看的头痛,还是习惯用最蠢的[UIScreen mainScreen].bounds.size.width等来布局,后来实在不行了,开始好好地看自动布局,发现理解后真的很好用,现在就来分享分享我的心得吧. 首先要明白一个控件在屏幕上的位置怎么样才能真正地确定.最简单的情况是: 1. 例如一个矩形,只要知道它左上角点的坐标,宽,高,那么位置就固定了. 2. 例如一个圆,只要知道它的圆心坐标,半径,那么位置就固定了. 自动