Xamarin.Android 利用Fragment实现底部菜单

效果图：

第一步：添加引用

　　引用 Crosslight.Xamarin.Android.Support.v7.AppCompat 这个包。

第二步：绘制Main和Fragment界面

　　fg_home.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">
    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="首页"
        android:textColor="#000000"
        android:textSize="20sp" />
</LinearLayout>

　　fg_label.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">
    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="贴签"
        android:textColor="#000000"
        android:textSize="20sp" />
</LinearLayout>

　　fg_mine.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">
    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我的"
        android:textColor="#000000"
        android:textSize="20sp" />
</LinearLayout>

　　fg_query.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">
    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="查询"
        android:textColor="#000000"
        android:textSize="20sp" />
</LinearLayout>

　　Main.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"> 
    <include
        layout="@layout/main_left" />
</LinearLayout>

　　main_left.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dl_left"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f0f0f0">
  <!--主布局-->
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="horizontal">  
    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relativelayout1" 
     android:fitsSystemWindows="true">
      <RelativeLayout
          android:id="@+id/ly_top_bar"
          android:layout_width="match_parent"
          android:layout_height="48dp" 
          android:visibility="gone"> 
      </RelativeLayout>
      <LinearLayout
           android:id="@+id/ly_tab_bar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true" 
            android:background="#FFFFFF"
             android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:background="#cccccc" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:orientation="horizontal"
            android:layout_marginTop="5dp">
          <ImageView 
            android:id="@+id/iv_home"
            android:layout_width="25.6dp"
            android:layout_height="37.6dp"
            android:src="@drawable/icon_home1"
            android:layout_weight="1"/>
          <ImageView 
           android:id="@+id/iv_query"
           android:layout_width="25.6dp"
            android:layout_height="37.6dp"
           android:src="@drawable/icon_query1"
           android:layout_weight="1"/>
          <ImageView 
           android:id="@+id/iv_label"
          android:layout_width="25.6dp"
            android:layout_height="37.6dp"
           android:src="@drawable/icon_label1"
           android:layout_weight="1"/>
          <ImageView 
           android:id="@+id/iv_mine"
           android:layout_width="25.6dp"
            android:layout_height="37.6dp"
           android:src="@drawable/icon_mine1"
           android:layout_weight="1"/> 
        </LinearLayout>
      </LinearLayout>
     <View
          android:id="@+id/div_tab_bar"
          android:layout_width="match_parent"
          android:layout_height="2px"
          android:background="#FFFFFF"
          android:layout_above="@id/ly_tab_bar" />
      <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
           android:id="@+id/fy_home"
          android:layout_below="@id/ly_top_bar"
          android:layout_above="@id/div_tab_bar" />
      <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/fy_query"
           android:layout_below="@id/ly_top_bar"
          android:layout_above="@id/div_tab_bar"/>
      <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/fy_label"
           android:layout_below="@id/ly_top_bar"
          android:layout_above="@id/div_tab_bar"/>
      <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/fy_mine"
           android:layout_below="@id/ly_top_bar"
          android:layout_above="@id/div_tab_bar"/>
    </RelativeLayout>
  </LinearLayout>  
</android.support.v4.widget.DrawerLayout> 

第三步：在value文件下创建Style，并且自定义 BaseAppTheme 样式

<?xml version="1.0" encoding="utf-8" ?>
<resources> 
   
  <color name="primary">#1e89e7</color>
  <color name="primaryDark">#1976d2</color>
  <color name="red">#ff0000</color>
  <color name="white">#ffffff</color>

  <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primaryDark</item>
    <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
  </style>

  <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/white</item>
  </style>
</resources> 

第四步：编写每个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 BottomMuneDemo.Fragments
{
    public class HomeFragment : Fragment
    {
        private string content { get; set; }
        public HomeFragment(string content)
        {
            this.content = content;
        }

        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your fragment here
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.Inflate(Resource.Layout.fg_home, container, false);
            TextView txt_content = (TextView)view.FindViewById(Resource.Id.txt_content);
            txt_content.Text = "首页";

            return view;
        }
    }
}

第五步：在Main活动中进行设置。

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Support.V7.App;
using BottomMuneDemo.Fragments;
using Android.Views;

namespace BottomMuneDemo
{
    [Activity(Label = "BottomMuneDemo", MainLauncher = true, Theme = "@style/BaseAppTheme")]
    public class MainActivity : AppCompatActivity
    {
        private ImageView iv_home;
        private ImageView iv_query;
        private ImageView iv_label;
        private ImageView iv_mine;

