使用 ConstraintLayout 在横向模式下将 ImageButton 居中对齐
Center align ImageButton in landscape mode using ConstraintLayout
TL;DR
我想在 ScrollView 中居中对齐 ImageButton，我对纵向模式下的结果非常满意。但是，我不能对横向模式说同样的话，任何帮助将不胜感激。
但让我解释一下
我在这里使用了两个布局文件；第一个是我用于 MainActivity class 的那个，叫做 activity_main.xml。当 MainActivity 加载 MainFragment.
时，第二个（称为 fragment_main.xml）嵌套到 activity_main.xml 中
fragment_main.xml 的预览看起来非常适合纵向和横向模式：
fragment_main.xml in landscape
fragment_main.xml in portrait
而 activity_main.xml 在纵向模式下的渲染看起来正是我想要的样子：
activity_main.xml in portrait
但是，activity_main.xml 在横向模式下看起来很奇怪，我不明白为什么：
activity_main.xml in landscape
这是 activity_main.xml 的 XML，fragment_main.xml 作为 ScollView 的子项合并到其中：
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="@style/Toolbar.TitleText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ScrollView
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_constraintTop_toBottomOf="@id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<!-- Content of fragment_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingStart="50dp"
android:paddingEnd="50dp"
tools:context=".MainFragment">
<ImageButton
android:id="@+id/overlay_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@null"
android:contentDescription="@string/start_speedometer"
android:scaleType="fitCenter"
android:src="@drawable/btn_circle_green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/overlay_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:text="@string/start_speedometer"
android:textColor="@color/white"
android:textSize="40sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="@menu/nav_drawer_view"
app:headerLayout="@layout/nav_drawer_header"
app:itemIconTint="@drawable/nav_drawer_item_icon_color"
app:itemTextColor="@drawable/nav_drawer_item_text_color" />
</androidx.drawerlayout.widget.DrawerLayout>
我正在寻找一种解决方案，我只需更改 fragment_main.xml（即 ScollView 内的所有内容）。解决方案应该只涉及 XML。
我试过的
我试过摆弄 app:layout_constraintDimensionRatio (W,1:1, H,1:1), app:layout_constrainedHeight, app:layout_constraintHeight_max, layout_constraintHeight_min, 许多其他约束，甚至尝试将 fragment_main.xml 的内容嵌套在其他布局中，从 ConstraintLayout 移动到 RelativeLayout、LinearLayout 和 FrameLayout，但其中 none给我想要的结果，ConstraintLayout 是最接近的结果。
可能的解决方案
到目前为止唯一有效的解决方案是使用 app:layout_constraintWidth_default="percent" 和 app:layout_constraintWidth_percent="0.5" 导致
desired look of activity_main.xml in landscape
虽然这在 16:9 phone 上看起来不错，但在具有不同宽高比的 phone 上可能会导致与以前相同的问题。所以我正在寻找一种更通用的方法。
其他详细信息
这是 drawable 的内容 btn_circle_green.xml 我正在为按钮使用：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/ic_circle_green_pressed" />
<item android:state_focused="true" android:drawable="@drawable/ic_circle_green_focused" />
<item android:state_selected="true" android:drawable="@drawable/ic_circle_green_focused" />
<item android:drawable="@drawable/ic_circle_green_default" />
</selector>
每个 ic_circle_green_* 都是像这样具有不同颜色的矢量资产：
<vector
android:viewportWidth="300"
android:viewportHeight="300"
android:height="120dp"
android:width="120dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@color/green"
android:pathData="M150,150m-140,0a140,140 0,1 1,280 0a140,140 0,1 1,-280 0"
android:strokeWidth="5"
android:strokeColor="@color/green_light"/>
</vector>
非常感谢！
在我了解到 ScrollView 是让我头疼的元素之后（再次感谢@glucaio！）我找到了 this answer 并且能够解决我的问题。
ScrollView 收到 android:fitsSystemWindows="true"，内部 ConstraintLayout 的宽度和高度属性已切换（android:layout_width="wrap_content" 和 android:layout_height="match_parent"），收到 paddingTop 和 paddingBottom（而不是 paddingStart 和 paddingEnd）并被包裹在 LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" />
此解决方案仅适用于横向模式。因此，我将此答案中的一种用于横向模式，将我的问题中的一种用于纵向模式。
横向模式的最终 XML 是这样的：
Rendered activity_main.xml
这是实际的 XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="@style/Toolbar.TitleText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ScrollView
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="@id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<!-- Content of fragment_main.xml -->
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:paddingTop="30dp"
android:paddingBottom="30dp">
<ImageButton
android:id="@+id/overlay_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@null"
android:contentDescription="@string/start_speedometer"
android:scaleType="fitCenter"
android:src="@drawable/btn_circle_green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/overlay_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:text="@string/start_speedometer"
android:textColor="@color/white"
android:textSize="40sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="@menu/nav_drawer_view"
app:headerLayout="@layout/nav_drawer_header"
app:itemIconTint="@drawable/nav_drawer_item_icon_color"
app:itemTextColor="@drawable/nav_drawer_item_text_color" />
</androidx.drawerlayout.widget.DrawerLayout>
TL;DR
我想在 ScrollView 中居中对齐 ImageButton，我对纵向模式下的结果非常满意。但是，我不能对横向模式说同样的话，任何帮助将不胜感激。
但让我解释一下
我在这里使用了两个布局文件；第一个是我用于 MainActivity class 的那个，叫做 activity_main.xml。当 MainActivity 加载 MainFragment.
fragment_main.xml）嵌套到 activity_main.xml 中
fragment_main.xml 的预览看起来非常适合纵向和横向模式：
fragment_main.xml in landscape
fragment_main.xml in portrait
而 activity_main.xml 在纵向模式下的渲染看起来正是我想要的样子：
activity_main.xml in portrait
但是，activity_main.xml 在横向模式下看起来很奇怪，我不明白为什么：
activity_main.xml in landscape
这是 activity_main.xml 的 XML，fragment_main.xml 作为 ScollView 的子项合并到其中：
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="@style/Toolbar.TitleText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ScrollView
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_constraintTop_toBottomOf="@id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<!-- Content of fragment_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingStart="50dp"
android:paddingEnd="50dp"
tools:context=".MainFragment">
<ImageButton
android:id="@+id/overlay_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@null"
android:contentDescription="@string/start_speedometer"
android:scaleType="fitCenter"
android:src="@drawable/btn_circle_green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/overlay_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:text="@string/start_speedometer"
android:textColor="@color/white"
android:textSize="40sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="@menu/nav_drawer_view"
app:headerLayout="@layout/nav_drawer_header"
app:itemIconTint="@drawable/nav_drawer_item_icon_color"
app:itemTextColor="@drawable/nav_drawer_item_text_color" />
</androidx.drawerlayout.widget.DrawerLayout>
我正在寻找一种解决方案，我只需更改 fragment_main.xml（即 ScollView 内的所有内容）。解决方案应该只涉及 XML。
我试过的
我试过摆弄 app:layout_constraintDimensionRatio (W,1:1, H,1:1), app:layout_constrainedHeight, app:layout_constraintHeight_max, layout_constraintHeight_min, 许多其他约束，甚至尝试将 fragment_main.xml 的内容嵌套在其他布局中，从 ConstraintLayout 移动到 RelativeLayout、LinearLayout 和 FrameLayout，但其中 none给我想要的结果，ConstraintLayout 是最接近的结果。
可能的解决方案
到目前为止唯一有效的解决方案是使用 app:layout_constraintWidth_default="percent" 和 app:layout_constraintWidth_percent="0.5" 导致
desired look of activity_main.xml in landscape
虽然这在 16:9 phone 上看起来不错，但在具有不同宽高比的 phone 上可能会导致与以前相同的问题。所以我正在寻找一种更通用的方法。
其他详细信息
这是 drawable 的内容 btn_circle_green.xml 我正在为按钮使用：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/ic_circle_green_pressed" />
<item android:state_focused="true" android:drawable="@drawable/ic_circle_green_focused" />
<item android:state_selected="true" android:drawable="@drawable/ic_circle_green_focused" />
<item android:drawable="@drawable/ic_circle_green_default" />
</selector>
每个 ic_circle_green_* 都是像这样具有不同颜色的矢量资产：
<vector
android:viewportWidth="300"
android:viewportHeight="300"
android:height="120dp"
android:width="120dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@color/green"
android:pathData="M150,150m-140,0a140,140 0,1 1,280 0a140,140 0,1 1,-280 0"
android:strokeWidth="5"
android:strokeColor="@color/green_light"/>
</vector>
非常感谢！
在我了解到 ScrollView 是让我头疼的元素之后（再次感谢@glucaio！）我找到了 this answer 并且能够解决我的问题。
ScrollView 收到 android:fitsSystemWindows="true"，内部 ConstraintLayout 的宽度和高度属性已切换（android:layout_width="wrap_content" 和 android:layout_height="match_parent"），收到 paddingTop 和 paddingBottom（而不是 paddingStart 和 paddingEnd）并被包裹在 LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" />
此解决方案仅适用于横向模式。因此，我将此答案中的一种用于横向模式，将我的问题中的一种用于纵向模式。
横向模式的最终 XML 是这样的：
Rendered activity_main.xml
这是实际的 XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="@style/Toolbar.TitleText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ScrollView
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="@id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<!-- Content of fragment_main.xml -->
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:paddingTop="30dp"
android:paddingBottom="30dp">
<ImageButton
android:id="@+id/overlay_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@null"
android:contentDescription="@string/start_speedometer"
android:scaleType="fitCenter"
android:src="@drawable/btn_circle_green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/overlay_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:text="@string/start_speedometer"
android:textColor="@color/white"
android:textSize="40sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="@menu/nav_drawer_view"
app:headerLayout="@layout/nav_drawer_header"
app:itemIconTint="@drawable/nav_drawer_item_icon_color"
app:itemTextColor="@drawable/nav_drawer_item_text_color" />
</androidx.drawerlayout.widget.DrawerLayout>