键盘启动时CardView滚动行为

问题描述：

我们的应用程序的主要内容是CardView的RecylerView。注册时，我们需要的不仅仅是用户名/密码来创建一个帐户，所以我们决定让注册流程脱离CardView's，以便在注册后与用户体验相匹配。键盘启动时CardView滚动行为

要做到这一点，我有一个单独的活动，从底部将片段和现有片段放在顶部以模拟滚动。这种假滚动发生在用户输入数据并点击前进时。除一种情况外，这种方法非常有效。当我们有一个EditText输入时，键盘出现并覆盖屏幕底部的'next'按钮。

在我们的用户测试中，我们注意到有很高比例的用户试图向上滚动卡片以进入下一个按钮，而不是忽略键盘。

我花了很多时间试图让CardView滚动显示按钮，但我没有想法并寻找新的东西。

注册活动布局只包含一个我加载片段的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在滚动型的cardview布局（与fillViewport真），我得到一个滚动条，但卡不滚动和cardview布局变得混乱。

有谁知道windowSoftInputMode是否足以指向正确的方向？或者，CardView不会滚动到设计容纳它们的Container之外？

感觉这个解决方案是在操作活动的视图而不是片段。

答

我结束了创建一个新的应用程序，只是玩这个问题，并注意到，如果我有一个布局，不包含CardView的根布局是一个ScrollView，它不会滚动，除非活动windowSoftInputMode设置adjustResize然后它将滚动。

然后我做了一个<ScrollView><CardView><content...></CardView></ScrollView>的布局，CardView的大小始终是卡的默认行大小，并且不会匹配。我在ScrollView上用fillViewPort =“true”解决了这个问题，但是当键盘出来时它不会滚动。

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

您仍然必须考虑布局的大小调整以防止您的视图元素彼此堆叠，但一旦您这样做，现在您可以在软键盘上方查看视图并滚动到达其余部分带有CardView的UI。

<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>

纯粹的迷人 – mjosh

键盘启动时CardView滚动行为

相关推荐