# Android ConstraintLayout - 技巧

###### tags: `Android` `ConstraintLayout` `Discussion`

當 Dialog 的內容高度不固定時，希望 Dialog 的高度限制在某個高度時，
查到 ``ConstraintLayout`` 的 __Dimension constraints__ 可以幫我達成

我先使用兩個 ``Guideline`` Top, Bottom 當作界限
外層使用``ConstraintLayout`` 當 Container
中間再用 ``ConstraintLayout`` 當 Dialog 的主要UI，
它的大小會被 Top & Bottom Guidelines 限制住，
所以依內容的高度來動態變動高度，但最大不會超過 Top & Bottom Guidelines 界限！

[What’s new in constraint layout 1.1.0](https://android.jlelse.eu/whats-new-in-constraint-layout-1-1-0-acfe30cfc7be)

Dimension constraints:
It’s often required that view width or height to remain as wrap content instead of match constraint or match parent but unfortunately wrap content override the constraint applied and overlap with the constraint if width or height changes. With version 1.1.0 this issue is resolved by using

app:layout_constrainedWidth=”true”
<!-- or -->
app:layout_constrainedHeight=”true”

My layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:background="@android:color/transparent" >
    
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/topGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="100dp"/>
    
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/bottomGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="100dp"/>
    
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/topGuideline"
        app:layout_constraintBottom_toTopOf="@id/bottomGuideline"
        android:layout_marginStart="38dp"
        android:layout_marginEnd="38dp"
        app:layout_constrainedHeight="true">
        
        <androidx.cardview.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:cardCornerRadius="8dp">
            
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/mainContainer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@android:color/white">
                
                <TextView
                    android:id="@+id/title"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    android:paddingStart="8dp"
                    android:paddingEnd="8dp"
                    android:paddingTop="8dp"
                    android:paddingBottom="8dp"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:text="@string/base_test_string_1"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textSize="18dp"
                    android:textStyle="bold"
                    android:textColor="@android:color/black" />
    
                <ScrollView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constrainedHeight="true"
                    app:layout_constraintBottom_toTopOf="@id/dividerHorizontal"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="1.0"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/title" >
    
                    <TextView
                        android:id="@+id/message"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:gravity="center"
                        android:paddingStart="10dp"
                        android:paddingTop="8dp"
                        android:paddingEnd="10dp"
                        android:paddingBottom="8dp"
                        android:text="@string/base_test_string_3"
                        android:textAppearance="?android:attr/textAppearanceMedium"
                        android:textColor="@android:color/black"
                        android:textSize="17dp" />

                </ScrollView>
    
                <TextView
                    android:id="@+id/cancelButton"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/dividerVertical"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:paddingTop="15dp"
                    android:paddingBottom="15dp"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:text="@string/base_action_cancel"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@color/base_grey_27" />
                
                <View
                    android:id="@+id/dividerVertical"
                    android:layout_width="1dp"
                    android:layout_height="0dp"
                    app:layout_constraintStart_toEndOf="@id/cancelButton"
                    app:layout_constraintEnd_toStartOf="@+id/confirmButton"
                    app:layout_constraintTop_toTopOf="@id/cancelButton"
                    app:layout_constraintBottom_toBottomOf="@id/cancelButton"
                    android:background="@color/base_grey_40"/>
                
                <TextView
                    android:id="@+id/confirmButton"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toEndOf="@id/dividerVertical"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:paddingTop="14dp"
                    android:paddingBottom="14dp"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:text="@string/base_action_confirm"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@android:color/holo_blue_dark" />
    
                <View
                    android:id="@+id/dividerHorizontal"
                    android:layout_width="0dp"
                    android:layout_height="1dp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toTopOf="@id/dividerVertical"
                    android:background="@color/base_grey_40"/>
            
            </androidx.constraintlayout.widget.ConstraintLayout>
        
        </androidx.cardview.widget.CardView>
    
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>