アンドロイド - ConstraintLayout実装方法

By JS | Last updated: September 16, 2017

androidbasic

ConstraintLayout

ConstraintLayoutは柔軟に他のViewを配置することができるViewGroupです。このLayoutはAndroid SDKに含まれていないので、Android Support LibraryにAPI Level 9(Gingerbread)からサポートをしています。使用するには、Android Support Libraryをgradleでloadをする必要があります。

Constraint(制約)Layoutの基本的な概念は、文字通り、オブジェクト間の制約(制限)の条件を設定することにより、配置をすることです。たとえば、AとBのオブジェクト間の制約条件を設定して、両方のオブジェクトが付いているか、離れているか、などの配置を行うことができます。

ConstraintLayoutはRelativeLayoutのよう点があります。しかし、パフォーマンスの面でRelativeLayoutと同じか、より速いです。

Android StudioでLayout Editor ToolをサポートしてCodeでUIを開発することなく、Toolで簡単に開発することができるとします。詳細については、Layout EditorでUIデザインする：Android Studio UserGuideでご確認ください。

これからの例でConstraintLayoutについて詳しく説明します。

プロジェクトを作成する

[File] >> [New] >> [New Project]でEmpty Activityを選択し、新しいプロジェクトを作成してください。

プロジェクトを作成すると、自動的にMainActivity.javaとactivity_main.xmlファイルが生成されます。 MainActivity.javaコードを見ると、activity_main.xmlにUI Layoutを定義するコードが入力されています。

ConstraintLayoutを使用するには、gradleでAndroid Support libraryを使用すると定義する必要があります。 Android Studioで app/build.gradleを開きdependenciesに次のようにcom.android.support.constraint:constraint-layout:1.0.2を追加してください。プロジェクトを作成するときに、基本的に追加されているが、もしない場合は追加していただければされます。

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
}

の相対的な配置(Relative Positioning)

この部分は、RelativeLayoutと似ています。 Constraint layoutも内部のオブジェクトを配置する際に、親または子オブジェクト間の相対的な位置に配置することができます。

上で述べたように基本的な概念は、Constraint(制約、制限、)条件です。オブジェクトの4つの面を別のオブジェクトの特定の面に制約を設定して、相対的な位置を指定してくれることができます。

たとえば、このオブジェクトの左ラインをどのオブジェクトの左ラインと同じラインに配置することができます。 まるで紐で二つの面を結んだと(制約)と考えてください理解しやすいことができます。

RelativeLayoutと他の点では、親と子オブジェクトすべて同じ属性を使用して相対的な配置をすることができるということと、親の中央に配置される属性がなくなったことです。親の中央に配置することは、他の部分に対応しており、この部分は、中央に配置(Centering positioning)で説明します。

下のプロパティを使用して、オブジェクト間のConstraint(制約)の条件を設定して、相対的な配置をすることができます。

XML attributes
layout_constraintLeft_toLeftOf 左側のラインをどのオブジェクトの左側のラインに配置
layout_constraintLeft_toRightOf 左側のラインをどのオブジェクトの右側のラインに配置
layout_constraintRight_toLeftOf 右側のラインをどのオブジェクトの左側のラインに配置
layout_constraintRight_toRightOf 右側のラインをどのオブジェクトの右側のラインに配置
layout_constraintTop_toTopOf 一番上の行をどのオブジェクトの一番上の行に配置
layout_constraintTop_toBottomOf 一番上の行をどのオブジェクトの一番下の行に配置
layout_constraintBottom_toTopOf 一番下の行をどのオブジェクトの一番上の行に配置
layout_constraintBottom_toBottomOf 一番下の行をどのオブジェクトの一番下の行に配置
layout_constraintBaseline_toBaselineOf BaselineをどのオブジェクトのBaselineに配置

例をConstraint(制約)の条件を設定する方法と、相対的な位置を設定する方法を説明します。 次のコードを入力し、結果を確認してください。

ConstraintLayoutの属性を使用するには、ConstraintLayout属性に xmlns:app="http://schemas.android.com/apk/res-auto"を定義する必要があります。

