2014-10-30 30 views
7

我正在將Material Design應用到具有導航抽屜的我的應用中。在Nav的所有不同實現中。帶材料設計的抽屜和工具欄(see this post);我已選擇讓應用程序保持與ICS/Halo設計類似的效果,並讓Nav Drawer在工具欄下滑出。問題是當導航抽屜打開時,工具欄會像陰影一樣變暗。我將如何防止工具欄變黑?如果您在上面鏈接的帖子中看到圖片,我在#6,3或5之後,但現在我的外觀更像#9。導航抽屜打開時從工具欄中刪除陰影 - 材質設計支持庫

例(從上面後):

後(工具欄上沒有影子)我是什麼:

enter image description here

我目前得到(NAV當抽屜打開工具欄變暗):

enter image description here

這裏是我的主要活動的XML代碼:

<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/drawer_layout" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:context="com.funkhaus.navdrawer.app.MainActivity"> 

<!-- As the main content view, the view below consumes the entire 
    space available using match_parent in both dimensions. --> 
<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <!-- We use a Toolbar so that our drawer can be displayed 
     in front of the action bar; Added for Material Design --> 
    <android.support.v7.widget.Toolbar 
     android:id="@+id/my_awesome_toolbar" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:minHeight="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" /> 

    <FrameLayout 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginTop="?attr/actionBarSize" /> 

</FrameLayout> 

<fragment android:id="@+id/navigation_drawer" 
    android:layout_width="@dimen/navigation_drawer_width" 
    android:layout_height="match_parent" 
    android:layout_marginTop="?attr/actionBarSize" 
    android:fitsSystemWindows="true" 
    android:layout_gravity="start" 
    android:name="com.funkhaus.brewwerks.NavigationDrawerFragment" /> 

的顯着的部分之處在於,其ID是'container'<FrameLayout>是我的所有片段被膨脹,並且其marginTop設定爲工具欄的高度因此它的內容將是工具欄的下方。同樣,導航抽屜片段也將其marginTop設置爲工具欄的高度,以便在其下滑動。

+1

將工具欄放在DrawerLayout之外。 – alanv 2014-10-31 06:01:15

+0

根據我的理解,當使用導航抽屜時,''需要成爲根視圖 – Flash 2014-10-31 14:18:10

+1

您的內容的根,是的。不是您的工具欄的根。 – alanv 2014-10-31 14:44:16

回答

9

感謝@alanv我解決了我的問題。

我的帖子上面顯示我的activity_main.xml代碼;我它簡化爲此,移除工具欄視圖併除去marginTop格式:

<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context="com.funkhaus.navdrawer.app.MainActivity"> 

<!-- As the main content view, the view below consumes the entire 
    space available using match_parent in both dimensions. --> 
    <FrameLayout 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

    <fragment android:id="@+id/navigation_drawer" 
     android:layout_width="@dimen/navigation_drawer_width" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     android:layout_gravity="start" 
     android:name="com.funkhaus.brewwerks.NavigationDrawerFragment" /> 

</android.support.v4.widget.DrawerLayout> 

我創建了一個toolbar.xml,這在我的主要活動<include>的所述activity_main.xml以上,我現在的setContentView():

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:orientation="vertical"> 
    <!-- We use a Toolbar so that our drawer can be displayed 
      in front of the action bar; Added for Material Design --> 
    <android.support.v7.widget.Toolbar 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/my_awesome_toolbar" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:minHeight="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" /> 

    <include android:id="@+id/drawer_layout" layout="@layout/activity_main" /> 

</LinearLayout> 

最後,在我的活動的onCreate()setContentView()toolbar.xml

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 

    setContentView(R.layout.toolbar); 
    // Rest of code here.... 
+1

ActionBar仍然支持,爲什麼不使用它呢?它的行爲完全如此。 – CristianGuerrero 2014-10-31 21:47:01

+1

非常感謝! @The Funk – theknut 2014-11-04 16:36:31

+0

儘管我們都有意在設計導航抽屜時根據更新的材料設計指南進行設計,但以下鏈接指向更新的:http://www.google.com/design/spec/patterns/navigation-drawer。 HTML – Flash 2014-11-04 20:56:41

2
You do it in the same xml like this, This is for underlying toolbar navigation like play store app design 




    <FrameLayout 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" 
     tools:context="com.ccas.roadsideconnect.BaseFragmentActivity"> 
    <android.support.v4.widget.DrawerLayout 

     android:id="@+id/drawer_layout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     > 


     <FrameLayout 
      android:id="@+id/main_fragment_container" 
      android:layout_marginTop="?attr/actionBarSize" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 



     <FrameLayout android:id="@+id/navigation_drawer" 
      android:layout_width="@dimen/navigation_drawer_width" 
      android:layout_height="match_parent" 
      android:layout_gravity="start" 
      tools:layout="@layout/fragment_navigation_drawer" /> 
    </android.support.v4.widget.DrawerLayout> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="@drawable/img_actionbar_white_sm" 
       android:gravity="top" 
       android:minHeight="58.0dip" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:theme="@style/ThemeOverlay.AppCompat.ActionBar" 
       /> 
     </LinearLayout> 

    </FrameLayout> 

下面的代碼是覆蓋Gmail應用設計的工具欄導航。

<FrameLayout 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" 
    tools:context="com.ccas.roadsideconnect.BaseFragmentActivity"> 
<android.support.v4.widget.DrawerLayout 

    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    > 

    <FrameLayout 
     android:id="@+id/main_fragment_container" 
     android:layout_marginTop="?attr/actionBarSize" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="@drawable/img_actionbar_white_sm" 
      android:gravity="top" 
      android:minHeight="58.0dip" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      app:theme="@style/ThemeOverlay.AppCompat.ActionBar" 
      /> 
    </LinearLayout> 

    <FrameLayout android:id="@+id/navigation_drawer" 
     android:layout_width="@dimen/navigation_drawer_width" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" 
     tools:layout="@layout/fragment_navigation_drawer" /> 
</android.support.v4.widget.DrawerLayout> 

</FrameLayout>