App在页面底部展现标签栏导航的效果，有多种实现方式，包括TabActivity方式、ActivityGroup方式、FragmentActivity方式等等，具体的实现方案参见之前的博文《 Android开发笔记（十九）底部标签栏》。

一般情况下这种底部标签栏能够满足大部分的业务需求，然而有时客户的口味比较独特，固定的几款套餐已经不能满足她的胃口了。比如客户要求做成自助餐形式，同时长条的固定餐台也要换成可以滑动的餐台，因为固定餐台还得客户左右移步才能夹菜，可滑动的餐台就无需客户再走来走去。那么对应到底部标签栏这里，便是要求标签页的个数允许定制，并且每个页面除了可以通过标签页的点击操作进行切换之外，也允许通过左右滑动来切换。

个性化定制标签页

对于个性化定制标签页的情况，因为TabActivity方式和ActivityGroup方式必须在布局文件中指定具体的标签页，无法在代码里动态生成，这意味着它们两个无法胜任个性化定制的担当。剩下的FragmentActivity方式，在布局文件中只需声明一个FragmentTabHost，然后在代码中为该Host控件调用addTab方法逐个添加标签页，所以正好用来个性化定制标签页。

作为铺垫，要先熟悉一下FragmentTabHost的相关方法说明：
setup : 在指定框架布局上设立标签具体页面。
newTabSpec : 新建并返回一个包含具体标记的标签规格。
addTab : 添加一个标签页。第一个参数是标签规格，第二个参数是标签页面的Fragment类，第三个参数是要传递给Fragment的包裹。
setCurrentTab : 设置当前显示哪一个标签页。
getCurrentTab : 获取当前显示的是哪一个标签页。
clearAllTabs : 清除所有的标签页。

然后再来考虑个性化定制的具体实现步骤，分步如下：
1、在一个配置页面勾选需要显示的标签页，并将勾选结果保存在共享参数SharedPreferences中。
2、从配置页面返回到FragmentActivity时，主页面要从共享参数中读取最新的标签页列表，并构造最新的标签栏。
3、因为重新构造标签栏时，默认显示第一个标签的Fragment页，而不是最近一次返回的Fragment页；所以要在每次进入Fragment页时都把该Fragment保存到全局内存，这样重新构建标签栏时，才能指定当前要显示哪个Fragment。

下面是个性化定制标签页的效果图：

下面是主页面的布局文件内容，跟固定标签栏的布局是一样的：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><!-- 把FragmentLayout放在FragmentTabHost上面，标签页就在页面底部；反之FragmentLayout在FragmentTabHost下面，标签页就在页面顶部。-->  <FrameLayoutandroid:id="@+id/realtabcontent"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><android.support.v4.app.FragmentTabHostandroid:id="@android:id/tabhost"android:layout_width="match_parent"android:layout_height="@dimen/tabbar_height" ><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="0dp"android:layout_height="0dp"android:layout_weight="0" /></android.support.v4.app.FragmentTabHost></LinearLayout>

下面是个性化定制时的主页面代码：

