1

当我在约束布局中使用指南时，约束布局的结果会有所不同。

  1. 指导方针：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintScroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_scroll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

    <TextView
        android:id="@+id/textView_1"
        style="@style/Numbers"
        android:text="1"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iV_pins_0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageView
        android:id="@+id/iV_pins_0"
        style="@style/Pins"
        app:layout_constraintBottom_toBottomOf="@+id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/guideline_scroll"
        app:layout_constraintStart_toEndOf="@+id/textView_1"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageButton
        android:id="@+id/iB_scroll_00"
        style="@style/Scroll"
        android:layout_marginTop="8dp"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_01"
        app:layout_constraintStart_toEndOf="@id/guideline_scroll"
        app:layout_constraintTop_toBottomOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_01"
        style="@style/Scroll"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_02"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_00"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageButton
        android:id="@+id/iB_scroll_02"
        style="@style/Scroll"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_01"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <TextView
        android:id="@+id/textView_2"
        style="@style/Numbers"
        android:text="2"
        app:layout_constraintBottom_toTopOf="@+id/textView_1"
        app:layout_constraintEnd_toStartOf="@id/iV_pins_1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iV_pins_1"
        style="@style/Pins"
        app:layout_constraintBottom_toBottomOf="@+id/iB_scroll_10"
        app:layout_constraintEnd_toStartOf="@id/guideline_scroll"
        app:layout_constraintStart_toEndOf="@+id/textView_2"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_10"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toTopOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_11"
        app:layout_constraintStart_toEndOf="@id/guideline_scroll"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/iB_scroll_11"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_10"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_12"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_10"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_12"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_11"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

</androidx.constraintlayout.widget.ConstraintLayout>

指南

  1. 无指南：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintScroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView_1"
        style="@style/Numbers"
        android:text="1"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iV_pins_0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageView
        android:id="@+id/iV_pins_0"
        style="@style/Pins"
        app:layout_constraintBottom_toBottomOf="@+id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_00"
        app:layout_constraintStart_toEndOf="@+id/textView_1"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageButton
        android:id="@+id/iB_scroll_00"
        style="@style/Scroll"
        android:layout_marginTop="8dp"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_01"
        app:layout_constraintStart_toEndOf="@id/iV_pins_0"
        app:layout_constraintTop_toBottomOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_01"
        style="@style/Scroll"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_02"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_00"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageButton
        android:id="@+id/iB_scroll_02"
        style="@style/Scroll"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_01"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <TextView
        android:id="@+id/textView_2"
        style="@style/Numbers"
        android:text="2"
        app:layout_constraintBottom_toTopOf="@+id/textView_1"
        app:layout_constraintEnd_toStartOf="@id/iV_pins_1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iV_pins_1"
        style="@style/Pins"
        app:layout_constraintBottom_toBottomOf="@+id/iB_scroll_10"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_10"
        app:layout_constraintStart_toEndOf="@+id/textView_2"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_10"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toTopOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_11"
        app:layout_constraintStart_toEndOf="@id/iV_pins_1"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/iB_scroll_11"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_10"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_12"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_10"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_12"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_11"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

</androidx.constraintlayout.widget.ConstraintLayout>

无指南

样式.xml：

<resources>
    <style name="Scroll" parent="@style/Widget.AppCompat.ImageButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:adjustViewBounds">true</item>
        <item name="android:scaleType">fitCenter</item>
        <item name="layout_constraintDimensionRatio">1</item>
        <item name="layout_constraintHorizontal_weight">1.5</item>
        <item name="layout_constraintWidth_max">90dp</item>
        <item name="android:layout_marginStart">4dp</item>
        <item name="srcCompat">@drawable/ic_empty</item>
    </style>

    <style name="Pins">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:adjustViewBounds">true</item>
        <item name="android:scaleType">fitCenter</item>
        <item name="layout_constraintDimensionRatio">1</item>
        <item name="layout_constraintHorizontal_weight">1.2</item>
        <item name="layout_constraintWidth_max">60dp</item>
        <item name="srcCompat">@drawable/pins_6</item>
        <item name="android:layout_marginStart">4dp</item>
    </style>

    <style name="Numbers">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="autoSizeMaxTextSize">60sp</item>
        <item name="autoSizeMinTextSize">8sp</item>
        <item name="autoSizeStepGranularity">1sp</item>
        <item name="autoSizeTextType">uniform</item>
        <item name="layout_constraintHorizontal_weight">0.7</item>
        <item name="android:gravity">center</item>
    </style>
</resources>

图像按钮应该和我不使用指南时一样大。但我需要一个指南，因为我有另一个布局，我希望视图从相同的位置开始，因此与此处的图像按钮垂直对齐（ScrollLayout 的固定标题）。我试图通过指南来实现这一点，但上面的约束布局的结果并不像预期的那样......

4

1 回答 1

0

我通过删除样式“pins”的约束尺寸比来解决它。我不完全确定为什么这有助于指导案例，但它解决了它。

于 2021-08-19T14:41:50.533 回答