全网最清晰的ConstraintLayout教程
ConstraintLayout是AndroidStudio2.2新增的一个功能,那么这个到底是什么呢?首先第一点我们知道传统的安卓开发,页面基本都是XML编写实现,特别在一些复杂的页面上需要嵌套多层,降低了页面加载的效率,因为ConstraintLayout就可以很好的优化布局,还有一点我们羡慕IOS的拖拽XML页面在这里也可以更好的实现。当然我所说的以上两点都是优化以前的布局,这也是Google极力要做的事情
开始
想要使用ConstraintLayout,首先AS版本必须升级到2.2以上(我基本都是逢新必更),首先需要在app/build.gradle文件中添加ConstraintLayout依赖
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
复制代码
然后在项目的build.gradle文件buildscript和allprojects的repositories中添加google()
allprojects {
repositories {
google()
jcenter()
}
}
复制代码
然后同步就可以愉快的使用ConstraintLayout了~~
首先我们按照Google文档的顺序依次学习https://developer.android.com/reference/android/support/constraint/ConstraintLayout 先来一波api
1. layout_constraint[自身控件位置]_to[目标控件位置]Of=="[目标控件ID]"
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
看到这些猜也能猜出个大概~比如layout_constraintLeft_toLeftOf就是说当前控件的Left在目标控件的Left上。如果目标控件为父控件则id可以直接写成parent。比如要实现B控件在A控件右面,则在B控件中设置layout_constraintLeft_toRightOf。意思就是说B控件的左面在A控件的右面~
2. Margins
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
这个与之前其他viewgroup属性一致,不一样的就是多了以下几点:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
goneMargin属性是指目标控件GONE掉之后,自身控件可以设置个margin值,这里有一点需要敲黑板,目标控件就是相对于的那个控件
3. Bias
- `layout_constraintHorizontal_bias``
layout_constraintVertical_bias
这个属性的意思是可以使用偏差属性调整定位以使一侧偏向另一侧,即控件距离左右百分比(layout_constraintHorizontal_bias
)和距离上下百分比(layout_constraintVertical_bias)
4. WRAP_CONTENT : enforcing constraints (*Added in 1.1*)
强制约束
app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
true代表防止约束失效,默认为false,比如:B在A的右边app:layout_constraintLeft_toRightOf="@+id/a",但是当A的内容越来越多并且超过了A到父控件最右的距离,此时就会约束失效使B的一部分出现了A的非右边。如果B设置了该属性为true,则B始终出现在A的右边,不会发生约束失效
5. Ratio
app:layout_constraintDimensionRatio="H,16:9"
复制代码
不用多说百分比布局是android中常用的一种适配布局H或W则代表以高或宽为基准
6. Guideline
layout_constraintGuide_begin 距离父容器起始位置的距离(左侧或顶部)
layout_constraintGuide_end 距离父容器结束位置的距离(右侧或底部)
layout_constraintGuide_percent 距离父容器宽度或高度的百分比
其实很好理解,比如
<android.support.constraint.Guideline
android:id="@+id/guide1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/guide1" />
复制代码
则表示在垂直方向上画一根基准线(只是参考线,并不进行view绘制)然后其他控件可以根据这条线进行放置
7. Barrier
<android.support.v7.widget.AppCompatButton
android:id="@+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="a" />
<android.support.v7.widget.AppCompatButton
android:id="@+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bbbbbbbbbbbbbbb"
app:layout_constraintTop_toBottomOf="@+id/a" />
<android.support.v7.widget.AppCompatButton
android:id="@+id/c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="c"
app:layout_constraintLeft_toRightOf="@+id/barrier" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="a,b" />
复制代码
显而易见,你可以把他看做一个容器constraint_referenced_ids=控件id,然后把这些控件看做一个整体
8. Group
它和Barrier有异曲同工之处,相同的都是你可以把他们看做一个容器,不同的是他是控制整个容器之中的所有的控件的可见或者不可见,比如android:visibility="gone",那它所包裹的左右控件都会gone。
当然ConstraintLayout的Api不止这些,需要我们真真切切的去使用它,你会发现它真的很好用~
参考
Android开发文档 [Developer][developer.android.com/reference/a…]
全网最清晰的ConstraintLayout教程的更多相关文章
- 全网最贴心webpack系列教程和配套代码
webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...
- Win7+CentOS双系统,最清晰细致的教程!
Win7的系统下安装CentOS,实现双系统切换使用的目的,希望对大家有帮助. 注意: 1.由于涉及到对硬盘操作,请妥善备份数据,避免损失. 2.我的步骤是绝对正确和缺一不可的,大家一定要按照我的操作 ...
- Nginx安装(我觉得我这篇可能是全网最清晰的一篇安装步骤了)
原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/46aadb8f-5 ...
- 3天学会kettle -全网最全的kettle教程
从资源库开始,详细讲解了kettle的所有控件的用法,无论你是开发人员.运维人员还是测试人员. 通过此教程都可以很快速的掌握kettle,再加上笔者的实例,3天学会kettle的实战操作. 欢迎关注公 ...
- 全网最全postman接口测试教程和接口项目实战~从入门到精通!!!
Postman实现接口测试内容大纲一览: 一.什么是接口?为什么需要接口? 接口指的是实体或者软件提供给外界的一种服务. 因为接口能使我们的实体或者软件的内部数据能够被外部进行修改.从而使得内 ...
- 全网最全fiddler使用教程和fiddler如何抓包(fiddler手机抓包)-笔者亲测
一.前言 抓包工具有很多,比如常用的抓包工具Httpwatch,通用的强大的抓包工具Wireshark.为什么使用fiddler?原因如下:1.Wireshark是通用的抓包工具,但是比较庞大,对于只 ...
- 文本编辑器激活系列(一):Sublime 安装、激活、汉化教程
如您激活出现问题,请点击这里加入:软件激活问题解决群 前言 推荐几款文本编辑器: Sublime:内嵌python解释器.大量插件 EditPlus:语法着色.内嵌浏览器 Notepad++:所见即所 ...
- IntelliJ IDEA简体中文专题教程
说明:应该是全网最全的中文教程了,包括一些常用的快捷键和配置等等.是的,我已经转IntelliJ IDEA了. 来自judasn的IntelliJ IDEA简体中文专题教程: https://gith ...
- 在虚拟机中安装Linux系统CentOS7详细教程!!!超详细!!!!一看就会!!!手把手教学!!!
一.CentOS的下载 CentOS是免费版,推荐在官网上直接下载.https://www.centos.org/download/ DVD ISO:普通光盘完整安装版镜像,可离线安装到计算机硬盘上, ...
随机推荐
- 基于OAuth2.0的token无感知刷新
目前手头的vue项目关于权限一块有一个需求,其实架构师很早就要求我做了,但是由于这个紧急程度不是很高,最近临近项目上线,我才想起,于是赶紧补上这个功能.这个项目是基于OAuth2.0认证,需要在每个请 ...
- 下载安装配置 Spark-2.4.5 以及 sbt1.3.8 打包程序
文章更新于:2020-03-29 按照惯例,文件附上链接放在文首. 文件名:spark-2.4.5-bin-without-hadoop.tgz 文件大小:159 MB 下载链接:https://mi ...
- How to setup a Alpine Linux mirror
How to setup a Alpine Linux mirror Contents 1 Introduction 2 Setting up the cron job 3 Setting up ...
- 百度AI开发平台简介
AIstudio https://aistudio.baidu.com/aistudio/index 关于AI Studio AI Studio是基于百度深度学习平台飞桨的一站式AI开发平台,提供在线 ...
- [书籍精读]《React Native精解与实战》精读笔记分享
写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...
- 详解 Collection集合
(请关注 本人"集合总集篇"博文--<详解 集合框架>) 首先,本人来讲解下 Collection集合的继承体系: Collection集合 的继承体系: Collec ...
- 9. js屏幕截图
html2canvas 该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”.屏幕截图基于DOM,因此它可能不是真实表示的100%准确,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息 ...
- 【翻译】TensorFlow卷积神经网络识别CIFAR 10Convolutional Neural Network (CNN)| CIFAR 10 TensorFlow
原网址:https://data-flair.training/blogs/cnn-tensorflow-cifar-10/ by DataFlair Team · Published May 21, ...
- redis: Set集合类型(五)
Set里面的值是不能重复的 Set设置值(头部):sadd myset hello Set获取值:smembers myset 检查Set是否包含某个元素:sismember myset hello ...
- Python爬虫---爬取腾讯动漫全站漫画
目录 操作环境 网页分析 明确目标 提取漫画地址 提取漫画章节地址 提取漫画图片 编写代码 导入需要的模块 获取漫画地址 提取漫画的内容页 提取章节名 获取漫画源网页代码 下载漫画图片 下载结果 完整 ...