[解決済み] 制約条件 レイアウト 垂直中央揃え
2022-05-15 15:44:13
質問
制約レイアウトでオブジェクトを垂直方向に整列し、中央に配置する方法は?垂直または水平に配置することは可能ですが、2 つのグリッド ラインの間にビューを拘束する傍らで、同時に中央に配置する方法を見つけられませんでした。
中央揃えは制約レイアウトの大きな問題のようで、"centerInParent", "centerVertical" および "centerHorizontal" のために相対レイアウトに戻らざるをえません。
制約レイアウトで赤で囲ったレイアウトを作りたいのですが、どうすればいいですか?
残念ながら、2つのグリッドラインを使用しない唯一の方法は、ネストされた相対レイアウトと線形レイアウトです(制約レイアウトは、この正確なシナリオを解決することになっていました!)。
相対レイアウトと線形レイアウトを使用したレイアウト。
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="@id/user_points"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:id="@+id/stat_1_layout"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/divider_1"
android:orientation="vertical">
<TextView
android:id="@+id/stat_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="10"
android:textSize="16dp"
android:textColor="@color/textSecondaryDark"
android:maxLines="1"/>
<TextView
android:id="@+id/stat_detail_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="Streak"
android:textSize="8sp"
android:textColor="@color/textSecondary"
android:maxLines="1"/>
</LinearLayout>
<View
android:id="@+id/divider_1"
android:layout_width="1dp"
android:layout_height="38dp"
android:layout_toLeftOf="@+id/stat_2_layout"
android:background="@drawable/linedivider"/>
<LinearLayout
android:id="@+id/stat_2_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_marginRight="18dp"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView
android:id="@+id/stat_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="243"
android:textSize="16dp"
android:textColor="@color/textSecondaryDark"
android:maxLines="1"/>
<TextView
android:id="@+id/stat_detail_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="Calories Burned"
android:textSize="8sp"
android:textColor="@color/textSecondary"
android:maxLines="1"/>
</LinearLayout>
<View
android:id="@+id/divider_2"
android:layout_width="1dp"
android:layout_height="38dp"
android:layout_toRightOf="@+id/stat_2_layout"
android:background="@drawable/linedivider"/>
<LinearLayout
android:id="@+id/stat_3_layout"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_toRightOf="@+id/divider_2"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:id="@+id/stat_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="3200"
android:textSize="16dp"
android:textColor="@color/textSecondaryDark"
android:maxLines="1"/>
<TextView
android:id="@+id/stat_detail_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="Steps"
android:textSize="8sp"
android:textColor="@color/textSecondary"
android:maxLines="1"/>
</LinearLayout>
</RelativeLayout>
どのように解決するのですか?
中央に配置されたビューを他のビューのアンカーとして設定することが可能です。以下の例では、"@+id/stat_2" が親の水平方向の中央に配置されており、このレイアウトの他のビューのアンカーとして機能しています。
<android.support.constraint.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">
<TextView
android:id="@+id/stat_1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:maxLines="1"
android:text="10"
android:textColor="#777"
android:textSize="22sp"
app:layout_constraintTop_toTopOf="@+id/stat_2"
app:layout_constraintEnd_toStartOf="@+id/divider_1" />
<TextView
android:id="@+id/stat_detail_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Streak"
android:textColor="#777"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@+id/stat_1"
app:layout_constraintStart_toStartOf="@+id/stat_1"
app:layout_constraintEnd_toEndOf="@+id/stat_1" />
<View
android:id="@+id/divider_1"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:background="#ccc"
app:layout_constraintTop_toTopOf="@+id/stat_2"
app:layout_constraintEnd_toStartOf="@+id/stat_2"
app:layout_constraintBottom_toBottomOf="@+id/stat_detail_2" />
<TextView
android:id="@+id/stat_2"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:text="243"
android:textColor="#777"
android:textSize="22sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="@+id/stat_detail_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="Calories Burned"
android:textColor="#777"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@+id/stat_2"
app:layout_constraintStart_toStartOf="@+id/stat_2"
app:layout_constraintEnd_toEndOf="@+id/stat_2" />
<View
android:id="@+id/divider_2"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:background="#ccc"
app:layout_constraintBottom_toBottomOf="@+id/stat_detail_2"
app:layout_constraintStart_toEndOf="@+id/stat_2"
app:layout_constraintTop_toTopOf="@+id/stat_2" />
<TextView
android:id="@+id/stat_3"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:maxLines="1"
android:text="3200"
android:textColor="#777"
android:textSize="22sp"
app:layout_constraintTop_toTopOf="@+id/stat_2"
app:layout_constraintStart_toEndOf="@+id/divider_2" />
<TextView
android:id="@+id/stat_detail_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="Steps"
android:textColor="#777"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@+id/stat_3"
app:layout_constraintStart_toStartOf="@+id/stat_3"
app:layout_constraintEnd_toEndOf="@+id/stat_3" />
</android.support.constraint.ConstraintLayout>
最小のスマートフォン (3.7 480x800 Nexus One) と最大のスマートフォン (5.5 1440x2560 Pixel XL) での動作は次のとおりです。
関連
-
[解決済み] TextViewでテキストを水平・垂直方向にセンタリングするには?
-
[解決済み] グリッドレイアウトにおけるフリングジェスチャーの検出
-
[解決済み] Androidのレイアウトファイルの「tools:context」とは何ですか?
-
[解決済み] Androidのレイアウトで文字に下線を引くことはできますか?
-
[解決済み] 制約条件付きレイアウトでオーバーラップ/ネガティブマージンを実現するには?
-
[解決済み] 文字列からJSONオブジェクトへの変換 Android
-
[解決済み] サポート(v21)ツールバーを使用した環境設定画面の作成
-
[解決済み] 複数のローダーを持つLoaderManager: 正しいカーソルローダーを取得する方法
-
[解決済み] 警告 あなたのApkは、プライバシーポリシーが必要なパーミッションを使用しています。(android.permission.READ_PHONE_STATE)
-
[解決済み] Android Studio - Lollipop, ADB, & Genymotionの問題。デバイスが表示されない "adb server is out of date... 殺し合い..." 重複] [重複
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 設定ページに移動せずに位置情報サービスをオンにする
-
[解決済み] CardView layout_width="match_parent "が親のRecyclerViewの幅と一致しない。
-
[解決済み] アンドロイドアプリのユーザーデータを消去する
-
[解決済み] エラーです。ステータス{statusCode=DEVELOPER_ERROR, resolution=null}.
-
[解決済み] Androidです。複数のアクティビティと手動でのビュー切り替え、どちらが良いですか?
-
[解決済み] Android Studioで複数のデバイスでアプリを自動実行する
-
[解決済み] AndroidでNode.Jsを動作させる
-
[解決済み] Android: 複数の選択オプションを持つポップアップを作成する
-
[解決済み] 警告 あなたのApkは、プライバシーポリシーが必要なパーミッションを使用しています。(android.permission.READ_PHONE_STATE)
-
[解決済み] Android Studio - Lollipop, ADB, & Genymotionの問題。デバイスが表示されない "adb server is out of date... 殺し合い..." 重複] [重複