Code Monkey home page Code Monkey logo

layoutprioritydemo's Introduction

LayoutPriorityDemo

自动布局约束优先级Demo

在Autolayout中每个约束都有一个优先级,优先级的范围是1 ~ 1000,默认创建的约束优先级是最高的1000。 约束优先级主要作用是 "如果存在多套约束的情况下,解决约束冲突",约束优先级的核心原则是“哪个约束的优先级高,就使用哪个约束”

通过约束优先级实现动态布局

有些场景需要动态进行布局,比如竖排的三个View(依此为topview、midview、bottomview),当midview隐藏时,我们希望bottomview紧挨着topview。可以这样设置约束,bottomview与midview竖直间距为0,bottomview与topview竖直间距为0,这是肯定会冲突,我们需要修改bottomview与toview竖直间距为0约束的优先级小于默认值1000。按这样设置后,正常显示时3个view依次排下来,当我们把midview remove时,topview和bottomview依次排下来

固有约束

有些控件能通过自己显示的内容计算出需要的Size,这个自动计算出来size就叫该控件的固有内容大小。这个大小是和需要显示的内容相关的。UIButton,UILabel就是具有固有内容大小属性的控件。UIButton可以根据它的title字符串长度和需要显示的image来计算需要的Size,UILabel可以根据它的text来计算。

以下两个约束简单来说就是固有的约束 Content Hugging Priority: 该优先级表示一个控件抗被拉伸的优先级。优先级越高,越不容易被拉伸,默认是251。 Content Compression Resistance Priority: 该优先级和上面那个优先级相对应,表示一个控件抗压缩的优先级。优先级越高,越不容易被压缩,默认是750

有的控件可以根据它自己的内容来计算自身的大小,比如Label 在使用中大家会发现在设置 x y值 后不用设置大小的约束,也不会报错,并且会根据自身内容改变自己打宽度,这都是取决于这两个约束。

实例1

我们在View中添加了一个UILabel,并为其添加了三个约束:在竖直方向居中,距离左边屏幕150,距离右边屏幕150。为了看到UILabel的实际宽度,我们将Label的背景色置为灰色。 运行看到中间的Label被压缩了,因为左右约束的优先级比固有内容相关的优先级要高,所以Autolayout布局的时候会优先满足左右两个约束。这时候:左边约束宽度(150) + 右边约束宽度(150) + Label的固有内容宽度 > 屏幕宽度。所以最后只能压缩Label显示的宽度。

当我们修改右边的约束优先级为250,这时候UILabel控件的抗压缩约束优先级比右边约束优先级高,Autolayout先满足左边约束,然后满足UILable控件的固有内容Size的宽度,最后来调整右边约束的宽度。表现出来就是UILable抗压缩特性变强了,它更倾向于显示它固有内容Size。这时候被压缩的就是右边的约束。

实例2

水平并排的两个lab,内容总长度大于设备宽度,为了不让两个Label覆盖,我们设定前后Label的水平间距>=10,这时候系统会默认调整前面Label的宽度,使其压缩,来满足后面Label能够完整显示。当我们想让左边lab显示全时,就需要设置右边lab的抗压缩优先级小于左边lab的750(默认值)。

layoutprioritydemo's People

Contributors

xiaodai avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.