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

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

约束(Constraints)

一个约束表示View之间的"布局约束"关系,以及约束的位置,类似RelativeLayout的"相对"概念。

编辑器介绍

在工程中我们新建一个布局activity_main.xml,整个界面如下:

这是一个编辑器整体的界面,下面我们来介绍一些常用的功能:

  • 设计/文本视图

左下角有视图切换的选项,通过这个选项我们可以切换设计/(代码)文本视图,传统在开发的过程中可能觉得设计视图并不常用,但是在使用ConstraintLayout时它确实很强大,反而可能很少用代码视图了。

  • 设计/蓝图

这里我们可以看到左上角的按钮,这个是用来切换设计界面和蓝图界面的,通常我们需要两个界面都展示,这样我们可以更加清晰地看到各个View的约束。

  • 设备与分辨率适配

这个功能我们可以切换横竖屏等UI的模式,这个功能也可以使我们方便的进行各种UI模式的适配。

在这里我们可以预览当前布局在不同的分辨率下的效果,这个功能在适配的时候非常方便,这里提一下下面的Custom选项,这个功能允许我们将当前布局拖拽成任意的大小:

  • 自动约束

这个功能允许编辑器自动进行约束,当我们拖拽一个空间到视图中后,编辑器会自动为我们创建一个约束,可能很多时候我们并不需要自动约束,我们可以点击把它关闭。

  • 约束推断

这个按钮类似PS的魔棒,它的功能是进行约束的推断,如图我拖拽了两个按钮到布局中,一开始并没有任何约束,当我点击了这个按钮后,自动为我生成了如图的约束。

代码视图

我们切换到代码视图:

此时我们发现界面的哪些约束在代码中也仅仅增加了几行代码,用来表示当前的约束,仔细观察后我们发现其实都是toStartOf,toEndOf,toTopOf...,这些都是指定的当前View与其它View(或Parent)之间的关系,对比一下RelativeLayout,我们很容易就能明白。

如果当前没有任何约束的时候,我们观察代码:

注意这些tools:xxx,只是表示View在编辑器的绝对位置,是用来我们设计(拖拽)时使用的。如果不添加约束,运行后只是显示在屏幕的左上角,重叠在一起。

总结

本文我们主要讲解了ConstraintLayout编辑器常用功能的使用。这些功能灵活且方便地帮助我们布局页面。下一篇:Android开发 - 使用ConstraintLayout(四)创建基本约束我们将介绍使用基本的约束。

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

原文地址:http://blog.51cto.com/11761032/2311613

时间: 2024-10-12 23:02:15

Android开发 - 掌握ConstraintLayout(三)编辑器的相关文章

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

在传统的Android开发中,页面布局占用了我们很多的开发时间,而且面对复杂页面的时候,传统的一些布局会显得非常复杂,每种布局都有特定的应用场景,我们通常需要各种布局结合起来使用来实现复杂的页面.随着ConstraintLayout的推出,这种现象有了很大的改善,而且它可以实现很多传统布局难以实现的功能. 本系列我们就一起来学习ConstraintLayout的使用,来大幅提高我们的生产力. 传统布局 在ConstraintLayout退出之前,我们经常使用FrameLayout, Linear

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

上一篇我们介绍了编辑器的基本使用,本文我们介绍创建基本的约束. "约束"表示View之间的位置关系.当我们在ConstraintLayout布局中创建View时,如果我们没有添加任何约束,虽然在设计视图我们可以拖动它们到任意位置,但是运行后都会在左上角的原点位置,同时代码中也会给出警告: 所以我们必须确保我们的View都被添加了适当的约束.我们常用的约束通常有两种,一种是相对父View的约束,一种是相对其它View的约束. 相对父布局的约束 创建相对布局的约束时比较简单,将对象方位的锚

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

本文我们介绍链条(Chains),使用它可以将多个View连接起来,互相约束. 可以创建横向的链条,也可以创建纵向的链条,我们以横向的链条举例: 我们先创建三个按钮: 我们选中三个按钮后在上面点右键创建链条: 创建后我们发现这三个View平均分布地排列了: 最简单的使用是平均分布,当然也可以不平均分布,具体看约束的具体设置,比如将第一个Button的marginEnd设置成10后链条会自动地分布每个View的位置. 这使得分布View变得非常灵活,并且从某种程度上可以取代LinearLayout

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

本文我们来介绍障碍线(Barrier)的使用,平常在开发中用的相对要少一些,但是在需要时会非常方便. 它的作用是将多个元素放到这个障碍线里面使时,其中的任何元素的大小或位置变化时都会使它的位置进行改变. 可以理解成一面墙,"墙"里面任何元素的位置或大小改变时都会导致它的改变,从而保证所有的元素都在"墙"里面. 下面我们来举例进行说明,会更加直观. 首先,我们先创建两个元素: 接下来,我们来创建一条垂直的Barrier: 创建后,我们把这两个View拖到这个Barri

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

使用ConstraintLayout后我们的布局是没有层级关系的,各个View之间都是平级关系,但是如果根据某个业务条件来控制多个View的显示与否,我们需要分别对每个View进行控制,需要调用多次setVisibility().这样就显得非常不方便. 本文所介绍的Group就是解决这个问题的. Group就是一个分组,可以关联多个View,从而只需要对这个分组进行控制就可以实现这样的场景. 我们下面来介绍它的使用. 添加分组 首先,我们添加一个Group: 关联元素 然后将页面上的元素拖动到这

ubuntu下搭建android开发环境(三)ubuntu安装搜狗输入法(by 星空武哥)

转载请标注原创地址http://blog.csdn.net/lsyz0021/article/details/52187714 刚安装完的ubuntu系统默认的键盘输入方式是IBus,但是作为android开发的ubuntu"系统键盘输入方式系统"是不支持Ibus的,所以我们要安装搜狗输入法. 安装搜狗输入法要区分不同的ubuntu的系统 1.Ubuntu 12.04 LTS 版本 由于 Ubuntu 12.04 LTS 自带的 Fcitx 版本较旧,需要先通过升级,才能安装下载的 d

Android开发学习总结(三)——appcompat_v7项目说明

一.appcompat_v7项目说明 今天来说一下appcompat_v7项目的问题,使用eclipse创建Android项目时,发现project列表中会多创建出一个appcompat_v7项目,这是我搭建最新的Android开发环境创建第一个Android测试项目后发现的,我在创建Android时选择的Minimum Required SDK是API:8 Android 2.2(Froyo),如下图所示: 在这里解释一下这些名词: SDK 是 Software Development Kit

android开发学习笔记(三)Activity跳转以及传值

一:步骤: 1创建Intent对象,参数中指定将要跳转到的class 2通过Intent对象的putExtra()方法指定要传到下一个页面的数据.方法参数用键值对. 3通过调用startActivity(Intent intent)方法或者startActivityForResult(Intent intent,int requestCode)方法启动跳转. startActivtyForResult():Activity A跳转到Activity B,Activity B可以返回数据给Acti

Android开发系列(三):消息模式的Toast.make Text

转自:http://daikainan.iteye.com/blog/1405575 Toast 是一个 View 视图,快速的为用户显示少量的信息. Toast 在应用程序上浮动显示信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于 一些帮助 / 提示. Toast 最常见的创建方式是使用静态方法 Toast.makeText 我使用的是 SDK 2.2 1. 默认的显示方式 Java代码 1 // 第一个参数:当前的上下文环境.可用getApplicationContext()