Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单

利用FragmentTabHost实现底部菜单,在该底部菜单中,包括了4个TabSpec,每个TabSpec中包含了一个View,而View中包含了一个ImageView和一个TextView。

一、先演示下效果:

二、TabHost基本介绍

TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;

TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;

-- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;

-- 添加选项卡 : addTab(tabSpec);

三、使用步骤

1、定义布局 : 在XML文件中使用 FragmentTabHost 组件, 并在其中定义一个FrameLayout选项卡内容;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.activity.MainActivity"> <FrameLayout
android:id="@+id/real_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=""/> <android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"> <FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
需要注意的是,FragmentTabHost的id是需要使用安卓自带的id,“@android:id/tabhost”,而FragmentTabHost中的FrameLayout也需要使用安卓自带的id,tabcontent。另外一点是,这个文件中有两个FrameLayout,因为实现的是底部菜单,所以在FragmentTabHost中的FrameLayout是设置为0的,而FragmentTabHost真正需要显示的内容是在上面的FrameLayout中进行显示的。

2、定义 Indicator中的View 文件:main_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"> <ImageView
android:id="@+id/iv_tab_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginTop="5dp"
android:src="@drawable/main_tab_btn_news" /> <TextView
android:id="@+id/tv_tab_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="首页"
android:textColor="@color/main_tab_text_color"
android:textSize="10sp" /> </LinearLayout>

一张图片,一个文本

3、定义Tab MainTabItem.java

package com.jack.appnews.widget;

public class MainTabItem {
private int Image;
private int Text;
private Class Fragment; public MainTabItem(int image, int text, Class fragment) {
Image = image;
Text = text;
Fragment = fragment;
} public int getImage() {
return Image;
} public void setImage(int image) {
Image = image;
} public int getText() {
return Text;
} public void setText(int text) {
Text = text;
} public Class getFragment() {
return Fragment;
} public void setFragment(Class fragment) {
Fragment = fragment;
}
}

4、在MainActivity中编写逻辑

核心逻辑如下 (代码中有说明,共5步)

//1)实例化4个Tab类的对象
mTabs.add(new MainTabItem(R.drawable.main_tab_btn_news, R.string.main_tab_news, NewsListFragment.class));
mTabs.add(new MainTabItem(R.drawable.main_tab_btn_video, R.string.main_tab_video, VideoListFragment.class));
mTabs.add(new MainTabItem(R.drawable.main_tab_btn_image, R.string.main_tab_image, ImageListFragment.class));
mTabs.add(new MainTabItem(R.drawable.main_tab_btn_mine, R.string.main_tab_mine, MineFragment.class)); //2)调用 setup 方法
mTabHost.setup(this, getSupportFragmentManager(), R.id.real_content); //3)添加 Tab
for (MainTabItem tab : mTabs) {
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(String.valueOf(tab.getText())).setIndicator(getTabItemView(tab));
mTabHost.addTab(tabSpec, tab.getFragment(), null);
} //4)去除掉底部菜单图表之间的分割线
if (android.os.Build.VERSION.SDK_INT > 10) {
mTabHost.getTabWidget().setShowDividers(0);
} //5)事件绑定
mTabHost.setOnTabChangedListener(this);

完整代码: MainActivity.java

package com.jack.appnews.ui.activity;

import android.support.v4.app.FragmentTabHost;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView; import com.jack.appnews.R;
import com.jack.appnews.ui.BaseActivity;
import com.jack.appnews.ui.fragment.ImageListFragment;
import com.jack.appnews.ui.fragment.MineFragment;
import com.jack.appnews.ui.fragment.NewsListFragment;
import com.jack.appnews.ui.fragment.VideoListFragment;
import com.jack.appnews.widget.MainTabItem; import java.util.ArrayList; import butterknife.BindView; public class MainActivity extends BaseActivity implements TabHost.OnTabChangeListener {
@BindView(android.R.id.tabhost)
FragmentTabHost mTabHost;
private long exitTime = 0; private ArrayList<MainTabItem> mTabs = new ArrayList<>(4); @Override
protected int inflateLayoutId() {
return R.layout.activity_main;
} @Override
protected void initViews() {
initTabHost();
} protected void initTabHost() {
//1)实例化4个Tab类的对象
mTabs.add(new MainTabItem(R.drawable.main_tab_btn_news, R.string.main_tab_news, NewsListFragment.class));
mTabs.add(new MainTabItem(R.drawable.main_tab_btn_video, R.string.main_tab_video, VideoListFragment.class));
mTabs.add(new MainTabItem(R.drawable.main_tab_btn_image, R.string.main_tab_image, ImageListFragment.class));
mTabs.add(new MainTabItem(R.drawable.main_tab_btn_mine, R.string.main_tab_mine, MineFragment.class)); //2)调用 setup 方法
mTabHost.setup(this, getSupportFragmentManager(), R.id.real_content); //3)添加 Tab
for (MainTabItem tab : mTabs) {
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(String.valueOf(tab.getText())).setIndicator(getTabItemView(tab));
mTabHost.addTab(tabSpec, tab.getFragment(), null);
} //4)去除掉底部菜单图表之间的分割线
if (android.os.Build.VERSION.SDK_INT > 10) {
mTabHost.getTabWidget().setShowDividers(0);
} //5)事件绑定
mTabHost.setOnTabChangedListener(this);
} /**
* 设置Indicator中的View
*
* @param tab
* @return
*/
private View getTabItemView(MainTabItem tab) {
View view = getLayoutInflater().inflate(R.layout.main_tab_indicator, null);
ImageView Tab_img = (ImageView) view.findViewById(R.id.iv_tab_icon);
TextView Tab_txt = (TextView) view.findViewById(R.id.tv_tab_text); Tab_img.setBackgroundResource(tab.getImage());
Tab_txt.setText(tab.getText());
return view;
} @Override
public void onTabChanged(String tabId) {
final int size = mTabHost.getTabWidget().getTabCount();
for (int i = 0; i < size; i++) {
View v = mTabHost.getTabWidget().getChildAt(i);
if (i == mTabHost.getCurrentTab()) {
v.setSelected(true);
} else {
v.setSelected(false);
}
}
supportInvalidateOptionsMenu();
} @Override
public void onBackPressed() {
if ((System.currentTimeMillis() - exitTime) > 2000) {
exitTime = System.currentTimeMillis();
} else {
finish();
System.exit(0);
}
} }

