一、为什么要学习引导界面的滑动切换效果
在之前的博客中介绍了ViewPager的基本用法,但是ViewPager作为一种引导界面,我们单单学会基本用法是远远不够的,如果细心观察我们会发现界面的切换也是有所不同的,为了在以后的做出更加酷炫的APP,给用户以更好的体验,我们一起来学习一下利用goole官方提供的两种方式实现界面的切换效果。
注意:这种两种方式仅支持Android 3.0以上版本(API 11以上)
二、两种滑动效果的实现
首先我们来看下布局文件,布局文件的载入与之前相同,但是之前我们手写包名+ViewPager太麻烦,这里给大家提供一种简单的方法,就是在引入布局文件时按住ctrl+shift+T就可以直接出现源码找到包名复制即可(这只是Eclipse的方法,以后晓得AS的方法再补充吧),来看下效果。
因为布局与之前相同就不进行展示了。
下面让我们先来看下两种滑动切换的具体实现。其实实现滑动切换的效果非常简单,只需要一个语句(mViewPager.setPageTransformer())即可,然后再利用google为我们提供的DepthPageTransformer和 ZoomOutPageTransformer 两个类即可。
DepthPageTransformer类
这里我们直接将下面的代码复制到project中,点开后可能会有错误,需要我们自己写一下ViewPager将它的包导入(ctrl +shift+O),再将View的包导入就可以了
public class DepthPageTransformer implements ViewPager.PageTransformer
private static final float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
效果(侧滑展开)
ZoomOutPageTransformer
与上面相同也是直接复制到project然后导包。
这里写代public class ZoomOutPageTransformer implements ViewPager.PageTransformer
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
效果图(下个界面完全展示之前不会那么亮,我感觉有点像蒙版的效果)
MainActivity的调用
public class MainActivity extends Activity
private ViewPager mViewPager;
private int[] mImageIds=new int[]{R.drawable.guide_image8,R.drawable.guide_image4,R.drawable.guide_image1,R.drawable.guide_image2,R.drawable.guide_image3};
private List<ImageView> mImages=new ArrayList<ImageView>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager=(ViewPager) findViewById(R.id.viewpager);
//为ViewPager添加动画切换效果,仅支持3.0以后使用
// mViewPager.setPageTransformer(true, new DepthPageTransformer() );//3.0以后使用
mViewPager.setPageTransformer(true, new ZoomOutPageTransformer() );
mViewPager.setAdapter(new PagerAdapter() {
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mImages.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView image=new ImageView(MainActivity.this);
image.setImageResource(mImageIds[position]);
//为了不使图片变形
image.setScaleType(ScaleType.CENTER_CROP);
container.addView(image);
mImages.add(image);
//返回image
return image;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return