Fragment、ViewPager、ActionBar实现TAB导航条效果
Fragment、ViewPager、ActionBar实现TAB导航条效果
前言：
制作Tab书签选项卡）有多种方法：
【特别提示：】注意几种创建Tab书签导航中1、2、Fragment + 3、Fragment + RadioGroup 【必要时首选】
4、Fragment + ViewPager 带滑动导航条 【5、Fragment + ViewPager + RadioGroup自定义固定导航条 【推荐使用】
【Fragment + ActionBar + ViewPager 固定导航条【TabActivity 实现选项卡效果：
TabActivity（已经过期，使用FragmentActivity来实现相同的效果）
（一）、相关类介绍：
1、：提供选项卡（Tab页）的窗口视图容器。
TabSpecTabSpec与TabHost的关系：
TabHost相当于浏览器中浏览器分布的集合，而TabSpec则相当于浏览器中的 每一个分页面。在Android中，每一个TabSpec可以是一个组件，也可以是一个布局，TabHost将每一个分页集中在一起，随着选项卡的切换来分别显示相应的界面。
特殊的布局文件：
- 根节点必须是
- 必须有子节点android:id="@android:id/tabs"；
- 必须有一个android:id="@android:id/tabcontent"。
2、继承TabActivity：（以前学习的过程中都是继承android.app.Activity类，但是这里需要继承android.app.TabActivity）
3、创建getTabHost()方法来实现。
4、分别创建
- 通过TabHost对象的TabSpec对象；
- 通过通过addTab()方法实现添加选项卡。
<TabHostxmlns:android
android:id
android:layout_width
android:layout_height>
<LinearLayout
android:orientation
android:layout_width
android:layout_height
android:padding>
<TabWidget
android:id
android:layout_width
android:layout_height/>
<FrameLayout
android:id
android:layout_width
android:layout_height
android:padding/>
</LinearLayout>
</TabHost>
@Override
setContentView(R.layout.
Resources res = getResources();
TabHost tabHost =
TabSpec tabSpec1 = tabHost.newTabSpec("records")
.setIndicator("记录", res.getDrawable(R.drawable.
.setContent(tabHost.addTab(tabSpec1);
TabSpec tabSpec2 = tabHost.newTabSpec("records")
.setIndicator("联系人", res.getDrawable(R.drawable.
.setContent(tabHost.addTab(tabSpec2);
TabSpec tabSpec3 = tabHost.newTabSpec("collections")
.setIndicator("收藏夹", res.getDrawable(R.drawable.
.setContent(tabHost.addTab(tabSpec3);
}
}
FragmentTabHost中实现选项卡效果：（二）、特殊的布局文件：
- 根节点必须是<android.support.v4.app.
【备注：】如果使用 findViewById() 加载 TabHost，那么在新增一个选项卡之前， 需要调用 setup()方法。而在 TabActivity 中调用了 getTabHost() 方法后，你就不再需要调用setup()了。
例如：tabHost. R.id.layout_container_tabcontent);
5、分别创建TabSpec对象：
- 通过TabHost对象的
- 调用TabHost对象的有三个参数的addTab()方法。第一个参数是TabSpec对象，第二个参数是Fragment类的class文件，第三个参数的往Fragment对象中传递的Bundle数据。
（三）、示例代码：
1、布局文件的代码：
<android.support.v4.app.FragmentTabHost
xmlns:android
android:id
>
<TabWidget
android:id
android:layout_width
/>
<FrameLayout
android:id
/>
</android.support.v4.app.FragmentTabHost>
2、MainActivity中核心代码：
tabHost;
@Override
setContentView(R.layout.
tabHost = (FragmentTabHost) findViewById(R.id.tabHost.setup(
R.id.
bundle1 = bundle1.putInt("tabIndex", 1);
bundle2 = bundle2.putInt("tabIndex", 2);
bundle3 = bundle3.putInt("tabIndex", 3);
Resources res = getResources();
tabHost.addTab(
tabHost.newTabSpec("records").setIndicator("记录",
res.getDrawable(R.drawable.
ContentFragment.bundle1);
tabHost.addTab(
tabHost.newTabSpec("contacts").setIndicator("联系人",
res.getDrawable(R.drawable.
ContentFragment.bundle2);
tabHost.addTab(
tabHost.newTabSpec("collection").setIndicator("收藏夹",
res.getDrawable(R.drawable.
ContentFragment.bundle3);
}
}
tabIndexdefaultData = "未知";
list1, list2, list3;
adapter =
@Override
Bundle bundle = getArguments();
tabIndex = bundle.getInt("tabIndex");
defaultData"您访问的是第""个栏目"
tabIndex) {
list1 = list1.add("记录：" + i);
}
list2 = list2.add("联系人：" + i);}list3 = list3.add("收藏夹：" + i);}}}}@OverrideBundle savedInstanceState) {View view = inflater.inflate(R.layout.text_fragment_info = (TextView) view.findViewById(R.id.listView_fragment = (ListView) view.findViewById(R.id.adapter = android.R.layout.list1);adapter = android.R.layout.list2);adapter = android.R.layout.list3);}text_fragment_infolistView_fragment}}滑动导航条效果）【掌握】
- 导航条利用<android.support.v4.view.PagerTabStrip>标签生成；
- 导航条会随着ViewPager内容物的滑动而发生左右侧滑。
（二）、ViewPager 实现带滑动导航条选项卡的步骤：
- 必须有<android.support.v4.view.PagerTabStrip>子节点或者<android.support.v4.view.PagerTitleStrip>子节点，用来显示选项卡导航条。
2、创建ViewPager对象：通过findViewById()方法来实现即可；
3、创建PagerTabStrip对象：通过findViewById()方法来实现即可，设置PagerTabStrip；
- 通过PagerTabStrip 对象的setTextColor()方法设置导航条文字颜色；
- 通过PagerTabStrip 对象的setBackgroundColor ()方法设置导航条背景颜色；
- 通过PagerTabStrip 对象的setDrawFullUnderline()方法设置导航条下方是否有完整下划线颜色；
- 通过PagerTabStrip 对象的setTabIndicatorColor()方法设置导航条文字下方的指示颜色；
- 通过PagerTabStrip 对象的setTextSpacing()方法设置导航条文字的间隔。
4、定义ViewPager中的数据源List<View>，自定义PagerAdapter适配器；
5、为ViewPager对象设置适配器。
<LinearLayoutxmlns:android
>
<android.support.v4.view.ViewPager
android:id
>
<android.support.v4.view.PagerTabStrip
android:id
>
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>
1.这里ViewPager和 PagerTabStrip都要把包名写全了，不然会ClassNotFount
2.API中说：在布局xml把PagerTabStrip当做ViewPager的一个子标签来用，不能拿出来，不然还是会报错
3.在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置
4.如果要显示出PagerTabStrip某一页的title,需要在ViewPager的adapter中实现getPageTitle(int)。
list_views;
list_titles;
@Override
setContentView(R.layout.
viewPager_main = (ViewPager) findViewById(R.id.pagerTabStrip_main = (PagerTabStrip) findViewById(R.id.
pagerTabStrip_main.setTextColor(Color.pagerTabStrip_main.setBackgroundColor(Color.pagerTabStrip_main.setDrawFullUnderline(pagerTabStrip_main.setTabIndicatorColor(Color.pagerTabStrip_main.setTextSpacing(50);
list_views = list_titles = LayoutInflater inflater = LayoutInflater.View view1 = inflater.inflate(R.layout.View view2 = inflater.inflate(R.layout.View view3 = inflater.inflate(R.layout.View view4 = inflater.inflate(R.layout.
list_views.add(view1);
list_views.add(view2);
list_views.add(view3);
list_views.add(view4);
list_titles"View1"list_titles"View2"list_titles"View3"list_titles"View4"
viewPager_main}
list = list_titles =
list = list;
list_titles = list_titles;
}
@Override
list !=
list.size();
}
}
@Override
}@Overridecontainer.addView(list.get(position));list.get(position);}@Overridecontainer.removeView(list.get(position));}@Overridelist_titles.get(position);}}}ViewPager Tab效果二：（ViewPager自定义导航条效果）（一）、效果说明：
- 自定义导航条；
- 导航条固定位置，不发生左右侧滑。
（二）、ViewPager 实现自定义导航条选项卡的步骤：
- 必须有<android.support.v4.view.ViewPager>节点；
- 在ViewPager节点上方可自定义布局，布局内可放置TextView及ImageView等控件来自定义导航条效果。
2、初始化自定义选项卡导航条，并为选项卡设置单击监听事件OnClickListener；
3、初始化ViewPager;
- 创建ViewPager对象：通过findViewById()方法来实现即可；
- 定义ViewPager中的数据源为ViewPager对象设置适配器；
- 给ViewPager设置监听器（OnPageChangeListener）。
（三）、示例代码：
1、布局文件的代码：
<LinearLayoutxmlns:android
>
<LinearLayout
android:id
>
<TextView
android:text=/>
<TextView
android:text=/>
<TextView
android:text=/>
</LinearLayout>
<TextView
/>
<android.support.v4.view.ViewPager
android:id
/>
</LinearLayout>
list = arr_titles =
@Override
setContentView(R.layout.
initTabView();
initViewPager();
}
LinearLayout layout = (LinearLayout) findViewById(R.id.arr_titles =
TextView textView = (TextView) layout.getChildAt(i);
arr_titles[i] = textView;
arr_titles[i].setEnabled(arr_titles[i].setBackgroundColor(Color.arr_titles[i].setTag(i);
arr_titles[i].setOnClickListener(
@Override
// 根据当前点击的position，设置ViewPager的当前item
viewPager_main.setCurrentItem((Integer) v.getTag());
}
});
}
arr_titles[0].setEnabled(arr_titles[0].setBackgroundColor(Color.}viewPager_main = (ViewPager) findViewById(R.id.list = LayoutInflater inflater = LayoutInflater.View view1 = inflater.inflate(R.layout.View view2 = inflater.inflate(R.layout.View view3 = inflater.inflate(R.layout.list.add(view1);list.add(view2);list.add(view3);viewPager_main.setAdapter(list));viewPager_main.setOnPageChangeListener(@Override// 当页面切换改变时，让所有的“点”都变成可操作。arr_titles.length; j++) {arr_titles[j].setEnabled(arr_titles[j].setBackgroundColor(Color.}// 让当前点击的“点”变成不可以操作。arr_titles[position].setEnabled(arr_titles[position].setBackgroundColor(Color.}@Override}@Override}});}list = list = list;}@Overridelist.size();}@Override}@Overridecontainer.addView(list.get(position));list.get(position);}@Overridecontainer.removeView(list.get(position));}}}五、Fragment + ActionBar实现Tab效果：
（一）、Fragment + ActionBar实现选项卡的步骤：
1、当前窗体Activity类要继承于FragmentActivity，而不是Activity；
导航模式为Tab导航模式；
- actionBar.
- 通过ActionBar对象的通过Tab对象的通过Tab对象的5、自定义ActionBar.TabListener的监听器；
6、为ActionBar对象添加Tab对象。通过addTab()方法实现添加选项卡。
7、现场保护和恢复现场。
（二）、示例代码：
"动态")
"群组")
"好友")
"会话")
"tabIndex", tab.getPosition() + 1);
}六、Fragment + ViewPager实现Tab效果：
（一）、Fragment + ViewPager实现选项卡的步骤：
- 必须有2、当前窗体Activity类要继承于3、初始化自定义选项卡导航条，并为选项卡设置单击监听事件OnClickListener；
- 创建ViewPager对象：通过findViewById()方法来实现即可；
- 定义ViewPager中的数据源FragmentPagerAdapter，而不是PagerAdapter；
- 为ViewPager对象设置适配器；
- 给ViewPager设置监听器（
【备注：】为什么要使用因为PagerAdapter的重写方法中：
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
container.addView(list.get(position))和container.removeView(list.get(position))的参数都是一个View对象，而不能是Fragment对象。因为涉及到ViewPager的数据源是Fragment的情况，一定要使用FragmentPagerAdapter适配器。
因为继承于FragmentPagerAdapter来自定义适配器，自定义适配器构造方法中的第一个参数FragmentManager只能在窗体中通过getSupportFragmentManager()来获取，这就要求当前窗体必须继承于
【补充：】View、Fragment和Activity的类目录结构：
【补充：】View、Fragment和Activity的类目录结构：
java.lang.Object
↳ android.view.View
java.lang.Object
↳ android.app.Fragment
java.lang.Object
↳ android.support.v4.app.Fragment
java.lang.Object
↳ android.content.Context
↳ android.content.ContextWrapper
↳ android.view.ContextThemeWrapper
↳ android.app.Activity
java.lang.Object
↳ android.content.Context
↳ android.content.ContextWrapper
↳ android.view.ContextThemeWrapper
↳ android.app.Activity
↳ android.support.v4.app.FragmentActivity
（二）、示例代码：
1、布局文件示例代码：
<?xml?>
<LinearLayoutxmlns:android
>
<LinearLayout
android:background
>
<LinearLayout
>
<ImageView
android:id=
android:src/>
<TextView
android:id=
android:text=
/>
<ImageView
android:id=
android:src/>
</LinearLayout>
<LinearLayout
android:id
>
<TextView
android:id
android:gravity=
android:text=
android:textColor=
android:textSize=/>
<TextView
android:id
android:gravity=
android:text=
android:textColor=
android:textSize=/>
<TextView
android:id
android:gravity=
android:text=
android:textColor=
android:textSize=/>
<TextView
android:id
android:gravity=
android:text=
android:textColor=
android:textSize=/>
</LinearLayout>
<LinearLayout
android:id
>
<TextView
android:layout_weight/><TextViewandroid:layout_weight/><TextViewandroid:layout_weight/><TextViewandroid:layout_weight/></LinearLayout></LinearLayout><android.support.v4.view.ViewPagerandroid:id/></LinearLayout>2、Fragment文件中核心代码：同上
3、MainActivity中的核心代码：
fragmentsList;
arr_titles;
arr_lines;
@Override
setContentView(R.layout.
initIndicateLine();
initTabView();
initViewPager();
}
LinearLayout layout = (LinearLayout) findViewById(R.id.arr_titles = arr_titles.length; i++) {
TextView textView = (TextView) layout.getChildAt(i);
arr_titles[i] = textView;
arr_titles[i].setEnabled(arr_titles[i].setTag(i);
arr_titles[i].setOnClickListener(
@Override
viewPager_main.setCurrentItem((Integer) v.getTag());
}
});
arr_titles[0].setEnabled(}
}
viewPager_main = (ViewPager) findViewById(R.id.fragmentsList =
Fragment fragment1 = Bundle bundle1 = bundle1.putInt("tabIndex", 1);
fragment1.setArguments(bundle1);
Fragment fragment2 = Bundle bundle2 = bundle2.putInt("tabIndex", 2);
fragment2.setArguments(bundle2);
Fragment fragment3 = Bundle bundle3 = bundle3.putInt("tabIndex", 3);
fragment3.setArguments(bundle3);
Fragment fragment4 = Bundle bundle4 = bundle4.putInt("tabIndex", 4);
fragment4.setArguments(bundle4);
fragmentsList.add(fragment1);
fragmentsList.add(fragment2);
fragmentsList.add(fragment3);
fragmentsList.add(fragment4);
viewPager_main.setAdapter(
fragmentsListviewPager_main.setOnPageChangeListener(
@Override
}
@Override
}
@Override
arr_titles.length; i++) {
arr_titles[i].setEnabled(arr_lines[i].setBackgroundColor(Color.}
arr_titles[position].setEnabled(arr_lines[position].setBackgroundColor(Color.}});viewPager_main.setCurrentItem(0);}LinearLayout layout = (LinearLayout) findViewById(R.id.arr_lines = arr_lines.length; i++) {TextView view = (TextView) layout.getChildAt(i);arr_lines[i] = view;arr_lines[i].setTag(i);arr_lines[i].setBackgroundColor(Color.}arr_lines[0].setBackgroundColor(Color.}fragmentsList = }fragmentsList = fragmentsList;}@OverridefragmentsList.get(arg0);}@Override}}@OverridegetMenuInflater().inflate(R.menu.}}七、Fragment + ActionBar + ViewPager 实现Tab书签导航效果：
（一）、实现步骤：
- 窗体继承自定义Fragment；
- 初始化setTabListener ， 自定义TabListener；
- 初始化LIst<Fragment> ，设置适配器设置ViewPager监听器setOnPageChangeListener。
（二）、核心代码：
ActionBar.TabListener {
/**
* The {@link android.support.v4.view.PagerAdapter} that will provide
* fragments for each of the sections. We use a
* {@link android.support.v4.app.FragmentPagerAdapter} derivative, which
* will keep every loaded fragment in memory. If this becomes too memory
* intensive, it may be best to switch to a
* {@link android.support.v4.app.FragmentStatePagerAdapter}.
*/
SectionsPagerAdapter mSectionsPagerAdapter;
/**
* The {@link ViewPager} that will host the section contents.
*/
ViewPager mViewPager;
@Override
setContentView(R.layout.
// Set up the action bar.
actionBar.setNavigationMode(ActionBar.
// Create the adapter that will return a fragment for each of the three
// primary sections of the mSectionsPagerAdapter = getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.
mViewPager
// When swiping between different sections, select the corresponding
// tab. We can also use ActionBar.Tab#select() to do this if we have
// a reference to the Tab.
mViewPager
.setOnPageChangeListener(@Override
actionBar.setSelectedNavigationItem(position);
}
});
// For each of the sections in the mSectionsPagerAdapter.getCount(); i++) {
// Create a tab with text corresponding to the page title defined by
// the adapter. Also specify this Activity object, which implements
// the TabListener interface, as the callback (listener) for when
// this tab is selected.
actionBar.addTab(actionBar.newTab()
.setText(mSectionsPagerAdapter.getPageTitle(i))
.setTabListener(
}
}
@Override
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.
}
@Override
FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in
// the ViewPager.
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
FragmentTransaction fragmentTransaction) {
}
@Override
FragmentTransaction fragmentTransaction) {
}
/**
* A {@link FragmentPagerAdapter} that returns a fragment corresponding to
* one of the sections/tabs/pages.
*/
}
@Override
// getItem is called to instantiate the fragment for the given page.
// Return a DummySectionFragment (defined as a static inner class
// below) with the page number as its lone argument.
Fragment fragment =
Bundle args =
args.putInt(DummySectionFragment.
fragment.setArguments(args);
}
@Override
// Show 3 total pages.
}
@Override
Locale l = Locale.
}
}
}
/**
* A dummy fragment representing a section of the * displays dummy text.
*/
/**
* The fragment argument representing the section number for this
* fragment.
*/
"section_number"
}
浙公网安备 33010602011771号