【Android】FragmentTabHost实现底部Tab菜单选项
以前实现类似微博底部菜单使用的是TabHost+Activity来实现,但是使用的时候提醒已经被弃用,现在我们可以通过FragmentTabHost+Fragment来实现。下面就是demo:
1.main_activity.xml 主布局文件。
<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="0dip" android:layout_weight="1" /><android.support.v4.app.FragmentTabHostandroid:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="wrap_content"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0" /> </android.support.v4.app.FragmentTabHost></LinearLayout>
2.fragment_1.xml 这个文件是其中一个fragment的布局文件,有多少个fragment可以分别创建它们的xml文件,这个demo当中的4个fragment布局一样,所以共用一个xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/fragment_text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="80sp"></TextView><EditTextandroid:id="@+id/fragment_edit"android:layout_width="200dp"android:layout_height="wrap_content"></EditText></LinearLayout>
3.tab_item_view.xml 这个是Tab底部的每一个按钮的布局文件,显示了按钮的图标和对应文字
<?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" ><ImageViewandroid:id="@+id/imageview"android:layout_width="wrap_content"android:layout_height="wrap_content"android:focusable="false"android:padding="3dp" android:src="@drawable/ic_launcher"></ImageView><TextViewandroid:id="@+id/textview" android:layout_width="wrap_content"android:layout_height="wrap_content" android:text="首页"android:textSize="12sp"></TextView></LinearLayout>
4.tab_activity-btn.xml 设置按钮选中和不选中的照片,也是4个xml文件对应4个按钮,每个按钮两种状态,每种状态一张图片。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_nav_one_sel" android:state_selected="true"/> <item android:drawable="@drawable/ic_nav_one_nor"/> </selector>
5.FragmentPage1.java,继承Fragment,用来管理其中的一个Tab的内容,demo底部有4个Tab,所以还创建了FragmentPage2.java,.FragmentPage3.java,.FragmentPage4.java
public class FragmentPage1 extends Fragment{ private EditText editText;private TextView textView;@Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { System.out.println("onCreateView"); return inflater.inflate(R.layout.fragment_1, container, false);} @Overridepublic void onActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);System.out.println("onActivityCreated");editText = (EditText)getActivity().findViewById(R.id.fragment_edit);textView = (TextView)getActivity().findViewById(R.id.fragment_text);textView.setText("1");}}
6.MainActivity.java,继承了FragmentActivity,用来管理上一步的fragment。
public class MainActivity extends FragmentActivity {//定义FragmentTabHost对象 private FragmentTabHost mTabHost; //定义一个布局 private LayoutInflater layoutInflater; //定义数组来存放Fragment界面 private Class fragmentArray[] = {FragmentPage1.class,FragmentPage2.class,FragmentPage3.class,FragmentPage4.class}; //定义数组来存放按钮图片 private int mImageViewArray[] = {R.drawable.tab_activity_btn,R.drawable.tab_news_btn,R.drawable.tab_organization_btn, R.drawable.tab_more_btn}; //Tab选项卡的文字 private String mTextviewArray[] = {"活动", "资讯", "组织", "更多"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); }/** * 初始化组件 */ private void initView(){ //实例化布局对象 layoutInflater = LayoutInflater.from(this); //得到TabHost mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);//实例化TabHost对象mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent); //得到fragment的个数 int count = fragmentArray.length; //循环添加Tab页for(int i = 0; i < count; i++){ //为每一个Tab按钮设置tag和视图,newTabSpec的参数为tag标记,setIndicator设置Tab的显示视图TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i)); //将Tab添加进FragmentTabHost中 mTabHost.addTab(tabSpec, fragmentArray[i], null); } } /** * 给Tab按钮设置图标和文字 */ private View getTabItemView(int index){ View view = layoutInflater.inflate(R.layout.tab_item_view, null); ImageView imageView = (ImageView) view.findViewById(R.id.imageview); imageView.setImageResource(mImageViewArray[index]); TextView textView = (TextView) view.findViewById(R.id.textview); textView.setText(mTextviewArray[index]); return view; } }
7,优化:当我们在tab间切换时,之前fragment的布局会从新加载,我们看下fragment的生命周期,如下图:
我们在每次切换时,都会执行即将隐藏的fragment的onDestroyView()方法,准备显示的fragment的onCreateView方法。也就是每次切换时候都会从新加载布局,但是定义的全局变量并不会销毁(没有调用onDestroy方法),因此网上介绍的方式是用一个全局变量rootView来保存布局,切换fragment,会执行onCreateView()方法,我们就在里面判断rootView是否为空,不空即返回这个保存了的rootView即可,否则才从xml文件加载布局。添加生命周期打印函数以及优化后的fragment文件如下:
public class FragmentPage1 extends Fragment{ private EditText editText;private TextView textView;private View rootView;@Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { System.out.println("onCreateView");if(rootView == null){rootView=inflater.inflate(R.layout.fragment_1, null);}//缓存的rootView需要判断是否已经被加过parent, 如果有parent需要从parent删除,要不然会发生这个rootview已经有parent的错误。 ViewGroup parent = (ViewGroup) rootView.getParent(); if (parent != null) { parent.removeView(rootView); } return inflater.inflate(R.layout.fragment_1, container, false);} @Overridepublic void onAttach(Activity activity) {super.onAttach(activity);System.out.println("onAttach");}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);System.out.println("onCreate");}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);System.out.println("onActivityCreated");editText = (EditText)getActivity().findViewById(R.id.fragment_edit);textView = (TextView)getActivity().findViewById(R.id.fragment_text);textView.setText("1");}@Overridepublic void onStart() {super.onStart();System.out.println("onStart");}@Overridepublic void onResume() {super.onResume();System.out.println("onResume");}@Overridepublic void onDestroy() {super.onDestroy();System.out.println("onDestroy");}@Overridepublic void onDestroyView() {super.onDestroyView();System.out.println("onDestroyView");}}
运行效果如下:
【Android】FragmentTabHost实现底部Tab菜单选项相关推荐
- android仿京东底部tab,GitHub - wenchaosong/BottomBar: 仿京东底部栏重复选择刷新动画,还有普通的样式和 MaterialDesign 样式...
轻量级的底部导航栏 在原项目PagerBottomTabStrip 基础上 增加了 getItem 方法,能设置对应 position 的 tab 属性 实现效果图 自定义扩展例子 仿京东重复刷新动画 ...
- 底部带导航的android app,【续】Android App之底部tab导航常用实现方案总结
动态效果图就不贴出来了,来张静态图吧: 实现的效果还算完美吧. 看看我们的FragmentTabHost方式修改的代码部分, 1,FragmentTabHost中的修改 因为在原来的tab数量上增加了 ...
- android 微信布局 字体,【Android】底部Tab+ViewPager(仿微信界面)
感谢 github的作者:wuyexiong 效果图(图片和文字都有渐变效果) 实现 主要用到自定义一个LinearLayout和ImageView 1.BottomIconView继承自ImageV ...
- 点击菜单选项,右侧主体区新增子界面(Tab)的实现
今天是2019年小年后一天,还有三天回家过年. 今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面.一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区.有一种效 ...
- android美团底部栏实现,仿美团APP的底部滑动菜单实现
背景:在现在的APP的应用中,类似仿美团APP的底部滑动菜单,应用是挺多的,例如QQ,微信,支付宝都应用到. 开发流程 1)设置selector(背景选择器),在res的目录下建立新的文件夹(draw ...
- 仿闲鱼 底部菜单html,GitHub - 494293346/rotateMenu: 仿闲鱼首页,“底部加号弹出菜单选项” 界面,动画效果可能跟闲鱼有点不一样...
rotateMenu 仿闲鱼首页,"底部加号弹出菜单选项" 界面,动画效果可能跟闲鱼有点不一样 ##简介 仿闲鱼首页,"底部加号弹出菜单选项" 界面,动画效果可 ...
- android 底部tab效果,Android 仿微信底部渐变Tab效果
先来看一下效果图 除了第三个的发现Tab有所差别外,其他的基本还原了微信的底部Tab渐变效果 每个Tab都是一个自定义View,根据ImageView的tint属性来实现颜色渐变效果,tint属性的使 ...
- Android中上下文菜单选项--ContextMenu
Android系统中的ContextMenu(上下文菜单)类似于PC中的右键弹出菜单,当一个视图注册到一个上下文菜单时,执行一个在该对象上的"长按"动作,将出现一个提供相关功能的浮 ...
- Android中的Menu功能菜单-OptionsMenu[选项菜单]
Android中的菜单是用户界面中最常见的元素,使用也很频繁,在Android中,菜单被分为3种,分别为选项菜单(OptionsMenu).上下文菜单(ContextMenu).子菜单(SubMenu ...
最新文章
- php true true true,php-为什么此评估为true
- run loop详解
- JavaScript for…in vs for
- altas(ajax)控件(二十三):等级选择控件Rating
- 查看ORACLE 下所有信息
- 详解Kafka与ActiveMQ的区别与联系!
- 一阶电路暂态响应的结果分析。_【2020考研】南京邮电大学813《电路分析》考试大纲...
- 03-windows下Oracle的下载与安装
- 基于阿尔法贝塔剪枝算法的五子棋_C4.5算法剪枝2
- matlab空间面板门槛,学习笔记——面板门槛模型
- 计算机专硕一般研二在干嘛,专硕一般研二在干嘛,专硕两年怎么安排
- IQ Questions
- Ubuntu18.04美化主题(mac主题)
- 《概率论与数理统计》再学习之事件的互斥(互不相容)和独立的关系
- Python绘制双曲线
- 计算机基础---03Excel篇(入门,身份证筛选出生年月,自动填充功能,表格排序,自动筛选,高级筛选,数据有效性,求和)
- 步步为营-57-JQuery练习题
- minikube国内安装之曲线救国
- Android滑动头部控件
- 算法分析大作业 圆排列问题