AndroidのConstraintLayoutの例に関するチュートリアル

1年 ago
蓮, 翼
4 minutes

このチュートリアルでは、AndroidのConstraintLayoutの複雑さについて説明します。Googleは2016年のGoogle I/O ConferenceでAndroidのConstraint Layoutエディターを導入しました。新しいレイアウトエディターには、開発者が複雑なレイアウトのためにフラットUI階層を作成するための強力なツールセットがあります。

アンドロイドのConstraintLayout

Android Studioの最新バージョンを使用して、AndroidのConstraintLayoutを使用する必要があります。理想的には、Android Studio 2.2以上を使用してください。SDKマネージャーからConstraintLayoutのための必要なSDKツールをダウンロードする必要があります。新しい空のアクティビティプロジェクトを作成し、build.gradleファイル内に以下の依存関係を追加します。compile ‘com.android.support.constraint:constraint-layout:1.0.0-beta4’ 以下のイメージに示されているように、ルートクラスをConstraintLayoutに設定した新しいレイアウトを作成します。古いレイアウトをConstraintLayoutに変換するには、対応するレイアウトのデザインペインを開き、ルートコンポーネントを右クリックし、以下のイメージに示されている適切なオプションを選択します。

AndroidのConstraint Layoutの概要

AndroidのConstraintLayoutは、各子ビュー/ウィジェットに対して他のビューに対する制約を割り当てることでレイアウトを定義するために使用されます。ConstraintLayoutはRelativeLayoutに似ていますが、より高い機能を持っています。ConstraintLayoutの目的は、ネストされたビューをフラットで柔軟なデザインで排除することにより、アプリケーションのパフォーマンスを向上させることです。ConstraintLayout内のビューには、各側面にハンドル（またはアンカーポイント）があり、制約を割り当てるために使用されます。レイアウトにTextViewをドラッグアンドドロップして、それに制約を割り当てましょう。上記のTextViewには、3種類のハンドルがあります。

リサイズハンドル – それは四隅に存在し、ビューのサイズを変更するために使用されますが、制約条件は維持されます。サイドハンドル – それは各辺の中央にある円形のハンドルです。ビューの上部、左部、下部、および右部の制約条件の設定に使用されます。ベースラインハンドル – これはレイアウト内の別のテキストビューとベースラインを合わせるために使用されます。

TextView の制約を割り当てて、その XML コードを調べましょう。右側のプロパティインスペクターペインに注意してください。そこにはビューの各側面に設定されたマージンが表示されます。また、ビューのサイズを以下のモードの切り替えによって変更することもできます。

  • Wrap Content – This wraps the view to fill it’s content.
  • Any Size – This is similar to match parent.
  • Fixed Size – This allows us to set constant width and height.

上記レイアウトのXMLコードは、sample.xmlというようになっています。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>
  • app:layout_constraintLeft_toLeftOf=”parent” – constraintLeft is the anchor point to the left of the view. toLeftOf signifies aligning the view to the left of the assigned view which is “parent” in this case.
    When the absolute positions are set on the view, the xml properties that are used are –
tools:layout_editor_absoluteY="48dp"
tools:layout_editor_absoluteX="40dp"

もう1つのテキストビューを追加し、ベースラインを揃えましょう。上記のレイアウトのXMLコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" />

</android.support.constraint.ConstraintLayout>

自動接続と推論という2つのツールもあり、これらは制約を自動的に作成するために使用されます。

    1. Option 1:

Auto-Connect（オートコネクト） – この機能はクリックで有効にできます：その名前からもわかるように、オートコネクトは隣接する２つのビュー間に自動的に制約を作ります。
Inference（推論） – この機能はクリックで有効にできます：推論エンジンはレイアウト内の全ての要素間に制約を作ります。推論エンジンは、ウィジェットの位置やサイズなど様々な要素を考慮し、最適な接続を見つけ出そうとします。

以下にAuto-Connectレイアウトのデモをご覧いただけます：上記のgifで確認できるように、制約は自動的にアニメーション化されます。プロパティパネルにある水平および垂直のスライダーに注目してください。それぞれ水平バイアスと垂直バイアスと呼ばれます。これらはビューを水平または垂直軸に沿って位置付けるためのバイアス値を設定できます。これは制約位置に対して相対的な値になります。上記のデモのためのXMLコードは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58000004"
        app:layout_constraintHorizontal_bias="0.47" />
</android.support.constraint.ConstraintLayout>

以下に、推論機能が有効化されたレイアウトのデモが表示されます。上記のGIFのXMLコードは以下の通りです：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView22"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="59dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="31dp"
        app:layout_constraintRight_toRightOf="@+id/textView22"
        android:layout_marginTop="178dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="31dp" />
</android.support.constraint.ConstraintLayout>

tools:layout_constraintTop_creator=”1″：制約を作成した人を追跡するための作成者属性であり、特に推論エンジンによって作成された場合は1と割り当てられます。

制約を削除する。

個別の制約を削除するには、円形のハンドルの上にカーソルを合わせ、赤くなるまでクリックしてください。ビューのすべての制約を削除するには、その下にある「」のようなシンボルをクリックしてください。以下にサンプルのデモGIFを示します。このチュートリアルはこれで終了です。自分のレイアウトのいくつかを制約レイアウトに置き換えて試してみてください。

コメントを残す 0

Your email address will not be published. Required fields are marked *