ViewPager是3.0之后才出现的,之前版本使用v4包
ViewPager预加载机制:最多保存3个page,超过的将需要使用destroyItem被销毁掉
效果图片
1、在layout布局文件中定义布局
<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=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="200dp" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/viewPager"
android:background="#77000000"
android:orientation="vertical"
android:padding="8dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="我是文本"
android:textColor="#ffffff"
android:textSize="14sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</RelativeLayout>
2、在Java代码中创建ViewPager对象 并添加适配器
在PagerAdapter中我们要明白什么是预加载机制
a、当滑动图片的时候,存在对滑动的View 和 将要进来的View的判断是否是同一个 true: 表示不去创建,使用缓存 false:去重新创建 view
b、ViewPager预加载机制:最多保存3个page,超过的将需要使用destroyItem被销毁掉
注意:要去掉destroyItem中调用父类中的方法,因为该方法中只存在一个异常 并建议子类重写。
还有要自己重写instantiateItem 和 destroyItem方法
</pre><pre name="code" class="html">public class MainActivity extends Activity {
private ViewPager viewPage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initView();
initData();
}
/**
* 初始化View
*/
private void initView() {
setContentView(R.layout.activity_main);
viewPage = (ViewPager) findViewById(R.id.viewPager);
}
/**
* 初始化数据
*/
private void initData() {
// 绑定Adapter
viewPage.setAdapter(new MyPagerAdapter());
}
private class MyPagerAdapter extends PagerAdapter {
/**
* 返回多少页
*/
@Override
public int getCount() {
return 0;
}
/**
* 判断当前滑动的View 和 将要进来的View是否是同一个 true: 表示不去创建,使用缓存 false:去重新创建 view:
* 当前滑动的view object:将要进入的新创建的view,由instantiateItem方法创建
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
/**
* 类似于BaseAdapger的getView方法 用了将数据设置给view 由于它最多就3个界面,不需要viewHolder
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
return super.instantiateItem(container, position);
}
/**
* 销毁page position: 当前需要消耗第几个page object:当前需要消耗的page
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// super.destroyItem(container, position, object); 要注释掉
container.removeView((View) object);
}
}
}
3、创建数据
3.1 创建一个Ad类用于封装数据
public class Ad {
private int resId;
private String intro;
public Ad(int resId, String intro) {
super();
this.resId = resId;
this.intro = intro;
}
public String getIntro() {
return intro;
}
public void setIntro(String intro) {
this.intro = intro;
}
public int getResId() {
return resId;
}
public void setResId(int resId) {
this.resId = resId;
}
}
3.2、在java中创建List 并封装数据
private ArrayList<Ad> list = new ArrayList<Ad>();
private void initData() {
list.add(new Ad(R.drawable.a, "不低俗,不能低俗"));
list.add(new Ad(R.drawable.b, "回来了,再唱经典老歌引百万人同唱啊"));
list.add(new Ad(R.drawable.c, "电影如何升级"));
list.add(new Ad(R.drawable.d, "TV版大放送"));
list.add(new Ad(R.drawable.e, "热血的反杀"));
//绑定Adapter
viewPage.setAdapter(new MyPagerAdapter());
}
4、完善PagerAdapter操作
1、确定数据的总的数量
2、将数据添加到ImageView中
3、将View添加到ViewPager中 并将View返回
private class MyPagerAdapter extends PagerAdapter{
/**
* 返回多少页
*/
@Override
public int getCount() {
return list.size();
}
/**
* 判断当前滑动的View 和 将要进来的View是否是同一个
* true: 表示不去创建,使用缓存 false:去重新创建
* view: 当前滑动的view
* object:将要进入的新创建的view,由instantiateItem方法创建
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
/**
* 类似于BaseAdapger的getView方法
* 用了将数据设置给view
* 由于它最多就3个界面,不需要viewHolder
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
//将广告布局添加进来
View view = View.inflate(MainActivity.this, R.layout.adapter_ad, null);
//获取到布局中ImageView
ImageView imageView = (ImageView) view.findViewById(R.id.img);
//获取到集合中指定的AD数据
Ad ad = list.get(position);
//将图片设置到ImageView上
imageView.setImageResource(ad.getResId());
//一定不能少,将view加入到viewPager中
container.addView(view);
return view;
}
/**
* 销毁page
* position: 当前需要消耗第几个page
* object:当前需要消耗的page
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//super.destroyItem(container, position, object); 要注释掉
container.removeView((View)object);
}
}
}
5、我们此时就可以显示图片数据了
6、将文本进行显示
1、创建TextView对象
2、使用viewPage的OnPageChangeListener监听获取到ViewPager滑动时候获取当前是第几页
/**
* ViewPager监听
*/
private void initListener() {
viewPage.setOnPageChangeListener(new OnPageChangeListener() {
@Override
/*
* 此方法是页面跳转完后得到调用,
* position是你当前选中的页面的position(位置编号)
*/
public void onPageSelected(int position) {
updateIntroAndDot();
}
@Override
/*
* 当页面在滑动的时候会调用此方法,在滑动被停止之前,此方法回一直得到调用。
* 其中三个参数的含义分别为:
* position :当前页面,及你点击滑动的页面
* positionOffset:当前页面偏移的百分比
* positionOffsetPixels:当前页面偏移的像素位置
*
*/
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
@Override
/*
* 此方法是在状态改变的时候调用,其中state这个参数有三种状态(0,1,2)。
* state ==1的时辰默示正在滑动,
* state==2的时辰默示滑动完毕了,
* state==0的时辰默示什么都没做。
*/
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* 更新文本
*/
private void updateIntroAndDot() {
//获取到当前第几页
int currentPage = viewPage.getCurrentItem() ;
//设置文本信息
tv.setText(list.get(currentPage).getIntro());
}
注意:在初始化数据的时候也要指定获取第一个文本 否则第一次打开的时候会没有数据显示的
tv.setText(list.get(0).getIntro());
布局文件中TextView中要添加如下两个属性
android:singleLine="true"
android:ellipsize="end"
7、添加图片显示的“点” 页面指示器(小圆点)
1、创建“点”布局
在res下创建一个drawable目录
在drawable目录下创建名称dot_focus.xml的shape文件,用于表现 “小白点”表示选中状态
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffffff"/>
</shape>
在drawable目录下创建名称dot_unfocus.xml的shape文件,用于表现 “小黑点”表示选中状态
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#aa000000"/>
</shape>
为了方便使用,我们创建一个名称为selector_dot.xm l的 selector,用来切换图片
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="@drawable/dot_focus"></item>
<item android:drawable="@drawable/dot_unfocus"></item>
</selector>
3、在java文件中创建对象
4、创建一个初始化“点”的方法(在数据确定数据个数后 创建)
/**
* 初始化“点”方法
*/
private void initDot(){
for (int i = 0; i < list.size(); i++) {
View view = new View(this);
//封装了View中宽度和高度
LayoutParams params = new LayoutParams(8, 8);
//点和点之间的距离
if (i != 0) {
params.leftMargin = 5;
}
view.setLayoutParams(params);
//设置个背景
view.setBackgroundResource(R.drawable.selector_dot);
lay_dot.addView(view);
}
}
5、在更新文本中处理 点、 文字、 图片的关联,依赖关系
/**
* 更新文本
*/
private void updateIntroAndDot() {
//获取到当前第几页
int currentPage = viewPage.getCurrentItem() ;
//设置文本信息
tv.setText(list.get(currentPage).getIntro());
for (int i = 0; i < lay_dot.getChildCount(); i++) {
lay_dot.getChildAt(i).setEnabled(i == currentPage);
}
}