经常看到一些应用使用viewpager切换页面时效果非常炫酷,其实在Android中viewpager提供了一个方法用于设置页面切换时的效果setPageTransformer,然后重写void transformPage(View page, float position)就可以实现。
参数 page表示动画作用在当前的页面
position:可以理解为0表示当前页面,1表示当前页面的右边一个页面,-1表示左边一个页面。
举个栗子:当前情况是第一页->第二页
那么第一页的position变化是0->-1,第二页的变化是1->0
先上效果图吧
接着看下代码实现
/**
* viewpager切换页面时动画
*/
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private ViewPager viewPager;
private ViewPaagerAdapter adapter;
private ArrayList<View> viewlist=new ArrayList<>();//承载图片
private int []imgList={R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5,
R.drawable.img6, R.drawable.img7,R.drawable.img8};//图片数组
private static final int TYPE_1=1;
private static final int TYPE_2=2;
private static final int TYPE_3=3;
private Button btScal,btScalCenter,bt3D;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
setView();
viewPager= (ViewPager) findViewById(R.id.viewpager);
adapter=new ViewPaagerAdapter(this,viewlist);
viewPager.setAdapter(adapter);
// viewPager.setOffscreenPageLimit(10);
}
public void setView() {//初始化view及设置viewpager切换时显示的图片
btScal= (Button) findViewById(R.id.btScal);
btScalCenter= (Button) findViewById(R.id.btScalCenter);
bt3D= (Button) findViewById(R.id.bt3D);
btScal.setOnClickListener(this);
btScalCenter.setOnClickListener(this);
bt3D.setOnClickListener(this);
for (int i = 0; i < imgList.length; i++) {
View view= LayoutInflater.from(this).inflate(R.layout.layout,null,false);
ImageView img= (ImageView) view.findViewById(R.id.img);
img.setBackgroundResource(imgList[i]);
viewlist.add(view);
}
}
public void setTransForm(int number){
if (TYPE_1==number) {
/**
* 缩放效果
*/
viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
final float normalizedposition = Math.abs(Math.abs(position) - 1);
page.setScaleX(normalizedposition / 2 + 0.5f);
page.setScaleY(normalizedposition / 2 + 0.5f);
}
});
}
/**
* 切换时从中心点放大
*/
else if(TYPE_1==number){
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
int width=page.getWidth();
int height=page.getHeight();
if (position>0&&position<=1) {
page.setTranslationX(-width*position);
page.setPivotX(width/2);
page.setPivotY(height/2);
page.setScaleX(1-position);
page.setScaleY(1-position);
}
}
});
}
else if(TYPE_1==number){
/**
* 3d旋转
*/
viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
int width=page.getWidth();
int pivot=0;
if (position<0 && position>=-1) {
pivot=width;
}else if(position>0 && position<=1){
pivot=0;
}
page.setPivotX(pivot);
page.setRotationY(90*position);
}
});
}
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btScal:
setTransForm(TYPE_1);
break;
case R.id.btScalCenter:
setTransForm(TYPE_2);
break;
case R.id.bt3D:
setTransForm(TYPE_3);
break;
default:
break;
}
}
}