Fragment、ViewPager、ActionBar实现TAB导航条效果
前言：
书签导航条（书签选项卡）有多种方法：
1、TabActivity（已经过期）
2、ViewPager 带滑动导航条（使用PagerTabStrip）
3、ViewPager 自定义固定导航条 （类似ViewPager欢迎页面 ）
4、Fragment + ViewPager 带滑动导航条 【推荐使用】
5、 Fragment + ViewPager 自定义固定导航条 【推荐使用】
6、FragmentActivity（取代 TabActivity ）
7、Fragment + ActionBar 【推荐使用】
8、 Fragment + ActionBar + ViewPager 固定导航条【推荐使用】
一、TabActivity 实现选项卡效果：
TabActivity（已经过期，使用FragmentActivity来实现相同的效果）
（一）、相关类介绍：
1、TabHost：提供选项卡（Tab页）的窗口视图容器。
2、TabSpec：每个选项卡都包含选项卡指示符、内容和用于识别选项卡的标签。
TabSpec与TabHost的关系：
TabHost相当于浏览器中浏览器分布的集合，而TabSpec则相当于浏览器中的 每一个分页面。在Android中，每一个TabSpec可以是一个组件，也可以是一个布局，TabHost将每一个分页集中在一起，随着选项卡的切换来分别显示相应的界面。
（二）、TabActivity实现选项卡效果的步骤：【了解】
1、写选型卡页面特殊的布局文件：
- 根节点必须是TabHost，属性android:id="@android:id/tabhost" 是固定值；
- 必须有子节点TabWidget，必须有属性android:id="@android:id/tabs"；
- 必须有一个FrameLayout布局节点，属性必须是android:id="@android:id/tabcontent"。
2、继承TabActivity：（以前学习的过程中都是继承android.app.Activity类，但是这里需要继承android.app.TabActivity）
3、创建TabHost对象：通过getTabHost()方法来实现。
4、分别创建TabSpec对象：
- 通过TabHost对象的newTabSpec()方法创建TabSpec对象；
- 通过setIndicator()设置标签和图标；
- 通过setContent()设置内容。
5、TabHost对象添加TabSpec对象。通过TabHost对象的addTab()方法实现添加选项卡。
（三）、示例代码：
1、布局文件的代码：
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
2、MainActivity中核心代码：
public class MainActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Resources res = getResources();
TabHost tabHost = getTabHost();
TabSpec tabSpec1 = tabHost.newTabSpec("records")
.setIndicator("记录", res.getDrawable(R.drawable.ic_launcher))
.setContent(new Intent(this, NextActivity.class));
tabHost.addTab(tabSpec1);
TabSpec tabSpec2 = tabHost.newTabSpec("records")
.setIndicator("联系人", res.getDrawable(R.drawable.contacts))
.setContent(new Intent(this, NextActivity.class));
tabHost.addTab(tabSpec2);
TabSpec tabSpec3 = tabHost.newTabSpec("collections")
.setIndicator("收藏夹", res.getDrawable(R.drawable.collections))
.setContent(new Intent(this, NextActivity.class));
tabHost.addTab(tabSpec3);
}
}
二、FragmentActivity中实现选项卡效果：
（一）、与TabActivity中实现选项卡的不同之处：
1、TabHost对象的创建方式不同；
2、TabSpec对象的创建方式不同；
3、布局文件不同。
（二）、FragmentActivity 实现选项卡效果的步骤：【掌握】
1、写选型卡页面特殊的布局文件：
- 根节点必须是<android.support.v4.app.FragmentTabHost>；
- 必须有一个布局节点，用来放置选项卡内容。
2、继承FragmentActivity：（以前学习的过程中都是继承android.app.Activity类，但是这里需要继承android.support.v4.app.FragmentActivity）
3、创建TabHost对象：通过(FragmentTabHost) findViewById(R.id.tabhost)方法来实现。
4、TabHost执行setup()方法：
【备注：】如果使用 findViewById() 加载 TabHost，那么在新增一个选项卡之前， 需要调用 setup()方法。而在 TabActivity 中调用了 getTabHost() 方法后，你就不再需要调用setup()了。
例如：tabHost.setup(this, getSupportFragmentManager(), R.id.layout_container_tabcontent);
5、分别创建TabSpec对象：
- 通过TabHost对象的newTabSpec()方法创建TabSpec对象；
- 通过setIndicator()设置标签和图标；
6、TabHost对象添加TabSpec对象。通过TabHost对象的addTab()方法实现添加选项卡。
- 调用TabHost对象的有三个参数的addTab()方法。第一个参数是TabSpec对象，第二个参数是Fragment类的class文件，第三个参数的往Fragment对象中传递的Bundle数据。
（三）、示例代码：
1、布局文件的代码：
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabWidget
android:id="@+id/tabwidget_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@+id/layout_container_tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.app.FragmentTabHost>
2、MainActivity中核心代码：
public class MainActivity extends FragmentActivity {
private FragmentTabHost tabHost;
private Bundle bundle1, bundle2, bundle3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabHost = (FragmentTabHost) findViewById(R.id.tabhost);
tabHost.setup(this, getSupportFragmentManager(),
R.id.layout_container_tabcontent);
bundle1 = new Bundle();
bundle1.putInt("tabIndex", 1);
bundle2 = new Bundle();
bundle2.putInt("tabIndex", 2);
bundle3 = new Bundle();
bundle3.putInt("tabIndex", 3);
Resources res = getResources();
tabHost.addTab(
tabHost.newTabSpec("records").setIndicator("记录",
res.getDrawable(R.drawable.records)),
ContentFragment.class, bundle1);
tabHost.addTab(
tabHost.newTabSpec("contacts").setIndicator("联系人",
res.getDrawable(R.drawable.contacts)),
ContentFragment.class, bundle2);
tabHost.addTab(
tabHost.newTabSpec("collection").setIndicator("收藏夹",
res.getDrawable(R.drawable.collections)),
ContentFragment.class, bundle3);
}
}
3、ContentFragment类中的核心代码：
public class ContentFragment extends Fragment {
private TextView text_fragment_info;
private ListView listView_fragment;
private int tabIndex = 0;
private String defaultData = "未知";
private List<String> list1, list2, list3;
private ArrayAdapter<String> adapter = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle bundle = getArguments();
if (bundle != null) {
tabIndex = bundle.getInt("tabIndex");
defaultData = "您访问的是第" + tabIndex + "个栏目";
switch (tabIndex) {
case 1:
list1 = new ArrayList<String>();
for (int i = 0; i < 10; i++) {
list1.add("记录：" + i);
}
break;
case 2:
list2 = new ArrayList<String>();
for (int i = 0; i < 10; i++) {
list2.add("联系人：" + i);
}
break;
case 3:
list3 = new ArrayList<String>();
for (int i = 0; i < 10; i++) {
list3.add("收藏夹：" + i);
}
break;
default:
break;
}
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_content, container, false);
text_fragment_info = (TextView) view
.findViewById(R.id.text_fragment_info);
listView_fragment = (ListView) view
.findViewById(R.id.listView_fragment);
switch (tabIndex) {
case 1:
adapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1, list1);
break;
case 2:
adapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1, list2);
break;
case 3:
adapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1, list3);
break;
default:
break;
}
text_fragment_info.setText(defaultData);
listView_fragment.setAdapter(adapter);
return view;
}
}
三、ViewPager实现Tab效果：（ViewPager默认滑动导航条效果）【掌握】
（一）、ViewPager Tab效果说明：
- 导航条利用<android.support.v4.view.PagerTabStrip>标签生成；
- 导航条会随着ViewPager内容物的滑动而发生左右侧滑。
（二）、ViewPager 实现带滑动导航条选项卡的步骤：
1、特殊的布局文件；
- 必须有<android.support.v4.view.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对象设置适配器。
（三）、示例代码：
1、布局文件的代码：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagerTabStrip_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:layout_gravity="top" >
</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)。
2、MainActivity核心代码：
public class MainActivity extends Activity {
private List<View> list_views;
private List<String> list_titles;
private ViewPager viewPager_main;
private PagerTabStrip pagerTabStrip_main;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager_main = (ViewPager) findViewById(R.id.viewpager_main);
pagerTabStrip_main = (PagerTabStrip) findViewById(R.id.pagerTabStrip_main);
pagerTabStrip_main.setTextColor(Color.WHITE);
pagerTabStrip_main.setBackgroundColor(Color.BLACK);
pagerTabStrip_main.setDrawFullUnderline(true);
pagerTabStrip_main.setTabIndicatorColor(Color.CYAN);
pagerTabStrip_main.setTextSpacing(50);
list_views = new ArrayList<View>();
list_titles = new ArrayList<String>();
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.view1_viewpager, null);
View view2 = inflater.inflate(R.layout.view2_viewpager, null);
View view3 = inflater.inflate(R.layout.view3_viewpager, null);
View view4 = inflater.inflate(R.layout.view4_viewpager, null);
list_views.add(view1);
list_views.add(view2);
list_views.add(view3);
list_views.add(view4);
list_titles.add("View1");
list_titles.add("View2");
list_titles.add("View3");
list_titles.add("View4");
viewPager_main.setAdapter(new MyAdapter(list_views, list_titles));
}
class MyAdapter extends PagerAdapter {
private List<View> list = null;
private List<String> list_titles = null;
public MyAdapter(List<View> list, List<String> list_titles) {
this.list = list;
this.list_titles = list_titles;
}
@Override
public int getCount() {
if (list != null) {
return list.size();
}
return 0;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
@Override
public CharSequence getPageTitle(int position) {
return list_titles.get(position);
}
}
}
四、ViewPager Tab效果二：（ViewPager自定义导航条效果）
（一）、效果说明：
- 自定义导航条；
- 导航条固定位置，不发生左右侧滑。
（二）、ViewPager 实现自定义导航条选项卡的步骤：
1、特殊的布局文件；
- 必须有<android.support.v4.view.ViewPager>节点；
- 在ViewPager节点上方可自定义布局，布局内可放置TextView及ImageView等控件来自定义导航条效果。
2、初始化自定义选项卡导航条，并为选项卡设置单击监听事件OnClickListener；
3、初始化ViewPager;
- 创建ViewPager对象：通过findViewById()方法来实现即可；
- 定义ViewPager中的数据源List<View>;
- 自定义PagerAdapter适配器；
- 为ViewPager对象设置适配器；
- 给ViewPager设置监听器（OnPageChangeListener）。
（三）、示例代码：
1、布局文件的代码：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/layout_main_tabtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"
android:background="#999"
android:text="Tab1" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"
android:background="#999"
android:layout_marginLeft="1dp"
android:text="Tab2" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"
android:background="#999"
android:layout_marginLeft="1dp"
android:text="Tab3" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#00f"
android:text="" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
2、MainActivity核心代码：
public class MainActivity extends Activity {
private ViewPager viewPager_main;
private List<View> list = null;
private TextView[] arr_titles = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initTabView();
initViewPager();
}
private void initTabView() {
LinearLayout layout = (LinearLayout) findViewById(R.id.layout_main_tabtitle);
arr_titles = new TextView[3];
for (int i = 0; i < 3; i++) {
TextView textView = (TextView) layout.getChildAt(i);
arr_titles[i] = textView;
arr_titles[i].setEnabled(true);
arr_titles[i].setBackgroundColor(Color.GRAY);
arr_titles[i].setTag(i);
arr_titles[i].setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 根据当前点击的position，设置ViewPager的当前item
viewPager_main.setCurrentItem((Integer) v.getTag());
}
});
}
arr_titles[0].setEnabled(false);
arr_titles[0].setBackgroundColor(Color.BLUE);
}
private void initViewPager() {
viewPager_main = (ViewPager) findViewById(R.id.viewPager_main);
list = new ArrayList<View>();
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.view1_viewpager, null);
View view2 = inflater.inflate(R.layout.view2_viewpager, null);
View view3 = inflater.inflate(R.layout.view3_viewpager, null);
list.add(view1);
list.add(view2);
list.add(view3);
viewPager_main.setAdapter(new MyAdapter(list));
viewPager_main.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// 当页面切换改变时，让所有的“点”都变成可操作。
for (int j = 0; j < arr_titles.length; j++) {
arr_titles[j].setEnabled(true);
arr_titles[j].setBackgroundColor(Color.GRAY);
}
// 让当前点击的“点”变成不可以操作。
arr_titles[position].setEnabled(false);
arr_titles[position].setBackgroundColor(Color.BLUE);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
class MyAdapter extends PagerAdapter {
private List<View> list = null;
public MyAdapter(List<View> list) {
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
}
}
五、Fragment + ActionBar实现Tab效果：
（一）、Fragment + ActionBar实现选项卡的步骤：
1、获取ActionBar对象：通过当前上下文对象的getActionBar()方法来实现；
3、设置ActionBar对象的导航模式为Tab导航模式；
- actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
4、分别创建Tab对象：
- 通过ActionBar对象的newTab()方法创建Tab对象；
- 通过Tab对象的setText()设置选项卡文字；
- 通过Tab对象的setTabListener()设置选项卡监听事件。
5、自定义ActionBar.TabListener的监听器；
6、为ActionBar对象添加Tab对象。通过ActionBar对象的addTab()方法实现添加选项卡。
7、现场保护和恢复现场。
（二）、示例代码：
1、MainActivity的核心代码:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initTabView();
}
private void initTabView() {
ActionBar actionBar = getActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.addTab(actionBar.newTab().setText("动态")
.setTabListener(new MyTabListener()));
actionBar.addTab(actionBar.newTab().setText("群组")
.setTabListener(new MyTabListener()));
actionBar.addTab(actionBar.newTab().setText("好友")
.setTabListener(new MyTabListener()));
actionBar.addTab(actionBar.newTab().setText("会话")
.setTabListener(new MyTabListener()));
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
break;
case R.id.action_quip:
finish();
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
class MyTabListener implements ActionBar.TabListener {
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
Fragment fragment = new ContentFragment();
Bundle bundle = new Bundle();
bundle.putInt("tabIndex", tab.getPosition() + 1);
fragment.setArguments(bundle);
FragmentTransaction transaction = getFragmentManager()
.beginTransaction();
transaction.replace(R.id.layout_fragment_container, fragment);
transaction.addToBackStack(null);
transaction.commit();
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
}
}
六、Fragment + ViewPager实现Tab效果：
（一）、Fragment + ViewPager实现选项卡的步骤：
1、特殊的布局文件；
- 必须有<android.support.v4.view.ViewPager>节点；<android.support.v4.view.PagerTabStrip>
- 在ViewPager节点上方可自定义布局，布局内可放置TextView及ImageView等控件来自定义导航条效果。
2、当前窗体Activity类要继承于FragmentActivity，而不是Activity；
3、初始化自定义选项卡导航条，并为选项卡设置单击监听事件OnClickListener；
4、初始化ViewPager;
- 创建ViewPager对象：通过findViewById()方法来实现即可；
- 定义ViewPager中的数据源List<Fragment>;
- 自定义适配器，要继承于FragmentPagerAdapter，而不是PagerAdapter；
- 为ViewPager对象设置适配器；
- 给ViewPager设置监听器（OnPageChangeListener）。
【备注：】为什么要使用FragmentPagerAdapter适配器呢？
因为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()来获取，这就要求当前窗体必须继承于FragmentActivity类。
【补充：】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 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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="98dp"
android:background="@drawable/top_theme_blue"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:src="@drawable/headimg" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:text="Android开发团队"
/>
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingLeft="10dp"
android:src="@drawable/status_online" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout_main_tabtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="10dp" >
<TextView
android:id="@+id/text_tab_activity"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="动态"
android:textColor="#fff"
android:textSize="18sp" />
<TextView
android:id="@+id/text_tab_groups"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="群组"
android:textColor="#ddd"
android:textSize="18sp" />
<TextView
android:id="@+id/text_tab_friends"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="好友"
android:textColor="#ddd"
android:textSize="18sp" />
<TextView
android:id="@+id/text_tab_chat"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="会话"
android:textColor="#ddd"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout_indicateline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingBottom="2dp" >
<TextView
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_weight="1"/>
<TextView
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_weight="1"/>
<TextView
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_weight="1"/>
<TextView
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#fff" />
</LinearLayout>
2、Fragment文件中核心代码：同上
3、MainActivity中的核心代码：
public class MainActivity extends FragmentActivity {
private ViewPager viewPager_main;
private List<Fragment> fragmentsList;
private TextView[] arr_titles;
private TextView[] arr_lines;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initIndicateLine();
initTabView();
initViewPager();
}
private void initTabView() {
LinearLayout layout = (LinearLayout) findViewById(R.id.layout_main_tabtitle);
arr_titles = new TextView[4];
for (int i = 0; i < arr_titles.length; i++) {
TextView textView = (TextView) layout.getChildAt(i);
arr_titles[i] = textView;
arr_titles[i].setEnabled(true);
arr_titles[i].setTag(i);
arr_titles[i].setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
viewPager_main.setCurrentItem((Integer) v.getTag());
}
});
arr_titles[0].setEnabled(false);
}
}
private void initViewPager() {
viewPager_main = (ViewPager) findViewById(R.id.viewPager_main);
fragmentsList = new ArrayList<Fragment>();
Fragment fragment1 = new ContentFragment();
Bundle bundle1 = new Bundle();
bundle1.putInt("tabIndex", 1);
fragment1.setArguments(bundle1);
Fragment fragment2 = new ContentFragment();
Bundle bundle2 = new Bundle();
bundle2.putInt("tabIndex", 2);
fragment2.setArguments(bundle2);
Fragment fragment3 = new ContentFragment();
Bundle bundle3 = new Bundle();
bundle3.putInt("tabIndex", 3);
fragment3.setArguments(bundle3);
Fragment fragment4 = new ContentFragment();
Bundle bundle4 = new Bundle();
bundle4.putInt("tabIndex", 4);
fragment4.setArguments(bundle4);
fragmentsList.add(fragment1);
fragmentsList.add(fragment2);
fragmentsList.add(fragment3);
fragmentsList.add(fragment4);
viewPager_main.setAdapter(new MyAdapter(getSupportFragmentManager(),
fragmentsList));
viewPager_main.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageScrollStateChanged(int position) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int position) {
for (int i = 0; i < arr_titles.length; i++) {
arr_titles[i].setEnabled(true);
arr_lines[i].setBackgroundColor(Color.TRANSPARENT);
}
arr_titles[position].setEnabled(false);
arr_lines[position].setBackgroundColor(Color.WHITE);
}
});
viewPager_main.setCurrentItem(0);
}
private void initIndicateLine() {
LinearLayout layout = (LinearLayout) findViewById(R.id.layout_indicateline);
arr_lines = new TextView[4];
for (int i = 0; i < arr_lines.length; i++) {
TextView view = (TextView) layout.getChildAt(i);
arr_lines[i] = view;
arr_lines[i].setTag(i);
arr_lines[i].setBackgroundColor(Color.TRANSPARENT);
}
arr_lines[0].setBackgroundColor(Color.WHITE);
}
class MyAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentsList = null;
public MyAdapter(FragmentManager fm) {
super(fm);
}
public MyAdapter(FragmentManager fm, List<Fragment> fragmentsList) {
super(fm);
this.fragmentsList = fragmentsList;
}
@Override
public Fragment getItem(int arg0) {
return fragmentsList.get(arg0);
}
@Override
public int getCount() {
return fragmentsList.size();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
七、Fragment + ActionBar + ViewPager 实现Tab书签导航效果：
（一）、实现步骤：
- 窗体继承FragmentActivity ，自定义Fragment；
- 初始化ActionBar，设置ActionBar导航模式，for循环设置AcitonBar的监听器setTabListener
- 初始化ViewPager，for循环生成适配器的数据源LIst<Fragment> ，设置适配器FragmentPagerAdapter，自定义适配器；设置ViewPager监听器setOnPageChangeListener。
（二）、核心代码：
public class MainActivity extends FragmentActivity implements
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
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set up the action bar.
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create the adapter that will return a fragment for each of the three
// primary sections of the app.
mSectionsPagerAdapter = new SectionsPagerAdapter(
getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
// 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(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
// For each of the sections in the app, add a tab to the action bar.
for (int i = 0; i < 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(this));
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onTabSelected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in
// the ViewPager.
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
}
@Override
public void onTabReselected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
}
/**
* A {@link FragmentPagerAdapter} that returns a fragment corresponding to
* one of the sections/tabs/pages.
*/
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
// 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 = new DummySectionFragment();
Bundle args = new Bundle();
args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
fragment.setArguments(args);
return fragment;
}
@Override
public int getCount() {
// Show 3 total pages.
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return getString(R.string.title_section1).toUpperCase(l);
case 1:
return getString(R.string.title_section2).toUpperCase(l);
case 2:
return getString(R.string.title_section3).toUpperCase(l);
}
return null;
}
}
/**
* A dummy fragment representing a section of the app, but that simply
* displays dummy text.
*/
public static class DummySectionFragment extends Fragment {
/**
* The fragment argument representing the section number for this
* fragment.
*/
public static final String ARG_SECTION_NUMBER = "section_number";
public DummySectionFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main_dummy,
container, false);
TextView dummyTextView = (TextView) rootView
.findViewById(R.id.section_label);
dummyTextView.setText(Integer.toString(getArguments().getInt(
ARG_SECTION_NUMBER)));
return rootView;
}
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
