ConstraintLayout約束布局的概念與使用

fprc3905 8年前發布 | 44K 次閱讀 Android 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約束布局的概念與使用 - 簡書

引導線

ConstraintLayout布局除了與布局對齊以外, 還可以與引導線(Guideline)對齊. 設置豎直引導線(Guideline)距離左側72dp. 按鈕(Button)的左側都與引導線對齊, 上下使用比例的方式排列, 一個0.25比例, 一個0.75比例.

<?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">

    <android.support.constraint.Guideline
        android:id="@+id/guideLine"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="72dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Guide Up"
        app:layout_constraintStart_toStartOf="@id/guideLine"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintVertical_bias="0.25"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Guide Down"
        app:layout_constraintStart_toStartOf="@id/guideLine"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintVertical_bias="0.75"/>

</android.support.constraint.ConstraintLayout>

ConstraintLayout約束布局的概念與使用 - 簡書

視圖尺寸

ConstraintLayout布局中的控件也可以設置填充尺寸. 控件把寬度設置為0dp會自動根據位置進行填充. 如Large按鈕, 左側對齊與Small按鈕的左側, 右側對齊與constraintLayout父控件的右側, 寬度設置為0dp, 實際會填充全部位置.

<?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/small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Small"
        app:layout_constraintStart_toStartOf="@id/constraintLayout"
        app:layout_constraintTop_toTopOf="@id/constraintLayout"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Large"
        app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
        app:layout_constraintEnd_toEndOf="@id/constraintLayout"
        app:layout_constraintStart_toEndOf="@id/small"
        app:layout_constraintTop_toTopOf="@id/constraintLayout"/>

</android.support.constraint.ConstraintLayout>

ConstraintLayout約束布局的概念與使用 - 簡書

視圖縱橫比

ConstraintLayout布局還可以使用constraintDimensionRatio設置視圖的縱橫比, 則需要把寬(layout_width)或者高(layout_height)設置為0dp, 根據另一個屬性和比例, 計算當前屬性, 如兩個圖片控件的顯示大小.

<?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">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        android:src="@drawable/total_large"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
        app:layout_constraintRight_toRightOf="@+id/constraintLayout"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        app:layout_constraintVertical_bias="0.0"/>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        android:contentDescription="@null"
        android:src="@drawable/total_large"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
        app:layout_constraintRight_toRightOf="@+id/constraintLayout"/>

</android.support.constraint.ConstraintLayout>

ConstraintLayout約束布局的基本使用方式就是這些, 可以觀察到ConstraintLayout布局兼顧LinearLayout與RelativeLayout的優點, 非常適合構建復雜布局, 會成為Android的主流布局方式.

OK, that's all! Enjoy it!

來自：http://www.jianshu.com/p/32a0a6e0a98a

本文由用戶 fprc3905 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1470727538245.html

Android Android開發移動開發 ConstraintLayout

ConstraintLayout約束布局的概念與使用

概念

基礎

比例

引導線

視圖尺寸

視圖縱橫比

相關經驗

相關資訊

相關文檔

目錄