ios8 使用storyboard 进行自动布局(一)

2023-11-05 13:48
文章标签 进行 使用 布局 自动 ios8 storyboard

本文主要是介绍ios8 使用storyboard 进行自动布局(一)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

xcode 6使用storyboard 进行自动布局，迷惑的问题主要由：

1，classsize 到底是一个什么东东？

2，classSize 和 layout 有什么区别?

3,  如何使用storyboard 进行自动布局

4，什么是约束？

5，常见的约束报错有哪些？

6，在开发过程中（使用storyboard）应该注意哪些问题？

这些问题我会在

代码级别的界面显示    

1，如果是从代码层面开始使用Autolayout,需要对使用的View的translatesAutoresizingMaskIntoConstraints的属性设置为NO.
即可开始通过代码添加Constraint,否则View还是会按照以往的autoresizingMask进行计算.
而在Interface Builder中勾选了Ues Autolayout,IB生成的控件的translatesAutoresizingMaskIntoConstraints属性都会被默认设置NO.

2，值得注意的是,添加约束之前一定要将子视图优先addSubview到父视图中,否则在添加约束时会产生编译器警告.
而我们在理解的时候,可以通过这种方式来理解.item1.attribute = multiplier ⨉ item2.attribute + constant，比如看下面的代码

[objc]  view plain copy
  1. UIView *newView = [[UIView alloc]init];  
  2.     newView.backgroundColor = [UIColor redColor];  
  3.       
  4.     [self.view addSubview:newView];  
  5.       
  6. //   self.view.translatesAutoresizingMaskIntoConstraints =NO;  
  7.   
  8.     newView.translatesAutoresizingMaskIntoConstraints =NO;  
  9.   
  10.     NSLayoutConstraint *constraint = nil;  
  11.   
  12.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  13.                                               attribute:NSLayoutAttributeLeading  
  14.                                               relatedBy:NSLayoutRelationEqual  
  15.                                                  toItem:self.view  
  16.                                               attribute:NSLayoutAttributeLeading  
  17.                                              multiplier:1.0f  
  18.                                                constant:20];  
  19.     [self.view addConstraint:constraint];  
  20.   
  21.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  22.                                               attribute:NSLayoutAttributeTrailing  
  23.                                               relatedBy:NSLayoutRelationEqual  
  24.                                                  toItem:self.view  
  25.                                               attribute:NSLayoutAttributeTrailing  
  26.                                              multiplier:1.0f  
  27.                                                constant:-20];  
  28.     [self.view addConstraint:constraint];  
  29.   
  30.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  31.                                               attribute:NSLayoutAttributeTop  
  32.                                               relatedBy:NSLayoutRelationEqual  
  33.                                                  toItem:self.view  
  34.                                               attribute:NSLayoutAttributeTop  
  35.                                              multiplier:1.0f  
  36.                                                constant:80];  
  37.     [self.view addConstraint:constraint];  
  38.   
  39.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  40.                                               attribute:NSLayoutAttributeBottom  
  41.                                               relatedBy:NSLayoutRelationEqual  
  42.                                                  toItem:self.view  
  43.                                               attribute:NSLayoutAttributeBottom  
  44.                                              multiplier:1.0f  
  45.                                                constant:-20];  
  46.     [self.view addConstraint:constraint];  

创建了一个单视图，距离各边界的距离依次是：20  20  80  20（左，右，上，下），或许有人会疑问为什么距离右写的是-20，why, 其实原因很简单，因为我们参照的是self.view.trailing  ,而视图newView是加在self.view上，是在self.view.trailing 的左边，所以应该是赋值，以此类推距离底部也是一样

有人会问到底属性都有哪些，下面会给大家列举一下，这里包括ios 8 最新添加的(一下加红的是常用的一些方法)

    NSLayoutAttributeLeft = 1,    对齐对象的左边
    NSLayoutAttributeRight,        对齐对象的右边
    NSLayoutAttributeTop,          距离顶部的距离
    NSLayoutAttributeBottom,    距离底部的距离  
    NSLayoutAttributeLeading,   距离左边的距离
    NSLayoutAttributeTrailing,    距离右边部的距离
    NSLayoutAttributeWidth,      控件的宽度
    NSLayoutAttributeHeight,     控件的高度
    NSLayoutAttributeCenterX,  x 轴中线点的距离
    NSLayoutAttributeCenterY,  y 轴中线点的距离
    NSLayoutAttributeBaseline, 
    NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,

    //   在API 8.0  文档中貌似没有详细的说明，但大家一看意思也明白了，就是距离各个边界的设置
    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeNotAnAttribute = 0