<?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="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv01"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv02"
        app:layout_constraintLeft_toRightOf="@id/tv02"
        android:background="#ff8a65"/>

    <TextView
        android:id="@+id/tv04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView04"
        android:padding="5dp"
        app:layout_constraintBottom_toTopOf="@id/tv03"
        app:layout_constraintLeft_toRightOf="@id/tv03"
        android:background="#c2c500"/>

</android.support.constraint.ConstraintLayout>

TextView01はlayout_constraintTop_toTopOf="parent"とlayout_constraintLeft_toLeftOf="parent"の制限(Constraint)の条件を設定しました。 parentは親オブジェクトであるConstraintLayoutを指します。 TextView01の上部面は、親オブジェクトの上部面と同一のラインに位置するように制約を設定しました。 そして左側面には、親の左面と同じラインに位置するようにしました。結果を見ればTextView01は、親の左上部ラインと同一線上に配置されました。

TextView02は上部をTextView01下部に、左側を親左側に制約を設定しました。

TextView03は、上部をTextView02下部に、左側をTextView2右側に制約を設定しました。

TextView04は下端をTextView03上に、左側をTextView3右側に制約を設定しました。

結果を見ると、制約のような相対的な位置が設定されました。 ConstarintLayoutもRelativeLayoutよう、基本的に設定しなければ、左、上でViewが配置されます。一般的に、横軸と縦軸二つの制約条件を設定すると、意図したとおりViewを配置することができます。

constraintlayout

中央配置(Centering positioning)

Costraintの基本的な概念は、オブジェクトに制約を設定して、配置をすることです。上記の相対的な配置では、横軸、縦軸の片側の制約をかけるんですけど。両側に制約をかけるオブジェクトが中央に配置されます。

相対的な配置で学んだ属性をすべて共通に使用し、さらに調べヒャルはbias属性です。

XML attributes
layout_constraintHorizontal_bias 横軸でオブジェクトの偏った程度を設定
layout_constraintVertical_bias 縦軸でオブジェクトの偏った程度を設定

例を通じて詳しく説明します。次のコードを入力し、結果を確認してください。

コードを見ると、TextViewが3つあり、それぞれ左側、右側面に制約を設定しました。上面は重ならないように相対的な位置を設定しました。

<?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="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:padding="5dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.2"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv02"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.8"
        android:background="#ff8a65"/>

</android.support.constraint.ConstraintLayout>

TextView01は layout_constraintLeft_toLeftOf="parent"と layout_constraintRight_toRightOf="parent"に設定された。左側面には、親の左側面に、右側面には、親の右側面と同じラインに配置されるよう制約を設定しました。このように設定した場合TextView01は、親の中央に配置されます。オブジェクトの両側が親と紐で接続されており、同じ力で引っ張って中央位置になったようです。

TextView02もTextView01よう両側を親の両側に制約を設定しました。中央に配置する必要がありますが、 layout_constraintHorizontal_bias="0.2"でオブジェクトが左にチオチゲ配置しました。 0.2の意味は、余白の中のオブジェクトの左側の余白が20％となって右側が80％になるように設定するという意味です。もし0.5に設定すると真ん中に配置されます。

TextView03は layout_constraintHorizontal_bias="0.8"に設定された。左余白が80％を占めるように配置されました。

constraintlayout

Android StudioのPreviewでTextView02オブジェクトをクリックしてください。クリックすると、図のように制約が線で視覚化して表示します。 TextView02は、上部がTextView02の下部面に接続されており、両方の面は、親の両側に接続された。

constraintlayout

マージン(Margin)

マージンが設定されると、制約の方向にマージンを適用します。もしAオブジェクトの左側面を親の左側面に制約を設定し、左にマージンを10dpだけ設定すれば、親の左側面とオブジェクトの左側面との間にマージンを10dpだけに適用されます。制約の間のマージンであるため、制約がなければ、マージンが適用されません。

マージンに関連するプロパティは、以下の通りです。

XML attributes
layout_marginLeft 左側の制約の間にマージンを適用
layout_marginTop 上部の制約の間にマージンを適用
layout_marginRight 右側の制約の間にマージンを適用
layout_marginBottom 下部の制約の間にマージンを適用

例として詳しく説明します。

コードを見ると、制約条件が設定され、その方向にマージンが設定されました。

<?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="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv01"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:padding="5dp"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        app:layout_constraintTop_toBottomOf="@id/tv02"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="#ff8a65"/>


