2014-11-05 54 views
0

enter image description here的是Android 5.0 - 如何從材料設計準則

我沒有得到這是動作條,並且是工具欄實現這個平板電腦的佈局。 我該如何實施? 任何答案讚賞..感謝提前。

+0

說真的,有大量的文檔供您閱讀。對於工具欄,ActionBar等看這裏:http://android-developers.blogspot.de/2014/10/implementing-material-design-in-your.html或在這裏:https://chris.banes.me/2014/10/17/appcompat-v21/etc. – Blacklight 2014-11-05 12:11:18

回答

6

在此示例中,藍色工具欄是一個擴展高度,覆蓋屏幕內容並提供導航按鈕。在詳細視圖中使用了另一個工具欄。我在下面圈出了兩個工具欄。

Toolbars

+0

你能幫我把代碼給我,讓我可以實現它...謝謝你的回覆 – 2014-11-06 04:34:19

1

沒有試過尚未但它應該工作。這裏是你的佈局:

<?xml version="1.0" encoding="utf-8"?> 
<!-- The important thing to note here is the added fitSystemWindows --> 

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

    <!-- Your content --> 
    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 

     <!-- Your main ActionBar (with the blue background). 
      The height is 56 + 72dp according to specs --> 
     <android.support.v7.widget.Toolbar 
      android:id="@+id/main_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="?attr/colorPrimary" 
      android:minHeight="128dp" /> 

     <!-- The white sheet --> 
     <FrameLayout 
      android:id="@+id/content_container" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginEnd="64dp" 
      android:layout_marginStart="64dp" 
      android:layout_marginTop="56dp" 
      android:background="@android:color/white"> 

      <!-- This is the secondary toolbar, 72dp also according to specs --> 
      <android.support.v7.widget.Toolbar 
       android:id="@+id/secondary_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:background="@android:color/darker_gray" 
       android:minHeight="72dp" /> 

      <!-- Your main frame container where you put your fragment --> 
      <FrameLayout 
       android:id="@+id/frame_container" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"/> 

     </FrameLayout> 

    </RelativeLayout> 

    <!-- Your drawer view. This can be any view, LinearLayout 
     is just an example. As we have set fitSystemWindows=true 
     this will be displayed under the status bar. --> 
    <LinearLayout 
     android:layout_width="304dp" 
     android:layout_height="match_parent" 
     android:layout_gravity="left|start" 
     android:fitsSystemWindows="true"/> 

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

這將包括一個NavigationDrawer是那張ActionBar(有關更多信息,read this answer by Chris Banes),並且佈局你的要求之上。

然後在你的Fragment/Activity

public void onCreate(Bundled savedInstanceState) { 
    super.onCreate(savedInstanceState); 

    // ... 

    // Set the main Toolbar as the ActionBar 
    Toolbar mainToolbar = (...) findViewById(R.id.main_toolbar); 
    setSupportActionBar(mainToolbar); 

    // Now retrieve the DrawerLayout so that we can set the status bar color. 
    // This only takes effect on Lollipop, or when using translucentStatusBar 
    // on KitKat. 
    DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout); 
    drawerLayout.setStatusBarBackgroundColor(yourChosenColor); 

    // Use the secondary toolbar in Standalone mode. This means you don't set is as the ActionBar 
    // but it also implies you have to handle the Toolbar items yourslef 
    Toolbar secondaryToolbar = (...) findViewById(R.id.secondary_toolbar); 

    // For example, to set an OnMenuItemClickListener to handle menu item clicks : 
    toolbar.setOnMenuItemClickListener(
      new Toolbar.OnMenuItemClickListener() { 
       @Override 
       public boolean onMenuItemClick(MenuItem item) { 
        // Handle the menu item 
        return true; 
       } 
    }); 

    // To inflate a menu to be displayed in the toolbar : 
    toolbar.inflateMenu(R.menu.your_toolbar_menu); 

    // ... 
} 

我想這應該做到這一點(不要忘記尺寸來代替硬編碼值以適應設備的大小)。

欲瞭解更多信息,請看the AppCompat v21 docChris Banes' post on the AppCompat v21