Fragment+FragmentTabHost实现仿QQ底部菜单栏

来源：互联网 2023-02-21 16:23:55 285

QQ人群里使用最多的手机APP之一，它的设计、排版都深受大众的喜爱，那么你想不想知道QQ的底部导航是如何实现的呢？其实很简单，通过Fragment FragmentTabHost我们就可以轻松实现类似QQ底部导航的效果。

Fragment FragmentTabHost实现仿QQ底部菜单栏

工具/原料

Android开发工具：Android Studio或Eclipse
虚拟机或测试手机

一、设计布局文件

看到QQ底部导航只要有三栏，第一栏是“消息”，第二栏“联系人”，第三栏“动态”，可以自由的在这三栏导航中来回的切换，然后在上面展示不同的内容。这三栏中的一个特点是：文字的上面是一张图标，所以在制作布局的时候我们可以只需要一个模板就可以了，我们将这个模板命名为qq_nav_item.xml,具体代码如下：

Fragment FragmentTabHost实现仿QQ底部菜单栏

我们看到QQ在切换到当前状态的时候，图标和文字颜色都发生了改变，那是在控件中添加了颜色切换器(命名为change_color_text.xml)和图标切换器（命名为one_change_icon_image.xml,two_change_icon_image.xml,three_change_icon_image.xml），因为图标有三种，颜色只有一种变化，所有需要声明三个图标切换器，代码如下：

Fragment FragmentTabHost实现仿QQ底部菜单栏

我们可以制作QQ主页面了，命名为qq_main_layout.xml,在这个布局中使用FragmentTabHost，实现导航内容之间的切换，FlameLayout里面用于显示导航下的内容，比如消息导航中，FlameLayout里面显示当前正在聊天的窗口，代码如下：

Fragment FragmentTabHost实现仿QQ底部菜单栏

3相关内容未经授权抓取自百度经验

二、创建Fragment和Activity

创建三个Fragment页面，分别在导航切换到“消息”、“联系人”、“动态”时展示对应的内容，分别命名MessageFragment.java，ContactFragment.java和DynamicFragment.java，在这里我们主要显示QQ导航制作，关于内容页面我将在下一篇文章中介绍。这里我们就简单在内容中的Fragment输出有些提示文字，使用统一的布局：fragment_content.xml，代码如下：

Fragment FragmentTabHost实现仿QQ底部菜单栏