Android开发笔记（一百三十九）可定制可滑动的标签栏
Android开发笔记（一百三十九）可定制可滑动的标签栏
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下面，标签页就在页面顶部。
-->
<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="@dimen/tabbar_height" >
<FrameLayout
android: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();
@Override
protected 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);
}
@Override
protected 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.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="50dp">
<FrameLayout
android: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>();
@Override
protected 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);
}
@Override
protected 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;
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
if (mTabHost.getCurrentTab() != arg0) {
mTabHost.setCurrentTab(arg0);
}
}
@Override
public 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;
@Override
public 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;
}
@Override
public 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;
@Override
public 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;
}
@Override
public 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;
@Override
public 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;
}
@Override
public 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();
}
}
}
@Override
public void onAttach(Context context) {
//初始生命周期流程为onAttach->setUserVisibleHint->onCreateView
mContext = context;
mTitle = mContext.getResources().getString(R.string.menu_first);
super.onAttach(context);
}
}