键盘启动时的CardView滚动行为

时间:2015-06-19 15:42:03

标签: android android-scrollview android-cardview

我们的应用程序的主要内容是CardView的RecylerView。对于注册,我们需要的不仅仅是用户名/密码来创建帐户,因此我们决定在注册后使用CardView的注册流程来匹配用户体验。

要做到这一点,我有一个活动,从底部动画片段,顶部的现有片段动画模拟滚动。当用户输入数据并且在前进之后点击时发生这种虚假滚动。除了一个案例之外,这很有效。当我们有一个EditText用于输入时,键盘会出现并覆盖屏幕底部的“下一个”按钮。

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

我花了很多时间试图让CardView向上滚动以显示按钮,但是我没有想法并且正在寻找新的想法。

注册活动布局仅包含我将Fragments加载到的FrameLayout。每个加载的片段都有一个用于根布局的CardView。

在清单中,我已将活动的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放入ScrollView的cardview布局(使用fillViewport为true)时,我得到一个滚动条,但卡片不会滚动,卡片视图布局变得混乱。

有没有人知道windowSoftInputMode足以让我指向正确的方向?或者,CardView是不是要在设计用于容纳它们的Container之外滚动?

感觉解决方案就是操纵活动的视图而不是片段。

1 个答案:

答案 0 :(得分:6)

我最终创建了一个新应用来解决这个问题,并注意到如果我的布局不包含其根布局为ScrollView的CardView,除非活动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>