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);
}
}
点击下载本文用到的可定制可滑动标签栏的工程代码
点此查看Android开发笔记的完整目录