public class TabCustomActivity extends FragmentActivity {private static final String TAG = "TabCustomActivity";private FragmentTabHost mTabHost;private Bundle mBundle = new Bundle();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_custom);mBundle.putString("tag", TAG);mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);}@Overrideprotected void onResume() {mTabHost.clearAllTabs();Log.d(TAG, "TabName=" + MainApplication.getInstance().TabCreateName);int tabPos = 0;// addTab(标题，跳转的Fragment，传递参数的Bundle)String tabInfo = TabUtil.readTabInfo(this);for (int i = 0, j = 0; i < tabInfo.length(); i++) {if (tabInfo.substring(i, i + 1).equals("1")) {mTabHost.addTab(getTabView(TabUtil.TabNameArray[i],TabUtil.TabSelectorArray[i]), TabUtil.TabClassArray[i], mBundle);if (MainApplication.getInstance().TabCreateName.equals(TabUtil.TabClassArray[i].getName())) {tabPos = j;}j++;}}mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);mTabHost.setCurrentTab(tabPos);super.onResume();}private TabSpec getTabView(int textId, int imgId) {String text = getResources().getString(textId);Drawable drawable = getResources().getDrawable(imgId);//必须设置图片大小，否则不显示drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());View item_tabbar = getLayoutInflater().inflate(R.layout.item_tabbar, null);TextView tv_item = (TextView) item_tabbar.findViewById(R.id.tv_item_tabbar);tv_item.setText(text);tv_item.setCompoundDrawables(null, drawable, null, null);TabSpec spec = mTabHost.newTabSpec(text).setIndicator(item_tabbar);return spec;}}

左右滑动切换标签页

左右滑动切换页面，很容易想到使用ViewPager，而且确实是可行的。既然使用ViewPager做为标签内容页的载体，那么主页面的布局文件就把FrameLayout节点换成android.support.v4.view.ViewPager，具体布局如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><android.support.v4.view.ViewPagerandroid:id="@+id/vp_main"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><android.support.v4.app.FragmentTabHostandroid:id="@android:id/tabhost"android:layout_width="match_parent"android:layout_height="50dp"><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="0dp"android:layout_height="0dp"android:layout_weight="0" /></android.support.v4.app.FragmentTabHost></LinearLayout>

接下来，还要在主页面代码中给ViewPager补充几个碎片内容页的适配器。因为ViewPager和FragmentTabHost二者之间不是天生一对（ViewPager和PagerTabStrip才是鸳鸯配），而是我们把它俩个强行拉郎配，所以标签页面的切换动作无法自动完成，只能开发者手工替它们包办了。具体地说，就是分别给它俩个注册页面切换监听器，并设定页面切换需要处理的事务，详述如下：
1、对于ViewPager来说，需要实现OnPageChangeListener监听器，一旦监听到页面滑动，就在onPageSelected方法中指定FragmentTabHost的当前页，即调用FragmentTabHost对象的setCurrentTab方法；
2、对于FragmentTabHost来说，需要实现OnTabChangeListener监听器，一旦监听到页面切换，就在onTabChanged方法中指定ViewPager的当前页，即调用ViewPager对象的setCurrentItem方法；

折腾一番，改造后的主页面代码如下所示：

public class TabSlidingActivity extends FragmentActivity implements OnTabChangeListener, OnPageChangeListener {private static final String TAG = "TabSlidingActivity";private FragmentTabHost mTabHost;private Bundle mBundle = new Bundle();private ViewPager vp_main;private ArrayList<String> mNameArray = new ArrayList<String>();private ArrayList<Fragment> mTabList = new ArrayList<Fragment>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_sliding);mBundle.putString("tag", TAG);mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);vp_main = (ViewPager) findViewById(R.id.vp_main);}@Overrideprotected void onResume() {mNameArray.clear();mTabList.clear();mTabHost.clearAllTabs();Log.d(TAG, "TabName="+MainApplication.getInstance().TabPagerName);int tabPos = 0;//addTab(标题，跳转的Fragment，传递参数的Bundle)String tabInfo = TabUtil.readTabInfo(this);for (int i=0, j=0; i<tabInfo.length(); i++) {if (tabInfo.substring(i, i+1).equals("1")) {mTabHost.addTab(getTabView(TabUtil.TabNameArray[i], TabUtil.TabSelectorArray[i]), TabUtil.TabClassArray[i], mBundle);if (MainApplication.getInstance().TabPagerName.equals(TabUtil.TabClassArray[i].getName())) {tabPos = j;}j++;mTabList.add(Fragment.instantiate(this, TabUtil.TabClassArray[i].getName()));}}mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);mTabHost.setOnTabChangedListener(this);vp_main.setAdapter(new MainTabAdapter(getSupportFragmentManager(), mTabList, mBundle));vp_main.addOnPageChangeListener(this);vp_main.setCurrentItem(tabPos);super.onResume();}private TabSpec getTabView(int textId, int imgId) {String text = getResources().getString(textId);mNameArray.add(text);  //滑动页面需要添加这行Drawable drawable = getResources().getDrawable(imgId);//必须设置图片大小，否则不显示drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());View item_tabbar = getLayoutInflater().inflate(R.layout.item_tabbar, null);TextView tv_item = (TextView) item_tabbar.findViewById(R.id.tv_item_tabbar);tv_item.setText(text);tv_item.setCompoundDrawables(null, drawable, null, null);TabSpec spec = mTabHost.newTabSpec(text).setIndicator(item_tabbar);return spec;}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {if (mTabHost.getCurrentTab() != arg0) {mTabHost.setCurrentTab(arg0);}}@Overridepublic void onTabChanged(String tabId) {int position = mNameArray.indexOf(tabId);if (vp_main.getCurrentItem() != position) {vp_main.setCurrentItem(position);}}}

下面是个即可点击标签切换，也可左右滑动切换的截图：

如果你以为左右滑动切换标签页就此完成的话，那可大错特错了。自古包办婚姻多不幸，ViewPager和FragmentTabHost也不例外，问题出在主页面的下面这行代码：

mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);

