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

效果图和项目结构

效果图:

项目结构:

实现步骤

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

step1:底部菜单资源文件

文字颜色变化资源: tab__menu_text.xml 
<?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.xmltab_menu_more.xmltab_menu_contracts.xml 

<?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

<?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如下:

<?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:


<?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

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

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

            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

转载随意注明出处


[置顶] xamarin android Fragment实现底部导航栏的更多相关文章

  1. Android学习笔记- Fragment实例 底部导航栏的实现

    1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件 我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...

  2. [置顶] xamarin android toolbar(踩坑完全入门详解)

    网上关于toolbar的教程有很多,很多新手,在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费.如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到 ...

  3. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  4. Android UI-仿微信底部导航栏布局

    现在App基本的标配除了侧滑菜单,还有一个就是底部导航栏,常见的聊天工具QQ,微信,购物App都有底部导航栏,用户可以随便切换看不同的内容,说是情怀也好,用户体验也罢.我们开发的主要的还是讲的是如何如 ...

  5. [置顶] Xamarin android沉浸式状态栏

    虽然关于android "沉浸式"状态栏有很多博客介绍过,从小菜到大神无一例外.我第一次看到这种"沉浸"式的效果我也以为真的是这么叫,然而根本不是这么回事,完全 ...

  6. [置顶] Xamarin android如何调用百度地图入门示例(一)

    在Xamarin android如何调用百度地图呢? 首先我们要区分清楚,百度地图这是一个广泛的概念,很多刚刚接触这个名词"百度地图api",的确是泛泛而谈,我们来看一下百度地图的 ...

  7. [置顶] xamarin android自定义标题栏(自定义属性、回调事件)

    自定义控件的基本要求 这篇文章就当是自定义控件入门,看了几篇android关于自定义控件的文章,了解了一下,android自定义控件主要有3种方式: 自绘控件:继承View类,所展示的内容在OnDra ...

  8. [置顶] xamarin android自定义spinner

    以前弄的一个下拉框时自带的spinner,感觉好丑,实际效果实在满足不了基本的UI界面要求,还是自己动手丰衣足食,看了网上关于android中自定义spinner的文章,感觉实现原理还是比较简单,所以 ...

  9. [置顶] xamarin android使用gps定位获取经纬度

    看了文章你会得出以下几个结论 1.android定位主要有四种方式GPS,Network(wifi定位.基站定位),AGPS定位 2.绝大部分android国产手机使用network进行定位是没有作用 ...

随机推荐

  1. 为Spark Application指定不同的JDK版本

    随着企业内部业务系统越来越多,基于JVM的服务,通常情况线上环境可能会有多套JDK跑不同的服务.大家都知道基于高版本的Java规范编写的服务跑在低版本的JVM上会出现:java.lang.Unsupp ...

  2. C语言基本用算

    一. 算术运算 C语言一共有34种运算符,包括了常见的加减乘除运算 1. 加法运算+ 除开能做加法运算,还能表示正号:+5.+90 2. 减法运算-  除开能做减法运算,还能表示符号:-10.-29 ...

  3. 理论篇:关注点分离(Separation of concerns, SoC)

    概念 关注点分离(Separation of concerns,SOC)是对只与"特定概念.目标"(关注点)相关联的软件组成部分进行"标识.封装和操纵"的能力, ...

  4. Linux服务器病毒清理实践

    背景:客户服务器被挂载木马病毒用以挖矿(比特币). 本次清理通过Linux基本命令完成.其原理也比较简单,通过ps命令查看服务器异常进程,然后通过lsof命令定位进程访问的文件,找到异常文件删除之,最 ...

  5. 工厂模式(Factory Method)

    1.工厂方法模式(Factory Method) 工厂方法模式分为三种: 1-1.普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建. 举例如下:(我们举一个发送邮件和短信的例子 ...

  6. 洛谷教主花园dp

    洛谷-教主的花园-动态规划   题目描述 教主有着一个环形的花园,他想在花园周围均匀地种上n棵树,但是教主花园的土壤很特别,每个位置适合种的树都不一样,一些树可能会因为不适合这个位置的土壤而损失观赏价 ...

  7. Filter、Listener 学习总结

    今天我们来介绍 Filter.Listener 这两个模块一些简单的知识和应用,接下来我们开始我们的正题 ! 1. Filter(过滤器) 1.1 对 Servlet 容器调用 Servlet 的过程 ...

  8. windows添加默认路由

    由于GW的原因,我们无法使用强大的google,身为技术屌丝,这是不能容忍的,于是乎使用了VPN,但是VPN连上之后,悲剧发生了,我的服务器连不上了,怎么整 原来一切都是很简单,在windows上添加 ...

  9. sqlserver 全库查询 带架构

    网上现有的全库查询,无法识别自定义架构的数据库结构: ) ) ) declare @counts int )--以上定义变量 declare cur1 cursor for select a.name ...

  10. 【微信小程序开发】快速开发一个动态横向导航模板并使用

    目标:做个横向导航,可以横向滚动. 思路:使用scroll-view组件,可实现横向滚动功能.scroll-view内包含一个动态的view列表,代表导航的每一项,导航要接收动态数组,然后使用列表展示 ...