【Android】テキストとボタンを横並び表示 + テキストが長い場合、折り返し

# 概要
テキストとボタンを横並び&左寄せ表示 + テキストが長い場合、自動で折り返しする方法について解説。

|  短い  |  長い |
| ---- | ---- |
| ![Screenshot_20230316_133732.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/dab26c99-7af7-77bd-f621-70b43cc09dd2.png) | ![Screenshot_20230316_133709.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/46922ebd-8f1e-647c-dd2f-31e1e153c187.png)  |

テキストの`android:layout_width`に`wrap_content`を指定すると、テキストが長い場合ボタンが右に飛び出してしまう。一方、`0dp`を指定すると、テキストが短い場合、左寄せにならない。

# 解説
#### テキストの自動折り返し
* `app:layout_constraintWidth_default`に`wrap`を指定

#### テキストとボタンを左寄せ
2つの方法がある。
* `androidx.constraintlayout.helper.widget.Flow`を使用
* `app:layout_constraintWidth_min`を使用
## 方法1(Flowを使う方法)

`androidx.constraintlayout.helper.widget.Flow`を用いて左寄せを行う。

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="@color/white">

	<androidx.constraintlayout.helper.widget.Flow
		android:layout_width="0dp"
		android:layout_height="0dp"
		android:orientation="horizontal"
		app:constraint_referenced_ids="text,button"
		app:flow_horizontalBias="0"
		app:flow_horizontalGap="12dp"
		app:flow_horizontalStyle="packed"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent"/>

	<TextView
		android:id="@+id/text"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:text="テキスト"
		android:textSize="28sp"
		app:layout_constraintWidth_default="wrap"/>

	<Button
		android:id="@+id/button"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="ボタン"
		android:textSize="20sp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
```

## 方法2(layout_constraintWidth_minを使う方法)

`ConstraintLayout`の`app:layout_constraintWidth_min`に`wrap`を指定することで左寄せを行う。

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="@color/white">

	<TextView
		android:id="@+id/text"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:text="テキスト"
		android:textSize="28sp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toStartOf="@id/button_space"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent"
		app:layout_constraintWidth_default="wrap"/>

	<androidx.constraintlayout.widget.ConstraintLayout
		android:id="@+id/button_space"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:layout_marginStart="12dp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toEndOf="@id/text"
		app:layout_constraintTop_toTopOf="parent"
		app:layout_constraintWidth_min="wrap">

		<Button
			android:id="@+id/button"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="ボタン"
			android:textSize="20sp"
			app:layout_constraintBottom_toBottomOf="parent"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toTopOf="parent"/>
	</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
```
# 参考サイト

https://qiita.com/Takarkiz/items/67db1327669d812b4974