这句代码把标签内容页建造在了编号为android.R.id.tabcontent的视图上，也就是布局文件中宽度和高度都是0dp的框架布局。这么做是为了隐藏FragmentTabHost的原配，然后让ViewPager出来抛头露面。然而原配的Fragment只是外面看不到罢了，私底下要做的事一个都不落下。如果只是界面上的控件，反正用户也看不到原配，她长什么模样自然也无人知晓，可你若是来个夫唱妇随的桥段，原配与ViewPager一齐放声歌唱，那岂不是在用户面前露馅了？以App的界面行为举例，如果开发者在Fragment内部的onCreateView方法弹出一个提示对话框，势必会同时显示两个对话框，这就乱套了。

所以，像弹出对话框这种事务，必须控制只有ViewPager才能做；除此之外，倘若Fragment要执行分线程操作、后台服务等等额外工作，好比织毛衣缝被子什么的，那原配最好也不要做了，一律由ViewPager来做。因此，Fragment内部需要区分自己是FragmentTabHost的原配，还是ViewPager派来的，只有ViewPager来源的才允许做事情。区分两种来源倒也不难，通过重写setUserVisibleHint方法即可，因为ViewPager来源的Fragment在每次呈现界面时都会调用setUserVisibleHint方法，而FragmentTabHost的原配无论何时都不会调用setUserVisibleHint方法。

下面是个弹出对话框的Fragment代码，其中对两种来源作了区分：