注：NSLayoutAttributeLeft/NSLayoutAttributeRight 和 NSLayoutAttributeLeading/NSLayoutAttributeTrailing的区别是left/right永远是指左右，而leading/trailing在某些从右至左习惯的地区会变成，leading是右边，trailing是左边。


以上就是通过简单的代码实现了自动布局（单一控件），大家会发如果页面上试图多的话，用这种方式显得特别麻烦，的确是的，下面我介绍一下另一种方法

通过可视化语言的方式

先学点基础知识, 

1 调用的方法

[objc]  view plain copy
  1. + (NSArray *)constraintsWithVisualFormat:(NSString *)format  
  2.                                  options:(NSLayoutFormatOptions)opts  
  3.                                  metrics:(NSDictionary *)metrics  
  4.                                    views:(NSDictionary *)views  
介绍一下各个参数的意思

1 format   约束的规格要求  说白了就是条件。

2 opts       主要用来描述属性和用来指导可视化语言中的布局样式。

3 metrics  一个字典实例主要用来显示你在可视化话中用的字符串的参数设置，比如：nextwidth:@12, 必须是一个字典对象。

4 views   所有描述的空间字典集合，也必须以字典的形式展现出来。

下面通过一个实例的方式

[objc]  view plain copy
  1. UIView *two = [UIView new];  
  2.    two.backgroundColor = [UIColor greenColor];  
  3.    [self.view addSubview:two];  
  4.    two.translatesAutoresizingMaskIntoConstraints = NO;  
  5.    NSDictionary *views = NSDictionaryOfVariableBindings(two, self.view);  
  6.      
  7.    NSMutableArray *constraintArray = [NSMutableArray array];  
  8.    [constraintArray addObjectsFromArray:[NSLayoutConstraint   constraintsWithVisualFormat:@"H:|-20-[two]-20-|"  
  9.                                                                                 options:0  
  10.                                                                                   metrics:nil  
  11.                                                                                     views:views]];  
  12.    [constraintArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-80-[two]-20-|" options:0 metrics:nil views:views]];  
  13.    [self.view addConstraints:constraintArray];  

简单的几句话就实现了和上面同样的效果，从而可以充分的看到可视化语言是多么的方便

下面为大家带来介绍一些第三方实现该效果的代码

首推：PureLayout 他是UIView+Layout  的后继者，项目中建议使用PureLayout , 使用起来特方便，至于如何导入请大家参考文档自己完成 

下载地址：https://github.com/smileyborg/PureLayout

直接上代码：

[objc]  view plain copy
  1. UIView *newView = [UIView new];  
  2.     newView.backgroundColor = [UIColor blueColor];  
  3.     [self.view addSubview:newView];  
  4.       
  5.     newView.translatesAutoresizingMaskIntoConstraints = NO;  
  6.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeLeading) withInset:20];  
  7.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeTrailing) withInset:20];  
  8.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeTop) withInset:80];  
  9.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeBottom) withInset:20];  

你可能会很吃惊，哇？这么简单，的确是的就是这么简单，完全符合我们使用storyboard 的习惯，至于UIView+autoLayout 和 PureLayout的具体使用，我会在后面的文章中单独拿出一章单独介绍他的使用，现在主要是了解一下自动布局的使用

先看一下效果图，横屏效果图

竖屏效果图


下面咱们来点有难度的代码，嘿嘿，终于可以放手做一下了

