用 FragmentTabHost 实现底部菜单

先看一下效果显示图

用 FragmentTabHost 实现底部菜单_第1张图片

通过点击不同的tab能够使上方跳转到不同的界面

这里用到的工具就是FragmentTabHost:

用 FragmentTabHost 实现底部菜单_第2张图片

图中FragmentTabHost就是下面黑色的标签栏:
一个标签栏包括5个tab,一个tab由图中元素组成。

下面看实际代码:
第一步在mainActivity.xml里建立FragmentTabHost:

其中readltabcontent就是点击及tab后显示内容的fragment,上边的狗狗图片。下边的fragmentHost的命名是固定写法。


用 FragmentTabHost 实现底部菜单_第3张图片

创建一个fragmentHost要5个tabSpec,一个tabspec需要设置一个indicator
而indicator是每个Tab相对应的view。这里的indicator可以理解为底部菜单一个可以点击的图标。

总体步骤为:

  1. Activity 要继承 FragmentActivity
  2. 实例化fragmentHost及相关控件
private FragmentTabHost mTabHost;
mTabHost= (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this,getSupportFragmentManager(),R.id.realtabcontent);
  1. 创建tabSpec
  2. 构造indicatorView
  3. tabSpec.setIndicator(indicatorView)
  4. 创建点击tabSpec后对应显示的fragment
  5. mTabHost.addTab(tabSpec,Fragment,null);

第二步,构建indicator
一个tab长这样:


为了使代码更清晰我们可以吧一个添加体格tab所需要的元素title(名称)icon(图片); fragment(点击tab跳转的fragment)封装成一个Tab并添加settor 和gettor方法
代码如下

用 FragmentTabHost 实现底部菜单_第4张图片

为了进一步方便,我们把需要用到的tab用一个数组存放起来:

用 FragmentTabHost 实现底部菜单_第5张图片

封装好了之后就可以构建indicator了
建立indicator对应的xml文件;

用 FragmentTabHost 实现底部菜单_第6张图片

完了~~~~~~~

用 FragmentTabHost 实现底部菜单_第7张图片

第三步,构建tabspec,addtab
综合以上,把初始化tab的代码放在initab()方法中,在oncreat方法调用就行了。

用 FragmentTabHost 实现底部菜单_第8张图片

你可能感兴趣的:(用 FragmentTabHost 实现底部菜单)