2017-02-10 4 views
1

У меня есть FloatingActionButtons в приложении для Android, закрепленное под заголовком в представлении, где содержимое под кнопками прокручивается. На начальной загрузки, вид показывает правильно, как это:FloatingActionButton - Неверный z-индекс после прокрутки

enter image description here

Как пользователь прокручивает содержимое на странице, что они должны попасть что-то вроде этого:

enter image description here

Примечательно, что кнопки остаются над всем остальным содержимым на экране. Однако то, что на самом деле происходит:

enter image description here

Где кнопка неправильно вынесена за строкой заголовка. Мой файл разметки XML выглядит следующим образом:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 
    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="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context="au.com.suncoastpc.coastlive.activity.EventDetailsActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/app_bar_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/AppTheme.PopupOverlay"/> 

     </android.support.design.widget.CollapsingToolbarLayout> 
    </android.support.design.widget.AppBarLayout> 

    <LinearLayout 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|end" 
     android:orientation="horizontal" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content"> 


     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab_facebook" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="@dimen/fab_margin" 
      android:layout_marginBottom="@dimen/fab_margin" 
      app:backgroundTint="#3c5a99" 
      app:srcCompat="@drawable/icon_facebook"/> 
     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab_music" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="@dimen/fab_margin" 
      android:layout_marginBottom="@dimen/fab_margin" 
      android:layout_marginLeft="@dimen/fab_margin" 
      app:backgroundTint="#008800" 
      app:srcCompat="@drawable/icon_music"/> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="@dimen/fab_margin" 
      app:backgroundTint="#880000" 
      app:srcCompat="@drawable/icon_info"/> 
    </LinearLayout> 

    <include layout="@layout/content_event_details"/> 
</android.support.design.widget.CoordinatorLayout> 

... где content_event_details расположение имеет NestedScrollView в качестве корневого элемента и содержит карту, детали текста и другие элементы пользовательского интерфейса, которые можно увидеть в фотографии выше (в основном все, кроме строки заголовка и плавающих кнопок).

Как сделать так, чтобы FloatingActionButtons оставался на вершине строки заголовка в любое время?

ответ

1

Hy Aroth,

В You AppBar добавьте андроида: возвышение = "4ДП" >>>

<android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/app_bar_height" 
     android:fitsSystemWindows="true" 
     android:elevation="4dp" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

и в вашем LinearLayout содержащей FAB, добавить андроида: высота = "6dp" >>>

<LinearLayout 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|end" 
     android:orientation="horizontal" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:elevation="6dp"> 

Надеется, что это помогает :)

+1

android: setElevation -> android: elevation – wrkwrk

+0

Работает отлично. Хотя, как заметил @wrkwrk, правильным тегом для использования в XML является 'android: elevation', _not_' android: setElevation'. – aroth

+0

Ohhhh Прошу прощения за это – Ritik

Смежные вопросы