ConstraintLayoutを用いたレイアウトの作り方【Android Studio】

ConstraintLayoutを用いたレイアウトの作り方

android developer のサイトを参考にConstraintLayoutの使い方を勉強しました。

【参考サイト】
https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout

ConstraintLayoutを使うためにはまず、下記コードで囲う必要があります。

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android">
</androidx.constraintlayout.widget.ConstraintLayout>

• テキストアリアの右側にボタンをくっつける

    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toRightOf="@+id/editTextTextPersonName"
        app:layout_constraintTop_toTopOf="@+id/editTextTextPersonName" />

• ボタンがはみ出ているのでbiasでテキストアリアを左に寄せる

<EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" 
        app:layout_constraintHorizontal_bias="0.1" />

• ボタンとテキストエリアの間にmarginを作る

    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginLeft="30dp"
        app:layout_constraintLeft_toRightOf="@+id/editTextTextPersonName"
        app:layout_constraintTop_toTopOf="@+id/editTextTextPersonName" />

• 円状にする

   <TextView
        android:id="@+id/textView"
        android:layout_width="32dp"
        android:layout_height="37dp"
        android:gravity="center"
        android:text="O"

        tools:layout_editor_absoluteX="180dp"
        tools:layout_editor_absoluteY="370dp" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="32dp"
        android:layout_height="37dp"
        android:gravity="center"
        android:text="12"
        app:layout_constraintCircle="@+id/textView"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="0" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="32dp"
        android:layout_height="37dp"
        android:gravity="center"
        android:text="1"
        app:layout_constraintCircle="@+id/textView"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="30" />