IOS 自动布局-UIStackPanel和UIGridPanel(五)
试想这样的一个需求场合,一个button靠右显示,并且距离superView的顶部和右边间距分别为10和5。如下图所示:
要实现这样的需求,如果不用自动布局技术,那么我们能想到的就是老老实实的使用绝对布局的坐标计算来实现了,假如这个button宽高都是100,父视图的宽是300,那么这个button的坐标就是:(300-100-5,10)。但要是父视图的宽度变了,我们还得重新计算一遍。颇为麻烦。
幸好我们有自动布局技术。要实现这样的需求还是相对比较简单的。
既然我们要实现这样的需求,而且这个需求其实也是具有普遍性的,那么我们直接封装下好了。我们给UIView添加两个扩展属性:horizontalAlignment和verticalAlignment。两个属性都是枚举。
typedef NS_ENUM(NSInteger, UIViewVerticalAlignment) {
UIViewVerticalAlignmentFill = ,
UIViewVerticalAlignmentCenter = ,
UIViewVerticalAlignmentTop = ,
UIViewVerticalAlignmentBottom = }; typedef NS_ENUM(NSInteger, UIViewHorizontalAlignment) {
UIViewHorizontalAlignmentFill = ,
UIViewHorizontalAlignmentCenter = ,
UIViewHorizontalAlignmentLeft = ,
UIViewHorizontalAlignmentRight =
}; @property (nonatomic,assign)UIViewHorizontalAlignment horizontalAlignment; @property (nonatomic,assign)UIViewVerticalAlignment verticalAlignment;
实现的思路如下:
我下面以水平停靠举例,对于水平停靠有四种情况,首先就是不停靠完全的填充,也就是我们把该subview的宽度跟superview的宽度绑定到一起。第二种情况是左边停靠,依次还有居中停靠和右边停靠。
对于非填充停靠,在宽度方面肯定不能直接绑定到superview的宽度了,只能使用UIView的扩展属性size的宽度了。
现在以上述场景的实现为例,就是水平方向右边停靠。那么我们只要把subview的NSLayoutAttributeRight跟superview的NSLayoutAttributeRight对齐就好了。代码如下:
[self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeRight multiplier:1.0f constant:-margin.right]];
对于左边停靠和居中停靠无非就是对齐的属性不一样。对于垂直停靠来说也是这样。
完整的停靠代码如下:
UIEdgeInsets margin=self.margin;
switch (self.verticalAlignment) {
case UIViewVerticalAlignmentFill:
{
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-top-[view]-bottom-|" options: metrics:@{ @"top" : @(margin.top),@"bottom":@(margin.bottom)} views:@{ @"view" : self}];
[self.superview addConstraints:constraints];
}
break;
case UIViewVerticalAlignmentBottom:
{
[self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeBottom multiplier:1.0f constant:-margin.bottom]];
}
break;
case UIViewVerticalAlignmentCenter:
{
[self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:]];
}
break;
case UIViewVerticalAlignmentTop:
{
[self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeTop multiplier:1.0f constant:margin.top]];
}
break;
default:
break;
} switch (self.horizontalAlignment) {
case UIViewHorizontalAlignmentFill:{
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|-left-[view]-right-|" options: metrics:@{ @"left" : @(margin.left),@"right":@(margin.right)} views:@{ @"view" : self}];//添加宽度的约束
[self.superview addConstraints:constraints];
}
break;
case UIViewHorizontalAlignmentCenter:{
[self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:]];
}
break;
case UIViewHorizontalAlignmentLeft:{
[self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeLeft multiplier:1.0f constant:margin.left]];
}
break;
case UIViewHorizontalAlignmentRight:{
[self.superview addConstraint:[NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:NSLayoutAttributeRight multiplier:1.0f constant:-margin.right]];
}
break;
default:
break;
}
对于停靠,我们前面写的UIStackPanel和UIGridView势必也要支持的。因此我也修改了下原来的代码。
然后对于图中 的那个button的代码就是如下:
UIButton *btn=[[UIButton alloc] initWithSize:CGSizeMake(, )];
[btn setBackgroundColor:[UIColor blueColor]];
btn.isBindSizeToSuperView=YES;
[btn setTitle:@"button1" forState:UIControlStateNormal];
btn.horizontalAlignment=UIViewHorizontalAlignmentRight;
btn.verticalAlignment=UIViewVerticalAlignmentTop;
btn.margin=UIEdgeInsetsMake(, , , );
[self.view addSubview:btn];
至此这个系列的博客完结!
IOS 自动布局-UIStackPanel和UIGridPanel(五)的更多相关文章
- IOS 自动布局-UIStackPanel和UIGridPanel(三)
在这一篇了我将继续讲解UIGridPanel. 在iphone的app里面可以经常看到一些九宫格布局的应用,做过html开发的对这类布局应该是很熟悉的.在IOS中要实现这样的布局方法还是蛮多的,但是我 ...
- IOS 自动布局-UIStackPanel和UIGridPanel(四)
为什么说scrollview的自动化布局是难点? 对scrollview做自动化布局,无非就是想对scrollview里面的subviews来做自动化布局.但是scrollview里面的subview ...
- IOS 自动布局-UIStackPanel和UIGridPanel(二)
在上一篇中我提到了如何使用stackpanel和gridpanel来实现自动布局.而在这一篇中我着重讲解下其中的原理. 在(UIPanel UIStackPanel UIGridPanel)中主 ...
- IOS 自动布局-UIStackPanel和UIGridPanel(一)
我以前是做windows phone开发的,后来转做IOS的开发,因此很多windows phone上面的开发经验也被我带到了IOS中.其实有些经验本身跟平台无关,跟平台有关的无非就是实现方法而已.好 ...
- iOS开发Swift篇—(五)元组类型
iOS开发Swift篇—(五)元组类型 一.元组类型介绍 1.什么是元组类型 元组类型由 N个 任意类型的数据组成(N >= 0),组成元组类型的数据可以称为“元素” 示例: let posit ...
- iOS 自动布局详细介绍
1. 自动布局的理解 iOS自动布局很有用,可以在不同size的屏幕上运行,原先看的头痛,还是习惯用最蠢的[UIScreen mainScreen].bounds.size.width等来布局,后来实 ...
- iOS自动布局——Masonry详解
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环 ...
- iOS 11开发教程(五)iOS11模拟器介绍二
iOS 11开发教程(五)iOS11模拟器介绍二 3.iOS11模拟器中设置语言 对于不同国家的人来说,使用到的语言是不一样的.一般情况下iOS11模拟器默认使用的English(英语).对于英文不好 ...
- iOS开发之窥探UICollectionViewController(五) --一款炫酷的图片浏览组件
本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectio ...
随机推荐
- (转)MySql的常用的语句
MySQL常用语句 一.连接MySQL 格式: mysql -h 主机地址 -u 用户名 -p 用户密码 1.例1:连接到本机上的MYSQL. 首先在打开DOS窗口,然后进入目录 mysql bin, ...
- Spring Security – security none, filters none, access permitAll
1.概述 Spring Security提供了几种将请求模式配置为不安全或允许所有访问的机制.取决于这些机制中的哪一种 - 这可能意味着根本不在该路径上运行安全过滤器链,或者运行过滤器链并允许访问 2 ...
- P1051 谁拿了最多奖学金——水题
题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(>80),并且在本学期内发表1篇或1 ...
- mirror.js 整合redux的好工具
mirror.js 很简单,让state管理更方便了,没有新增api,值 得使用 https://github.com/yurizhang/mirror package.json { "na ...
- 面向对象super内置函数(转)
super函数用来解决钻石继承. 一.python的继承以及调用父类成员 父类: class Base(object): def __init__(self): print("base in ...
- Linux下环境搭建(三)——jmeter+ant配置
在linux环境下,使用jmeter做接口自动化,做好了前两步的准备工作后,怎能少了主角jmeter+ant了,今天就来说下jmeter+ant的配置方式. jmeter配置 jmeter下载地址:h ...
- Obj-C Memory Management
Memory management is one of the most important process in any programming language. It is the proces ...
- path与classpath区别(转)
转自http://blog.csdn.net/mydreamongo/article/details/8155408 1.path的作用 path是系统用来指定可执行文件的完整路径,即使不在path中 ...
- LightOJ 1422 Halloween Costumes (区间DP,经典)
题意: 有个人要去参加万圣节趴,但是每到一个趴都要换上特定的服装,给定一个序列表示此人要穿的衣服编号(有先后顺序的),他可以套很多件衣服在身上,但此人不喜欢再穿那些脱下的衣服(即脱下后就必须换新的), ...
- 二级域名绑定ECS
关于阿里云域名的绑定,下面是个人的理解,如有错误请指出. 首先,任何域名都需要在阿里云备案后才可以使用, 如果是二级域名,不能单独备案,需要其顶级域名在阿里云备案. http://help.aliyu ...