• Objective-c——UI基础开发第十天(自动布局)


    一、autoresizing 的使用(了解)

    只能参照父控件

    1、实现横竖屏幕切换,不能把控件的frame血丝,需要进行屏幕适配

    2、需要参照父控件

    use auto layout禁用

    才会出现autoresizing

    3、autolayout和autoresizing是互斥的

    不通过运行来查看不同尺寸下的情况

    preview-》mainstoryboard

    4、外侧的四根线勾选,表示该view距离父控件四周的边界的距离保持不变

    内侧的两根线表示表示宽度和高度会随着父view 的变化而变化(等比例变化

    二、autoresizing代码的实现和弊端

    6根线,外侧四根控制与父控件的距离

    内侧两个记录与父控件之间的相对变化

    autoresizingMask

    UIViewAutoresizingFlexibleTopMargin

    UIViewAutoresizingNone

    UIViewAutoresingFlexibleHeight

    去 | 或号

    autoresing只适用子view和父view的

    子view 和子view直接没法设置

    只需要记住6根线的使用

    autolayout(使用病掌握)

    三、autolayout的基本使用

    autolayout核心思想 :参照和约束

    可以设置控件和任意控件的约束

    创建项目 可以禁用size class

    UIStackView 除外,其它都应用autolayout

    (align pin (大头钉 有固定的意思)resolve auto layout issues(解决auto layout问题

    align上面的一些灰色:针对多个控件的设置

    leading edge 左边距(leading头部

    Trialling edge 右边距

    top edge  上边距

    bottom edge 下边距

    horizontal centers 水平居中

    vertical centers 垂直居中

    basinlines 基线,一般表示底部

    -——----以上,针对多个控件的对齐方式

    horizontal in container

    vertically in container 

    add constraints 增加约束

    当显示红线的时候:

    表示缺少关键约束

    或是约束冲突

    ————————以上针对align

    添加宽高:pin中设置

    也有四根线:constraints

    表示该控件和其他控件的距离

    width:表示本身的宽高

    height

    灰色:equal widths/equal heights :设置多个控件等宽等高的情况下

    ——-----————以上真对pin

    当显示黄线的时候:

    表示约束和实际的位置不相符合

    resolve auto layout issues(解决autoolayout问题

    selected views

    update frame

    update constraints

    all views in view controller

    更新约束只是让它去适应现在的约束

    四、autolayout设置边界

    使用autolayout的时候,稍不注意容易被添加一些值或者减少一些值 constant会产生偏移

    (使用第三方库解决自动布局问题可以推荐)

    使用了sutolayout 就不要再使用frame :没有frame的概念

    autolayout 要确定宽高和x、y你只需设置约束就好,不需要去计算

    五、使用autolayout设置边界

    pin中:constant to margins 的勾选是什么?

    xcode自动帮你添加的间距

    在自己设置的时候,把勾选去掉

    当设置上下左右设置间距的时候有问题:是上边距是针对 状态条下方进行设置的距离

    解决:点击下选箭头的按钮:出现:top layout guide /view(current distance)

    同样点击:bottom layout guide/view(current distance

    有什么差别呢:

    top layout guide 和bottom layout guide

    是针对导航控制器和tabbar 设置的 

    六、auto layout 设置兄弟view之间的约束

    clean constant 可以将约束清空

    高度相等,顶部和底部对其

    七、autolayout的上下约束设置

    核心公式:

    被约束view 的width = 参照view 的width * 系数 + 常量

    八、autolayout的小技巧

    设置图片并添加约束

    1、

    先添加图片再进行居中显示,红线消失,而不需要设置宽高

    一开始居中但没有图片的时候,会出现红线

    原因:设置完图片之后,会默认使用图片的宽高

    2、拖放小控件的时候,添加上下距离的约束,没设置宽高也不会出现红线:原因是有些控件是有默认宽高的像(switch、button、textfield,虽然有默认宽高,但会出现与实际不符的黄线,因为你需要修改它的宽度,否则默认宽度较短

    3、

    九、小应用

    图片无压缩怎么设置(边界不能设置)

    那么就设置中心点(只需设置图片的xy)宽高根据图片而定

    1X 

    2X 

    使用1x而把图片放在2X图片会放大两倍

    把多出来的截掉

    垂直或水平居中,再用当前的位置进行计算,也就是说都是相对于中心点的变动

    中心点是个相对的位置

    上面屏幕的高度是不一样的,所以才以中心点为参照(即便中心点在变,始终是一个相对的位置

    十、autolayout代码实现

    添加约束的规则:

    1)对于两个同层级view之间的约束关系,添加到它们的父view上

    2)对于两个不同层级的view之间的约束关系,添加到离它们最近的共同父view上

    3)对于有层次关系的两个view之间的约束关系,添加到层次较高的view上

    高度为什么可以添加到自己身上:因为没有做任何参照

    和其他的view有关系的一般要添加到父view上

    代码实现

    一定要把view 的autoresizing属性给禁用掉(因为是互斥关系

    review.translatesAutoresizingMaskIntoConstraints=NO;

    否则添加的约束都是没有作用的

    1添加顶部的约束(核心公式

    NSLayoutConstraint *blueTop =[NSLayoutCOnstraint  constraintWithItem://被约束的view

    attribute: NSLayoutAttributeLeft 被约束的属性

    relatedBy :NSLayoutRelationGreaterThanOrEqual

    toItem:参照的view

    attribute:参照view的属性

    multiplier:乘

    constant:20加

    2设置完约束之后,添加到谁身上

    //如果有子view和父view 的关系的话,就添加到父view上

    self.view addConstraint:/addConstraints[后面会用到]

    3添加blueview的高度约束

    NSLayoutConstraint *height =[NSLAyoutCOnstraint constraintWithItem attribute: toItem:nil attribute:NSLayoutAttributeNotAnAttribute

    需要注意设置高度的时候,没有参照view就传nil 属性传NSLayoutNotAnAttribute

    注意,右侧传入的constant 要负数

    添加到哪?

    如果添加到父view上也可以,添加到自己身上也可以 因为没有任何参照

    十一、添加红色view

    输入法:通用:中文时使用英文标示

    注意:

    1、千万不要忘记关闭translatesAutoresizingMaskIntoContraints属性

    2、一定要保证相关控件都已经在各自的父控件上

    3、不要给view设置frame

    review的约束,是参照blueview

     十二、VFL语言的使用

    (可视化格式语言)

    语法解释:

    @“H:|-20-[review]-20-|”

    H:表示水平方向

    V:表示垂直方向

    |- 边界 左/右(和左侧边界有距离,距离为20)

    [review]

    @“V:|-20-[review(50)]-20-[purpleview(==redView)”

    V:表示垂直方向

    |-20-[review(50)]:review 距离顶部的高度是20间距,自身的高度为50

    purpleVIew 的高度和review 相等,purpleView距离review 有20的间距

    在设置宽度的时候

    addConstraints:因为设置约束的时候不止设置一个view

    水平方向上红色view和紫色view相等

    @“H:[purple view(==redView)]”

    ==redView*0.5为什么解析不了?

    因为:VFL语言不支持乘法除法

    所以如果要实现宽度一半的情况只能原先的设置方式

    constraintsWithVisualFormat:放置VFL语言

    水平方向上要不对top要不对bottom不能左右

    垂直方向上只能左右不能上下

    metrics:字典@{@“delte”:@20}

    view:@{@“redView”:redView}]对应出现的对象

  • 相关阅读:
    天平天国和诗,和远方,和苟且
    ui设计师做好这几点,产品经理准闭嘴
    谈谈个人视觉创意的学习经验
    保持觉知
    第37周本人进步点
    扒一扒万恶的导航网站
    16年第四本《简单的逻辑学》
    hey,开通个人公众号啦!
    今朝有酒今朝醉,也是一种理性-附个人心得
    元素的定位
  • 原文地址:https://www.cnblogs.com/CityPe/p/5380749.html
Copyright © 2020-2023  润新知