xamarin android Fragment实现底部导航栏

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

效果图和项目结构

效果图：

项目结构：

实现步骤

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

step1：底部菜单资源文件

文字颜色变化资源： tab__menu_text.xml 

[html] view plain copy

print ?

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>  

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/color_primary" android:state_selected="true"></item>
  <item android:color="@color/color_808080"></item>
</selector>

菜单图片的变化资源： tab_menu_chat.xml 、 tab_menu_more.xml、 tab_menu_contracts.xml 

[html] view plain copy

print ?

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>  

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/more_selected" android:state_selected="true"></item>
  <item android:drawable="@drawable/more"></item>
</selector>

三个都是一样的样式。

step2：MainActivity布局文件 Main.axml

[csharp] view plain copy

print ?

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>  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relativelayout1"
    android:background="@color/color_primary"
     android:fitsSystemWindows="true">
    <RelativeLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/color_primary">
        <TextView
            android:id="@+id/txt_topbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textSize="18sp"
            android:textColor="@color/color_white"
            android:text="信息" />
        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:background="@color/div_white"
            android:layout_alignParentBottom="true" />
    </RelativeLayout>
    <LinearLayout
        android:id="@+id/ly_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_alignParentBottom="true"
        android:background="@color/bg_white"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/txt_chat"
            style="@style/tabText"
            android:drawableTop="@drawable/tab_menu_chat"
            android:text="我的"/>
      <TextView
       android:id="@+id/txt_more"
       style="@style/tabText"
       android:drawableTop="@drawable/tab_menu_more"
       android:text="更多"/>
      <TextView
       android:id="@+id/txt_contacts"
       style="@style/tabText"
       android:drawableTop="@drawable/tab_menu_contacts"
       android:text="联系人"/>
    </LinearLayout>
    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:background="@color/div_white"
        android:layout_above="@id/ly_tab_bar" />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ly_top_bar"
        android:layout_above="@id/div_tab_bar"
        android:id="@+id/ly_content" />
</RelativeLayout>

关于布局采用的相对布局分为三个部分：头部标题、中间Fragment的位置、底部导航栏。关于根布局文件中fitsSystemWindows属性是为了配合透明状态栏使用的，有兴趣的可以看看前几天的写的那篇文章。底部导航栏文字很多属性都是一模一样的，所以提出来，写一个style。使用widget属性让其各占1/3。文字样式tabText如下：

[html] view plain copy

print ?

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>  

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/color_primary" android:state_selected="true"></item>
  <item android:color="@color/color_808080"></item>
</selector>

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

fg_content.xml:

[html] view plain copy

print ?

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>  

<?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="@color/bg_white">
    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="呵呵"
        android:textColor="@color/color_primary"
        android:textSize="20sp" />
</LinearLayout>

MyFragment.cs

[csharp] view plain copy

print ?

1. public class MyFragment : Fragment  
2. {  
3.     private string content { get; set; }  
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. }  

    public class MyFragment : Fragment
    {
        private string content { get; set; }
        public MyFragment(string  content)
        {
            this.content = content;
        }
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.Inflate(Resource.Layout.fg_content, container, false);
            TextView txt_content = (TextView)view.FindViewById(Resource.Id.txt_content);
            txt_content.Text = content;
            return view;
        }
    }

step3：MainActivity.cs 

[csharp] view plain copy

print ?

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.     }  

    [Activity(Label = "FragmentDemo", MainLauncher = true, Icon = "@drawable/icon", Theme = "@android:style/Theme.Light.NoTitleBar")]
    public class MainActivity : Activity
    {
        private TextView txt_chat;
        private TextView txt_contacts;
        private TextView txt_more;
        private FrameLayout ly_content;
        private MyFragment fg1, fg2, fg3;
        private FragmentManager fManager;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            ly_content = (FrameLayout)FindViewById(Resource.Id.ly_content);
            MyFragment fg = new MyFragment("第一个fragment");
            txt_chat = (TextView)FindViewById(Resource.Id.txt_chat);
            txt_contacts = (TextView)FindViewById(Resource.Id.txt_contacts);
            txt_more = (TextView)FindViewById(Resource.Id.txt_more);
            bindViews();
            txt_chat.PerformClick();
        }
        //ui组件初始化与事件绑定
        private void bindViews()
        {
          
            txt_chat.Click += (s, e) => { onClick(txt_chat); };
            txt_contacts.Click += delegate { onClick(txt_contacts); };
            txt_more.Click += delegate { onClick(txt_more); };
        }
        //隐藏所有Fragment
        private void hideAllFragment(FragmentTransaction fragmentTransaction)
        {
            if (fg1 != null) fragmentTransaction.Hide(fg1);
            if (fg2 != null) fragmentTransaction.Hide(fg2);
            if (fg3 != null) fragmentTransaction.Hide(fg3);
        }
        //重置所有文本的选中状态
        private void setSelected()
        {
            txt_chat.Selected =false;
            txt_contacts.Selected = false;
            txt_more.Selected = false;
        }
        //单击事件
        public void onClick(View v)
        { 
                FragmentTransaction fTransaction = FragmentManager.BeginTransaction();
                hideAllFragment(fTransaction);
                switch (v.Id)
                {
                    case Resource.Id.txt_chat:
                        setSelected();
                        txt_chat.Selected = true;
                        if (fg1 == null)
                        {
                            fg1 = new MyFragment("聊天Fragment");
                            fTransaction.Add(Resource.Id.ly_content, fg1);
                        }
                        else{fTransaction.Show(fg1);}break;
                    case Resource.Id.txt_contacts:
                        setSelected();
                        txt_contacts.Selected = true;
                        if (fg2 == null)
                        {
                            fg2 = new MyFragment("联系人Fragment");
                            fTransaction.Add(Resource.Id.ly_content, fg2);
                        }
                        else{fTransaction.Show(fg2);}
                        break;
                    case Resource.Id.txt_more:
                        setSelected();
                        txt_more.Selected = true;
                        if (fg3 == null)
                        {
                            fg3 = new MyFragment("MoreFragment");
                            fTransaction.Add(Resource.Id.ly_content, fg3);
                        }else{fTransaction.Show(fg3);}break;
                }
                fTransaction.Commit();
            }
        }

关于继承的主题使用的android自带的主题Theme.Light.NoTitle，当然你也可以引入v7兼容包，继承AppcompatActivity，使用兼容包主题

step4：沉浸式状态栏

这个随手也实现一下吧，挺简单的。Main.axml中根布局中已经设置了属性fitsSystemWindows，兼容android4.4 和安定肉ID5.* ,我们在用代码设置状态栏透明就可以。有关的介绍可以参考  Xamarin android沉浸式状态栏

[csharp] view plain copy

print ?

1. if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Kitkat)  
2. {  
3.     //透明状态栏    
4.     Window.AddFlags(WindowManagerFlags.TranslucentStatus);  
5.     //透明导航栏    
6.     Window.AddFlags(WindowManagerFlags.TranslucentNavigation);  
7. }  

            if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Kitkat)
            {
                //透明状态栏  
                Window.AddFlags(WindowManagerFlags.TranslucentStatus);
                //透明导航栏  
                Window.AddFlags(WindowManagerFlags.TranslucentNavigation);
            }

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

作者：张林

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

转载