[objc]  view plain copy
  1. - (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.     self.view.backgroundColor = [UIColor whiteColor];  
  4.     // 1 创建三个视图 红/绿/蓝/黄/橙色视图  
  5.       
  6.     // 红  
  7.     UIView *redView = [self alive];  
  8.     redView.backgroundColor = [UIColor redColor];  
  9.     [self.view addSubview:redView];  
  10.     // 绿  
  11.     UIView *greenView = [self alive];  
  12.     greenView.backgroundColor = [UIColor greenColor];  
  13.     [self.view addSubview:greenView];  
  14.     // 蓝  
  15.     UIView *blueView = [self alive];  
  16.     blueView.backgroundColor = [UIColor blueColor];  
  17.     [self.view addSubview:blueView];  
  18.     // 黄  
  19.     UIView *yellowView = [self alive];  
  20.     yellowView.backgroundColor = [UIColor yellowColor];  
  21.     [self.view addSubview:yellowView];  
  22.     // 橙  
  23.     UIView *orangeView = [self alive];  
  24.     orangeView.backgroundColor = [UIColor orangeColor];  
  25.     [self.view addSubview:orangeView];  
  26.       
  27.     [self.view addConstraints:[self portraitConstraints:redView :greenView :blueView yellowView:yellowView orangeView:orangeView]];  
  28.       
  29. }  
  30. // 这样写完全是为了代码的方便使用,创建对象的同时初始化控件  
  31. - (UIView *)alive  
  32. {  
  33.     UIView *newView = [UIView new];  
  34.     newView.translatesAutoresizingMaskIntoConstraints = NO;  
  35.     return newView;  
  36. }  
  37. - (NSMutableArray *) portraitConstraints:(UIView *)redView :(UIView *)greenView :(UIView *)blueView yellowView:(UIView *)yellowView orangeView:(UIView *)orangeView  
  38. {  
  39.     NSMutableArray *array = [NSMutableArray array];  
  40.     // 注1：红色视图的宽度大于等于10 小于30    黄色视图的宽度大于40 小于120  水平  
  41.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView(>=10,<=30)]-20-[greenView(>=40,<=120)]-20-[yellowView]-20-|" options:0 metrics:nil  
  42.                                                                              views:NSDictionaryOfVariableBindings(redView, greenView, yellowView)]];  
  43.     // 注2：垂直方向 red高度H:100<= <=160  蓝色 H:30<= <=60  橙色待定  
  44.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[redView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
  45.                                                                          views:NSDictionaryOfVariableBindings(redView, blueView, orangeView)]];  
  46.     // 和注2类似  
  47.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[greenView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
  48.                                                                          views:NSDictionaryOfVariableBindings(greenView, blueView, orangeView)]];  
  49.     // 和注2类似   或许有人会问 为什么得添加黄色和绿色，原因很简单，就是为了满足各个约束，避免造成约束不足  
  50.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[yellowView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
  51.                                                                          views:NSDictionaryOfVariableBindings(yellowView, blueView, orangeView )]];  
  52.       
  53.       
  54.     // 注3：控制blued的宽度  
  55.     [array addObjectsFromArray:[NSLayoutConstraint  
  56.                                           constraintsWithVisualFormat:@"H:|-20-[blueView]-120-|" options:0 metrics:nil  
  57.                                           views:NSDictionaryOfVariableBindings(blueView)]];  
  58.     // 注4：为橙色高度添加约束条件  
  59.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView]-20-[orangeView(>=blueView)]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];  
  60.       
  61.     // 注4：为橙色添加宽度约束条件  
  62.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];  
  63.     return array;  
  64. }  
呵呵，效果出来了吗？ 在后面我会继续介绍自动布局的相关内容

这篇关于ios8 使用storyboard 进行自动布局(一)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/350253。

相关文章

python使用库爬取m3u8文件的示例

python使用库爬取m3u8文件的示例

《python使用库爬取m3u8文件的示例》本文主要介绍了python使用库爬取m3u8文件的示例,可以使用requests、m3u8、ffmpeg等库,实现获取、解析、下载视频片段并合并等步骤,具有... 目录一、准备工作二、获取m3u8文件内容三、解析m3u8文件四、下载视频片段五、合并视频片段六、错误
阅读更多...
gitlab安装及邮箱配置和常用使用方式

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》：本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的
阅读更多...
SpringBoot3应用中集成和使用Spring Retry的实践记录

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项
阅读更多...
nginx启动命令和默认配置文件的使用

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》：本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx
阅读更多...
在Windows上使用qemu安装ubuntu24.04服务器的详细指南

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程：安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4
阅读更多...
使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
Windows下C++使用SQLitede的操作过程

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能（如数据库连接、事务管理）、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite：C++轻松操作SQ
阅读更多...
一文详解MySQL如何设置自动备份任务

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2
阅读更多...
Python常用命令提示符使用方法详解

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,：本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安
阅读更多...
Python并行处理实战之如何使用ProcessPoolExecutor加速计算

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2