android - Android Fragment:在ScrollView中垂直居中时内容顶部被切断
问题描述
我正在尝试使用 ViewPager 和 Fragments 构建我的 AndroidX 应用程序的介绍(类似于此Intro Slider Tutorial)并且遇到了布局问题。
我有一个片段,我希望内容垂直居中。我添加了一个 ScrollView 作为 Fragment 的根元素,以防内容太长而无法适应屏幕。
如果内容不是太长,它们将完美居中并且没有任何内容被切断:
居中工作
如果它们太长,内容的顶部会被截断,并在底部添加一些额外的空间(似乎正是截断顶部的高度):
过长的内容,标题截断
过长的内容,附加底部空间
片段布局
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:scrollbars="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/web_view_fragment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical">
<TextView
android:id="@+id/web_view_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
android:lineSpacingMultiplier="1.2"
android:text="Title"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/web_view_title" />
<TextView
android:id="@+id/web_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/design_default_color_on_secondary"
android:lineSpacingMultiplier="1.2"
android:padding="0dp"
android:text="Description"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/web_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
请注意: Android Studio 显示 ScrollView 的警告:
ScrollView 大小验证
此 androidx.constraintlayout.widget.ConstraintLayout 应使用 android:layout_height="wrap_content"
ScrollView 子项必须在滚动维度中将其 layout_width 或 layout_height 属性设置为 wrap_content 而不是 fill_parent 或 match_parent
问题 id:ScrollViewSize
但是,将ScrollView的layout_height更改为wrap_content 并不能解决问题,并且会显示错误而不是警告:
wrap_content 父级中
的 WebView 将 a 放置在使用 wrap_content layout_height 的父元素中可能会导致细微的错误;改用 match_parent
WebView 实现具有某些性能优化,如果父视图使用 wrap_content 而不是 match_parent,则这些优化将无法正常工作。这可能会导致细微的 UI 错误。
问题 ID:WebViewLayout
使用 ViewPager 的活动布局
<?xml version="1.0" encoding="utf-8"?>
<!-- intro_activity -->
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/intro_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blueGray700">
<androidx.viewpager.widget.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/divider"
app:layout_constraintEnd_toStartOf="@id/divider"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside" />
<View
android:id="@+id/divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="?android:attr/listDivider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/intro_tab_layout" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/intro_tab_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/intro_continue_button"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/intro_skip_button"
app:layout_constraintTop_toBottomOf="@+id/pager"
app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="16dp" />
<Button
android:id="@+id/intro_skip_button"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="@string/intro_skip_button"
android:textColor="@android:color/white"
android:onClick="finishTutorial"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/pager" />
<Button
android:id="@+id/intro_continue_button"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="nextFragment"
android:padding="5dp"
android:text="@string/intro_continue_button"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/pager"
app:layout_constraintTop_toBottomOf="@+id/pager" />
</androidx.constraintlayout.widget.ConstraintLayout>
显然我的布局有问题,但我不知道问题出在哪里。任何帮助将不胜感激!
到目前为止我发现了什么:
- TextViews 的填充不是问题。
- 如果我从 ConstraintLayout 中删除android:layout_gravity="center_vertical",则不会切断任何内容。但是我的内容显然没有居中(出于美学原因,我想要这样做)。
解决方案
推荐阅读
- ios - 检测哪个 ImageView 已被点击
- r - 在 ggplot2 中显示自定义轴标签
- javascript - “string”参数必须是 string、Buffer 或 ArrayBuffer 类型之一。接收类型未定义:BASIC AUTH
- javascript - 分配 javascript 函数的返回值显示为 [object Object 而不是 HTML?
- java - UDP客户端问题
- c - Glob 中的“未排序”订单从何而来?
- php - 向 FCM API 发送请求时收到无效的 JSON 有效负载
- android - 带有通知和嵌套多个图的 Jetpack 导航图问题
- python - 如果正则表达式不匹配,则在 pandas str.extract() 之后保留原始字符串值
- laravel - 我无法访问附加到数据透视表的数组?