ConstraintLayout 学习_constraintlayout右上角数字

ConstraintLayout官网学习地址

       最近发现使用ConstraintLayout这个布局方式的公司越来越多了，趁着最近比较空闲，利用空余时间来学习应用下，主要是根据官方的文档来进行分析理解~

一、ConstraintLayout 官方文档的理解学习

    ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

     All the power of ConstraintLayout is available directly from the Layout Editor's visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.

      ConstraintLayout 用简单的view来创造复杂和大型的布局场景，和RelativeLayout比较类似（即就是父控件以及子控件间的依赖关系，就不详细介绍了）但是ConstraintLayout比RelativeLayout更灵活好用，可以在可视化的工具栏来拖拽这个控件进行布局构建，在Android Studio 2.0往上默认使用的就是这个布局。

约束Constraint 的概述：

     Constraint ，定义视图在ConstraintLayout中的位置，必须给视图view添加一个或者多个水平和垂直约束，每个约束相当于这个视图在ConstraintLayout中沿着垂直方向或者水平方向的与其他视图之间的对齐等约束关系。

    这个图中，视图C只添加了水平约束，没有垂直约束。图中和视图A之间建立了约束关系，C的左边和右边位置分别和A对齐，但是没有垂直约束，所以显示在屏幕的顶部位置。

 

 

      这个图解决上述图中出现的问题，图C添加了一个垂直方向的约束，在A的底部，也实现了最终想要的视图效果。

 

 

二、ConstraintLayout 在项目中的应用

1、项目中的添加

 确认项目的build.gradle 文件中是否有maven.google.com 仓库，若是没有添加这个仓库：

repositories {
    google()
}

以依赖的形式把这个库添加到同一个build.gradle文件中：

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'//示例版本，非最新版本
}

Sync Project with Gradle Files同步，就可以将这个库添加到项目中了。

2、布局转换

      以前开发的时候使用的是其他的布局，如果需要所有的项目布局都使用依赖布局，我们旧的布局不需要我们一一去更改，有更智能的转换方式：

旧布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="38dp"
        android:orientation="horizontal">
 
        <Button
            android:id="@+id/thread_btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="线程一写入" />
 
        <Button
            android:id="@+id/thread_btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="线程二写入" />
 
        <Button
            android:id="@+id/Thread_query"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="查询所有" />
 
    </LinearLayout>
 
 
</RelativeLayout>

a/ 切换到Android Studio 布局中 Design ；

b/ 找到Component Tree 工具栏，在需要转换的视图（这里需要转换RelativeLayout）上右击选择Convert RelativeLayout to ConstraintLayout

           

3、添加或者删除约束

1)、添加约束

最简单的方式，可以在布局的Design视图窗口进行简单的拖拽来实现约束：

a/ 在Palwtte窗口拖拽合适控件view到视图编辑窗口；

b/ 在 ConstraintLayout 中看到这个控件view 可以看到一个边框，四个角可以拉动调整大小，四边中间有圆形的句柄可以拖动来添加约束关系；

c/ 点击圆形句柄然后拖拽可以添加不同的约束关系，具体可以参考下面两幅图，图一是给父布局添加约束，图二是两个子控件之间的约束。

   

@ 添加约束需要注意的点：

• 每个view都必须有至少两个约束：一个水平方向和一个垂直方向的约束；
• 添加约束仅仅在同一个水平方向的view 来添加&#x