一、布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTabStrip
android:id="@+id/pager_tab_strip"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#365fa9"
android:gravity="center"/>
</android.support.v4.view.ViewPager>
</LinearLayout>
PagerTabStrip 和 PagerTitleStrip 是 ViewPager 的子控件，都是用来实现标题栏的，基本区别不大：
- PagerTabStrip 在当前页面下，会有一个下划线条来提示当前页面的 Tab 是哪个。
- PagerTabStrip 的 Tab 是可以点击的，当用户点击某一个 Tab 时，当前页面就会跳转到这个页面，而** PagerTitleStrip** 则没这个功能。
另外每一页准备一个各自的布局文件。如：
view_1.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#45ffef">
</LinearLayout>
view_2.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff231f">
</LinearLayout>
view_3.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#354757">
</LinearLayout>
二、代码
public class ViewPagerTest extends AppCompatActivity {
private ViewPager viewPager;
private PagerTabStrip pagerTabStrip;
private ArrayList<View> viewList=new ArrayList<>();
private ArrayList<String> titleList=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_pager);
viewPager=(ViewPager)findViewById(R.id.view_pager);
pagerTabStrip=(PagerTabStrip)findViewById(R.id.pager_tab_strip);
// 设置tab背景色
pagerTabStrip.setBackgroundColor(Color.BLUE);
// 设置下划线颜色
pagerTabStrip.setTabIndicatorColor(Color.WHITE);
pagerTabStrip.setTextColor(Color.WHITE);
View view1= LayoutInflater.from(this).inflate(R.layout.view_1,null);
View view2= LayoutInflater.from(this).inflate(R.layout.view_2,null);
View view3= LayoutInflater.from(this).inflate(R.layout.view_3,null);
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
titleList.add("页面1");
titleList.add("页面2");
titleList.add("页面3");
viewPager.setAdapter(new PagerAdapter() {
@Override
//每次滑动的时候生成的组件
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
//viewpager中的组件数量
public int getCount() {
return viewList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
@Override
//滑动切换的时候销毁当前的组件
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
});
}
}
1. 准备两个 ArrayList 存放所有页面 view 和各自的标题
private ArrayList<View> viewList=new ArrayList<>();
private ArrayList<String> titleList=new ArrayList<>();
2. 创建每个页面的实例，并通过 LayoutInflater 的 inflate() 方法为其加载布局
View view1= LayoutInflater.from(this).inflate(R.layout.view_1,null);
View view2= LayoutInflater.from(this).inflate(R.layout.view_2,null);
View view3= LayoutInflater.from(this).inflate(R.layout.view_3,null);
3. 把 view 和标题加入到 ArrayList 里
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
titleList.add("页面1");
titleList.add("页面2");
titleList.add("页面3");
4. 为 ViewPager 对象设置适配器 PagerAdapter，并复写一系列方法
viewPager.setAdapter(new PagerAdapter() {
@Override
//每次滑动的时候生成的组件
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
//viewpager中的组件数量
public int getCount() {
return viewList.size();
}
@Override
// 标题
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
@Override
//滑动切换的时候销毁当前的组件
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
});
在这里将 ViewPager 和上面的页面数据联系到一起。
5. 还可对 PagerTabStrip 做一些配置
pagerTabStrip=(PagerTabStrip)findViewById(R.id.pager_tab_strip);
// 设置tab背景色
pagerTabStrip.setBackgroundColor(Color.BLUE);
// 设置下划线颜色
pagerTabStrip.setTabIndicatorColor(Color.WHITE);
pagerTabStrip.setTextColor(Color.WHITE);
6. 效果。可左右滑动，也可点击标题换页
7. 缺陷
ViewPager 存在一些缺陷。
- pagerTabStrip.setDrawFullUnderline(false) 设置无效果。
- pagerTabStrip.setTextSpacing(100) 设置无效果。
所以要实现以下标题栏效果，只能想别的方法。
如使用开源 PagerSlidingTabStrip。
8. PagerSlidingTabStrip
dependencies {
compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
}
......
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/pager_tab"
android:layout_width="match_parent"
android:layout_height="50dp">
</com.astuetz.PagerSlidingTabStrip>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
......
pagerSlidingTabStrip=(PagerSlidingTabStrip)findViewById(R.id.pager_tab);
pagerSlidingTabStrip.setDividerColor(Color.WHITE);
pagerSlidingTabStrip.setIndicatorColor(Color.RED);
pagerSlidingTabStrip.setIndicatorHeight(8);
pagerSlidingTabStrip.setUnderlineHeight(4);
pagerSlidingTabStrip.setAllCaps(false);
pagerSlidingTabStrip.setViewPager(viewPager);
// 作者建议用 pagerSlidingTabStrip 代替 viewPager 设置 OnPageChangeListener()
pagerSlidingTabStrip.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Toast.makeText(MainActivity.this, "1", Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
