[Xamarin] Android 關於 NavigationDrawer 簡單實作(介面篇)
在google 知名的Material design 中 Navigation drawer 是蠻常看見的，而且真的蠻方便好用的，但是事實上，在Android Stduio 裡面內建範例超麻煩的， 那在Xamarin
今天我們來試做看看這是心得文，主要是參考 http://www.appliedcodelog.com/2016/01/navigation-drawer-using-material-design.html 跟 https://docs.xamarin.com/samples/monodroid/android5.0/NavigationDrawer/ 文章。
1. . 首先先引入Xamarin Component
當你引入時，因為相依性幫你處理好，這時候 reference 會長這樣
2.建立選單，在Resources\menu\ 建立一個 leftmenu.xml 內容為
<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/btn1"
android:icon="@drawable/info_black"
android:title="單選功能1" />
<item
android:id="@+id/btn2"
android:icon="@drawable/info_black"
android:title="單選功能2" />
</group>
<item android:title="其他功能區">
<menu>
<item
android:title="其他功能1" />
<item
android:title="其他功能2" />
</menu>
</item>
</menu>
這樣選單呈現會長這樣
3.建立左側選單的layout ，在步驟2 我們建立選單的資料了，接下來是上方的部分下圖紅色框框的部分
Resources/layout 中 headerdrawerlayout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="178dp"
android:orientation="vertical"
android:weightSum="1"
android:background="@drawable/imgbg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="54dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
><TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:textColor="#ffffff"
android:text="Test Navi Drawer"
android:textSize="20dp"
android:textStyle="bold"
android:typeface="sans" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_marginLeft="16dp"
android:layout_marginTop="2dp"
android:text="[email protected]"
android:textSize="14dp"
android:textStyle="normal" />
</LinearLayout>
</RelativeLayout>
4.接下就是主要的layout ，主要是要用到 android.support.v4.widget.DrawerLayout 這會在你引入Android Support Design Library 會引用到 android.support.v4.widget
Resources\layout\Main.axml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
android:fitsSystemWindows="true">
<android.support.v4.widget.DrawerLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
android:id="@+id/drawer_layout"
android:background="#33CCFF"><LinearLayout
android:id="@+id/layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/HomeFrameLayout"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/leftmenu"
app:headerLayout="@layout/headerdrawerlayout" /></android.support.v4.widget.DrawerLayout>
</LinearLayout>
5.主要的 Activity 改為繼承 AppCompatActivity ，並且把他啟動就可以了
using Android.App;using Android.OS;using Android.Support.V7.App;namespace NavigationDrawerSample{[Activity(Label = "NavigationDrawerSample", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : AppCompatActivity
{protected override void OnCreate(Bundle savedInstanceState)
{ base.OnCreate(savedInstanceState);SetContentView(Resource.Layout.Main);
}
}
}
你就可以看到選單的畫面，畫面出來了接下來使用方面我們下篇再聊聊
source code:
https://www.dropbox.com/s/9gtz2i3dntarfnw/NavigationDrawerSample_1.7z?dl=0
reference :
http://www.appliedcodelog.com/2016/01/navigation-drawer-using-material-design.html
https://github.com/suchithm/NavigationDrawerMD
https://developer.xamarin.com/samples/monodroid/android5.0/NavigationDrawer/