FragmentTabHost FrameLayout实现底部导航栏

概述app经常用到底部导航栏，早前使用过RadioGroup+FrameLayout实现或者RadioGroup+ViewPager实现，现在基本使用FragmentTabHost+FrameLayout来实现，因为使用起来简单易用。下面写一个小例子简要地总结一下这个组合。

app经常用到底部导航栏，早前使用过Ra@R_404_6901@Group+FrameLayout实现或者Ra@R_404_6901@Group+VIEwPager实现，现在基本使用FragmentTabHost+FrameLayout来实现，因为使用起来简单易用。下面写一个小例子简要地总结一下这个组合。

首先，看一下例子的最终运行效果图

这5个图标的效果其实都是一样的，只要做出来一个，以此类推就可以写出其他几个

第一步， FragmentTabHost+FrameLayout布局，先看一下代码：

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:orIEntation="vertical"> <FrameLayout androID:ID="@+ID/realtabcontent" androID:layout_wIDth="match_parent" androID:layout_height="0dp" androID:layout_weight="1" androID:background="@color/bg_color"/> <androID.support.v4.app.FragmentTabHost androID:ID="@androID:ID/tabhost" androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:background="@color/white"> <FrameLayout androID:ID="@androID:ID/tabcontent" androID:layout_wIDth="0dp" androID:layout_height="0dp" androID:layout_weight="0" /> </androID.support.v4.app.FragmentTabHost></linearLayout>

布局大体分为两部分，上面的FrameLayout代表是显示内容部分，下面的FragmentTabHost代表是导航栏部分。注意： FragmentTabHost的ID和其内部的FrameLayout的ID必须是系统的ID。

第二步， FragmentTabHost+FrameLayout代码实现连接，FragmentTabHost使用，可以记住三个步骤：（1）setup(…)可以理解为，初始化底部导航和内容页面连接，（2）新建TabSpec可以理解为初始化底部菜单项，（3）addTab（…）可以理解为把菜单和内容添加到控件中。下面看一下代码：

public class MainActivity extends AppCompatActivity { private LayoutInflater mInflater; private FragmentTabHost mTabHost; private ArrayList<TabDataBean> tabDataList = new ArrayList<>(5); @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); mInflater = LayoutInflater.from(this); mTabHost = (FragmentTabHost) this.findVIEwByID(androID.R.ID.tabhost); //第一步，初始化fTabHost,第三个参数为内容容器 mTabHost.setup(this,getSupportFragmentManager(),R.ID.realtabcontent); //第二步，初始化菜单项 TabHost.TabSpec tabSpec = mTabHost.newTabSpec("主页"); /*添加菜单项布局*/ VIEw vIEw = mInflater.inflate(R.layout.tab_indicator,null); ImageVIEw iconTab = (ImageVIEw) vIEw.findVIEwByID(R.ID.iv_tab_icon); TextVIEw tvTab = (TextVIEw) vIEw.findVIEwByID(R.ID.tv_tab_text); iconTab.setimageResource(R.drawable.tab_home_normal); tvTab.setText("主页"); tabSpec.setIndicator(vIEw); //第三步，添加菜单项和内容 mTabHost.addTab(tabSpec,HomeFragment.class,null);// initTabHost(); }}

其中涉及了菜单项布局tab_indicator.xml，内容页布局HomeFragment.java文件，代码如下：

tab_indicator.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:paddingtop="3dp" androID:paddingBottom="3dp" androID:layout_gravity="center" androID:gravity="center"> <ImageVIEw androID:ID="@+ID/iv_tab_icon" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" /> <TextVIEw androID:ID="@+ID/tv_tab_text" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:textcolor="@color/tabTextcolor" androID:layout_margintop="2dp"/></linearLayout>

HomeFragment.java

public class HomeFragment extends Fragment { @Nullable @OverrIDe public VIEw onCreateVIEw(LayoutInflater inflater,@Nullable VIEwGroup container,@Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_home,null); } @OverrIDe public voID onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); Toast.makeText(getContext(),R.string.tabHome,Toast.LENGTH_SHORT).show(); }}

fragment_home.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:gravity="center"> <TextVIEw androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:textcolor="@color/themecolor" androID:text="@string/tabHome"/></linearLayout>

写完如上代码的运行效果如下：

可以看到一个菜单项已经显示出来，照葫芦画瓢，我们就可以吧其他四个菜单项写出来，既然其他四项和这个代码雷同，所以说肯定有公共部分可以抽取出来，减少代码量和代码整洁度。我们发现，有三个变量随着菜单变化的，如：菜单图标，菜单名称，菜单对应的内容。所以我们写一个类封装一下，代码如下：

TabDataBean.java

