autolayout的使用原理及代码实现

2023-12-12 01:18

本文主要是介绍autolayout的使用原理及代码实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、
UIViewAutoresizing只能控制父子视图之间的布局
首先父视图要允许子视图自动伴随父视图变化而变化
然后子视图自己设置怎么伴随变化

设置 子视图 自动布局 1.必须父视图允许子视图自动布局 2.子视图自己设置布局方式


//父视图设置父子视图自适应/停靠模式
    _redView.autoresizesSubviews = YES;//允许子视图伴随父视图自动变化
//子视图设置子视图的自适应模式
    blueView.autoresizingMask


autolayout  iOS6的时候出来的  iPhone5出来了
sizeclass  iOS8的时候出来的

github

二.自动布局(多屏适配)
        1.为什么使用自动布局
            iphone手机的分辨率越来越多,有320*480,   640*960,  640*1136,  750*1334,  1080*1920
            使用代码控制frame坐标和大小的化,会花费大量时间精力.
            为了解决适配问题,苹果推出了自动布局

        2.自动布局原理
            通过给视图添加约束的方式,使视图在任何屏幕上都可以正常显示

        autolayout 用 constraints(约束) 来控制 控件的大小和位置

        auto layout 加约束条件 问题1:要么加少了 起不到作用,2.加多了产生了冲突 有可能崩溃

        3.如何给视图添加约束
            Xcode—>Editor—>Pin

        4.有哪些约束

                
            1).Width         //设置视图固定宽度
            2).Height        //设置视图固定高度
            
            3).Horizontal Spacing     //同级视图之间的横向间距
            4).Vertical Spacing        //同级视图之间的纵向间距
            
            5).Leading Space to SuperView       //与父视图的左间距
            6).Trailing Space to SuperView         //与父视图的右间距
            7).Top Space to SuperView              //与父视图的上间距
            8).Botton Space to SuperView        //与父视图的下间距

            9).Widths Equally                               //设置同级视图宽度比例
            10).Height Equally         //设置同级视图高度比例  

    NSLayoutConstraint *constraint =
    [NSLayoutConstraint
     constraintWithItem:self.contentView
              attribute:NSLayoutAttributeWidth
              relatedBy:NSLayoutRelationEqual
                 toItem:nil
              attribute:0
             multiplier:1.0
               constant:1000];
    
    NSLayoutConstraint *constraint2 =
    [NSLayoutConstraint
     constraintWithItem:self.contentView
     attribute:NSLayoutAttributeHeight
     relatedBy:NSLayoutRelationEqual
     toItem:nil
     attribute:0
     multiplier:1.0
     constant:200];
    
    [self.contentView addConstraint:constraint];
    [self.contentView addConstraint:constraint2];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(_contentView);
    
//    NSDictionary *dict = @{@"_contentView": _contentView};
    
    NSArray *constraints =
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:[_contentView(1000)]" options:0 metrics:nil views:views];
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[_contentView(200)]" options:0 metrics:nil views:views];
    
    [_contentView addConstraints:constraints];
    [_contentView addConstraints:constraints2];

===================================================
VFL 语言添加约束

UIView *redView = [[UIView alloc] initWithFrame:CGRectZero];
    redView.backgroundColor = [UIColor redColor];
    // 通常都设置成NO
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    UIView *blueView = [[UIView alloc] initWithFrame:CGRectZero];
    blueView.backgroundColor = [UIColor blueColor];
    // 通常都设置成NO
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(redView, blueView);
    //NSDictionary *dict = @{@“redView”:redView,@“blueView”: blueView};


    NSArray *constraints =
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[redView(100)]" options:0 metrics:nil views:views];
    [self.view addConstraints:constraints];
    
    NSArray *constraints2 =
    [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[redView(50)]" options:0 metrics:nil views:views];
    [self.view addConstraints:constraints2];
    
    NSArray *constraints3 =
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView]-50-[blueView(==redView)]" options:0 metrics:nil views:views];
    [self.view addConstraints:constraints3];
    
    NSArray *constraints4 =
    [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView]-50-[blueView(==redView)]" options:0 metrics:nil views:views];
    [self.view addConstraints:constraints4];



        5.用代码做自动布局
            
            使用第三方Masonry库

             [topView mas_makeConstraints:^(MASConstraintMaker *make) {
                        make.top.equalTo(self.view.mas_top).with.offset(0);    //topView上边距与self.view上边距为0
                        make.left.equalTo(self.view.mas_left).with.offset(0);    //topView左边距与self.view左边距为0
                        make.right.equalTo(self.view.mas_right).with.offset(0);    //topView右边距与self.view右边距为0
                        make.height.equalTo(@64);                                            //topView宽度固定为64个像素
                    }];


                [tableView mas_makeConstraints:^(MASConstraintMaker *make) {
                        make.top.equalTo(topView.mas_bottom).with.offset(0);        //tableView上边距与self.view下边距为0
                         make.bottom.equalTo(bottomView.mas_top).with.offset(0);    //tableView下边距与self.view上边距为0
                         make.left.equalTo(self.view.mas_left).with.offset(0);                //tableView左边距与self.view左边距为0
                         make.right.equalTo(self.view.mas_right).with.offset(0);            //tableView右边距与self.view右边距为0
                }];
