在ViewPager中我们经常会看到在每个显示的页面上有标题显示,那么我们如何来通过代码来添加呢?Google在给我们提供的v4包中提供了两个控件PagerTabStrip与PagerTitleStrip,通过这两个控件可以在ViewPager中添加标题。
PagerTabStrip与PagerTitleStrip的异同
PagerTabStrip与PagerTitleStrip的使用基本相同,唯一不同的是:
1、PagerTabStrip在当前页面下,会有一个下划线条来提示当前页面的Tab是哪个。
2、PagerTabStrip的Tab是可以点击的,当用户点击某一个Tab时,当前页面就会跳转到这个页面,而PagerTitleStrip则没这个功能。此处引用于大神 @harvic880925 的博客—博文连接
PagerTabStrip的使用
PagerTabStrip的使用有两点:
1. 在ViewPager布局中添加PagerTabStrip控件,设置layout_gravity属性,确定title的显示位置,一般我们都会定义在bottom或者top。
2. 在自定义的PagerAdapter中重写getPageTitle(int position)方法。
ViewPager就这两个步骤,下面我们来看具体的代码实现:
总体布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lishuang.administrator.viewpager0901.TitleActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagertabtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top">
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</RelativeLayout>
自定义MyPagerAdapterTitle继承PagerAdapter:
public class MyPagerAdapterTitle extends PagerAdapter {
private List<View> mViews;
private List<String> mTitles;//定义title集合
public MyPagerAdapterTitle(List<View> mViews, List<String> mTitles) {
this.mViews = mViews;
this.mTitles = mTitles;//通过构造器将title数据传入。
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//增加View
container.addView(mViews.get(position));
return mViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//删除View
container.removeView(mViews.get(position));
}
//重写该方法
@Override
public CharSequence getPageTitle(int position) {
//设置title
return mTitles.get(position);
}
}
Activity中实现:
(view1 ,view2 ,view3三个布局文件item_frist, item_second, item_third不再列出,每个布局只包含一个ImageView。)
public class TitleActivity extends Activity {
private ViewPager mViewPagerTitle;
private MyPagerAdapterTitle myPagerAdapterTitle;
private LayoutInflater mInflater;
private List<View> mViews;//初始化数据
private List<String> mTitles;//初始化标题数据
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_title);
mInflater = getLayoutInflater();
mViewPagerTitle = (ViewPager) findViewById(R.id.viewpager_title);
//初始化布局页面
mViews = new ArrayList<View>();
View view1 = mInflater.inflate(R.layout.item_frist, null);
View view2 = mInflater.inflate(R.layout.item_second, null);
View view3 = mInflater.inflate(R.layout.item_third, null);
mViews.add(view1);
mViews.add(view2);
mViews.add(view3);
//初始化标题数据
mTitles = new ArrayList<String>();
String title1 = new String("PagerOne");
String title2 = new String("PagerTwo");
String title3 = new String("PagerThree");
mTitles.add(title1);
mTitles.add(title2);
mTitles.add(title3);
myPagerAdapterTitle = new MyPagerAdapterTitle(mViews, mTitles);
mViewPagerTitle.setAdapter(myPagerAdapterTitle);
}
}
效果展示:
PagerTitleStrip的使用
PagerTabStrip的使用的使用与PagerTabStrip的使用完全相同。只需要将总体布局中的PagerTabStrip改为PagerTabStrip即可。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lishuang.administrator.viewpager0901.TitleActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<android.support.v4.view.PagerTitleStrip
android:id="@+id/pagertabtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top">
</android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>
</RelativeLayout>
效果展示: