ConstraintLayout：利用鼠标拖拽设计界面

作者: EasonZzz | 来源:发表于2019-03-10 12:44 被阅读219次

参见工作以来，写布局文件一直是我觉得最痛苦也最浪费时间的流程，稍微复杂一点的界面就需要利用各种LinearLayout和RelativeLayout来嵌套完成界面，利用嵌套不仅浪费时间，对于手机界面的性能也有所影响。于是想到了利用ConstraintLayout来进行界面的编写。一开始还是利用代码编写xml文件，觉得并没有多少提升工作效率，反而觉得代码量比以前更大了，因为ConstraintLayout要约束子控件的位置，直到我利用鼠标拖拽之后，两个字：真香！
先简单介绍一下ConstrainLayout：约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。

阅读本篇文章需要了解一定ConstraintLayout的基本属性，简书上有很多介绍的很好的文章，你可以先阅读一下在阅读本篇文章。我挑选了一个比较有代表性的界面来进行实现：

UI界面.png
首先观察一下UI界面大致分为三个部分：toolbar，显示区域，操作区域。从上至下来进行设计，先再布局文件中添加一个toolbar

布局约束

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    android:navigationIcon="@drawable/ic_nav_back"
    app:navigationIcon="@drawable/ic_nav_back"
    app:titleTextColor="@android:color/white">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:ellipsize="end"
        android:gravity="center"
        android:singleLine="true"
        android:text="空调界面"
        android:textColor="#ffffff"
        android:textSize="18sp" />

</android.support.v7.widget.Toolbar>

</android.support.constraint.ConstraintLayout>

此时toolbar中是没有进行任何约束的，编译器会直接报错，然后我们切换至design界面，利用鼠标拖拽来进行实现约束。