一分钟学会 ConstraintLayout 之从属性角度理解布局

ConstraintLayout

在 Android 开发中,我们通常是手写布局,很少会用拖动来写布局,虽然 ConstraintLayout 在 I/O 上以拖动来展现了各种功能,我估计在以后开发中,程序员还是习惯手撸代码。

我自己试着拖着用了一下,用得不是很明白 ,而且用起来效果不是很好。

那么
直接上手撸了一下~~~

其实很简单

Button1:app:layout_constraintBottom_toTopOf="@id/iv_head"

我们把这个属性拆开来看, constraintBottom 指的本身的底部,即 Button1 的顶部, toTopOf 是指 ImageView 的顶部,那么这句话的意思就是
Aligns the bottom of the desired view to the top of another.(官方原文)
翻译一下就是 Button1 的底部要和 ImageView 的顶部对齐

Button1 app:layout_constraintRight_toLeftOf="@id/iv_head"
根据上面的规则我们就知道 Button1 的右边要和 ImageView 的左边对齐。

其实很简单就是说两个 View 的某个方位要对齐

没了,就这么简单,其它属性可以举一反三,它比 RelativeLayout 控制起来更加得以就手。

  • layout_constraintTop_toTopOf ?—? Align the top of the desired view to the top of another.
  • layout_constraintTop_toBottomOf ?—? Align the top of the desired view to the bottom of another.
  • layout_constraintBottom_toTopOf ?—? Align the bottom of the desired view to the top of another.
  • layout_constraintBottom_toBottomOf ?—? Align the bottom of the desired view to the bottom of another.
  • layout_constraintLeft_toTopOf ?—? Align the left of the desired view to the top of another.
  • layout_constraintLeft_toBottomOf ?—? Align the left of the desired view to the bottom of another.
  • layout_constraintLeft_toLeftOf ?—? Align the left of the desired view to the left of another.
  • layout_constraintLeft_toRightOf ?—? Align the left of the desired view to the right of another.
  • layout_constraintRight_toTopOf ?—? Align the right of the desired view to the top of another.
  • layout_constraintRight_toBottomOf ?—? Align the right of the desired view to the bottom of another.
  • layout_constraintRight_toLeftOf ?—? Align the right of the desired view to the left of another.
  • layout_constraintRight_toRightOf ?—? Align the right of the desired view to the right of another.
  • If desired, attributes supporting start and end are also available in place of left and right alignment.

到此,你已经掌握了一大半的 ConstraintLayout 知识点

还有其它的一些属性
app:layout_constraintStart_toEndOf
意思就是 Button 的开始部分(从左往右看,开始部分就是 Button 的左边)与 ImageView 的右边是对齐的。
app:layout_constraintStart_toStartOf
这个就是说 Button 的左边与 ImageView 的左边是对齐的

不知道为什么上面已经出的属性能够满足布局需要了,为什么还要再出 start 和 end 的。

原文:

一分钟学会 ConstraintLayout

http://chenxiaojian.net/quickly-learn-constraintlayout.html

thedesiredviewalign

2 回复  |  直到 2016-06-24 11:17:32 +08:00

 
    1

jianqiu   2016-06-24 10:04:21 +08:00

start 和 end 都是针对某些国家习惯从右到左布局的..保持这种兼容性

 
    2

ChenPing   2016-06-24 11:17:32 +08:00

@jianqiu 原来如此

时间: 2024-10-08 02:38:35

一分钟学会 ConstraintLayout 之从属性角度理解布局的相关文章

十分钟学会Markdown(younghz原创)

younghz原创,转载请注明:http://blog.csdn.net/u012150179/article/details/26503779 原内容及代码托管在GitHub上,并持续更新,欢迎交流:https://github.com/younghz/Markdown 主要内容 MARKDOWN是什么? 谁发明可这么个牛X的东西? 为什么要使用它? 怎么使用? 都谁在用?没人用的东西我可不用. 感觉有意思?趁热打铁,推荐几个工具. 正文 1. MARKDOWN是什么? MARKDOWN是一种

PHP学习过程_Symfony_(3)_整理_十分钟学会Symfony

这篇文章主要介绍了Symfony学习十分钟入门教程,详细介绍了Symfony的安装配置,项目初始化,建立Bundle,设计实体,添加约束,增删改查等基本操作技巧,需要的朋友可以参考下 (此文章已被多人复制转载,原文为我们老板写的"十分钟学会Symfony",不过GItHub已经清理了,所以今天我重新整理一下,不过基本不变) Symfony是一个强大的基于PHP的Web开发框架,在这里我们用十分钟的时间来做一个简单的增删改查的程序, 任何不熟悉Symfony的人都可以通过这个教程完成自己

