有时候在布局界面的时候,UI要求某个View或者某张图片按比例显示,以适应不同的屏幕分辨率。

通常我们时通过自定义View或者引入第三方的库来解决。现在我们既然已经使用了ConstraintLayout,它本身就支持这样的按比例设置View大小的功能。

下面我们来介绍如何使用:

  1. 首先我们在布局中添加一个View:

此时,没有添加任何约束,显示的比例就是原始图片的比例。

  1. 添加水平方向的约束:

添加完水平方向的约束后,注意此时默认的宽高为wrap_content。

  1. 将高度设置为match_constraint

如上图:这里我们将高度设置为match_constraint,然后发现下面出现了一个三角,这个就是设置View比例的地方。

  1. 设置View比例

下面我们点击这个三角形,并设置宽高的比例:

  • 1:1

  • 1:2

这里设置的是宽度:高度的比例,我们查看源码可以看到这个属性:

此时我们改变View的宽度,就会发现其高度也会保持这个比例而相应地变化了:

总结

本文我们是以宽度:高度进行View比例的设置,当然我们也可以以高度:宽度进行设置,道理都是一样的。

设置View的比例也是ConstraintLayout相对于传统的布局容器一个强大的功能,它使得布局更加灵活,更加容易得进行屏幕适配。

下一篇:Android开发 - 掌握ConstraintLayout(十一)复杂动画!如此简单!,我们将介绍使用ConstraintLayout创建复杂动画。

如有更多疑问,请参考我的其它Android相关博客:我的博客地址

Android开发 - 掌握ConstraintLayout(十)按比例设置视图大小的更多相关文章

  1. Android开发 - 掌握ConstraintLayout(九)分组(Group)

    使用ConstraintLayout后我们的布局是没有层级关系的,各个View之间都是平级关系,但是如果根据某个业务条件来控制多个View的显示与否,我们需要分别对每个View进行控制,需要调用多次s ...

  2. Android开发 - 掌握ConstraintLayout(七)辅助线(Guideline)

    了解过UI设计的同学都知道,在设计的时候,我们经常在界面上拖进一些辅助线来帮我们对齐UI元素,或者方便我们统一的页边距. 在ConstraintLayout的编辑器中,同样也支持这样的功能,我们可以创 ...

  3. Android开发 - 掌握ConstraintLayout(六)链条(Chains)

    本文我们介绍链条(Chains),使用它可以将多个View连接起来,互相约束. 可以创建横向的链条,也可以创建纵向的链条,我们以横向的链条举例: 我们先创建三个按钮: 我们选中三个按钮后在上面点右键创 ...

  4. Android开发 - 掌握ConstraintLayout(五)偏差(Bias)

    比如实现这样一个场景: "在屏幕宽度的1/4的地方放置一个View" 使用传统布局时,实现按照屏幕的宽度(高度),或者相对两个View之间距离的一个比例来进行布局,就显得非常麻烦, ...

  5. Android开发 - 掌握ConstraintLayout(二)介绍

    介绍 发布时间 ConstraintLayout是在2016的Google I/O大会上发布的,经过这么长时间的更新,现在已经非常稳定. 支持Android 2.3(API 9)+ 目前的Androi ...

  6. Android开发 - 掌握ConstraintLayout(八)障碍线(Barrier)

    本文我们来介绍障碍线(Barrier)的使用,平常在开发中用的相对要少一些,但是在需要时会非常方便. 它的作用是将多个元素放到这个障碍线里面使时,其中的任何元素的大小或位置变化时都会使它的位置进行改变 ...

  7. Android开发 - 掌握ConstraintLayout(四)创建基本约束

    上一篇我们介绍了编辑器的基本使用,本文我们介绍创建基本的约束. "约束"表示View之间的位置关系.当我们在ConstraintLayout布局中创建View时,如果我们没有添加任 ...

  8. Android开发 - 掌握ConstraintLayout(三)编辑器

    从本篇博客开始我们开始介绍如何使用ConstraintLayout. 既然ConstraintLayout叫约束布局,首先我们先介绍什么叫约束(Constraints): 约束(Constraints ...

  9. Android开发 - 掌握ConstraintLayout(一)传统布局的问题

    在传统的Android开发中,页面布局占用了我们很多的开发时间,而且面对复杂页面的时候,传统的一些布局会显得非常复杂,每种布局都有特定的应用场景,我们通常需要各种布局结合起来使用来实现复杂的页面.随着 ...

随机推荐

  1. RESTful Web服务与“大”Web服务: 做出正确的建筑决策

    猜测:REST服务的不足之处 问题:WS- *与REST的争论 结论:REST在灵活性和控制方面得分更高,但需要大量的低级编码; WS- *提供更好的工具支持和编程接口方便,但引入了对供应商和开源项目 ...

  2. 轻量级富文本编辑器wangEditor

    开发公司一个系统的时候需要一个富文本编辑器,找了几个,最后选择这个,蛮不错的. 百度搜索wangEditor,进入官网根据所介绍的使用进行开发就可以了,很不错的一个工具.

  3. 内置函数-fliter

    def is_odd(x): return x % 2 == 1 ret = filter(is_odd, [1,4,6,7,9]) print(ret) for i in ret: print(i) ...

  4. MySQL数据库(增删改查语句)

    MySQL数据库(增删改查语句)一.登录数据库:---->  mysql -uroot -proot;(对应用户名和密码)二.SQL语句:    数据定义语言DDL  用来定义数据库.表.列,关 ...

  5. 基于SRS+OBS搭建直播系统

    这段时间与视频,直播相关的技术不可谓不热,今天我们就近距离接触下,尽早搭上这班车! 我们先看一张效果图 左边是OBS 推流端,右边是VLC播放器,稍微有延迟! 本文是基于VMware(12.5.7)+ ...

  6. 新手必备的Linux知识

    测试人员为什么学习linux? 对于软件测试人员来说,我们测试的任何产品都是基于操作系统.比如我们每天都在使用的QQ软件,它有windows.ios.Android.Mac OS等版本,需要把QQ安装 ...

  7. 网址导航19A

    [导航] KIM主页 265导航 好866 [名站] 百度 网易 腾讯 新华 中新 凤凰 [新闻] 联合早报  南方周末  澎湃新闻 [系统] 宋永志 蒲公英 技术员 装机网 系统之家 [软件] 星愿 ...

  8. 教你如何用ps制作紫色光斑效果

    1.新建800x800画布 2.设置前景色和背景色分别为#b38adb ,#212121;执行"滤镜"-"渲染"-"云彩"操作 3.执行&q ...

  9. Numpy 矩阵库(Matrix)

    Numpy 中包含了一个矩阵库 numpy.matlib, 该模块中的函数返回的是一个矩阵, 而不是 ndarray 对象. 一个 m * n de 矩阵是一个 有 m 行(row) n 列(colu ...

  10. 在IDEA下导入Maven项目之后 Dependencies报红线

    在IDEA中导入新的Maven项目之后,许多jar包出现波浪线的情况,在网上搜了很多办法都不管,什么直接删掉pom文件中的依赖,保存之后,刷新再ctrl+z 撤回 问题就消失了, 还有的说,你可以直接 ...