1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Android Expand Horizontallyはみだしちゃう

Posted at

[Codelabs for Android Developer Fundamentals 1.2 Part B: The layout editor]
(https://codelabs.developers.google.com/codelabs/android-training-layout-editor-part-b/index.html?index=..%2F..%2Fandroid-training#0)
を進めていて、あれうまくいかない

言われた通りにやってるんだけどな〜 たぶん

これはConstraintLayoutに関するものです。

#問題点

####期待する結果

2つのButtonを選択した状態でツールバーのExpand Horizontallyをクリックすると
均等に配置されるよ。と言うもの

スクリーンショット 2020-10-22 18.38.43.png
スクリーンショット 2020-10-22 18.38.52.png

####現状

COUNTボタンがはみ出ちゃう..

スクリーンショット 2020-10-22 18.42.21.png

#Expand HorizontallyをクリックすることでXMLファイルはどのように変化しているのか

####クリック前

activity_main.xml
<Button
        android:id="@+id/button_toast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />

####クリック後

activity_main.xml
<Button
        android:id="@+id/button_toast"
        android:layout_width="382dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_count"
        android:layout_width="383dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />

デカデカと書いたけど、要するに、
layout_widthに値が入っただけ です
特に新しい行は増えてないみたい。行っていうか制約かな。
しかも382dp と 383dp で同じサイズでも無い

##解決策
とりあえず
Expand Horizontallyをクリックすることをやめる

以下の記事を参考にしました。
[Android] ConstraintLayout レイアウト逆引きまとめ
初めてのConstraintLayoutでChainStyleを利用してみた

つまるところChainを使うといいみたい

(1) ふたつのButtonを選択して、Create Horizontal Chain

スクリーンショット 2020-10-22 19.09.39.png

(2) ふたつのButtonのXMLを
android:layout_width="0dp" に変更

片方のButtonのXMLに
app:layout_constraintHorizontal_chainStyle="spread" を指定する

activity_main.xml
<Button
        android:id="@+id/button_toast"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"/>

    <Button
        android:id="@+id/button_count"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />

すると、
スクリーンショット 2020-10-22 19.19.55.png

惜しい!!!!
あとはCOUNTボタンに
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
の制約をつけてあげると、

スクリーンショット 2020-10-22 19.24.07.png

うまいこといきました

やっぱりXMLでいじるのが大事ですねー

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?