public class TabFirstFragment extends Fragment {protected View mView;protected Context mContext;private String mTitle;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {mContext = getActivity();mView = inflater.inflate(R.layout.fragment_tab_first, container, false);mTitle = mContext.getResources().getString(R.string.menu_first);MainApplication.getInstance().TabCreateName = TabFirstFragment.class.getName();return mView;}@Overridepublic void setUserVisibleHint(boolean isVisibleToUser) {super.setUserVisibleHint(isVisibleToUser);//只在ViewPager中显示提示对话框if (isVisibleToUser) {MainApplication.getInstance().TabPagerName = TabFirstFragment.class.getName();AlertDialog.Builder builder = new AlertDialog.Builder(mContext);builder.setTitle(mTitle).setMessage("提示信息").setNegativeButton("取消", null);builder.create().show();}}}

但是实际运行时发现偶尔会闪退，日志报错java.lang.NullPointerException，原因是构建对话框时发现mContext为空。既然如此，那就补充mContext是否为空的判断好了，只有mContext非空时才显示对话框，修改后的Fragment代码如下所示：

public class TabFirstFragment extends Fragment {protected View mView;protected Context mContext;private String mTitle;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {mContext = getActivity();mView = inflater.inflate(R.layout.fragment_tab_first, container, false);mTitle = mContext.getResources().getString(R.string.menu_first);MainApplication.getInstance().TabCreateName = TabFirstFragment.class.getName();return mView;}@Overridepublic void setUserVisibleHint(boolean isVisibleToUser) {super.setUserVisibleHint(isVisibleToUser);//只在ViewPager中显示提示对话框if (isVisibleToUser) {MainApplication.getInstance().TabPagerName = TabFirstFragment.class.getName();//mContext可能为空，原因是首次打开时，setUserVisibleHint在onCreateView之前if (mContext != null) {AlertDialog.Builder builder = new AlertDialog.Builder(mContext);builder.setTitle(mTitle).setMessage("提示信息").setNegativeButton("取消", null);builder.create().show();}}}}

改完代码再次运行，这下不会闪退了。然而又有新问题出现，就是第一次打开该页面时，总是没有弹出对话框；只有当用户切换到其它标签页，再切回该页面时，才会显示对话框。究其原因，是setUserVisibleHint造成的。平常用户点开某个标签页，该标签页的setUserVisibleHint便被调用；可是第一次打开标签主页面时，默认显示第一个标签页，此时标签页的生命周期为onAttach->setUserVisibleHint->onCreateView，显然开发者在setUserVisibleHint方法中弹窗时，App还没来得及在onCreateView方法中给mContext赋值；所以要想正常使用setUserVisibleHint，必须在一开始的onAttach方法中就要对mContext赋值。

修改后的Fragment代码如下所示，现在标签页面的对话框可以正常工作了吧：

public class TabFirstFragment extends Fragment {protected View mView;protected Context mContext;private String mTitle;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {mContext = getActivity();mView = inflater.inflate(R.layout.fragment_tab_first, container, false);mTitle = mContext.getResources().getString(R.string.menu_first);MainApplication.getInstance().TabCreateName = TabFirstFragment.class.getName();return mView;}@Overridepublic void setUserVisibleHint(boolean isVisibleToUser) {super.setUserVisibleHint(isVisibleToUser);//只在ViewPager中显示提示对话框if (isVisibleToUser) {MainApplication.getInstance().TabPagerName = TabFirstFragment.class.getName();//mContext可能为空，原因是首次打开时，setUserVisibleHint在onCreateView之前if (mContext != null) {AlertDialog.Builder builder = new AlertDialog.Builder(mContext);builder.setTitle(mTitle).setMessage("提示信息").setNegativeButton("取消", null);builder.create().show();}}}@Overridepublic void onAttach(Context context) {//初始生命周期流程为onAttach->setUserVisibleHint->onCreateViewmContext = context;mTitle = mContext.getResources().getString(R.string.menu_first);super.onAttach(context);}}

点击下载本文用到的可定制可滑动标签栏的工程代码

点此查看Android开发笔记的完整目录

Android开发笔记（一百三十九）可定制可滑动的标签栏相关推荐

Android开发笔记（三十九）Activity的生命周期
与生命周期有关的方法下面是Activity类与生命周期有关的方法: onCreate : 创建页面 onStart : 开始页面 onStop : 停止页面 onResume : 恢复页面 onPa ...
Android开发笔记（八十九）单例模式
基本概念单例模式是一种常用的软件设计模式,它确保一个类只有一个实例,从而方便对实例个数的控制并节约系统资源. 单例模式有三个特点: 1.某个类只能有一个实例: 2.它要自行创建这个实例: 3.它只有 ...
Android开发笔记（七十九）资源与权限校验
硬件资源因为移动设备的硬件配置各不相同,为了防止使用了不存在的设备资源,所以要对设备的硬件情况进行检查.一般情况下,前置摄像头.部分传感器在低端手机上是没有的,像SD卡也可能因为用户没插卡使得找不到 ...
Android开发笔记（五十九）巧用传感器
传感器Sensor 传感器是Android用来感知周围环境以及运动信息的工具.因为具体的感应信息依赖于相关硬件,所以虽然Android提供了众多的感应器,但不是每部手机都能支持这么多感应器,恰恰相反, ...
Android开发笔记（六十九）JNI实战
NDK NDK的用途 NDK全称为Native Development Kit,意即原生的开发工具,NDK允许开发者在APP中通过C/C++代码执行部分程序.它是Android提供的方便开发者通过JN ...
Android开发笔记（四十九）异步任务处理AsyncTask
AsyncTask异步任务 Thread+Handler方式虽然能够实现多线程的通信处理,但是写起代码来颇为繁琐,所以Android提供了AsyncTask这样一个轻量级的异步任务类,其内部封装好Th ...
Android开发笔记（三十八）列表类视图
AdapterView AdapterView顾名思义是适配器视图,Spinner.ListView和GridView都间接继承自AdapterView,这三个视图都存在多个元素并排展示的情况,所以需 ...
Android开发笔记（三十六）展示类控件
View/ViewGroup View是单个视图,所有的控件类都是从它派生出来:而ViewGroup是个视图组织,所有的布局视图类都是从它派生出来.由于View和ViewGroup是基类,因此很少会直 ...
Android开发笔记（三十五）页面布局视图
布局视图的类别布局视图有五类,分别是线性布局LinearLayout.相对布局RelativeLayout.框架布局FrameLayout.绝对布局AbsoluteLayout.表格布局TableL ...
Android开发笔记（三十四）Excel文件的读写
Android中操作Excel文件的场合较少见,主要是一些专业领域导入导出报表时使用,所以处理Excel读写的开源代码也很稀缺.目前读写Excel主要采用开源库jxl,这个是韩国人写的excel操作工 ...

Android开发笔记（一百三十九）可定制可滑动的标签栏

个性化定制标签页

左右滑动切换标签页

Android开发笔记（一百三十九）可定制可滑动的标签栏相关推荐

最新文章

热门文章