詳解Xamarin.Android 利用Fragment實現(xiàn)底部菜單
更新時間：2019年02月21日 11:51:56 作者：鍵盤演繹青春
這篇文章主要介紹了詳解Xamarin.Android 利用Fragment實現(xiàn)底部菜單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了詳解Xamarin.Android 利用Fragment實現(xiàn)底部菜單，分享給大家，具體如下：
效果圖：
第一步：添加引用
引用 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文件下創(chuàng)建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活動中進(jìn)行設(shè)置。
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);
}
//重置所有文本的選中狀態(tài)
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
}
}
到這里就結(jié)束了，親測代碼有效，如有問題請留言。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android中文件讀寫（輸入流和輸出流）操作小結(jié)
這篇文章主要介紹了Android中文件讀寫（輸入流和輸出流）操作小結(jié),本文總結(jié)了Android中文件讀寫的原理、字節(jié)流和字符流的區(qū)別、文件讀寫的步驟、輸入流和輸出流以及代碼實例等內(nèi)容,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)掃描二維碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細(xì)介紹了Android播放視頻的三種方式，使用其自帶的播放器、VideoView、MediaPlayer類和SurfaceView來實現(xiàn)，感興趣的小伙伴們可以參考一下2016-07-07
Android加載對話框同時異步執(zhí)行實現(xiàn)方法
Android中通過子線程連接網(wǎng)絡(luò)獲取資料，同時顯示加載進(jìn)度對話框給用戶的操作2012-11-11
這篇文章主要介紹了Android實現(xiàn)分享長圖并且添加全圖水印的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章為大家準(zhǔn)備了Android微信紅包插件，輕輕松松幫助大家實現(xiàn)微信紅包功能，感興趣的小伙伴們可以參考一下2015-12-12
Android實現(xiàn)excel/pdf/word/odt/圖片相互轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了Android如何實現(xiàn)excel/pdf/word/odt/圖片之間的相互轉(zhuǎn)換，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-04-04
Android中關(guān)于CoordinatorLayout的一些實用布局技巧
大家都知道CoordinatorLayout是一個“加強版”的 FrameLayout，那么下面這篇文章主要給大家分享了Android中關(guān)于CoordinatorLayout的一些布局技巧，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要介紹了Android視圖綁定方法，通過視圖綁定viewBinding功能，您可以更輕松地編寫可與視圖交互的代碼。在模塊中啟用視圖綁定之后，系統(tǒng)會為該模塊中的每個XML2023-01-01
Android編程實現(xiàn)在Activity中操作刷新另外一個Activity數(shù)據(jù)列表的方法
這篇文章主要介紹了Android編程實現(xiàn)在Activity中操作刷新另外一個Activity數(shù)據(jù)列表的方法,結(jié)合具體實例形式分析了2種常用的Activity交互實現(xiàn)技巧,需要的朋友可以參考下2017-06-06