close
当前位置: 物联网在线 > 技术文库 > android >

ConstraintLayout约束布局的概念与使用

ConstraintLayout(约束布局), 是2016年Google I/O最新推出的Android布局, 目前还在完善阶段. 从推出的力度而言, 应该会成为主流布局样式. 在最新版本的Android Studio中, ConstraintLayout已经成为默认布局.

ConstraintLayout约束布局的概念与使用 - 简书

使用ConstraintLayout布局的最新版本1.0.0-alpha4, 需要下载最新Canary版本的Android Studio, 下载地址.

ConstraintLayout作为非绑定(Unbundled)的支持库, 命名空间是app:, 来自于本地包的命名空间. 本文介绍ConstraintLayout布局的常见使用方式.

本文源码的GitHub下载地址

概念

ConstraintLayout约束布局的含义: 根据布局中的其他元素或视图, 确定View在屏幕中的位置. 包含三个重要信息, 根据其他视图设置位置, 根据父容器设置位置, 根据基准线设置位置.

layout_constraint[本源]_[目标]="[目标ID]"

例如:

app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"

约束当前View的底部至目标View的底部, 目标View是constraintLayout. 表明, 把当前View放置到constraintLayout(父容器)的底部, 并且底部一致.

为了演示多个示例, 使用复用的Activity页面. 根据参数设置标题和布局Id.

public class LayoutDisplayActivity extends AppCompatActivity { private static final String TAG = LayoutDisplayActivity.class.getSimpleName(); static final String EXTRA_LAYOUT_ID = TAG + ".layoutId"; // 布局ID @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setTitle(getIntent().getStringExtra(Intent.EXTRA_TITLE)); final int layoutId = getIntent().getIntExtra(EXTRA_LAYOUT_ID, 0); setContentView(layoutId); // 设置页面布局, 复用布局 } }

主页面使用ListView展示多个项, 每项都是不同的布局. 点击项发送不同的Intent, 填充所要显示的页面.

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView list = (ListView) findViewById(R.id.activity_main); ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, LIST_ITEMS); list.setAdapter(adapter); list.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { // 复用显示布局 Intent intent = new Intent(MainActivity.this, LayoutDisplayActivity.class); intent.putExtra(Intent.EXTRA_TITLE, LIST_ITEMS[i]); // 标题 intent.putExtra(LayoutDisplayActivity.EXTRA_LAYOUT_ID, LAYOUT_IDS[i]); // 布局Id startActivity(intent); } }); } } 基础

ConstraintLayout布局最基本的使用方式, 就是直接指定位置. 取消按钮的底部对齐constraintLayout(父容器)的底部, 左侧对齐父容器的左侧. 下一步按钮的底部对齐父容器的底部, 而左侧对齐取消按钮的右侧. 并且每个按钮边缘有Margin空隙.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout android:id="@+id/constraintLayout" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/cancel_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginStart="16dp" android:text="取消" app:layout_constraintBottom_toBottomOf="@id/constraintLayout" app:layout_constraintStart_toStartOf="@id/constraintLayout"/> <Button android:id="@+id/next_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginStart="16dp" android:text="下一步" app:layout_constraintBottom_toBottomOf="@id/constraintLayout" app:layout_constraintStart_toEndOf="@id/cancel_button"/> </android.support.constraint.ConstraintLayout>

ConstraintLayout的属性设置, 最重要的就是理解属性的表示含义.

ConstraintLayout约束布局的概念与使用 - 简书

比例

ConstraintLayout布局除了对齐属性, 还有重要的比例属性. 中心(Center)按钮需要把全部边界与constraintLayout(父容器)边界对齐, 则为居中. 同时还可以设置水平与竖直的比例, 如0.25. Bias按钮设置水平与竖直的比例是0.25, 表示左侧与右侧比例是1:4, 上部与下部的比例是1:4.

constraintHorizontal_bias设置水平比例, constraintVertical_bias设置竖直比例.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.android.com/tools" android:id="@+id/constraintLayout" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Center" app:layout_constraintEnd_toEndOf="@id/constraintLayout" app:layout_constraintStart_toStartOf="@id/constraintLayout" app:layout_constraintTop_toTopOf="@+id/constraintLayout" app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Bias" app:layout_constraintEnd_toEndOf="@id/constraintLayout" app:layout_constraintStart_toStartOf="@id/constraintLayout" app:layout_constraintTop_toTopOf="@+id/constraintLayout" app:layout_constraintBottom_toBottomOf="@+id/constraintLayout" app:layout_constraintHorizontal_bias="0.25" app:layout_constraintVertical_bias="0.25"/> </android.support.constraint.ConstraintLayout>

tools:layout_editor_absoluteX属性对于视图起到辅助作用, 理解边界的真实距离, 点击可视化布局会自动生成.

ConstraintLayout约束布局的概念与使用 - 简书

引导线
(责任编辑:ioter)

用户喜欢...

Android新特性介绍,ConstraintLayout完全解析

今天给大家带来2017年的第一篇文章,这里先祝大家新年好。 本篇文章的主题是ConstraintLayout。其实ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在去年的I/O大会上重点宣传的...


Android写出高效清晰Layout布局文件的一些技巧

人们谈论Android性能的时候总是习惯讨论怎么写出清晰高效的Java代码,却忽略了layout布局文件。layout布局缓慢的渲染速度对app性能也有的很大的影响。充满不必要的views和可读性差的layout文件会...


使用约束布局(ConstraintLayout)构建灵活的UI

Android团队为开发者带来了ConstraintLayout,一种构建于弹性Constraints(约束)系统的新型Android Layout,据说它将大大改变今后的Android布局界面开发方式,据说也许以后Android开发没有那么多布局需...