CardView 键盘弹起时的滚动行为

Question

我们应用的主要内容是CardView的RecylerView。对于注册，我们需要的不仅仅是 username/password 来创建一个帐户，因此我们决定让注册流程从 CardView 中流出，以匹配用户注册后的体验。

为此，我有一个 Activity 动画片段从底部进入，现有片段从顶部进入以模拟滚动。当用户输入数据并点击下一步前进时，就会发生这种假滚动。除了一种情况外，这工作得很好。当我们有一个用于输入的 EditText 时，键盘会出现并覆盖屏幕底部的 'next' 按钮。

在我们的用户测试中，我们注意到很大比例的用户试图向上滚动卡片以转到下一个按钮，而不是关闭键盘。

我花了很多时间尝试让 CardView 向上滚动以显示按钮，但没有成功，我没有想法，正在寻找新的想法。

注册 Activity 布局仅包含我将 Fragment 加载到其中的 FrameLayout。加载的每个片段都有一个用于根布局的 CardView。

在清单中，我已将 activity 的 windowsSoftInputMode 设置为 adjustResize、adjustPan，但收效甚微。

activity_signup.xml

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/signUpContent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

简化fragment_enter_code.xml

<android.support.v7.widget.CardView
style="@style/CardViewStyle.SignUp"
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:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="25dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:contentPadding="8dp">

        <EditText
             android:id="@+id/codeEditText"
             style="@style/HintedEditText"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="Code"
             android:inputType="text"/>

        <Button
            style="@style/NextButton"
            android:id="@+id/nextButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:enabled="false"
            android:text="@string/next"/>

</android.support.v7.widget.CardView>

当我尝试将 CardView 放入 CardView 布局的 ScrollView 中（fillViewport 为 true）时，我得到了一个滚动条，但卡片没有滚动并且 CardView 布局变得混乱。

有谁知道 windowSoftInputMode 足以为我指明正确的方向？还是 CardView 只是不会滚动到设计用于容纳它们的容器之外？

感觉解决这个问题的方法是操纵 activity 的视图而不是片段。

Answer 1

我最终创建了一个新应用来解决这个问题，并注意到如果我的布局不包含 CardView，其根布局是 ScrollView，除非活动 windowSoftInputMode 是设置为 adjustResize 然后它会滚动。

然后我用 <ScrollView><CardView><content...></CardView></ScrollView> 制作了一个布局，CardView 的大小始终是卡片的默认行大小，而不是 match_parent。我在 ScrollView 上使用 fillViewPort="true" 解决了这个问题，但是当键盘出现时它不会滚动。

原来秘诀是在 CardView 和 ScrollView 之间放置一个 FrameLayout（或任何其他布局）。

您仍然需要考虑调整布局的大小，以防止您的视图元素不会相互堆叠，但是一旦您这样做了，您现在就可以在软键盘上方滚动视图并能够到达其余部分UI 和 CardView。

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardCornerRadius="35dp"
            app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:contentPadding="8dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:src="@drawable/common_ic_googleplayservices"/>

                <EditText
                    android:id="@+id/input"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="50dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_below="@id/image"
                    android:hint="Input"
                    android:inputType="text"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_below="@id/input"
                    android:orientation="vertical"
                    android:gravity="bottom|center_horizontal">

                    <Button
                        android:id="@+id/nextButton"
                        android:layout_width="match_parent"
                        android:layout_height="48dp"
                        android:layout_marginLeft="20dp"
                        android:layout_marginRight="20dp"
                        android:enabled="false"
                        android:text="Next"/>

                </LinearLayout>

            </RelativeLayout>

        </android.support.v7.widget.CardView>

    </FrameLayout>

</ScrollView>

CardView 键盘弹起时的滚动行为

CardView Scroll behavior when keyboard is up

android

android-scrollview

android-cardview