Android开发 - 掌握ConstraintLayout(十)按比例设置视图大小
有时候在布局界面的时候,UI要求某个View或者某张图片按比例显示,以适应不同的屏幕分辨率。
通常我们时通过自定义View或者引入第三方的库来解决。现在我们既然已经使用了ConstraintLayout,它本身就支持这样的按比例设置View大小的功能。
下面我们来介绍如何使用:
- 首先我们在布局中添加一个View:
此时,没有添加任何约束,显示的比例就是原始图片的比例。
- 添加水平方向的约束:
添加完水平方向的约束后,注意此时默认的宽高为wrap_content。
- 将高度设置为match_constraint
如上图:这里我们将高度设置为match_constraint,然后发现下面出现了一个三角,这个就是设置View比例的地方。
- 设置View比例
下面我们点击这个三角形,并设置宽高的比例:
1:1
1:2
这里设置的是宽度:高度的比例,我们查看源码可以看到这个属性:
此时我们改变View的宽度,就会发现其高度也会保持这个比例而相应地变化了:
总结
本文我们是以宽度:高度进行View比例的设置,当然我们也可以以高度:宽度进行设置,道理都是一样的。
设置View的比例也是ConstraintLayout相对于传统的布局容器一个强大的功能,它使得布局更加灵活,更加容易得进行屏幕适配。
下一篇:Android开发 - 掌握ConstraintLayout(十一)复杂动画!如此简单!,我们将介绍使用ConstraintLayout创建复杂动画。
如有更多疑问,请参考我的其它Android相关博客:我的博客地址
Android开发 - 掌握ConstraintLayout(十)按比例设置视图大小的更多相关文章
- Android开发 - 掌握ConstraintLayout(九)分组(Group)
使用ConstraintLayout后我们的布局是没有层级关系的,各个View之间都是平级关系,但是如果根据某个业务条件来控制多个View的显示与否,我们需要分别对每个View进行控制,需要调用多次s ...
- Android开发 - 掌握ConstraintLayout(七)辅助线(Guideline)
了解过UI设计的同学都知道,在设计的时候,我们经常在界面上拖进一些辅助线来帮我们对齐UI元素,或者方便我们统一的页边距. 在ConstraintLayout的编辑器中,同样也支持这样的功能,我们可以创 ...
- Android开发 - 掌握ConstraintLayout(六)链条(Chains)
本文我们介绍链条(Chains),使用它可以将多个View连接起来,互相约束. 可以创建横向的链条,也可以创建纵向的链条,我们以横向的链条举例: 我们先创建三个按钮: 我们选中三个按钮后在上面点右键创 ...
- Android开发 - 掌握ConstraintLayout(五)偏差(Bias)
比如实现这样一个场景: "在屏幕宽度的1/4的地方放置一个View" 使用传统布局时,实现按照屏幕的宽度(高度),或者相对两个View之间距离的一个比例来进行布局,就显得非常麻烦, ...
- Android开发 - 掌握ConstraintLayout(二)介绍
介绍 发布时间 ConstraintLayout是在2016的Google I/O大会上发布的,经过这么长时间的更新,现在已经非常稳定. 支持Android 2.3(API 9)+ 目前的Androi ...
- Android开发 - 掌握ConstraintLayout(八)障碍线(Barrier)
本文我们来介绍障碍线(Barrier)的使用,平常在开发中用的相对要少一些,但是在需要时会非常方便. 它的作用是将多个元素放到这个障碍线里面使时,其中的任何元素的大小或位置变化时都会使它的位置进行改变 ...
- Android开发 - 掌握ConstraintLayout(四)创建基本约束
上一篇我们介绍了编辑器的基本使用,本文我们介绍创建基本的约束. "约束"表示View之间的位置关系.当我们在ConstraintLayout布局中创建View时,如果我们没有添加任 ...
- Android开发 - 掌握ConstraintLayout(三)编辑器
从本篇博客开始我们开始介绍如何使用ConstraintLayout. 既然ConstraintLayout叫约束布局,首先我们先介绍什么叫约束(Constraints): 约束(Constraints ...
- Android开发 - 掌握ConstraintLayout(一)传统布局的问题
在传统的Android开发中,页面布局占用了我们很多的开发时间,而且面对复杂页面的时候,传统的一些布局会显得非常复杂,每种布局都有特定的应用场景,我们通常需要各种布局结合起来使用来实现复杂的页面.随着 ...
随机推荐
- 在vscode中使用eslint
一.vs中安装eslint插件 二.npm 全局安装 eslint sudo npm i -g eslint 三.vs终端运行eslint --init 四.在vscode的setting中设置 ...
- 安装使用aria2下载百度网盘内容(转)
原文地址:https://blog.csdn.net/wudi1107/article/details/80728891 安装使用aria2下载百度网盘内容 目前在Linux中没有好用的百度网盘客户端 ...
- ubuntu 环境下 安装虚拟环境
sudo pip3 install virtualenv 安装虚拟环境 sudo pip3 instal virtualenvwrapper #安装虚拟环境扩展包 编辑home目录下面的.bashrc ...
- Module 的语法
模块功能主要由两个命令构成:export和import.export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能. 一个模块就是一个独立的文件.该文件内部的所有变量,外部无法 ...
- 自学elastic search
工作也有一段时间了,虽然来这个公司之后学会了几门不同的语言,但想拨尖还是任重道远. 想往高级程序员甚至是架构师方向发展.他仍然是我的学习对象.我现在做着的,无非是他玩剩下的罢了. luncene之前有 ...
- IEnumerable对象的Distinct方法重写
public static IEnumerable<TSource> DistinctBy<TSource, TKey>(this IEnumerable<TSource ...
- zookeeper资料
ZooKeeper 入门
- 31. pt-variable-advisor
pt-variable-advisor h=192.168.100.101,P=3306,u=admin,p=admin mysqladmin var>/root/test/pt-variabl ...
- numpy.convolve函数用法
函数numpy.convolve(a, v, mode=‘full’),这是numpy函数中的卷积函数库 参数: a:(N,)输入的一维数组 b:(M,)输入的第二个一维数组 mode:{‘full’ ...
- Appium+Python自动化 4 -appium元素定位
appium定位app上的元素方式 在前面文章中有介绍,(通过UIautomator工具查看app元素) appium定位app上的元素,可以通过id,name,class这些属性定位到 1.id 定 ...