public class TabDataBean { private int tabname; private int tabIcon; private Class content; //对应的内容类 public TabDataBean(int tabname,int tabIcon,Class content) { this.tabname = tabname; this.tabIcon = tabIcon; this.content = content; } public int getTabname() { return tabname; } public voID setTabname(int tabname) { this.tabname = tabname; } public int getTabIcon() { return tabIcon; } public voID setTabIcon(int tabIcon) { this.tabIcon = tabIcon; } public Class getContent() { return content; } public voID setContent(Class content) { this.content = content; }}

有了这个实体类，我们就可以把上面的第一步和第二步骤抽取出来封装一下了，代码如下：

private voID initTabHost() { //初始化fTabHost,R.ID.realtabcontent); /*初始化数据源*/ TabDataBean bean = new TabDataBean(R.string.tabHome,R.drawable.tab_home_normal,HomeFragment.class); //添加底部菜单项-tabSpec TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(bean.getTabname())); //给菜单项添加内容，indicator,其中indicator需要的参数VIEw即为菜单项的布局 tabSpec.setIndicator(getIndicatorVIEw(bean)); //第二参数就是该菜单项对应的页面内容 mTabHost.addTab(tabSpec,bean.getContent(),null)}private VIEw getIndicatorVIEw(TabDataBean bean){ VIEw vIEw = mInflater.inflate(R.layout.tab_indicator,null); ImageVIEw iconTab = (ImageVIEw) vIEw.findVIEwByID(R.ID.iv_tab_icon); TextVIEw tvTab = (TextVIEw) vIEw.findVIEwByID(R.ID.tv_tab_text); iconTab.setimageResource(bean.getTabIcon()); tvTab.setText(bean.getTabname()); return vIEw; }

把其他四项添加入后，代码如下：

public class MainActivity extends AppCompatActivity { private LayoutInflater mInflater; private FragmentTabHost mTabHost; private ArrayList<TabDataBean> tabDataList = new ArrayList<>(5); @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); mInflater = LayoutInflater.from(this); mTabHost = (FragmentTabHost) this.findVIEwByID(androID.R.ID.tabhost); initTabHost(); } /** * 初始化底部导航栏 */ private voID initTabHost() { //初始化fTabHost,R.ID.realtabcontent); /*初始化数据源*/ TabDataBean tabHome = new TabDataBean(R.string.tabHome,HomeFragment.class); TabDataBean tabHot = new TabDataBean(R.string.tabHot,R.drawable.tab_life_normal,HotFragment.class); TabDataBean tabcategory = new TabDataBean(R.string.tabcategory,R.drawable.tab_service_normal,categoryFragment.class); TabDataBean tabCart = new TabDataBean(R.string.tabCart,R.drawable.tab_order_normal,CartFragment.class); TabDataBean tabmine = new TabDataBean(R.string.tabmine,R.drawable.tab_mine_normal,mineFragment.class); tabDataList.add(tabHome); tabDataList.add(tabHot); tabDataList.add(tabcategory); tabDataList.add(tabCart); tabDataList.add(tabmine); //添加底部菜单项-tabSpec for (TabDataBean bean : tabDataList) { TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(bean.getTabname())); //给菜单项添加内容，indicator,null); } } /** * 初始化indciator的内容 * @param bean */ private VIEw getIndicatorVIEw(TabDataBean bean){ VIEw vIEw = mInflater.inflate(R.layout.tab_indicator,null); ImageVIEw iconTab = (ImageVIEw) vIEw.findVIEwByID(R.ID.iv_tab_icon); TextVIEw tvTab = (TextVIEw) vIEw.findVIEwByID(R.ID.tv_tab_text); iconTab.setimageResource(bean.getTabIcon()); tvTab.setText(bean.getTabname()); return vIEw; }}

运行效果如下：

如上结果，已经离我们的目标很近了。

第三步，给图标和文字添加变色selector
首先，给图标变色，在drawable文件夹下新建selector_tab_home.xml，代码如下：

<?xml version="1.0" enCoding="utf-8"?><selector xmlns:androID="http://schemas.androID.com/apk/res/androID"> <item androID:state_selected="true" androID:drawable="@drawable/tab_home_selected"/> <item androID:state_pressed="true" androID:drawable="@drawable/tab_home_selected"/> <item androID:drawable="@drawable/tab_home_normal"/></selector>

接下来把

TabDataBean tabHome = new TabDataBean(R.string.tabHome,HomeFragment.class); 改为
TabDataBean tabHome = new TabDataBean(R.string.tabHome,R.drawable.selector_tab_home,HomeFragment.class);
以此类推，剩下的四项也是如此处理

然后，菜单名称变色，如果在res文件夹下没有color资源文件夹，新建color资源文件夹，然后在color文件夹下新建selector_tab_text.xml文件，代码如下：

<?xml version="1.0" enCoding="utf-8"?><selector xmlns:androID="http://schemas.androID.com/apk/res/androID"> <item androID:color="@color/themecolor" androID:state_selected="true"/> <item androID:color="@color/themecolor" androID:state_active="true"/> <item androID:color="@color/tabTextcolor" androID:state_selected="false"/> <item androID:color="@color/tabTextcolor" androID:state_active="false"/></selector>

接下来把tab_indicator.xml文件中TextVIEw的AndroID:textcolor="@color/tabTextcolor" 修改为

androID:textcolor="@color/selector_tab_text"

最后运行一下就和文章开头的运行效果一致了，有疑问或者是文章有不对的地方欢迎评论和指正^_^。

问题： 我们在每个fragment的onActivityCreated（…）方法中都写了

Toast.makeText(getContext(),Toast.LENGTH_SHORT).show();

运行程序，你会发现，无论是第一次点击还是再次进入此菜单项时，都会d出toast对话框。如果我们在每个页面中都写入了网络请求，相当于每次进入都会进行一次请求。但是项目需求只要求我们第一进入该页面时请求，所以我们应该如何处理呢？有几种处理方式，大家可以思考一下，下一篇文章，我们重写FragmentTabHost来处理这个问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的FragmentTabHost FrameLayout实现底部导航栏全部内容，希望文章能够帮你解决FragmentTabHost FrameLayout实现底部导航栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。