xamarin android Fragment实现底部导航栏

转载 2017年08月03日 17:01:43

前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment   Xamarin Android Fragment的两种加载方式。下面的这个例子介绍xamarin Android fragment实现简单的底部导航栏。

效果图和项目结构

效果图:

项目结构:

实现步骤

主要的流程就是:点击不同的菜单加载对应的fragment出来,同时菜单icon切换和菜单文字颜色也响应变化,是否选中是通过selected来判断的。我们需要写以下几个资源文件,文字颜色的变化,菜单图片的变化。

step1:底部菜单资源文件

文字颜色变化资源: tab__menu_text.xml 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   <item android:color="@color/color_primary" android:state_selected="true"></item>  
  4.   <item android:color="@color/color_808080"></item>  
  5. </selector>  
菜单图片的变化资源:tab_menu_chat.xmltab_menu_more.xmltab_menu_contracts.xml 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   <item android:drawable="@drawable/more_selected" android:state_selected="true"></item>  
  4.   <item android:drawable="@drawable/more"></item>  
  5. </selector>  
三个都是一样的样式。

step2:MainActivity布局文件 Main.axml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:id="@+id/relativelayout1"  
  6.     android:background="@color/color_primary"  
  7.      android:fitsSystemWindows="true">  
  8.     <RelativeLayout  
  9.         android:id="@+id/ly_top_bar"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="48dp"  
  12.         android:background="@color/color_primary">  
  13.         <TextView  
  14.             android:id="@+id/txt_topbar"  
  15.             android:layout_width="match_parent"  
  16.             android:layout_height="match_parent"  
  17.             android:layout_centerInParent="true"  
  18.             android:gravity="center"  
  19.             android:textSize="18sp"  
  20.             android:textColor="@color/color_white"  
  21.             android:text="信息" />  
  22.         <View  
  23.             android:layout_width="match_parent"  
  24.             android:layout_height="2px"  
  25.             android:background="@color/div_white"  
  26.             android:layout_alignParentBottom="true" />  
  27.     </RelativeLayout>  
  28.     <LinearLayout  
  29.         android:id="@+id/ly_tab_bar"  
  30.         android:layout_width="match_parent"  
  31.         android:layout_height="58dp"  
  32.         android:layout_alignParentBottom="true"  
  33.         android:background="@color/bg_white"  
  34.         android:orientation="horizontal">  
  35.         <TextView  
  36.             android:id="@+id/txt_chat"  
  37.             style="@style/tabText"  
  38.             android:drawableTop="@drawable/tab_menu_chat"  
  39.             android:text="我的"/>  
  40.       <TextView  
  41.        android:id="@+id/txt_more"  
  42.        style="@style/tabText"  
  43.        android:drawableTop="@drawable/tab_menu_more"  
  44.        android:text="更多"/>  
  45.       <TextView  
  46.        android:id="@+id/txt_contacts"  
  47.        style="@style/tabText"  
  48.        android:drawableTop="@drawable/tab_menu_contacts"  
  49.        android:text="联系人"/>  
  50.     </LinearLayout>  
  51.     <View  
  52.         android:id="@+id/div_tab_bar"  
  53.         android:layout_width="match_parent"  
  54.         android:layout_height="2px"  
  55.         android:background="@color/div_white"  
  56.         android:layout_above="@id/ly_tab_bar" />  
  57.     <FrameLayout  
  58.         android:layout_width="match_parent"  
  59.         android:layout_height="match_parent"  
  60.         android:layout_below="@id/ly_top_bar"  
  61.         android:layout_above="@id/div_tab_bar"  
  62.         android:id="@+id/ly_content" />  
  63. </RelativeLayout>  

关于布局采用的相对布局分为三个部分:头部标题、中间Fragment的位置、底部导航栏。关于根布局文件中fitsSystemWindows属性是为了配合透明状态栏使用的,有兴趣的可以看看前几天的写的那篇文章。底部导航栏文字很多属性都是一模一样的,所以提出来,写一个style。使用widget属性让其各占1/3。文字样式tabText如下:
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   <item android:color="@color/color_primary" android:state_selected="true"></item>  
  4.   <item android:color="@color/color_808080"></item>  
  5. </selector>  