30分钟学会XAML

1.狂妄的WPF 相对传统的Windows图形编程,需要做很多复杂的工作,引用许多不同的API.例如:WinForm(带控件表单).GDI+(2D图形).DirectX API(3D图形)以及流媒体和流文档等,都需要不同的API来构建应用程序. WPF就是看着上面的操作复杂和不爽,自己决定做老大,想用DirectX技术涵盖一切,于是想要将上述的东西全部融合到自身,减少复杂度,让编程变得爽起来的技术. 而不可否认的是,WPF虽然很狂妄,但是这种技术里面还是有不少的可圈可点的东西.而支持WPF狂妄的

三分钟学会不吃球

[转] [转]三分钟学会不吃球 2014.6.6 一.发下旋短球1. 要点 1)抛球不宜太高,眼睛一定要盯着球:2)手腕的力量大于前臂的力量:3)摩擦球底部,向前的力只要球能过网就行,几乎所有的力用来旋转.4)发球的第一落点在球台中区.二跳下不出台 . 2.特点:使对方不易发力抢拉.冲或抢攻.3.战术:最好是对方吃了直接得分,其次能为下一板创造机会,最次不能使对方直接进攻.二.接下旋球:1.判断:接发球关键是判断,如上图柳哥,球拍触球一瞬间摩擦球下部,由此可判断为下旋球,根据挥拍力量大小判断旋转

两分钟学会Android平台NDK编程(无须Eclipse和cygwin,可使用命令行打包多个so)

之前在进行cocos2dx开发时,已经详细介绍了如何将win32的c++代码移植到Android平台,当再次回顾时,发现一些基础的东西理解并不是很彻底,今天使用Android NDK提供的一个例子做一个简单的移植.在进行该demo前,请确认你已经配置了Android开发环境和安装了最新的Android NDK. 1.创建Android项目 创建一个Android项目 , 包名是com.example.hellojni,创建一个Activity作为程序进入的Acitivity,命名为HelloJn

转:如何学习SQL(第二部分:从关系角度理解SQL)

转自:http://blog.163.com/[email protected]/blog/static/285720652010950825538/ 6. 从关系角度理解SQL 6.1. 关系和表 众所周知,我们目前所用的数据库,通常都是关系数据库.关系自然在其中处于关键位置.初学数据库原理的人可能会很困惑关系和表是什么联系,如果没有清楚的理解,很可能会认为关系这个概念没有实际意义,只会引起混淆.其实这两组概念只是由于理论界与技术界的着重点不同.前者需要用一个专业的.没有歧义的概念来进行理论探

二 从 GPU 的角度理解并行计算

前言 本文从使用 GPU 编程技术的角度来了解计算中并行实现的方法思路. 并行计算中需要考虑的三个重要问题 1. 同步问题 在操作系统原理的相关课程中我们学习过进程间的死锁问题,以及由于资源共享带来的临界资源问题等,这里不做累述. 2. 并发度 有一些问题属于 “易并行” 问题:如矩阵乘法.在这类型问题中,各个运算单元输出的结果是相互独立的,这类问题能够得到很轻松的解决 (通常甚至调用几个类库就能搞定问题). 然而,若各个运算单元之间有依赖关系,那问题就复杂了.在 CUDA 中,块内的通信通过共

3 分钟学会调用 Apache Spark MLlib KMeans

Apache Spark MLlib是Apache Spark体系中重要的一块拼图:提供了机器学习的模块.不过,目前对此网上介绍的文章不是很多.拿KMeans来说,网上有些文章提供了一些示例程序,而这些程序基本和Apache Spark 官网上的程序片断类似:在得到训练模型后,几乎都没有展示如何使用该模型.程序执行流程.结果展示以及举例测试数据等部分.笔者根据Apache Spark官网上的程序片断,写了一个完整的调用MLlib KMeans库的测试程序,并成功在Spark 1.0 + Yarn

10分钟学会基于ASP.NET的 JQuery实例 (转)

本文介绍如何在ASP.NET(ASP.NET/AJAX)里使用基于JQuery的AJAX技术.(源代码下载见最后) 在使用JQuery前,请到www.jquery.com下载最新版本的js代码,然后再代码里使用 <script src="_scripts/jQuery-1.2.6.js" type="text/javascript"></script>即可,当然,由于微软已经把JQuery集成到VS里,所以你可以到WWW.ASP.NET/aj