</android.support.constraint.ConstraintLayout>

TextView01は、上部と左側面に制約が設定され、その方向に10dpほどマージンが適用されました。

TextView02は制約方向に20dpほど、TextView03は30dpだけ設定しました。

制約がない場合、マージンが適用されないことを直接コードを修正して確認してみてください。

constraintlayout

チェーン(Chain)

チェーンは水平または垂直軸の方向にオブジェクトをお互いに結びつけることです。下の図のように制約を利用して、親の端から端までのオブジェクトを接続します。

constraintlayout

チェーンは、グループの属性を持っており、チェーンの最初のオブジェクトをHeadと呼ばれます。 constraintlayout

チェーンのスタイルを設定することもできます。スタイルは、以下のような種類があります。 constraintlayout

チェーンで使用される新しい属性です。

XML attributes
layout_constraintHorizontal_chainStyle 横軸チェーンのスタイルを設定
layout_constraintVertical_chainStyle 縦軸チェーンのスタイルを設定
layout_constraintHorizontal_weight 横軸チェーンのweight
layout_constraintVertical_weight 縦軸チェーンのweight

例として詳しく説明します。次のコードを入力し、結果を確認してください。

コードを見るとTextView01、02、03がチェーンで縛られていて、TextView04、05、06がチェーンで縛られています。

<?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="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">


    <TextView
        android:id="@+id/tv01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv02"
        app:layout_constraintHorizontal_chainStyle="spread"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv01"
        app:layout_constraintRight_toLeftOf="@+id/tv03"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv02"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#ff8a65"/>

    <TextView
        android:id="@+id/tv04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView04"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv05"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView05"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv01"
        app:layout_constraintLeft_toRightOf="@+id/tv04"
        app:layout_constraintRight_toLeftOf="@+id/tv06"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv06"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView06"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv01"
        app:layout_constraintLeft_toRightOf="@+id/tv05"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#ff8a65"/>

</android.support.constraint.ConstraintLayout>

スプレッドチェーン

TextView01、02、03、チェーンのHeadはTextView01です。チェーンスタイルはHeadオブジェクトのプロパティとして設定が可能です。 layout_constraintHorizontal_chainStyle="spread"でSpreadスタイルに設定しました。 Spreadチェーンスタイルは、オブジェクトを同じ間隔で配置します。もしスタイルを設定しないとSpreadスタイルが基本的に適用されます。

チェーン内に広がる

TextView04、05、06、チェーンのHeadはTextView04です。このチェーンのスタイルは、spread_insideに設定しました。 Spread Insideスタイルは、両方のオブジェクトが親の最後について同じ間隔でオブジェクトを配置します。

constraintlayout

他のスタイルを確認してみましょう。次のコードを入力し、結果を確認してください。

コードを見ると、3つのチェーングループがあります。

<?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="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">


    <TextView
        android:id="@+id/tv01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv02"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv01"
        app:layout_constraintRight_toLeftOf="@+id/tv03"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv02"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#ff8a65"/>

    <TextView
        android:id="@+id/tv04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView04"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv05"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView05"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv01"
        app:layout_constraintLeft_toRightOf="@+id/tv04"
        app:layout_constraintRight_toLeftOf="@+id/tv06"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv06"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView06"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv01"
        app:layout_constraintLeft_toRightOf="@+id/tv05"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#ff8a65"/>

    <TextView
        android:id="@+id/tv07"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView07"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv04"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv08"
        app:layout_constraintHorizontal_bias="0.8"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv08"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView08"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv04"
        app:layout_constraintLeft_toRightOf="@+id/tv07"
        app:layout_constraintRight_toLeftOf="@+id/tv09"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv09"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView09"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@+id/tv04"
        app:layout_constraintLeft_toRightOf="@+id/tv08"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#ff8a65"/>
</android.support.constraint.ConstraintLayout>

パックドチェーン

TextView01、02、03チェーンはpackedチェーンに設定された。 Packedチェーンは、オブジェクト同士付いていて中央に配置されています。

バイアス付きパックドチェーン

このスタイルは、Packedチェーンと同じだがBiasにブレ程度を調節することができます。今まで学んだbiasのようにlayout_constraintHorizontal_biasに設定することができます。