//从下往上,从右往左,都是倒推,是负数.
UIButton *topButton  = [UIButton buttonWithType:UIButtonTypeSystem];
    topButton.backgroundColor = [UIColor grayColor];
    [topView addSubview:topButton];
    [topButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(topView.mas_top).with.offset(20);
        //从下往上,从右往左,都是倒推,是负数.
        make.bottom.equalTo(topView.mas_bottom).with.offset(-5);
        make.right.equalTo(topView.mas_right).with.offset(-20);
        make.width.equalTo(@100);
    }];            
[table mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).with.offset(0);
        make.right.equalTo(self.view.mas_right).with.offset(0);
        //table的上边距和topView的下边距为0
        make.top.equalTo(topView.mas_bottom).with.offset(0);
         //table的下边距和bottomView的上边距为0
        make.bottom.equalTo(bottomView.mas_top).with.offset(0);
    }];

这篇关于autolayout的使用原理及代码实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/482735

相关文章

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

使用TomCat,service输出台出现乱码的解决

《使用TomCat,service输出台出现乱码的解决》本文介绍了解决Tomcat服务输出台中文乱码问题的两种方法,第一种方法是修改`logging.properties`文件中的`prefix`和`... 目录使用TomCat,service输出台出现乱码问题1解决方案问题2解决方案总结使用TomCat,

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类,编译时

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》:本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件,将以下内

Java中使用Java Mail实现邮件服务功能示例

《Java中使用JavaMail实现邮件服务功能示例》:本文主要介绍Java中使用JavaMail实现邮件服务功能的相关资料,文章还提供了一个发送邮件的示例代码,包括创建参数类、邮件类和执行结... 目录前言一、历史背景二编程、pom依赖三、API说明(一)Session (会话)(二)Message编程客

Java中List转Map的几种具体实现方式和特点

《Java中List转Map的几种具体实现方式和特点》:本文主要介绍几种常用的List转Map的方式,包括使用for循环遍历、Java8StreamAPI、ApacheCommonsCollect... 目录前言1、使用for循环遍历:2、Java8 Stream API:3、Apache Commons

C++中使用vector存储并遍历数据的基本步骤

《C++中使用vector存储并遍历数据的基本步骤》C++标准模板库(STL)提供了多种容器类型,包括顺序容器、关联容器、无序关联容器和容器适配器,每种容器都有其特定的用途和特性,:本文主要介绍C... 目录(1)容器及简要描述‌php顺序容器‌‌关联容器‌‌无序关联容器‌(基于哈希表):‌容器适配器‌:(

C#提取PDF表单数据的实现流程

《C#提取PDF表单数据的实现流程》PDF表单是一种常见的数据收集工具,广泛应用于调查问卷、业务合同等场景,凭借出色的跨平台兼容性和标准化特点,PDF表单在各行各业中得到了广泛应用,本文将探讨如何使用... 目录引言使用工具C# 提取多个PDF表单域的数据C# 提取特定PDF表单域的数据引言PDF表单是一

使用Python实现高效的端口扫描器

《使用Python实现高效的端口扫描器》在网络安全领域,端口扫描是一项基本而重要的技能,通过端口扫描,可以发现目标主机上开放的服务和端口,这对于安全评估、渗透测试等有着不可忽视的作用,本文将介绍如何使... 目录1. 端口扫描的基本原理2. 使用python实现端口扫描2.1 安装必要的库2.2 编写端口扫

PyCharm接入DeepSeek实现AI编程的操作流程

《PyCharm接入DeepSeek实现AI编程的操作流程》DeepSeek是一家专注于人工智能技术研发的公司,致力于开发高性能、低成本的AI模型,接下来,我们把DeepSeek接入到PyCharm中... 目录引言效果演示创建API key在PyCharm中下载Continue插件配置Continue引言