四、源代码地址

Talk is cheap. Show me the code

话不多说,代码在这里下载!

https://github.com/wukong1688/Android-BaseTabHost

这是我用FragmentTabHost + ViewPager + XRecycleList   实现的  标签切换 + 列表上滑加载+列表下滑刷新

其中 列表上滑加载+列表下滑刷新  可参考下一篇文章:

Android 支持下拉刷新、上拉加载更多 的 XRecyclerview

如果觉得有帮助,欢迎在 Github 为我 star!

五、参考文章

https://www.jianshu.com/p/491386d6435c

https://www.cnblogs.com/langfei8818/p/6349354.html

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/10753339.html

转载请著名出处!谢谢~~

[Android] Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单的更多相关文章

  1. 安卓开发笔记——Fragment+FragmentTabHost组件(实现新浪微博底部菜单)

    记得之前写过2篇关于底部菜单的实现,由于使用的是过时的TabHost类,虽然一样可以实现我们想要的效果,但作为学习,还是需要来了解下这个新引入类FragmentTabHost 之前2篇文章的链接: 安 ...

  2. Android自己定义TabActivity(实现仿新浪微博底部菜单更新UI)

    现在Android上非常多应用都採用底部菜单控制更新的UI这样的框架,比如新浪微博 点击底部菜单的选项能够更新界面.底部菜单能够使用TabHost来实现,只是用过TabHost的人都知道自己定义Tab ...

  3. Android Fragment实现微信底部导航

    1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

  4. <Android 基础(三十三)> TabHost ~ 仿微信底部菜单

    简介 Container for a tabbed window view. This object holds two children: a set of tab labels that the ...

  5. 转-Fragment+FragmentTabHost组件(实现新浪微博底部菜单)

    http://www.cnblogs.com/lichenwei/p/3985121.html 记得之前写过2篇关于底部菜单的实现,由于使用的是过时的TabHost类,虽然一样可以实现我们想要的效果, ...

  6. Android中软键盘弹出时底部菜单上移问题

    当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

  7. Android高仿qq及微信底部菜单的几种实现方式

    最近项目没那么忙,想着开发app的话,有很多都是重复,既然是重复的,那就没有必要每次都去写,所以就想着写一个app通用的基本框架,这里说的框架不是什么MVC,MVP,MVVM这种,而是app开发的通用 ...

  8. [Android] Android 支持下拉刷新、上拉加载更多 的 XRecyclerview

    XRecyclerView一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊 ...

  9. Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

    一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...

随机推荐

  1. 数据库原理 - 序列5 - 事务是如何实现的? - Undo Log解析

    本文节选自作者书籍<软件架构设计:大型网站技术架构与业务架构融合之道>.作者微信公众号:架构之道与术.公众号底部菜单有书友群可以加入,与作者和其他读者进行深入讨论.也可以在京东.天猫上购买 ...

  2. java笔记----property文件读写

    package com.test.property; import java.io.BufferedInputStream; import java.io.File; import java.io.F ...

  3. 记一次 c 语言 的 多线程查找 简单实现

    //仅供参考学习 1 #define _CRT_SECURE_NO_WARNINGS //屏蔽 vs 的a #include <stdio.h> #include <stdlib.h ...

  4. Python之Pandas的一些理解

    Pandas的功能: 1.  结构化的数据分析; 相比excel,可以处理更大量的数据和更好的性能 2.  对数据的清洗

  5. nginx学习路线

    nginx:熟透,配置.rewrite.黑白名单.脚本.代理.优化等

  6. ASP.NET Core 2.2 : 十七.Action的执行(Endpoint.RequestDelegate后面的故事)

    上一章介绍了经过路由的处理,一个请求找到了具体处理这个请求的EndPoint,并最终执行它的RequestDelegate方法来处理这个Httpcontext.本章继续这个处理进程,按照惯例,依然通过 ...

  7. Fum uc M-R ko P's R

    Milr-Rabin Dodod Avlo se \(n-1\) e \(u\cdot 2^t\). hen goch'n Toizz lme \([1,n-1]\) e \(l\). cak fe ...

  8. VS2019 离线安装方法详解

    本文详细介绍了 VS2019 离线安装的相关步骤,以桌面开发为主下载 C++桌面开发..NET 桌面开发相关的工作负载.MFC 可选组件及帮助查看器. 工作负载(Workload) 离线安装需要先根据 ...

  9. c++ _pFirstBlock == pHead

    今天写程序时碰到了这个异常,导致调试的程序卡死.在网上找了很久答案,都没解决.大致判定是对象被多次析构,但又确认程序逻辑没有问题. 后来参考了 http://www.cnblogs.com/qinta ...

  10. 用eclipce编写 MR程序 MapReduce

    package com.bw.mr; import java.io.IOException; import org.apache.hadoop.io.IntWritable; import org.a ...