zoukankan      html  css  js  c++  java
  • iOS屏幕适配教程(手动布局和自动布局)

    iOS屏幕适配教程

      1.通过frame进行适配

    在iOS早期开发,都是使用frame属性进行屏幕适配,需要多套代码,非常麻烦。

    //使用frame添加控件view,并设置属性,但是只能使用指定屏幕尺寸
        [super didReceiveMemoryWarning];
        UIView *greenView=[[UIView alloc]init];
        greenView.frame=CGRectMake(20, 20, 20, 20);
        greenView.backgroundColor=[UIColor greenColor];
        [self.view addSubview:greenView];

    2.Autoresizing实现适配

    随着iOS的发展,后期苹果公司添加了Autoresizing功能,用来约束父子控件之间的关系,以父控件作为参照进行设置,设置相应的参数。相应可用拖拽来实现,下面列出用代码实现的方法

    //设置两个view,通过代码实现两个view(blueView,redView)一起变化
    @interface ViewController ()
    @property(nonatomic,weak)UIView *blueView;
    //此处声明redView父控件blueView
    @end
    
    @implementation ViewController
    - (void)viewDidLoad {
        [super viewDidLoad];
    //    1.创建蓝色的视图
        UIView *blueView = [[UIView alloc]init];
        blueView.frame =  CGRectMake(0, 0, 200, 200);
        blueView.backgroundColor = [UIColor blueColor];
        [self.view addSubview:blueView];
        self.blueView = blueView;
    //    2.创建红色的视图
        UIView *redView = [[UIView alloc]init];
        CGFloat redViewH = 30;
        redView.frame = CGRectMake(0, 170, 200, redViewH);
        redView.backgroundColor = [UIColor redColor];
        [blueView addSubview:redView];
    //    3.当修改蓝色视图的frame的时候,红色的视图跟着变化
    //    红色的宽带随着蓝色的宽度变化而变化,距离顶部的间距始终是拉伸的
    //    UIViewAutoresizingNone                 = 0,     //无拉伸
    //    UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,//距离左边拉伸
    //    UIViewAutoresizingFlexibleWidth        = 1 << 1,//宽度拉伸
    //    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,//距离右边边拉伸
    //    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,//顶部拉伸
    //    UIViewAutoresizingFlexibleHeight       = 1 << 4,//高度拉伸
        redView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
    /**
     *  当点击屏幕的时候就会触发这个方法,点击的时候,让蓝色视图的frame变化。
     *
     *  @param touches <#touches description#>
     *  @param event   <#event description#>
     */
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ 
        CGRect tempFrame = self.blueView.frame;
        tempFrame.size.width +=30;
        tempFrame.size.height +=30;
        self.blueView.frame = tempFrame;
    }
    @end

    3.Aotolayout实现适配

    因为autorezing不能设置同级控件之间的关系,假设在竖屏下, 屏幕底部有两个按钮, 这两个按钮的间距为一个固定的值(宽度不指定); 当切换为横屏的时候要求这两个按钮还显示在屏幕底部, 并且按钮间的间距不变, 按钮可以随之变宽,通过autorezing是无法实现的,所以在iOS6之后,苹果公司推出aotolayout,既可以设置父子控件之间的关系也可以设置同级控件之间的关系,一经推出便在ios7开始大规模使用。

    aotolayout里边的两个核心概念:约束和参照,一般一个控件确定位置需要四个约束,且这些约束都有相应参照的控件。

    在使用aotolayout设置控件的时候,屏幕上控件的的位置区域会有两种颜色:

    黄色:表示当前的显示效果和实际效果不匹配,需要更新frame

    红色:表示约束不完整,约束冲突(表示两个或者多个约束约束的效果不一致)

    在开发的时候基本都是使用拖拽及设置参数的方法进行设置,相对较为简单,本位就不加赘述,下面笔者通过代码进行设置

    1 //    创建一个蓝色的View视图
    2     UIView*blueView=[[UIView alloc]init];
    3     blueView.backgroundColor=[UIColor  blueColor];
    4     [self.view addSubview:blueView];

    因为AutoLayout和Autoresizing不能重用,因此需要去掉autoresizing,所以可能添加约束的控件

    1 //去掉所以可能添加约束的控件的autoresizing属性
    2     self.view.translatesAutoresizingMaskIntoConstraints=NO;
    3     blueView.translatesAutoresizingMaskIntoConstraints=NO;

     给控件的属性赋值 ,并添加在对应视图上

        //设置left
    NSLayoutConstraint *leftBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
         //设置right
        NSLayoutConstraint *rightBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
        //设置top
        NSLayoutConstraint *topBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30];
        //设置height
        NSLayoutConstraint *heighBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:30];
        //添加到对应参照控件上
        [self.view addConstraints:@[leftBlue,rightBlue,topBlue]];
        [blueView addConstraint:heightBlue];

     可以看到,通过代码实现autolayout方法非常麻烦,因此通过拖拽创建相对方便快捷,但是在做一些支付信息,密码保护等功能的时候,尽量使用代码进行创建。

    4.通过sizeClass进行适配

    因为autolayout不能满足设置一套约束,在所有的屏幕都适配,所以出现了sizeClass,size用来区分屏幕

    sizeclass中把宽高各分成了三种类型regualr,compact,any,当宽度和高度各是某种类型的时候,就会确定某一类屏幕,当宽高均为any的时候,即可适配所有屏幕。所以确定九类屏幕,只是不屏幕进行了区分,具体的约束关系,但是具体的实现还需要autolayout来实现。

  • 相关阅读:
    使用Pandas groupby连接来自多行的字符串
    Pandas数据分析介绍
    SQL Server 32位数据源与64位数据源区别
    SQL Server install
    windows 远程提示CredSSP
    linux 终端下以图形界面打开当前文件夹
    Linux g++ include link
    undefined reference to symbol 'pthread_create@@GLIBC_2.2.5'
    Linux下的库操作工具-nm、ar、ldd、ldconfig和ld.so
    git update
  • 原文地址:https://www.cnblogs.com/xiejw/p/5136667.html
Copyright © 2011-2022 走看看