ConstraintLayout实战第一篇（341）

ConstraintLayout属性可以参考这篇文章。

对齐

对齐

如图，左右双引号需要分别上下边和中间的文本保持一致，同时右左边贴着中间的文本。

不用ConstraintLayout的话，我可能会写成：LinearLayout套RelativeLayout，两个双引号分别贴着父RelativeLayout上下边这种，共两层，逻辑稍显复杂。

ConstrainLayout的处理方式：
首先定位好上面的文本和下面的不可见控件，然后让左双引号的左边贴着文本的左边，上面贴着文本的上边。右双引号同理即可。

定位左双引号
定位右双引号

只需要简单的拖拽即可完成该部分的布局。
具体代码如下：

<android.support.constraint.ConstraintLayout
        android:id="@+id/cl_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll_toolbar"
        android:background="@color/app_white"
        android:paddingBottom="@dimen/dp_25"
        android:paddingLeft="@dimen/dp_15"
        android:paddingRight="@dimen/dp_15"
        tools:ignore="UnusedAttribute">

        <ImageView
            android:id="@+id/iv_quote_left"
            android:layout_width="@dimen/dp_18"
            android:layout_height="@dimen/dp_13.5"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:contentDescription="@string/ud_title"
            android:src="@mipmap/quote_left"
            app:layout_constraintEnd_toStartOf="@+id/iv_upload_document_tip"
            app:layout_constraintTop_toTopOf="@+id/iv_upload_document_tip" />

        <TextView
            android:id="@+id/iv_upload_document_tip"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:lineSpacingExtra="5dp"
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:text="@string/ud_content"
            android:textColor="@color/status_bar_green"
            android:textSize="@dimen/dp_15"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv_quote_right"
            android:layout_width="@dimen/dp_18"
            android:layout_height="@dimen/dp_13.5"
            android:layout_marginLeft="5dp"
            android:layout_marginStart="5dp"
            android:contentDescription="@string/ud_title"
            android:src="@mipmap/quote_right"
            app:layout_constraintBottom_toBottomOf="@+id/iv_upload_document_tip"
            app:layout_constraintStart_toEndOf="@+id/iv_upload_document_tip" />

        <LinearLayout
            android:id="@+id/ll_select_picture"
            android:layout_width="90dp"
            android:layout_height="82.5dp"
            android:layout_marginTop="15dp"
            android:baselineAligned="false"
            android:gravity="center_horizontal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/iv_upload_document_tip"
            android:orientation="horizontal" />
    </android.support.constraint.ConstraintLayout>

注意事项

ConstraintLayout 最好应用在控件较少的情况下，下图是强行将一个列表用ConstraintLayout来写，过程是痛苦的，因为依赖关系多且乱，后期不好维护，也不优雅。不过写的时候还是很有意思的。

列表