欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-29 14:00:22
本篇文章主要介绍了详解xamarin.android 利用fragment实现底部菜单,分享给大家,具体如下: 效果图: 第一步:添加引用 引用 crosslig...

本篇文章主要介绍了详解xamarin.android 利用fragment实现底部菜单,分享给大家,具体如下:

效果图:

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

第一步:添加引用

引用 crosslight.xamarin.android.support.v7.appcompat 这个包。

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

第二步:绘制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 
  }
}

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

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

上一篇:

下一篇: