android ViewPager用作广告轮播

以前的广告轮播用的都是Gallery,当发现android:clipChildren这个属性之后发现其实用viewpager也可以很方便的用作广告轮播，先看下效果图。



因为没有用特别好看的图片，就讲究一下吧，这里滑动的时候添加了渐变和缩放动画，下面看一下具体的代码实现过程。

布局文件很简单，就一个viewpager，不过需要设置android:clipChildren为false，以便能显示出两边的view，两边各留了60dp。

<?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:gravity="center"
android:background="#ffffff"
android:clipChildren="false"
android:orientation="vertical">

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</LinearLayout>

再来看下具体的代码实现：

public class MainActivity extends Activity {

private ViewPager viewPager;
private int[] imgs = new int[]{R.mipmap.ic_launcher,R.mipmap.ic_launcher,
R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setOffscreenPageLimit(3);
viewPager.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return imgs.length;
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(MainActivity.this);
imageView.setImageResource(imgs[position]);
container.addView(imageView);
return imageView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
});
viewPager.setPageTransformer(true,new ViewPagerTrans());
}

class ViewPagerTrans implements ViewPager.PageTransformer{

private float MIN_ALPHA = 0.5f;//渐变
private float MIN_SCALE = 0.8f;//缩放

@Override
public void transformPage(View page, float position) {
//            float alpha = (1 - Math.abs(position)) * MIN_ALPHA + MIN_ALPHA;
//            float leftScale =  MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
if(position < -1){//左侧划出屏幕部分
page.setAlpha(MIN_ALPHA);
page.setScaleX(MIN_SCALE);
page.setScaleY(MIN_SCALE);
} else if(position <=1){
if(position <= 0){//滑动过程中左半部分  [-1~0]
float leftAlpha = (1 + position) * MIN_ALPHA + MIN_ALPHA;
page.setAlpha(leftAlpha);

float leftScale =  MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
page.setScaleX(leftScale);
page.setScaleY(leftScale);
} else {//滑动过程中又半部分 [0~1]
float rightAlpha = (1 - position) * MIN_ALPHA + MIN_ALPHA;
page.setAlpha(rightAlpha);

float rightScale = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
page.setScaleX(rightScale);
page.setScaleY(rightScale);
}
} else {//右侧超出屏幕部分
page.setAlpha(MIN_ALPHA);
page.setScaleX(MIN_SCALE);
page.setScaleY(MIN_SCALE);
}
}
}
}

这里主要通过对ViewPager设置PageTransformer来设置view的动画，PageTransformer的transformPage方法就是监听view的滑动过程中位置的变化，position的取值一共有三个区间：

1、 <-1 这个区间表示的是左侧已经滑动出屏幕部分的view

2、 > 1 这个区间表示的是右侧已经滑动出屏幕部分的view

3、[-1,1] 这个区间正是当前可见的view，当position为0时表示的是正中间的view，-1和1表示的左右两边的view，当position取值为[-1,0]时表示的是左侧view的滑动过程，当position为[0,1]时表示的是右侧view的滑动过程。

当知道position的取值之后，再对view设置相应的渐变、缩放、旋转等动画就非常方便了。