ViewPager的应用:轮播图广告和首次进入应用程序界面

通过滑动来切换图片可以直接使用布局中Image图片，设置它的切入切出动画。但是API提供了一个控件ViewPager来实现这类效果。

首次进入应用程序界面的滑动效果功能分析

图片切换ViewPager实现

点切换Selector(图片选择器)和Shape(形状xml文件)实现

ViewPager与ListView和GridView一样也需要设置Adapter，首先需要定义一个类继承PagerAdapter。如下重写其四个个方法,getCount(),isViewFromObject,isitaniateItem,destoryItem

class MyAdapter extends PagerAdapter  {

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    //判断是否可以复用view
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    //返回要显示的内容,左，中，右三块。
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        int newposition= position%mImageViews.size();
        ImageView imageView = mImageViews.get(newposition);

        container.addView(imageView);
        return imageView;

    }

    //要销毁的对象

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {

        container.removeView((View) object);
    }
}

VIewPager预先将显示的内容左右两边的图片对象初始化好就是instaniateItem方法，当左边图片对象被划出左边，就会调用destroyItem方法将该图片对象销毁。

点切换需要自己写个点图形xml和selectorxml,当enable时点为白色，否则为灰色。

<shape xmlns:android="http://schemas./apk/res/android"
    android:shape="oval">
    <corners android:radius="5dp"  ></corners>
    <solid android:color="@android:color/darker_gray"></solid>
</shape>

<shape xmlns:android="http://schemas./apk/res/android"
    android:shape="oval">
    <corners android:radius="5dp"  ></corners>
    <solid android:color="@android:color/white"></solid>
</shape>

<selector xmlns:android="http://schemas./apk/res/android">
    <item android:state_enabled="true" android:drawable="@drawable/bg_point_enable"></item>
    <item android:state_enabled="false" android:drawable="@drawable/bg_point_disable"></item>
</selector>

开始的时候初始化第一个点为可用状态，其余不可用。

View pointView;
for (int i = 0; i < length; i++) {
    imageView = new ImageView(this);
    imageView.setBackgroundResource(imageIds[i]);
    mImageViews.add(imageView);
    pointView = new View(this);
//设置点View图片选择器
    pointView.setBackgroundResource(R.drawable.selector_point);
    pointView.setEnabled(false);
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(5, 5);
    if (i != 0) {
        //设置点间距
        layoutParams.leftMargin = 10;
    }
    else
     pointView.setEnabled(true);
    mPointViews.add(pointView);
    mLl.addView(pointView, layoutParams);

其次 要监听ViewPager的View切换以设置点图形是白色还是灰色。所以要实现OnPageChangerListener接口的监听方法。

public class AdvisementActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

private int lastPosition = 0;
//滑动时
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

//选中时，即处于中间那块时
@Override
public void onPageSelected(int position) {
    int newposition =position%mPointViews.size();
    mPointViews.get(lastPosition).setEnabled(false);
    mPointViews.get(newposition).setEnabled(true);
    mText.setText(mContents[newposition]);
    lastPosition=newposition;
}

//滑动状态改变时
@Override
public void onPageScrollStateChanged(int state) {

}

@Override
protected void onDestroy() {
    isLoop=false;
    super.onDestroy();
}

设置点状态时，用一个变量lastPosition保存设置过的白点，以便切换的时候重新将它设为灰点。

至此首次进入应用程序界面的效果基本完成了。

接下来是轮播图广告

它在上一个效果的基础上

自动播放 定时器(用线程，设置一个bool值(只有退出该界面才为false)，无限自动获取pager下一个View)

new Thread(new Runnable() {
    @Override
    public void run() {
        while(isLoop) {
            //睡两秒，播下一个图片
            try {
                Thread.sleep(2000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mPager.setCurrentItem(mPager.getCurrentItem()+1);
                }
            });
        }
    }
}).start();

无限循环(假无限,有限但是要等十多年后,变相等于无限,将Adapter返回的Count值设为int的最大值)初始化到中间某个位置。

mPager.setOnPageChangeListener(this);
//设到中间位置可以向左向右滑无限滑
mPager.setCurrentItem(5000000);

public int getCount() {
    return Integer.MAX_VALUE;
}

改变onPageSelected方法和instantiateItem方法的position，让它取余显示的图片数量。然后用这个作为图片View和点View的索引。

int newposition =position%mPointViews.size();

轮播图广告的另一种方式，缺点不能无限左滑。

if (mHandler == null) {

mHandler = new Handler() {

public void handleMessage(android.os.Message msg) {

int currentItem = mViewPager.getCurrentItem();

currentItem++;

if (currentItem > mTopNews.size() - 1) {

currentItem = 0;// 如果已经到了最后一个页面,跳到第一页

}

mViewPager.setCurrentItem(currentItem);

mHandler.sendEmptyMessageDelayed(0, 3000);// 继续发送延时3秒的消息,形成内循环

};

};

// 保证启动自动轮播逻辑只执行一次

mHandler.sendEmptyMessageDelayed(0, 3000);// 发送延时3秒的消息

mViewPager.setOnTouchListener(new OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

System.out.println("ACTION_DOWN");

// 停止广告自动轮播

// 删除handler的所有消息

mHandler.removeCallbacksAndMessages(null);

// mHandler.post(new Runnable() {

//

// @Override

// public void run() {

// //在主线程运行

// }

// });

break;

case MotionEvent.ACTION_CANCEL:// 取消事件,

// 当按下viewpager后,直接滑动listview,导致抬起事件无法响应,但会走此事件

System.out.println("ACTION_CANCEL");

// 启动广告

mHandler.sendEmptyMessageDelayed(0, 3000);

break;

case MotionEvent.ACTION_UP:

System.out.println("ACTION_UP");

// 启动广告

mHandler.sendEmptyMessageDelayed(0, 3000);

break;

default:

break;

}

return false;

}

});

}