        private FrameLayout fy_home;
        private FrameLayout fy_query;
        private FrameLayout fy_label;
        private FrameLayout fy_mine;

        HomeFragment fg1;
        QueryFragment fg2;
        LabelFragment fg3;
        MineFragment fg4;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState); 
            SetContentView(Resource.Layout.Main);

            fy_home = (FrameLayout)FindViewById(Resource.Id.fy_home);
            fy_query = (FrameLayout)FindViewById(Resource.Id.fy_query);
            fy_label = (FrameLayout)FindViewById(Resource.Id.fy_label);
            fy_mine = (FrameLayout)FindViewById(Resource.Id.fy_mine);

            iv_home = (ImageView)FindViewById(Resource.Id.iv_home);
            iv_query = (ImageView)FindViewById(Resource.Id.iv_query);
            iv_label = (ImageView)FindViewById(Resource.Id.iv_label);
            iv_mine = (ImageView)FindViewById(Resource.Id.iv_mine);

            bindViews();
            iv_home.PerformClick();

        }


        #region 底部菜单选项卡 

        //ui组件初始化与事件绑定
        private void bindViews()
        {

            iv_home.Click += (s, e) => { onClick(iv_home); };
            iv_query.Click += delegate { onClick(iv_query); };
            iv_label.Click += delegate { onClick(iv_label); };
            iv_mine.Click += delegate { onClick(iv_mine); };
        }
        //隐藏所有Fragment
        private void hideAllFragment(FragmentTransaction fragmentTransaction)
        {
            if (fg1 != null) fragmentTransaction.Hide(fg1);
            if (fg2 != null) fragmentTransaction.Hide(fg2);
            if (fg3 != null) fragmentTransaction.Hide(fg3);
            if (fg4 != null) fragmentTransaction.Hide(fg4);

            iv_home.SetImageResource(Resource.Drawable.icon_home1);
            iv_query.SetImageResource(Resource.Drawable.icon_query1);
            iv_label.SetImageResource(Resource.Drawable.icon_label1);
            iv_mine.SetImageResource(Resource.Drawable.icon_mine1);
        }
        //重置所有文本的选中状态
        private void setSelected()
        {
            iv_home.Selected = false;
            iv_query.Selected = false;
            iv_label.Selected = false;
            iv_mine.Selected = false;
        }
        //单击事件
        public void onClick(View v)
        {
            FragmentTransaction fTransaction = FragmentManager.BeginTransaction();
            hideAllFragment(fTransaction);
            switch (v.Id)
            {
                case Resource.Id.iv_home:
                    setSelected();
                    iv_home.Selected = true;
                    iv_home.SetImageResource(Resource.Drawable.icon_home2);
                    if (fg1 == null)
                    {
                        fg1 = new HomeFragment("首页");
                        fTransaction.Add(Resource.Id.fy_home, fg1);
                    }
                    else { fTransaction.Show(fg1); }
                    break;

                case Resource.Id.iv_query:
                    setSelected();
                    iv_query.Selected = true;
                    iv_query.SetImageResource(Resource.Drawable.icon_query2);
                    if (fg2 == null)
                    {
                        fg2 = new QueryFragment("查询");
                        fTransaction.Add(Resource.Id.fy_query, fg2);
                    }
                    else { fTransaction.Show(fg2); }
                    break;

                case Resource.Id.iv_label:
                    setSelected();
                    iv_label.Selected = true;
                    iv_label.SetImageResource(Resource.Drawable.icon_label2);
                    if (fg3 == null)
                    {
                        fg3 = new LabelFragment("贴签");
                        fTransaction.Add(Resource.Id.fy_label, fg3);
                    }
                    else { fTransaction.Show(fg3); }
                    break;

                case Resource.Id.iv_mine:
                    setSelected();
                    iv_mine.Selected = true;
                    iv_mine.SetImageResource(Resource.Drawable.icon_mine2);
                    if (fg4 == null)
                    {
                        fg4 = new MineFragment("我的");
                        fTransaction.Add(Resource.Id.fy_mine, fg4);
                    }
                    else { fTransaction.Show(fg4); }
                    break;
            }
            fTransaction.Commit();
        }
        #endregion  
    }
}

到这里就结束了，亲测代码有效，如有问题请留言。