Android新布局方式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的。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Android利用ConstraintLayout实现漂亮的动画详解

    Android利用ConstraintLayout实现漂亮的动画详解

    前言 最近ConstrainLayout是Android中比较火的一个东西.ConstrainLayout可以使View层级扁平化,提升性能,支持任意的边框,其目的就是修复之前layout的一些短板.其实ConstrainLayout还有一个大多数人没有注意到的特性:可以利用Constrainlayout快速构建漂亮的动画效果. 方法 我这里假设已经你已经掌握了Constrainlayout基本知识(比如:app:layout_constraintLeft_toLeftOf等).Constrai

  • Android新特性ConstraintLayout完全解析

    Android新特性ConstraintLayout完全解析

    本文同步发表于我的微信公众号,在微信搜索 郭霖 即可关注,每天都有文章更新. 今天给大家带来2017年的第一篇文章,这里先祝大家新年好. 本篇文章的主题是ConstraintLayout.其实ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在去年的I/O大会上重点宣传的一个功能.我们都知道,在传统的Android开发当中,界面基本都是靠编写XML代码完成的,虽然Android Studio也支持可视化的方式来编写界面,但是操作起来并不方

  • Android新布局方式ConstraintLayout快速入门教程

    Android新布局方式ConstraintLayout快速入门教程

    前言 在Android开发中,我们通常是手写布局,很少会用拖动来写布局,虽然ConstraintLayout在I/O上以拖动来展现了各种功能,我估计在以后开发中,程序员还是习惯手撸代码. 我自己试着拖着用了一下,用得不是很明白 ,而且用起来效果不是很好. 那么 直接上手撸了一下~~~ 其实很简单 Button1:app:layout_constraintBottom_toTopOf="@id/iv_head" 我们把这个属性拆开来看,constraintBottom指的本身的底部,即B

  • jQuery Easyui快速入门教程

    jQuery Easyui快速入门教程

    1.什么是JQuery EasyUI jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只是一些简单的html标签. 2.学习jQuery EasyUI的条件 因为JQueryEasyUI是基于jQuery的UI库,所以,必须需要JQuery课程的基础. 3.JQuery EasyUI的特点 基于JQu

  • OpenStack云计算快速入门教程(1)之OpenStack及其构成简介

    OpenStack云计算快速入门教程(1)之OpenStack及其构成简介

    该教程基于Ubuntu12.04版,它将帮助读者建立起一份OpenStack最小化安装.我是五岳之巅,翻译中多采用意译法,所以个别词与原版有出入,请大家谅解.我不是英语专业,我觉着搞技术最重要的就是理解,而不是四级和考研中那烦人的英译汉,所以我的目标是忠于原意.通俗表达,Over.英文原文在这里(http://docs.openstack.org/es@***/openstack-compute/starter/content/ ,请将ex@***中的@去掉,CU屏蔽的F词),下面步入正题: 第

  • ReactJs快速入门教程(精华版)

    ReactJs快速入门教程(精华版)

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~   一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西

  • Vue.js 60分钟快速入门教程

    Vue.js 60分钟快速入门教程

    vuejs是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 当

  • Navicat使用快速入门教程

    学习数据库的时候,经常接触到 navicat 这个管理数据库的工具.下面介绍这个数据库管理工具的使用. 一. 连接使用 1.1 连接数据库 打开 navicat ,点击 连接 ,选择 数据库 弹出以下界面 (以MySQL为例),熟悉各部分的作用 测试是否可以连接,有以下提示,点击确定开始使用数据库 双击 或 右键 打开连接,图标变亮表示已经打开连接 1.2 操作数据库 右键 连接 ,点击 新建数据库 输入 数据库名 和 编码规则 双击 或 右键 打开数据库(灰色图标变亮表示打开) 二. 导入备份

  • Nginx服务快速入门教程

    Nginx服务快速入门教程

    一.Nginx介绍 1. 什么是Nginx? Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务. 其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好. 2. 为什么要使用Nginx? 随着当今互联网的迅速发展,单点服务器早已无法承载上万个乃至数十万个用户的持续访问.比如一台Tomcat服务器在理想状态下只能够可以承受住2000个左右的并发量,为了解决这个问题,就需要多台Tomcat服

  • Springboot快速入门教程

    Springboot快速入门教程

    入门Springboot 项目创建在IDEA中创建即可. 注意点: 1.所有文件都需要放在 : Application文件的同级或下级目录中 2.application.properties 为 spring-boot 项目主核心配置文件,且只能有一个核心配置文件. 3.多环境下的核心配置文件的使用, 文件名必须以 application- 开头!   application-xxx.properties (1)开发环境 # 开发环境配置文件 server.port=9000 server.se

  • Unity3D快速入门教程

    Unity3D快速入门教程

    Unity3D游戏引擎介绍 Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎.使用Unity3D,开发者可以快速的开发出游戏.Unity3D引擎占据了游戏引擎市场45%的份额,居全球首位.因此,学习游戏开发,Unity3D的人才需求量最为庞大. Unity3D学习历程 俗话说,万事开头难.Unity3D的学习历程也是一样.学习Unity3D,大致分为以下

  • ASP.NET Core快速入门教程

    ASP.NET Core快速入门教程

    目录 第一课 基本概念 第二课 控制器的介绍 第三课 视图与表单 第四课 数据验证 第五课 路由规则 第六课 应用发布与部署 源码地址 第一课 基本概念 基本概念 Asp.Net Core Mvc是.NET Core平台下的一种Web应用开发框架 符合Web应用特点 .NET Core跨平台解决方案 MVC设计模式的一种实现 环境准备 安装最新版Visual Studio 2017 安装最新版.NET Core Sdk 第二课 控制器的介绍 控制器定义方式: 命名以Controller结尾 使用

随机推荐