step3:Fragment布局文件继承Fragment的类MyFragment

fg_content.xml:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:background="@color/bg_white">  
  7.     <TextView  
  8.         android:id="@+id/txt_content"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:gravity="center"  
  12.         android:text="呵呵"  
  13.         android:textColor="@color/color_primary"  
  14.         android:textSize="20sp" />  
  15. </LinearLayout>  

MyFragment.cs
  1. public class MyFragment : Fragment  
  2. {  
  3.     private string content { getset; }  
  4.     public MyFragment(string  content)  
  5.     {  
  6.         this.content = content;  
  7.     }  
  8.     public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
  9.     {  
  10.         View view = inflater.Inflate(Resource.Layout.fg_content, container, false);  
  11.         TextView txt_content = (TextView)view.FindViewById(Resource.Id.txt_content);  
  12.         txt_content.Text = content;  
  13.         return view;  
  14.     }  
  15. }  

step3:MainActivity.cs 

  1. [Activity(Label = "FragmentDemo", MainLauncher = true, Icon = "@drawable/icon", Theme = "@android:style/Theme.Light.NoTitleBar")]  
  2. public class MainActivity : Activity  
  3. {  
  4.     private TextView txt_chat;  
  5.     private TextView txt_contacts;  
  6.     private TextView txt_more;  
  7.     private FrameLayout ly_content;  
  8.     private MyFragment fg1, fg2, fg3;  
  9.     private FragmentManager fManager;  
  10.     protected override void OnCreate(Bundle bundle)  
  11.     {  
  12.         base.OnCreate(bundle);  
  13.         SetContentView(Resource.Layout.Main);  
  14.         ly_content = (FrameLayout)FindViewById(Resource.Id.ly_content);  
  15.         MyFragment fg = new MyFragment("第一个fragment");  
  16.         txt_chat = (TextView)FindViewById(Resource.Id.txt_chat);  
  17.         txt_contacts = (TextView)FindViewById(Resource.Id.txt_contacts);  
  18.         txt_more = (TextView)FindViewById(Resource.Id.txt_more);  
  19.         bindViews();  
  20.         txt_chat.PerformClick();  
  21.     }  
  22.     //ui组件初始化与事件绑定  
  23.     private void bindViews()  
  24.     {  
  25.         
  26.         txt_chat.Click += (s, e) => { onClick(txt_chat); };  
  27.         txt_contacts.Click += delegate { onClick(txt_contacts); };  
  28.         txt_more.Click += delegate { onClick(txt_more); };  
  29.     }  
  30.     //隐藏所有Fragment  
  31.     private void hideAllFragment(FragmentTransaction fragmentTransaction)  
  32.     {  
  33.         if (fg1 != null) fragmentTransaction.Hide(fg1);  
  34.         if (fg2 != null) fragmentTransaction.Hide(fg2);  
  35.         if (fg3 != null) fragmentTransaction.Hide(fg3);  
  36.     }  
  37.     //重置所有文本的选中状态  
  38.     private void setSelected()  
  39.     {  
  40.         txt_chat.Selected =false;  
  41.         txt_contacts.Selected = false;  
  42.         txt_more.Selected = false;  
  43.     }  
  44.     //单击事件  
  45.     public void onClick(View v)  
  46.     {   
  47.             FragmentTransaction fTransaction = FragmentManager.BeginTransaction();  
  48.             hideAllFragment(fTransaction);  
  49.             switch (v.Id)  
  50.             {  
  51.                 case Resource.Id.txt_chat:  
  52.                     setSelected();  
  53.                     txt_chat.Selected = true;  
  54.                     if (fg1 == null)  
  55.                     {  
  56.                         fg1 = new MyFragment("聊天Fragment");  
  57.                         fTransaction.Add(Resource.Id.ly_content, fg1);  
  58.                     }  
  59.                     else{fTransaction.Show(fg1);}break;  
  60.                 case Resource.Id.txt_contacts:  
  61.                     setSelected();  
  62.                     txt_contacts.Selected = true;  
  63.                     if (fg2 == null)  
  64.                     {  
  65.                         fg2 = new MyFragment("联系人Fragment");  
  66.                         fTransaction.Add(Resource.Id.ly_content, fg2);  
  67.                     }  
  68.                     else{fTransaction.Show(fg2);}  
  69.                     break;  
  70.                 case Resource.Id.txt_more:  
  71.                     setSelected();  
  72.                     txt_more.Selected = true;  
  73.                     if (fg3 == null)  
  74.                     {  
  75.                         fg3 = new MyFragment("MoreFragment");  
  76.                         fTransaction.Add(Resource.Id.ly_content, fg3);  
  77.                     }else{fTransaction.Show(fg3);}break;  
  78.             }  
  79.             fTransaction.Commit();  
  80.         }  
  81.     }  
