android五花八門品類眾多尺寸各異的螢幕，一直是產品經驗和開發人員的心中難以解開的疙瘩，畫素，DP，英寸各種的不方便。面對競爭激烈的APP市場，介面平庸了不出容易出彩，介面特殊了又會帶來適配方面的難題。如何解決開發人員心中的痛，也是谷歌安卓團隊繞不開的坑。借鑑網頁開發的優點，早期已經有很多高手把百分比引入佈局，但是需要做大量的運算，介面越複雜，運算量越大，這無疑疑會帶來效能上的下降，從而影響體驗。直到後來谷哥終於也推出了自己的百分比佈局。

Google早期官方提供的百分比佈局庫，包含PercentFrameLayout和PercentRelativeLayout。version 24.1.0引入，version 26.1.0被棄用（真的短命）。

後來在2016年的Google I/O大會上 , Google 釋出了Android Studio 2.2預覽版，同時也釋出了Android 新的佈局方案 ConstraintLayout ， 但是最近的一年也沒有大規模的使用。2017年Google釋出了 Android Studio 2.3 正式版，在 Android Studio 2.3 版本中新建的Module中預設的佈局就是 ConstraintLayout 。除了具有RelativeLayout的各種優點外，還具有大量獨特的屬性，對其內控制元件有諸如位置百比比，大小百分比，寬高百分比等一系列屬性。

這裡利於ConstraintLayout開發一個特殊的九宮格遊戲，九宮格需要在不同螢幕下都保持每個單元正方形，即寬高一比一，橫3豎3.這在以前佈局不寫程式碼無法做到，我不知道佈局時的屏寬，沒有辦法根據屏寬取三等份的寬和高，這裡我只要設定寬高1：1，三個控制元件平分屏寬就可以實現。如下

程式碼如下：

<?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="wrap_content"
    tools:context=".XiaoChengActivity"
    tools:layout_editor_absoluteY="81dp">

    <TextView
        android:id="@+id/t1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/holo_green_light"
        android:singleLine="false"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/t2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/t2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/holo_green_light"
        android:singleLine="false"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:fontFamily="sans-serif"
        app:layout_constrainedWidth="true"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/t1"
        app:layout_constraintRight_toLeftOf="@id/t3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/t3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/holo_green_light"
        android:singleLine="false"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:fontFamily="sans-serif"
        app:layout_constrainedWidth="true"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/t2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/t4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        android:background="@android:color/holo_green_light"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="@+id/t1"
        app:layout_constraintRight_toRightOf="@+id/t1"
        app:layout_constraintTop_toBottomOf="@+id/t1"
        app:layout_constraintWidth_percent="0.3" />

    <TextView
        android:id="@+id/t5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        android:background="@android:color/holo_green_light"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="@+id/t2"
        app:layout_constraintRight_toRightOf="@+id/t2"
        app:layout_constraintTop_toBottomOf="@+id/t2"
        app:layout_constraintWidth_percent="0.3" />

    <TextView
        android:id="@+id/t6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        android:background="@android:color/holo_green_light"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="@+id/t3"
        app:layout_constraintRight_toRightOf="@+id/t3"
        app:layout_constraintTop_toBottomOf="@+id/t3"
        app:layout_constraintWidth_percent="0.3" />

    <TextView
        android:id="@+id/t7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        android:background="@android:color/holo_green_light"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="@+id/t4"
        app:layout_constraintRight_toRightOf="@+id/t4"
        app:layout_constraintTop_toBottomOf="@+id/t4"
        app:layout_constraintWidth_percent="0.3" />

    <TextView
        android:id="@+id/t8"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        android:background="@android:color/holo_green_light"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="@+id/t5"
        app:layout_constraintRight_toRightOf="@+id/t5"
        app:layout_constraintTop_toBottomOf="@+id/t5"
        app:layout_constraintWidth_percent="0.3" />

    <TextView
        android:id="@+id/t9"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        android:background="@android:color/holo_green_light"
        android:textColor="@android:color/holo_red_light"
        android:textSize="10sp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="@+id/t6"
        app:layout_constraintRight_toRightOf="@+id/t6"
        app:layout_constraintTop_toBottomOf="@+id/t6"
        app:layout_constraintWidth_percent="0.3" />
</android.support.constraint.ConstraintLayout>