首页 > 程序开发 > 移动开发 > Android >

xamarin android Fragment实现底部导航栏

2017-04-21

xamarin android Fragment实现底部导航栏。下面的这个例子介绍xamarin android fragment实现简单的底部导航栏。

xamarin android Fragment实现底部导航栏。下面的这个例子介绍xamarin android fragment实现简单的底部导航栏。

效果图和项目结构

效果图:
项目结构:
\

实现步骤

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

step1:底部菜单资源文件

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


  
  
菜单图片的变化资源:tab_menu_chat.xmltab_menu_more.xmltab_menu_contracts.xml


  
  
三个都是一样的样式。

step2:MainActivity布局文件 Main.axml



    
        
        
    
    
        
      
      
    
    
    <framelayout android:id="@+id/ly_content" android:layout_above="@id/div_tab_bar" android:layout_below="@id/ly_top_bar" android:layout_height="match_parent" android:layout_width="match_parent">
</framelayout>

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


  
  

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

fg_content.xml:


    

MyFragment.cs
    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

    [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:沉浸式状态栏

这个随手也实现一下吧,挺简单的。上面的代码已经实现了。

相关文章
最新文章
热点推荐