代码之家  ›  专栏  ›  技术社区  ›  fdermishin

为什么链元素之间的空间如此之大?

  •  1
  • fdermishin  · 技术社区  · 6 年前

    我需要将一行三个按钮与背景视图对齐,如下所示:

    enter image description here

    为此,我创建了一个背景视图( @drawable/background )还有一条链子( @id/button1 ,则, @id/button2 ,则, @id/button3 )

    activity\u main。xml :

    <?xml version="1.0" encoding="utf-8"?>
    <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">
    
        <View
            android:id="@+id/background"
            android:layout_width="0dp"
            android:layout_height="32dp"
            android:layout_marginEnd="48dp"
            android:layout_marginStart="48dp"
            android:layout_marginTop="16dp"
            android:background="@drawable/background"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="24dp"
            android:layout_marginStart="4dp"
            android:background="@drawable/button_background"
            android:gravity="center"
            android:text="Button1"
            app:layout_constraintBottom_toBottomOf="@id/background"
            app:layout_constraintEnd_toStartOf="@id/button2"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintStart_toStartOf="@id/background"
            app:layout_constraintTop_toTopOf="@id/background" />
    
        <TextView
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="24dp"
            android:background="@drawable/button_background"
            android:gravity="center"
            android:text="Button2"
            app:layout_constraintBottom_toBottomOf="@id/background"
            app:layout_constraintEnd_toStartOf="@id/button3"
            app:layout_constraintStart_toEndOf="@id/button1"
            app:layout_constraintTop_toTopOf="@id/background" />
    
        <TextView
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="24dp"
            android:layout_marginEnd="4dp"
            android:background="@drawable/button_background"
            android:gravity="center"
            android:text="Button3"
            app:layout_constraintBottom_toBottomOf="@id/background"
            app:layout_constraintEnd_toEndOf="@id/background"
            app:layout_constraintStart_toEndOf="@id/button2"
            app:layout_constraintTop_toTopOf="@id/background" />
    
    </android.support.constraint.ConstraintLayout>
    

    出身背景xml :

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:radius="16dp" />
        <solid android:color="#11000000" />
    </shape>
    

    button\u背景。xml :

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:radius="12dp" />
        <stroke android:width="2dp" android:color="@color/colorPrimary" />
        <solid android:color="#ffffff" />
    </shape>
    

    然而,我得到了以下结果:

    enter image description here

    我不明白,为什么视图之间的空间这么大。链的重量如中所述 documentation 。在第一个视图之前和最后一个视图之后应该有4dp的边距,按钮之间没有空格。

    使现代化

    我试过constraint layout的1.0.2版和所有beta版,我只能在 constraint-layout:1.1.0-beta5 。这是否意味着此版本的constraint layout中存在缺陷,或者我使用的方式不对?

    更新2

    这实际上是beta 5中的一个bug fixed 在beta 6中。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Ben P.    6 年前

    我不知道 为什么? 这种情况正在发生,也许这确实是 1.1.0-beta5 但是

    应用于 background 视图由三个按钮组成的链继承,因为该链约束到 出身背景 。如果删除这些边距,“间隙”会突然消失:

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="32dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    

    enter image description here

    当然,您的设计可能需要这些边距。您可以通过将原始边距恢复到 出身背景 查看并将链锚定到父对象而不是背景。也就是说,更改 app:layout_constraintStart_toStartOf 属性打开 button1 "parent" ,并更改 app:layout_constraintEnd_toEndOf 属性打开 button3 “父级” :

    enter image description here

    最后一个难题是更改 链条 模仿旧的行为。之前您有 出身背景 查看方式 48dp 利润率,以及 4dp 页边距。因此,将链边距设置为 52dp 而不是 4dp 要包括背景的48dp:

    enter image description here

    我的完整XML:

    <?xml version="1.0" encoding="utf-8"?>
    <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">
    
        <View
            android:id="@+id/background"
            android:layout_width="0dp"
            android:layout_height="32dp"
            android:layout_marginTop="16dp"
            android:layout_marginStart="48dp"
            android:layout_marginEnd="48dp"
            android:background="@drawable/background"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>
    
        <TextView
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="24dp"
            android:layout_marginStart="52dp"
            android:gravity="center"
            android:text="Button1"
            android:background="@drawable/button_background"
            app:layout_constraintTop_toTopOf="@id/background"
            app:layout_constraintBottom_toBottomOf="@id/background"
            app:layout_constraintEnd_toStartOf="@id/button2"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintStart_toStartOf="parent"/>
    
        <TextView
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="24dp"
            android:gravity="center"
            android:text="Button2"
            android:background="@drawable/button_background"
            app:layout_constraintTop_toTopOf="@id/background"
            app:layout_constraintBottom_toBottomOf="@id/background"
            app:layout_constraintEnd_toStartOf="@id/button3"
            app:layout_constraintStart_toEndOf="@id/button1"/>
    
        <TextView
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="24dp"
            android:layout_marginEnd="52dp"
            android:gravity="center"
            android:text="Button3"
            android:background="@drawable/button_background"
            app:layout_constraintTop_toTopOf="@id/background"
            app:layout_constraintBottom_toBottomOf="@id/background"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/button2"/>
    
    </android.support.constraint.ConstraintLayout>