Android 使用指南时约束布局结果不同
Android Constraint Layout result differs when using guideline
当我在约束布局中使用指南时，约束布局的结果不同。
- 指南：
<?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>
Guideline
- 无指南：
<?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>
No Guideline
Styles.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>
图像按钮应该像我没有使用指南时那样大。但我需要一个指南，因为我有另一个布局，我希望视图从相同的位置开始，因此与此处的图像按钮垂直对齐（固定 header 的 ScrollLayout）。我试图通过指南实现这一点，但上面的约束布局的结果并不像预期的那样...
我通过删除样式“pin”的约束尺寸比解决了这个问题。我不完全确定为什么这对指南案例有帮助，但它解决了它。
当我在约束布局中使用指南时，约束布局的结果不同。
- 指南：
<?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>
Guideline
- 无指南：
<?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>
No Guideline
Styles.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>
图像按钮应该像我没有使用指南时那样大。但我需要一个指南，因为我有另一个布局，我希望视图从相同的位置开始，因此与此处的图像按钮垂直对齐（固定 header 的 ScrollLayout）。我试图通过指南实现这一点，但上面的约束布局的结果并不像预期的那样...
我通过删除样式“pin”的约束尺寸比解决了这个问题。我不完全确定为什么这对指南案例有帮助，但它解决了它。