marginTop 不适用于 ConstraintLayout 和 wrap_content

marginTop does not work with ConstraintLayout and wrap_content

在我的 Fragment 中,我有一个带有 layout_height="wrap_content" 的 ConstraintLayout,我希望在视图底部的两个按钮之间有一个边距。

当我将此边距作为 layout_marginBottom 添加到上方按钮 (button_welcome_signup) 时,它似乎工作正常。但是,如果我尝试将它添加到底部按钮 (button_welcome_signin) 作为 layout_marginTop 它不起作用。

有人知道这里的问题是什么吗/如果我做错了什么?

(请注意,我使用 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>

我删除了第一张图片的代码边距,

第二张图片在左、右、上、下添加了边距

试试这个

<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" />

ConstraintLayout 中,子视图的侧边距只有在该侧被限制到另一个视图时才会生效。在您的原始示例中,顶部按钮的底部边距有效,因为顶部按钮具有底部约束:

MyAppApp:layout_constraintBottom_toTopOf="@id/button_welcome_signin"

但是,底部按钮的上边距不起作用,因为底部按钮对其顶部没有约束。

如果您想在底部按钮上使用上边距,请添加此约束:

MyAppApp:layout_constraintTop_toBottomOf="@+id/button_welcome_signup"

请注意,您 必须通过将此属性添加到顶部按钮来更新链样式(因为此新约束会创建链):

MyAppApp:layout_constraintVertical_chainStyle="packed"
<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"
         />

我花了一段时间才弄清楚我是不是以错误的方式思考这个问题,所以也许它会对其他人有所帮助。

在 ConstraintLayout 中,它从约束 中留出边距

换句话说,假设您有两个彼此相邻的按钮。

右边的 StartToEndTopToTopBottomToBottom 约束到左边的。

如果你给右边的一个marginBottom,它不会把它下面的东西往下推,它会把自己从第一个按钮的底部往上推。边距是在它的底线和它被约束到的东西的底线之间,而不是在屏幕上的所有视图之间。

如果有人遇到与我相同的问题,请尝试在另一个视图(即 ImageView)的底部有一个视图(RecyclerView)作为 match_parent。但是 RecycleView 与我的 ImageView 重叠,即使我在我的 ImageView 高度大小的 RecyclerView 中放置了一个 top_margin。

解决方法: 设置 - android:layout_height="0dp" - 对我很有用。 解释如下。

MATCH_PARENT 不工作

<View
    android:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

任何视图都应该应用其父视图组的属性规则。 ConstraintLayout 支持“0dp”值(match_constraint)而不是“match_parent”来获取匹配父行为。所以,永远不要在 ConstraintLayout 中使用“match_parent”!

我从这里... https://medium.com/@jemli.idea/constraintlayout-never-ever-97c121286100

我同时使用了android:margin_verticalandroid:margin_top,这里margin_vertical优先。

android:margin 也会出现问题

android:layout_marginTop="@dimen/_10sdp"