[Xamarin] Android 關於 NavigationDrawer 簡單實作(實作篇)

2016-07-07

上一篇文章([Xamarin] Android 關於 NavigationDrawer 簡單實作(介面篇))我們聊到關於怎麼建立簡單的 NavifationDrawer ,今天我們來聊聊上方的ToolBar。

未命名

1.先建立ToolBar 的 UI  Resources\layout\app_bar.axml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

2.在Main.axml 中加入
<include
layout="@layout/app_bar" />

執行起來後,你會看到長這樣
未命名111

3.在MainActivity OnCreate加入

//上方的Bar
var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.app_bar);
SetSupportActionBar(toolbar);
SupportActionBar.Title = "當麻許的測試APP";
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetDisplayShowHomeEnabled(true);

未命名333

4.讓她出現選單符號,並且跟左邊側欄連動

// 建立上方按鈕並加入事件
var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.open_drawer, Resource.String.close_drawer);
drawerLayout.SetDrawerListener(drawerToggle);
drawerToggle.SyncState();

未命名4444

5.處理左側點擊的事件

//處理左邊側攔 點擊事件
var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
 
 

基本上我只是附上一些比較需要注意的地方,如果有需要就參考source code.

reference :
https://blog.xamarin.com/android-tips-hello-material-design-v7-appcompat/
http://www.appliedcodelog.com/2016/01/navigation-drawer-using-material-design.html

source code :
https://www.dropbox.com/s/24ccd3sajgbd8g8/NavigationDrawerSample_2.7z?dl=0


當麻許的超技八 2014 | Donma Hsu Design.