2015-06-19 48 views
4

我們的應用程序的主要內容是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之外?

感覺這個解決方案是在操作活動的視圖而不是片段。

回答

5

我結束了創建一個新的應用程序,只是玩這個問題,並注意到,如果我有一個佈局,不包含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> 
+0

純粹的迷人 – mjosh