ViewPager系列之－仿掌上英雄联盟皮肤浏览效果
能有一个双休的周末，对于程序员来说，也算是一件幸福的事情吧。苦逼的加了一周的班，终于可以休息放松放松了。作为一个LOL爱好者，周末最开心的事当然就是约上几个小伙伴一起开黑了。一起超神、一起连跪，也算是周末的一大乐事。这几天英雄联盟搞活动，抽到一个安妮限定皮肤，可把我乐坏了，于是马上就登陆掌盟客户端查看皮肤。进入皮肤浏览界面之后，觉得这个皮肤浏览的效果还真不错，如下图：
作为一个程序员，当然第一时间就是思考它是怎么实现的？我能用什么方法来实现类似的效果？于是花了半天的时间，做了一个类似的效果。因此本篇文章就分享一下如何实现这一效果。最后实现的效果如下：
思路与分析
在开始写代码之前，我们还是来分析一下界面元素，和该用什么技术来实现各个部分。
1，首先是整个界面的滑动，我们肯定一眼就能看出来，用ViewPager 实现。
2，ViewPager 滑动时有放大缩小的动画，用ViewPager.Transfoemer 轻松搞定。
3，ViewPager 显示多页（展示前后页面的部分）。
4，界面图片的形状，旋转90度的等腰梯形。这个只能用自定义View来实现了。
5，整个界面的背景为当前显示图片的高斯模糊图。
代码实现
上面分析了界面的构成元素，那么现在我们就来看一下具体的实现。
1, ViewPager 展示多页
这个问题在我们前一篇文章已经讲过，这里不再重复，就是用ViewGroup 的 clipChildren 属性，值为false。也就是在整个布局的跟节点添加下面一行代码：
android:clipChildren="false"
然后，ViewPager需要设置左右Margin,也就是前后页显示的位置
<android.support.v4.view.ViewPager android:id="@+id/my_viewpager" android:layout_width="wrap_content" android:layout_height="300dp" android:clipChildren="false" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:layout_centerInParent="true" />
从上面的效果图可以看到，当前页和前后页的部分是有间距的，我们只需要在Item布局中左右添加margin属性：
android:layout_marginLeft="30dp" android:layout_marginRight="30dp"
好了，这样ViewPager就能显示多页，并且当前页和前后页之间还有一定的间距。
2, ViewPager 切换时的动画
ViewPager 切换时的自定义动画用ViewPager.PageTransformer, 这个在上一篇文章也讲过，没看过的倒回去看一下。这里不细讲了，直接上代码：
public class CustomViewPagerTransformer implements ViewPager.PageTransformer {
private int maxTranslateOffsetX;
private ViewPager viewPager;
private static final float MIN_SCALE = 0.75f;
public CustomViewPagerTransformer(Context context) {
this.maxTranslateOffsetX = dp2px(context, 160);
}
public void transformPage(View view, float position) {
// position的可能性的值有，其实从官方示例的注释就能看出：
//[-Infinity,-1) 已经看不到了
// (1,+Infinity] 已经看不到了
// [-1,1]
// 而我们从写PageTransformer，操作View动画的重点区间就在[-1,1]
if (viewPager == null) {
viewPager = (ViewPager) view.getParent();
}
int leftInScreen = view.getLeft() - viewPager.getScrollX();
int centerXInViewPager = leftInScreen + view.getMeasuredWidth() / 2;
int offsetX = centerXInViewPager - viewPager.getMeasuredWidth() / 2;
float offsetRate = (float) offsetX * 0.38f / viewPager.getMeasuredWidth();
float scaleFactor = 1 - Math.abs(offsetRate);
if (scaleFactor > 0) {
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
view.setTranslationX(-maxTranslateOffsetX * offsetRate);
}
}
/**
* dp和像素转换
*/
private int dp2px(Context context, float dipValue) {
float m = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * m + 0.5f);
}
}3, 自定义多边形ImageView
多边形ImageView，我们通过自定义的方式实现，继承ImageView, 然后重写onDraw()方法。这里实现这种不规则的多边形View有两种方法。第一：使用PorterDuffXfermode，这种方法需要你给一个蒙板图片，在onDraw 方法中，先绘制蒙板图片，然后设置Paint的setXfermode 为PorterDuff.Mode.SRC_IN,再绘制要显示的图片，这样就能把显示的图片裁剪成蒙板的形状。第二： 使用canvas的clipPath() 方法，我们用Path 来绘制多边形，然后clipPath() 将画布裁剪成绘制的形状，然后在绘制要显示的图片。
关于PorterDuffXfermode 的更多用法，有兴趣的可以去google 一下，网上有很多相关的文章。这里我用的是两种方法的结合，先用clipPath得到一个需要形状的bitmap，然后使用PorterDuffXfermode。自定义View代码如下：
public class PolygonView extends AppCompatImageView {
private int mWidth = 0;
private int mHeight = 0;
private Paint mPaint;
private Paint mBorderPaint;
private PorterDuffXfermode mXfermode;
private Bitmap mBitmap;
private int mBorderWidth;
private Bitmap mMaskBitmap;
public PolygonView(Context context) {
super(context);
init();
}
public PolygonView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public PolygonView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
mBorderWidth = DisplayUtils.dpToPx(4);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);// 关闭硬件加速加速
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.RED);
mPaint.setDither(true);
mBorderPaint = new Paint();
mBorderPaint.setColor(Color.WHITE);
mBorderPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mBorderPaint.setAntiAlias(true);//抗锯齿
mBorderPaint.setDither(true);//防抖动
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
mMaskBitmap = getMaskBitmap();
}
@Override
public void setImageResource(@DrawableRes int resId) {
super.setImageResource(resId);
mBitmap = BitmapFactory.decodeResource(getResources(),resId);
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.drawBitmap(mMaskBitmap,0,0,mBorderPaint);
mPaint.setXfermode(mXfermode);
Bitmap bitmap = getCenterCropBitmap(mBitmap,mWidth,mHeight);
canvas.drawBitmap(bitmap,0,0,mPaint);
mPaint.setXfermode(null);
canvas.restore();
}
private Bitmap getMaskBitmap(){
Bitmap bm = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bm);
Point point1 = new Point(0,30);
Point point2 = new Point(mWidth,0);
Point point3 = new Point(mWidth,mHeight);
Point point4 = new Point(0,mHeight - 30);
Path path = new Path();
path.moveTo(point1.x,point1.y);
path.lineTo(point2.x,point2.y);
path.lineTo(point3.x,point3.y);
path.lineTo(point4.x,point4.y);
path.close();
c.drawPath(path,mBorderPaint);
return bm;
}
/**
* 对原图进行等比裁剪
*/
private Bitmap scaleImage(Bitmap bitmap){
if(bitmap!=null){
int widht=bitmap.getWidth();
int height=bitmap.getHeight();
int new_width=0;
int new_height=0;
if(widht!=height){
if(widht>height){
new_height=mHeight;
new_width=widht*new_height/height;
}else{
new_width=mWidth;
new_height=height*new_width/widht;
}
}else{
new_width=mWidth;
new_height=mHeight;
}
return Bitmap.createScaledBitmap(bitmap, new_width, new_height, true);
}
return null;
}
private Bitmap getCenterCropBitmap(Bitmap src, float rectWidth, float rectHeight) {
float srcRatio = ((float) src.getWidth()) / src.getHeight();
float rectRadio = rectWidth / rectHeight;
if (srcRatio < rectRadio) {
return Bitmap.createScaledBitmap(src, (int)rectWidth, (int)((rectWidth / src.getWidth()) * src.getHeight()), false);
} else {
return Bitmap.createScaledBitmap(src, (int)((rectHeight / src.getHeight()) * src.getWidth()), (int)rectHeight, false);
}
}
}建议：这里使用clipPath方法的时候，会出现很多锯齿，即使Paint 设置了抗锯齿也没啥用，所以建议使用PorterDuffXfermode 方法。要实现类似的效果，最好是找设计师要一张蒙板形状图。在用PorterDuffXfermode实现，简单效果好。
通过上面的3步，其实整个 界面的效果差不多已经出来了，最后我们需要做的就是高斯模糊背景图。
4, 背景图高斯模糊
背景的高斯模糊就很简单了，前面我也有写过关于几种高斯模糊方法的对比（Android 图片高斯模糊解决方案），最后封装了一个方便的库(https://github.com/pinguo-zhouwei/EasyBlur)，只需要简单几行代码就行。我们在ViewPager的onPageSelect方法中，获取显示的图片，进行高斯模糊处理。
@Override
public void onPageSelected(int position) {
Bitmap source = BitmapFactory.decodeResource(getResources(),VPAdapter.RES[position]);
Bitmap bitmap = EasyBlur.with(getApplicationContext())
.bitmap(source)
.radius(20)
.blur();
mImageBg.setImageBitmap(bitmap);
mDesc.setText(mVPAdapter.getPageTitle(position));
}最后，给出完整的布局文件和Activity代码：
1, activity布局文件：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:clipChildren="false" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 高斯模糊背景--> <ImageView android:id="@+id/activity_bg" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" /> <!-- Toolbar--> <RelativeLayout android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="50dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/navigation_back_white" android:layout_centerVertical="true" android:layout_marginLeft="15dp" /> <TextView android:id="@+id/title_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="18sp" android:textColor="@android:color/white" /> </RelativeLayout> <android.support.v4.view.ViewPager android:id="@+id/my_viewpager" android:layout_width="wrap_content" android:layout_height="300dp" android:clipChildren="false" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:layout_centerInParent="true" /> <com.zhouwei.indicatorview.CircleIndicatorView android:id="@+id/indicatorView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="60dp" android:layout_centerHorizontal="true" app:indicatorSelectColor="#C79EFE" app:indicatorSpace="5dp" app:indicatorRadius="8dp" app:enableIndicatorSwitch="false" app:indicatorTextColor="@android:color/white" app:fill_mode="number" app:indicatorColor="#C79EFE" /> <TextView android:id="@+id/skin_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_below="@+id/my_viewpager" android:layout_marginTop="20dp" android:textColor="@android:color/white" android:textSize="18sp" /> </RelativeLayout>
2, Activity代码：
public class ViewPagerActivity extends AppCompatActivity {
private ViewPager mViewPager;
private VPAdapter mVPAdapter;
private ImageView mImageBg;
private CircleIndicatorView mCircleIndicatorView;
private TextView mTitle,mDesc;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_transform_layout);
View view = findViewById(R.id.toolbar);
StatusBarUtils.setTranslucentImageHeader(this, 0,view);
initView();
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.my_viewpager);
mImageBg = (ImageView) findViewById(R.id.activity_bg);
mCircleIndicatorView = (CircleIndicatorView) findViewById(R.id.indicatorView);
mTitle = (TextView) findViewById(R.id.title_name);
mDesc = (TextView) findViewById(R.id.skin_desc);
mTitle.setText("黑暗之女");
mViewPager.setPageTransformer(false,new CustomViewPagerTransformer(this));
// 添加监听器
mViewPager.addOnPageChangeListener(onPageChangeListener);
mVPAdapter = new VPAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mVPAdapter);
mViewPager.setOffscreenPageLimit(3);
// Indicator 和ViewPager 建立关联
mCircleIndicatorView.setUpWithViewPager(mViewPager);
// 首次进入展示第二页
mViewPager.setCurrentItem(1);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return mViewPager.onTouchEvent(event);
}
private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Bitmap source = BitmapFactory.decodeResource(getResources(),VPAdapter.RES[position]);
Bitmap bitmap = EasyBlur.with(getApplicationContext())
.bitmap(source)
.radius(20)
.blur();
mImageBg.setImageBitmap(bitmap);
mDesc.setText(mVPAdapter.getPageTitle(position));
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
}ViewPager的每一个页面用Fragment 来展示的，Fragment代码如下：
public class ItemFragment extends Fragment {
private PolygonView mPolygonView;
public static ItemFragment newInstance(int resId){
ItemFragment itemFragment = new ItemFragment();
Bundle bundle = new Bundle();
bundle.putInt("resId",resId);
itemFragment.setArguments(bundle);
return itemFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.view_pager_muti_layout,null);
mPolygonView = (PolygonView) view.findViewById(R.id.item_image);
// 做一个属性动画
ObjectAnimator animator = ObjectAnimator.ofFloat(mPolygonView,"rotation",0f,10f);
animator.setDuration(10);
animator.start();
return view;
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
int resId = getArguments().getInt("resId");
mPolygonView.setImageResource(resId);// 设置图片
}
}说明：在Fragment中对PolygonView做了一个旋转的动画，是因为PolygonView 是一个竖着的等腰梯形，但是看效果图，其实不是，还有一个小幅度的旋转，如果将这个旋转放在PolygonView 里面做的话，发现每次ViewPager 切换的时候，都有一个旋转动画，效果不好，因此将动画放在这里。应该还有其他更优雅一点的方法，有兴趣的可以去试一下。
最后
本篇文章是ViewPager 系列的第三篇文章，也是这个系列的最后一些文章，这三篇文章总结了ViewPager 的一些常用方法，如Banner 、切换动画等等。还讲了如何封装一个扩展性强，比较通用的ViewPager。这也是对自己以前用过的这些知识点的一个总结和沉淀。喜欢的话可以关注我的简书和掘金账号，会不定期的更新Android相关的优质文章。如果有什么问题的话也欢迎指出交流。Demo请访问：https://github.com/pinguo-zhouwei/AndroidTrainingSimples