zoukankan      html  css  js  c++  java
  • 四、UI开发之核心基础——约束(实用)

    概述

    本节将会介绍最常用的几种约束,基本可以满足90%以上的UI布局要求。

    先附上一份其他优秀博客https://blog.csdn.net/companion_1314/article/details/51823243,该篇博文使用GIF演示了常见约束,很好的给新手一个直观印象,我本人也从其中受益良多,贴在此处以供参考。

    Xcode提供的约束总共可以分为以下六种:

    1. 距离约束

    2. 边长约束

    3. 比例约束

    4. 对齐约束

    5. 容器约束

    6. 伸缩/拉伸等级约束

    接下来我们将对这5种约束进行一一描述。

    距离约束

    任意一个UI控件都是矩形布局,我们将其4边称为“边界”。这个手机屏幕的4边也是“边界”。

    则距离约束指的是,对控件及其四周最近的“边界”间的约束

    例1:上边距0,下边距300,左边距0,右边距0

    例2:在空的storyboard上拖入label“神鸟归位”,并设置约束:上边距0,下边距300,左边距0,右边距0。

    然后再拖入label“菜鸟站边”,并设置约束:上边距0,下边距50, 左边距0, 右边距0。

    边长约束

    边长约束指的是,对控件长宽的约束

    不同于距离约束,边长约束只能确定控件的大小,不能确定其位置,所以必须搭配其他约束才能确定控件。

    例1:左边距0,上边距0,长200,高200

    例2:首先按例1的方式约束label“神鸟归位”,然后拖入新的label“菜鸟看齐”。

    首先设置“菜鸟看齐”的距离约束:左边距0,下边距0。

    然后先选中“菜鸟看齐”,再按住"shift"并选中“神鸟归位”,然后设置“等宽”“等高”约束。

     PS:

    细心的同学可能会注意到,不知从什么时候开始,这里多出来了一个小黄点

    点进去看一下,我们会发现两个关键字:overlapping(覆盖)和clipping(截断)。

    还记得上一节中“举个栗子”那三张图吗?

    这里使用的约束方式(尤其是例1)正式控件默认使用的约束方式。

    当然,这些警告并不妨碍编译,所以我们暂且忽略它们。

    比例约束

    例:首先设置距离约束:上/左/右边距0,并开启比例约束。

    默认的比例约束并非我们想要的(此处为121:36),于是我们将其设置为2:1,并按回车键。

    对齐约束

    例1:首先设置label“神鸟归位”左边距50,上边距50,长200,高200

    然后拖入label“菜鸟站边”,设置上边距50,长200,高200。 

    这时我们会发现左上角出现了一个错误提示,label“菜鸟站边”周边出现了红色框框,这时因为label“菜鸟站边”的约束不够明确(左边位置无法确定)。 

    按住“shift”键依次选中label“菜鸟站边”和label“神鸟归位”,然后选择起始对齐。

    这样我们看到2个labe的左边框都对齐了。

    其他三边的对齐方式与此雷同,此处不再赘述。

    容器约束

    例1:以整个屏幕为容器,然后使用水平中心约束和垂直中心约束

    例2:拖入1个View作为容器

    给容器View添加约束:左/下/右边距0,高300

    拖入1个label至View容器中,这时可以在左边的结构图中看到label“菜鸟先飞”是View的子控件。

    为label“菜鸟先飞”设置垂直中心约束。

    当前约束不足以确定label“菜鸟先飞”的位置,于是我们再为其添加左边距10的约束。

     

    伸缩/拉伸等级约束

    假设我们想实现如下的效果。

    于是我们设置约束如下:

    label“神鸟”:左/上/右边距0,高40

    label“神鸟不语,霸气缕缕”:左/上/右边距0,高40

    (注:先将两个label都放到面板上,且并列放置,否则label“神鸟”会直接约束到屏幕左边界)

    貌似应该很完美,然鹅。。。我们看到的是

    或者是

    到底怎么回事呢?

    每个控件都有1个“收缩等级”(hugging priority)。

    当2个控件共同占有一块区域且2个控件在水平(或垂直)方向有多余空间(比如上述例子),高“收缩等级”控件不动,低“收缩等级”控件拉伸填满区域。

    当2个控件“收缩等级”相同时,就会出现以上报错。

    “收缩等级”分水平方向和垂直方向,以上例子报错的是水平方向“收缩等级”问题:2个label的“收缩等级”都是251。

    我们不妨把左边的label的收缩等级改为“252”。

     

    相应的还有一个拉伸等级(Compression Resistance Priority):

    当2个控件共同占有一块区域且2个控件在水平(或垂直)方向空间不足(比如上述例子),高“拉伸等级”的控件不动,低“拉伸等级”的控件压缩自身内容。

    话不多说,对比看下面2幅图,你就明白“拉伸等级”是什么了。

    小技巧

    当我们在设置约束的时候,控件的初始位置有时候会很关键。

    我们分别为以上2幅图中的“菜鸟居下”添加同样的约束:水平中心约束+上边距20

    结果却不一样:

    我们看到,2种情形对“上边距”的理解是不同的:前者指的是和面板上边界的距离,后者指的是和“神鸟在上”下边界的距离。

    所以我们最好将所要约束的控件放在我们视觉上合适的位置,以便Xcode进行自动识别。

    我们的故事讲到现在,想必大家对UI布局的大部分情节已经了解到七七八八了,以上内容足以让我们应对90%以上的UI布局问题。下一节,我们将介绍其中的“曲折缘由”,给大家一个完整的故事。

    上一节           回目录          下一节

  • 相关阅读:
    Flutter动画(1)动画基础介绍(重要)
    flutter AnimationController动画1
    flutter 动画示例
    Nginx 搭建图片服务器
    dart中list的map方法获取index
    Flutter 视频缩略图
    Flutter:设置字体不随系统字体大小进行改变
    Flutter 屏幕适配flutter_screenutil使用心得
    flutter 软键盘弹起导致定位底部按钮浮动在键盘上的问题
    C++ 代码小技巧(一)
  • 原文地址:https://www.cnblogs.com/ansersion/p/9240068.html
Copyright © 2011-2022 走看看