Android片段:在ScrollView中垂直居中时,内容顶部被切除

时间:2018-11-29 17:34:30

标签: android android-studio android-fragments android-scrollview androidx

我正在尝试使用ViewPager和Fragments(类似于此Intro Slider Tutorial)为AndroidX应用创建简介,并遇到布局问题。
我有一个片段,我希望其中的内容垂直居中。我添加了ScrollView作为Fragment的根元素,以防内容太长而无法容纳屏幕。

如果内容不太长,它们将居中对齐,并且不会被剪切掉:
centering working

如果它们太长,则内容的顶部将被切除,并且在底部添加一些额外的空间(似乎正好是从顶部切除的高度):
overlong content, title cut off
overlong content, additional space at the bottom


片段布局

<?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父级中的WebViews
  将放置在使用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” ,则不会中断任何操作。但是后来我的内容显然没有居中(出于美学原因,我希望这样做)。

0 个答案:

没有答案