在Xamarin Mono For Android中简单实现Navigation Drawer：基本篇

类别：.Net相关知识 / 日期：2014-10-30 / 浏览：2457 / 评论：0

由于需要，最近一直在研究实现屏幕左滑显示菜单的功能，根据网上的资料有两种解决办法，一种是使用SlidingMenu第三方控件的方法，还有一种是官方推荐的Navigation Drawer，第一种方法可以在网上找的相关的文章，我这里使用了第二种方法。要实现这个功能，首先必须要在项目引用当中添加对Mono.Android.Support.v4.dll的引用，如下图

接下来，我们在主界面Main.axml中添加以下内容。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111" />
</android.support.v4.widget.DrawerLayout>

上面的页面中主要分成了两个部分，一个是FrameLayout，用于显示主要的内容，另一个ListView则用于显示左边划出的菜单列表。接下来，我们需要定义几个Fragment，菜单中点击某项就显示出某Fragment中所渲染的页面。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;

namespace Demo2.Fragments
{
    public class MainFragment : Fragment
    {
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var rootView = inflater.Inflate(Resource.Layout.FragmentMain, container, false);
            return rootView;
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:text="主界面"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:gravity="center" />
</LinearLayout>

以上定义的是主界面，当程序启动的时候默认显示该页面，同时还新建了3个其他页面，以便在菜单栏中点击后可以显示。接下来，我们需要定义一个菜单栏中的每一项所用的模板，我就简单定义了，代码如下。

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textColor="#fff"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"
    android:textSize="30px" />

下面是主界面的MainActivity中的代码。

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Support.V4.Widget;
using Android.Views;
using Android.Widget;
using Android.OS;
using Demo2.Fragments;

namespace Demo2
{
    [Activity(Label = "Demo2", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        private DrawerLayout _drawer;
        private ListView _drawerList;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            SetContentView(Resource.Layout.Main);

            string[] titiles = { "主界面", "治疗", "免疫", "保健" };

            _drawer = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
            _drawerList = FindViewById<ListView>(Resource.Id.left_drawer);
            _drawerList.Adapter = new ArrayAdapter<string>(this, Resource.Layout.DrawerListItem, titiles);
            _drawerList.ItemClick += darwerList_ItemClick;

            if (null == bundle)
            {
                var tfragment = new MainFragment();
                FragmentManager.BeginTransaction().Replace(Resource.Id.content_frame, tfragment).Commit();
                _drawerList.SetItemChecked(0, true);
                _drawer.CloseDrawer(_drawerList);
            }

        }

        void darwerList_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            if (e.Position == 1)
            {
                var tfragment = new TreatmentFragment();
                FragmentManager.BeginTransaction().Replace(Resource.Id.content_frame, tfragment).Commit();
                _drawerList.SetItemChecked(e.Position, true);
                _drawer.CloseDrawer(_drawerList);
            }
            else if (e.Position == 2)
            {
                var ifragment = new ImmunityFragment();
                FragmentManager.BeginTransaction().Replace(Resource.Id.content_frame, ifragment).Commit();
                _drawerList.SetItemChecked(e.Position, true);
                _drawer.CloseDrawer(_drawerList);
            }
            else if (e.Position == 3)
            {
                var tfragment = new HealthFragment();
                FragmentManager.BeginTransaction().Replace(Resource.Id.content_frame, tfragment).Commit();
                _drawerList.SetItemChecked(e.Position, true);
                _drawer.CloseDrawer(_drawerList);
            }
            else
            {
                var tfragment = new MainFragment();
                FragmentManager.BeginTransaction().Replace(Resource.Id.content_frame, tfragment).Commit();
                _drawerList.SetItemChecked(e.Position, true);
                _drawer.CloseDrawer(_drawerList);
            }
        }
    }
}

这段代码比较关键的就是，从Main页面中获取到了用于显示区域的_drawer，和用于导航区域显示的_drawerList，设置导航区域显示的内容为titiles数组，默认进入页面显示MainFragment中的内容，通过定义drawerList的ItemClick事件，从而达到点击不用的项显示不同的页面的功能。下面是程序运行的截图：