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 ...
随机推荐
- springmvc 实现原理与struts2原理的区别
spring mvc的入口是servlet,而struts2是filter,这样就导致了二者的机制不同. spring mvc是基于方法的设计,sturts2是基于类设计的. springmvc将ur ...
- 解析Javascript事件冒泡机制(转)
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
- 重新安装Magento CE 2.1.0
删除 var/cache 文件夹 删除 var/generation文件夹 删除 app/etc/config.php 删除 app/etc/env.php 如果您觉得阅读本文对您有帮助,欢迎转载本文 ...
- cacti图形字符乱码
环境:最小化centos+cacti 问题:图形监控界面字符全部乱码,如下图 解决方法:从windows下面拷贝一个ttf文件到/usr/share/fonts下面,刷新页面,字符就正常显示了.
- 批处理文件 bat
删除D盘的所有文件:del /a /f /q d:\*.* 删除指定目录的指定扩展名的文件:del /a /f /q 目录:\*.jpg 删除当前目录下的指定扩展名的文件(指定扩展名为jpg):del ...
- webpack 使用流程
webpack loader 读文件的 脚手架 vue-cli: 自动化的小工具,帮咱们把项目的架子搭起来 -------------------------------------- 开发环境 n ...
- VC-基础:VC中得到当前系统的时间和日期
得到当前时间的方法一般都是得到从1900年0点0分到现在的秒数,然后转为年月日时分秒的形式得到当前的时间(时分秒).主要方法如下: 1)使用CRT函数 C++代码 ]; time_t nowtim ...
- PAT (Advanced Level) Practise - 1099. Build A Binary Search Tree (30)
http://www.patest.cn/contests/pat-a-practise/1099 A Binary Search Tree (BST) is recursively defined ...
- javaEE(1)_web开发入门
一.WEB开发的相关知识 1.WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页 ...
- 表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的
jQuery代码 <input value="请输入用户名" type="text"> <input value="请输入密码&qu ...