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

更新时间：2019年02月21日 11:51:56 作者：键盘演绎青春

这篇文章主要介绍了详解Xamarin.Android 利用Fragment实现底部菜单，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本篇文章主要介绍了详解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 
  }
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Android中文件读写（输入流和输出流）操作小结
这篇文章主要介绍了Android中文件读写（输入流和输出流）操作小结,本文总结了Android中文件读写的原理、字节流和字符流的区别、文件读写的步骤、输入流和输出流以及代码实例等内容,需要的朋友可以参考下
2015-06-06
Android实现扫描二维码功能
这篇文章主要为大家详细介绍了Android实现扫描二维码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
Android播放视频的三种方式
这篇文章主要为大家详细介绍了Android播放视频的三种方式，使用其自带的播放器、VideoView、MediaPlayer类和SurfaceView来实现，感兴趣的小伙伴们可以参考一下
2016-07-07
Android加载对话框同时异步执行实现方法
Android中通过子线程连接网络获取资料，同时显示加载进度对话框给用户的操作
2012-11-11
Android实现分享长图并且添加全图水印
这篇文章主要介绍了Android实现分享长图并且添加全图水印的相关资料,需要的朋友可以参考下
2017-03-03
分享Android微信红包插件
这篇文章为大家准备了Android微信红包插件，轻轻松松帮助大家实现微信红包功能，感兴趣的小伙伴们可以参考一下
2015-12-12
Android实现excel/pdf/word/odt/图片相互转换
这篇文章主要为大家详细介绍了Android如何实现excel/pdf/word/odt/图片之间的相互转换，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-04-04
Android中关于CoordinatorLayout的一些实用布局技巧
大家都知道CoordinatorLayout是一个“加强版”的 FrameLayout，那么下面这篇文章主要给大家分享了Android中关于CoordinatorLayout的一些布局技巧，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-06-06
Android视图绑定方法深入探究
这篇文章主要介绍了Android视图绑定方法，通过视图绑定viewBinding功能，您可以更轻松地编写可与视图交互的代码。在模块中启用视图绑定之后，系统会为该模块中的每个XML
2023-01-01
Android编程实现在Activity中操作刷新另外一个Activity数据列表的方法
这篇文章主要介绍了Android编程实现在Activity中操作刷新另外一个Activity数据列表的方法,结合具体实例形式分析了2种常用的Activity交互实现技巧,需要的朋友可以参考下
2017-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具