web-dev-qa-db-ja.com

marginTopはConstraintLayoutとwrap_contentでは機能しません

私のフラグメントには、layout_height="wrap_content"を含むConstraintLayoutがあり、ビューの下部にある2つのボタンの間にマージンが必要です。

このマージンをlayout_marginBottomとして上部ボタン(button_welcome_signup)に追加すると、うまくいくようです。ただし、layout_marginTopとして下部のボタン(button_welcome_signin)に追加しようとすると、機能しません。

ここで問題が何であるかを知っている人はいますか/何か間違っているのですか?

(wrap_contentを使用する理由があり、下部ボタンのマージンを真剣に使用したいので、UIの一貫性を高めるためにスタイルに追加できることに注意してください私のプロジェクト内)。

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:MyAppApp="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center_vertical"
    Android:background="@color/white"
    Android:minHeight="@dimen/min_height_welcome_frame"
    Android:padding="@dimen/margin_all_frame_inner">

    <ImageView
        Android:id="@+id/imageview_welcome_logo"
        Android:layout_width="wrap_content"
        Android:layout_height="50dp"
        Android:adjustViewBounds="true"
        Android:scaleType="fitCenter"
        Android:src="@drawable/logo_header"
        MyAppApp:layout_constraintTop_toTopOf="parent"
        MyAppApp:layout_constraintLeft_toLeftOf="parent"
        MyAppApp:layout_constraintRight_toRightOf="parent" />

    <TextView
        Android:id="@+id/textiew_welcome_title"
        style="@style/MyAppTextViewTitle"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="@dimen/margin_all_component_l"
        Android:text="@string/welcome_title"
        MyAppApp:layout_constraintTop_toBottomOf="@id/imageview_welcome_logo" />

    <TextView
        Android:id="@+id/textview_welcome_text"
        style="@style/MyAppTextViewText"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:text="@string/welcome_message"
        MyAppApp:layout_constraintTop_toBottomOf="@id/textiew_welcome_title" />

    <Button
        Android:id="@+id/button_welcome_signin"
        style="@style/MyAppSubButton"
        Android:layout_width="match_parent"
        Android:layout_height="46dp"
        Android:layout_marginTop="@dimen/margin_all_component_s" 
        Android:text="@string/welcome_sign_in"
        MyAppApp:layout_constraintBottom_toBottomOf="parent" />

    <Button
        Android:id="@+id/button_welcome_signup"
        style="@style/MyAppButton"
        Android:layout_width="match_parent"
        Android:layout_height="46dp"
        Android:layout_marginTop="@dimen/margin_all_component_l"
        Android:text="@string/welcome_sign_up"
        MyAppApp:layout_constraintBottom_toTopOf="@id/button_welcome_signin"
        MyAppApp:layout_constraintTop_toBottomOf="@id/textview_welcome_text"
        MyAppApp:layout_constraintVertical_bias="1" />

</Android.support.constraint.ConstraintLayout>

styles.xml:

<style name="MyAppButton" parent="Widget.AppCompat.Button">
    <item name="Android:background">@drawable/button_selector_blue</item>
    <item name="Android:textSize">@dimen/textsize_all_l</item>
    <item name="Android:textColor">@color/white</item>
    <item name="fontFamily">@font/my_sans_serif_regular</item>
</style>

<style name="MyAppSubButton" parent="Widget.AppCompat.Button">
    <item name="Android:background">@drawable/button_selector_transparent</item>
    <item name="Android:textSize">@dimen/textsize_all_l</item>
    <item name="Android:textColor">@color/turquoise_blue</item>
    <item name="fontFamily">@font/my_sans_serif_regular</item>
</style>

よろしくお願いします。

14
g-mac

ConstraintLayout内で、子ビューのサイドマージンは、そのサイドが別のビューに制約されている場合にのみ有効になります。元の例では、上のボタンには下の制約があるため、上のボタンの下マージンが機能します。

MyAppApp:layout_constraintBottom_toTopOf="@id/button_welcome_signin"

ただし、下部ボタンには上部の制約がないため、下部ボタンの上部マ​​ージンは機能しません。

下のボタンに上マージンを使用する場合は、次の制約を追加します。

MyAppApp:layout_constraintTop_toBottomOf="@+id/button_welcome_signup"

この属性を一番上のボタンに追加して、alsoチェーンスタイルを更新する必要があります(この新しい制約によりチェーンが作成されるため)。

MyAppApp:layout_constraintVertical_chainStyle="packed"
25
Ben P.

これを試して

<Button
    Android:id="@+id/button_welcome_signin"
    style="@style/MyAppSubButton"
    Android:layout_width="match_parent"
    Android:layout_height="46dp"
    Android:layout_marginTop="16dp"
    Android:text="@string/welcome_sign_in"
    MyAppApp:layout_constraintBottom_toBottomOf="parent"
    MyAppApp:layout_constraintEnd_toEndOf="parent"
    MyAppApp:layout_constraintStart_toStartOf="parent"
    MyAppApp:layout_constraintTop_toBottomOf="@+id/button_welcome_signup" />
1
Israr Ansari
<Button
        Android:id="@+id/SaveBtnId"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:text="@string/Save"
        Android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        Android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        Android:layout_marginRight="16dp"
        app:layout_constraintRight_toRightOf="parent"
         />

enter image description here

0
Akbar Khan

最初の画像はコードの余白が削除されています

enter image description here

2番目の画像は左、右、上、下にマージンを追加しました

enter image description here

0