Android实战简易教程-第十八枪（ViewPager组件详解）
对于ViewPager组件我们知道：
1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。
3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。
下面我们通过实例看一下ViewPager的使用。
一 实现ViewPager（数据源为List<View>）
1.先在main.xml文件中添加一个ViewPager:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>2.创建三个View:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25dp"
android:text="第一页" >
</TextView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二页" >
</TextView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第三页" >
</TextView>
</LinearLayout>
3.创建一个ViewPager适配器类：
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class ViewPagerAdapter extends PagerAdapter {
private List<View> lViews=new ArrayList<View>();
public ViewPagerAdapter(List<View> lViews){
this.lViews=lViews;
}
@Override
public int getCount() {
return lViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(lViews.get(position));
return lViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lViews.get(position));
}
}
4.MainActivity.java:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
listViews=new ArrayList<View>();
/**
* 为Adapter创建数据源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews) ;
viewPager.setAdapter(pagerAdapter);
}
}
5.运行实例：
可以实现翻页效果。
二 添加标题
1.我们需要更改main.xml文件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<android.support.v4.view.PagerTabStrip
android:id="@+id/strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" >
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>
2.需要更改适配器文件：
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class ViewPagerAdapter extends PagerAdapter {
private List<View> lViews=new ArrayList<View>();
private List<String> titleList=new ArrayList<String>();
public ViewPagerAdapter(List<View> lViews,List<String> titleList){
this.lViews=lViews;
this.titleList=titleList;
}
@Override
public int getCount() {
return lViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(lViews.get(position));
return lViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lViews.get(position));
}
/**
* 标题
*/
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
}
3.需要更改MainActivity.java文件：
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
/**
* 为Adapter创建数据源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
viewPager.setAdapter(pagerAdapter);
}
}
4.运行实例如下：
三 实现ViewPager(数据源为List<Fragment>)
1.首先我们要创建三个Fragment:
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view1, container, false);
}
}
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view2, container, false);
}
}
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment3 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view3, container, false);
}
}
2.设置Adapter:
package com.yayun.viewpagerdemo;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
List<Fragment> fragmentsList;
List<String> titleList;
public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
super(fm);
this.fragmentsList=fragmentsList;
this.titleList=titleList;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragmentsList.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return fragmentsList.size();
}
@Override
/**
* 添加标题
*/
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
}
3.MainActivity.java:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
private List<Fragment> fragmentsList;
MyFragmentPagerAdapter myFragmentPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
/**
* 设置PagerTabStrip属性
*/
pagerTabStrip.setBackgroundColor(Color.GREEN);
pagerTabStrip.setDrawFullUnderline(false);
pagerTabStrip.setTextColor(Color.WHITE);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
fragmentsList=new ArrayList<Fragment>();
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
fragmentsList.add(new Fragment3());
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
/**
* 为Adapter创建数据源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
//viewPager.setAdapter(pagerAdapter);
viewPager.setAdapter(myFragmentPagerAdapter);
}
}
4.运行实例：
这种方法不会销毁不在当前页面的页面，不能实现页卡的创建和销毁。
四 实现ViewPager(数据源为List<Fragment>实现FargmentStatePagerAdapter)常用
改变Adapter:package com.yayun.viewpagerdemo;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.View;
public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {
List<Fragment> fragmentsList;
List<String> titleList;
public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
super(fm);
this.fragmentsList=fragmentsList;
this.titleList=titleList;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragmentsList.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return fragmentsList.size();
}
@Override
/**
* 添加标题
*/
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
@Override
public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub
return super.instantiateItem(container, position);
}
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
super.destroyItem(container, position, object);
}
}
将MainActivity.java中的Adapter换一下即可，它可以实现页卡的创建和销毁。
五 onPagerChangeListener 监听使用
只需要修改MainActivity.java:package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity implements OnPageChangeListener {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
private List<Fragment> fragmentsList;
MyFragmentPagerAdapter myFragmentPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
/**
* 设置PagerTabStrip属性
*/
pagerTabStrip.setBackgroundColor(Color.GREEN);
pagerTabStrip.setDrawFullUnderline(false);
pagerTabStrip.setTextColor(Color.WHITE);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
fragmentsList=new ArrayList<Fragment>();
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
fragmentsList.add(new Fragment3());
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
/**
* 为Adapter创建数据源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
//viewPager.setAdapter(pagerAdapter);
viewPager.setAdapter(myFragmentPagerAdapter);
viewPager.setOnPageChangeListener(this);//加载监听器
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int arg0) {
Toast.makeText(this, "当前页面为"+(arg0+1), Toast.LENGTH_SHORT).show();
}
}
运行实例即可以显示当前页面标签。
总结
1.android.support.v4.view.ViewPager全名；
2.android.support.v4.view.PagerTabStrip作为标题名称
喜欢的朋友可以关注，谢谢