TextView04、05、06は、biasを0.2に設定し、左余白を20％に設定しました。

TextView07、08、09は、biasを0.8に設定し、左余白を80％に設定しました。

constraintlayout

他のスタイルを確認してみましょう。次のコードを入力し、結果を確認してください。

コードを見ると、3つのチェーングループがあります。

<?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="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">


    <TextView
        android:id="@+id/tv01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv02"
        app:layout_constraintHorizontal_chainStyle="spread"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tv01"
        app:layout_constraintRight_toLeftOf="@id/tv03"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tv02"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#ff8a65"/>

    <TextView
        android:id="@+id/tv04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView04"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv05"
        app:layout_constraintHorizontal_chainStyle="spread"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv05"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView05"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv01"
        app:layout_constraintLeft_toRightOf="@id/tv04"
        app:layout_constraintRight_toLeftOf="@id/tv06"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv06"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView06"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv01"
        app:layout_constraintLeft_toRightOf="@id/tv05"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#ff8a65"/>

    <TextView
        android:id="@+id/tv07"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView07"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv04"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv08"
        app:layout_constraintHorizontal_chainStyle="spread"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv08"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView08"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv04"
        app:layout_constraintLeft_toRightOf="@id/tv07"
        app:layout_constraintRight_toLeftOf="@id/tv09"
        app:layout_constraintHorizontal_weight="0.6"
        android:background="#e0e0e0"/>

    <TextView
        android:id="@+id/tv09"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView09"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv04"
        app:layout_constraintLeft_toRightOf="@id/tv08"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="0.4"
        android:background="#ff8a65"/>

</android.support.constraint.ConstraintLayout>

重み付きチェーン

Weighted Chainスタイルに設定する方法は、HeadのスタイルをSpreadに設定し、いくつかのチェーンオブジェクトのWidthを0dpに設定します。このスタイルは、Spread Insideスタイルでwidthを0dpに設定したオブジェクトが空の領域を占めるようにします。 (HorizontalはWidthを0dpで、VerticalはHeightを0dpに設定する必要があります。)

TextView01、02、03チェーンはWeighted Chainスタイルに設定されました。 TextView02のwidthだけ0dpであるため、残りのスペースは、すべてTextView02に割り当てられています。

TextView04、05、06、チェーンもWeighted Chainスタイルに設定され、05と06のwidthが0dpに設定しました。だから、残りのスペースは、05と06が仲良く分けて行いました。

TextView07、08、09、チェーンも、上記のチェーンとほぼ同じです。しかし、ここでは08と09が仲良く分けて持たず layout_constraintHorizontal_weight属性に割合を定めました。 TextView08は0.6を設定しTextView09は0.4を設定しました。今まで学んだようにTextView08は60％を持っていきTextView09が40％を持っていきました。

constraintlayout

面積制約(Dimension constraint)

Dimensionは面積、サイズなどを意味します。 android:minWidthまたはandroid:minHeightなどで最小の幅、高さなどを制限することができます。またwidth、heightの割合も設定できます。

例として割合について調べてみましょう。次のコードを入力し、結果を確認してください。

<?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="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="TextView01"
        android:padding="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="2:1"
        android:background="#81c784"/>

    <TextView
        android:id="@+id/tv02"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="TextView02"
        android:padding="5dp"
        app:layout_constraintTop_toBottomOf="@id/tv01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="1:2"
        android:background="#e0e0e0"/>

</android.support.constraint.ConstraintLayout>

Dimensionを設定するには、一方の長さのサイズを0dpに設定し、 layout_constraintDimensionRatioに比率を設定する必要があります。

TextView01の場合width 100dp、heightを0dp、 layout_constraintDimensionRatio="2:1"に設定しました。横：縦の比率を意味しているので高さが50dpに設定しました。

TextView02の場合width 100dp、heightを0dp、率は「1：2」に設定して高さが200dpに設定しました。

constraintlayout

まとめ

ConstraintLayoutの最も基本的なものについて説明しました。より詳しくは、Android API Referenceを参照してください。

チュートリアルで使用したコードは、GitHub：ConstraintLayoutで確認することができます。

参考

android

Related Posts

codechachaCopyright ©2019 codechacha