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

相关文章

使用Python开发一个Ditto剪贴板数据导出工具

《使用Python开发一个Ditto剪贴板数据导出工具》在日常工作中,我们经常需要处理大量的剪贴板数据,下面将介绍如何使用Python的wxPython库开发一个图形化工具,实现从Ditto数据库中读... 目录前言运行结果项目需求分析技术选型核心功能实现1. Ditto数据库结构分析2. 数据库自动定位3

Python yield与yield from的简单使用方式

《Pythonyield与yieldfrom的简单使用方式》生成器通过yield定义,可在处理I/O时暂停执行并返回部分结果,待其他任务完成后继续,yieldfrom用于将一个生成器的值传递给另一... 目录python yield与yield from的使用代码结构总结Python yield与yield

Go语言使用select监听多个channel的示例详解

《Go语言使用select监听多个channel的示例详解》本文将聚焦Go并发中的一个强力工具,select,这篇文章将通过实际案例学习如何优雅地监听多个Channel,实现多任务处理、超时控制和非阻... 目录一、前言:为什么要使用select二、实战目标三、案例代码:监听两个任务结果和超时四、运行示例五

python使用Akshare与Streamlit实现股票估值分析教程(图文代码)

《python使用Akshare与Streamlit实现股票估值分析教程(图文代码)》入职测试中的一道题,要求:从Akshare下载某一个股票近十年的财务报表包括,资产负债表,利润表,现金流量表,保存... 目录一、前言二、核心知识点梳理1、Akshare数据获取2、Pandas数据处理3、Matplotl

Django开发时如何避免频繁发送短信验证码(python图文代码)

《Django开发时如何避免频繁发送短信验证码(python图文代码)》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁

分布式锁在Spring Boot应用中的实现过程

《分布式锁在SpringBoot应用中的实现过程》文章介绍在SpringBoot中通过自定义Lock注解、LockAspect切面和RedisLockUtils工具类实现分布式锁,确保多实例并发操作... 目录Lock注解LockASPect切面RedisLockUtils工具类总结在现代微服务架构中,分布

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的

精选20个好玩又实用的的Python实战项目(有图文代码)

《精选20个好玩又实用的的Python实战项目(有图文代码)》文章介绍了20个实用Python项目,涵盖游戏开发、工具应用、图像处理、机器学习等,使用Tkinter、PIL、OpenCV、Kivy等库... 目录① 猜字游戏② 闹钟③ 骰子模拟器④ 二维码⑤ 语言检测⑥ 加密和解密⑦ URL缩短⑧ 音乐播放

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我

MySQL中EXISTS与IN用法使用与对比分析

《MySQL中EXISTS与IN用法使用与对比分析》在MySQL中,EXISTS和IN都用于子查询中根据另一个查询的结果来过滤主查询的记录,本文将基于工作原理、效率和应用场景进行全面对比... 目录一、基本用法详解1. IN 运算符2. EXISTS 运算符二、EXISTS 与 IN 的选择策略三、性能对比