2017-04-14 9 views
0

私のアプリは、「Material Design-ey」のように見直していますが、FABに問題があります。私は2つのフローティングアクションボタンとscrollviewを持っている:スクロールビュー上のフローティングアクションボタン?


私が一番下までスクロールすると、Fabが私のコンテンツをカバーしています。

Picture speaks a thousand words :)(Fabは以下整列するためにもう少しをスクロールすることができるはずです)


:私は、Fabが何も重なることなく align_parent_bottomにすることができるので、下を過ぎて少しをスクロールできるようにしたいです

enter image description here(スクロールダウンする前に)

にはどうすればFabが休息するための最大までスクロールした後に私のアプリの底に余分なスペースを作成するのですか?

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="#68d9cc"> 

    <ScrollView 

     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fillViewport="true"> 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="#68d9cc"> 



    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="@color/colorPrimary" 
     android:elevation="20dp" 
     android:theme="@style/ThemeOverlay.AppCompat.ActionBar" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"> 

     <ImageView 
      android:layout_height="match_parent" 
      android:layout_width="wrap_content" 
      android:id="@+id/back" 

      android:onClick="cancel" 

      android:src="@drawable/ic_arrow_back_black_24dp" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Test example" 
      android:textSize="22sp" 
      android:id="@+id/header" 
      android:textColor="@color/textColorPrimary" 
      android:layout_gravity="center" 
      android:paddingRight="10dp" 
      /> 


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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:id="@+id/linear" 
     android:layout_marginBottom="55dp" 
     android:layout_below="@+id/textView12" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textSize="20sp" 
      android:textColor="@android:color/black" 
      android:layout_below="@+id/textView12" 

      android:text="textview:" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" /> 

     <EditText 
      android:id="@+id/editText" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignBaseline="@+id/textView4" 
      android:layout_alignBottom="@+id/textView4" 

      android:layout_toEndOf="@+id/textView4" 
      android:layout_toRightOf="@+id/textView4" 
      android:imeOptions="actionDone" 
      android:inputType="text" /> 
    </LinearLayout> 

    <ListView 
     android:id="@+id/listview" 
     android:layout_width="wrap_content" 
     android:choiceMode="singleChoice" 
     android:layout_height="300dp" 
     android:layout_below="@+id/toolbar" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:elevation="9dp"> 

    </ListView> 

    <TextView 
     android:id="@+id/textView12" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="78dp" 
     android:gravity="center_horizontal" 
     android:text="textview" 
     android:textColor="#000000" 
     android:textSize="18sp" 
     android:layout_below="@+id/listview" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" /> 

</RelativeLayout> 

</ScrollView> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/cancel" 
     android:onClick="cancel" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:clickable="true" 
     app:fabSize="normal" 
     app:srcCompat="@drawable/ic_close_black_24dp" 
     /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/done" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentRight="true" 
     android:clickable="true" 
     app:fabSize="normal" 
     app:srcCompat="@drawable/ic_done_black_24dp" 
     /> 

    </RelativeLayout> 

答えて

0

前述のようにマテリアルデザインを目指している場合、そのようなフローティングアクションボタンを置くことはお勧めしません。右側にお互いの上に積み重ねるか、またはクリックすると複数のミニFABが開きます。

簡単な修正ができましたが、ここで考えることができるのは、レイアウトにpaddingBottomを追加して、より多くの「コンテンツ」を持ち、さらにスクロールすることです。

まだこのセクションを読んでいない場合は、このセクションをお読みください。

https://material.io/guidelines/components/buttons-floating-action-button.html#

+0

追加する必要がありますか?それは正確に異なる画面のサイズに基づいて、右でしょうか? –

+0

もちろん、デバイスによって異なるdpsがあります。つまり、FABの高さと重さの代わりに、 "wrap_content"に56×56dp(これはFABのマテリアルデザインで言及されているデフォルトサイズ)に設定し、paddingBottomも56dpに設定します。 – Kia

関連する問題