[Android] Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单
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>
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
[Android] Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单的更多相关文章
- 安卓开发笔记——Fragment+FragmentTabHost组件(实现新浪微博底部菜单)
记得之前写过2篇关于底部菜单的实现,由于使用的是过时的TabHost类,虽然一样可以实现我们想要的效果,但作为学习,还是需要来了解下这个新引入类FragmentTabHost 之前2篇文章的链接: 安 ...
- Android自己定义TabActivity(实现仿新浪微博底部菜单更新UI)
现在Android上非常多应用都採用底部菜单控制更新的UI这样的框架,比如新浪微博 点击底部菜单的选项能够更新界面.底部菜单能够使用TabHost来实现,只是用过TabHost的人都知道自己定义Tab ...
- Android Fragment实现微信底部导航
1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...
- <Android 基础(三十三)> TabHost ~ 仿微信底部菜单
简介 Container for a tabbed window view. This object holds two children: a set of tab labels that the ...
- 转-Fragment+FragmentTabHost组件(实现新浪微博底部菜单)
http://www.cnblogs.com/lichenwei/p/3985121.html 记得之前写过2篇关于底部菜单的实现,由于使用的是过时的TabHost类,虽然一样可以实现我们想要的效果, ...
- Android中软键盘弹出时底部菜单上移问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
- Android高仿qq及微信底部菜单的几种实现方式
最近项目没那么忙,想着开发app的话,有很多都是重复,既然是重复的,那就没有必要每次都去写,所以就想着写一个app通用的基本框架,这里说的框架不是什么MVC,MVP,MVVM这种,而是app开发的通用 ...
- [Android] Android 支持下拉刷新、上拉加载更多 的 XRecyclerview
XRecyclerView一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊 ...
- Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换
一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...
随机推荐
- 使用py2exe将python脚本转换成exe可执行文件
Python(wiki en chs)是一门弱类型解释型脚本语言,拥有动态类型系统和垃圾回收功能,支持多种编程范式:面向对象.命令式.函数式和过程式编程. 由于Python拥有一个巨大而广泛的标准库 ...
- Vtiger CRM 几处SQL注入漏洞分析,测试工程师可借鉴
本文由云+社区发表 0x00 前言 干白盒审计有小半年了,大部分是业务上的代码,逻辑的复杂度和功能模块结构都比较简单,干久了收获也就一般,有机会接触一个成熟的产品(vtiger CRM)进行白盒审计, ...
- 随机IP
function rand_ip(){ $ip_longs = array( array('607649792', '608174079'), //36.56.0.0-36.63.255 ...
- var、let 及 const 区别
var console.log(a) // undefined var a = 1 从上述代码中我们可以发现,虽然变量还没有被声明,但是我们却可以使用这个未被声明的变量,这种情况就叫做提升,并且提升的 ...
- Cordova入门系列(一)创建项目 转发 https://www.cnblogs.com/lishuxue/p/6008678.html
版权声明:本文为博主原创文章,转载请注明出处 Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的 ...
- 【原创】互联网项目中mysql应该选什么事务隔离级别
摘要 企业千万家,靠谱没几家. 社招选错家,亲人两行泪. 祝大家金三银四跳槽顺利! 引言 开始我们的内容,相信大家一定遇到过下面的一个面试场景 面试官:"讲讲mysql有几个事务隔离级别?& ...
- 解决mySQL数据库锁表问题。
先用这条命令查询数据库阻塞的进程 SELECT * FROM information_schema.innodb_trx 找到后在根据下图这个字段:try_mysql_thread_id 作为这条数据 ...
- C语言之各个位数上的数值之和
#include<stdio.h> #include<stdlib.h> void main() { int num; ; int x,y; printf("请输入一 ...
- Keil MDK5的ITM调试
https://blog.csdn.net/burgesskzg/article/details/77100453
- Linux(Ubuntu)使用日记------为程序添加桌面快捷方式
我们Ubuntu中的所以的程序的快捷方式都放在了/usr/share/applications文件夹下,都是以.desktop结尾的文件.我们可以在这个文件夹下创建我们的快捷方式,然后复制到桌面即可 ...