关于继承的主题使用的android自带的主题Theme.Light.NoTitle,当然你也可以引入v7兼容包,继承AppcompatActivity,使用兼容包主题

step4:沉浸式状态栏

这个随手也实现一下吧,挺简单的。Main.axml中根布局中已经设置了属性fitsSystemWindows,兼容android4.4 和安定肉ID5.* ,我们在用代码设置状态栏透明就可以。有关的介绍可以参考  Xamarin android沉浸式状态栏
  1. if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Kitkat)  
  2. {  
  3.     //透明状态栏    
  4.     Window.AddFlags(WindowManagerFlags.TranslucentStatus);  
  5.     //透明导航栏    
  6.     Window.AddFlags(WindowManagerFlags.TranslucentNavigation);  
  7. }  



代码下载:http://download.csdn.net/detail/kebi007/9820839

作者:张林

标题:xamarin android Fragment实现底部导航栏 原文地址:http://blog.csdn.net/kebi007/article/details/70307509

转载

xamarin Tablayout+Viewpager+Fragment顶部导航栏

最近几天不忙,所以把项目中的顶部导航栏的实现归集一下。android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单。当然我这个导航栏是基于xam...
  • kebi007
  • kebi007
  • 2017-04-22 19:02:42
  • 3546

xamarin android实现Toolbar+DrawerLayout完美侧滑导航栏

#### 前言 #### 如果你有关注Material Design,会发现国内的一些app也在使用material Design这种设计,我常用的网易有道词典就使用了Material Design...
  • kebi007
  • kebi007
  • 2017-09-05 23:34:44
  • 2230

Xamarin Android Fragment的两种加载方式

xamarin android fragment两种加载方法的简单用法
  • kebi007
  • kebi007
  • 2016-10-05 21:29:19
  • 2296

Xamarin android沉浸式状态栏

沉浸式状态并不这么叫,其学名是透明状态栏,写这篇文章主要是让小白少走点弯路,用两种方法实现兼容android4.4、android5.*沉浸式状态栏...
  • kebi007
  • kebi007
  • 2017-04-17 22:51:32
  • 3357

<em>xamarin</em> fragment<em>底部导航栏</em>

<em>xamarin</em> <em>android</em> 使用fragment<em>底部导航栏</em>,原文链接http://blog.csdn.net/kebi007/article/month/2017/04
  • 2018年04月08日 00:00

xamarin android Fragment实现底部导航栏

前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment   Xamarin Android Fragment的两种加载方式。下面的这个例子介绍xamarin...
  • Andrewniu
  • Andrewniu
  • 2017-08-03 17:01:43
  • 223

bottomtabbedpage-xamarin-forms-master

  • 2018年03月01日 18:03
  • 453KB
  • 下载

Xamarin android 使用RecyclerView结合SwipeRefreshLayout下拉刷新滑到底部加载更多

Xamarin android 使用RecyclerView结合SwipeRefreshLayout下拉刷新滑到底部加载更多
  • kebi007
  • kebi007
  • 2017-09-14 00:30:37
  • 1684

Android实习札记(5)---Fragment之底部导航栏的实现

Android实习札记(5)---Fragment之底部导航栏的实现 ——转载请注明出处:coder-pig 在Part 4我们回顾了一下Fragment的基本概念,在本节中我们就...
  • u014450015
  • u014450015
  • 2016-01-12 00:18:35
  • 419
收藏助手
不良信息举报
您举报文章:xamarin android Fragment实现底部导航栏
举报原因:
原因补充:

(最多只允许输入30个字)