SliderLayout控件设置圆角图片

一、概述

最近项目中要求给轮播图设置圆角，该项目的轮播用的是daimajia的AndroidImageSlider控件，github链接为https://github.com/daimajia/AndroidImageSlider
用该控件时找不到设置圆角的方法，只好找找源码中加载图片的方法。

先来张效果图：

二、分析

看了该控件源码中的两个类DefaultSliderView和BaseSliderView，加载图片的方法是BaseSliderView中的bindEventAndShow方法，代码如下：

    /**     * When you want to implement your own slider view, please call this method in the end in `getView()` method     * @param v the whole view     * @param targetImageView where to place image     */    protected void bindEventAndShow(final View v, ImageView targetImageView){        final BaseSliderView me = this;        v.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {            if(mOnSliderClickListener != null){                mOnSliderClickListener.onSliderClick(me);            }            }        });        if (targetImageView == null)            return;        if (mLoadListener != null) {            mLoadListener.onStart(me);        }        Picasso p = (mPicasso != null) ? mPicasso : Picasso.with(mContext);        RequestCreator rq = null;        if(mUrl!=null){            rq = p.load(mUrl);        }else if(mFile != null){            rq = p.load(mFile);        }else if(mRes != 0){            rq = p.load(mRes);        }else{            return;        }        if(rq == null){            return;        }        if(getEmpty() != 0){            rq.placeholder(getEmpty());        }        if(getError() != 0){            rq.error(getError());        }        switch (mScaleType){            case Fit:                rq.fit();                break;            case CenterCrop:                rq.fit().centerCrop();                break;            case CenterInside:                rq.fit().centerInside();                break;        }        rq.into(targetImageView,new Callback() {            @Override            public void onSuccess() {                if(v.findViewById(R.id.loading_bar) != null){                    v.findViewById(R.id.loading_bar).setVisibility(View.INVISIBLE);                }            }            @Override            public void onError() {                if(mLoadListener != null){                    mLoadListener.onEnd(false,me);                }                if(v.findViewById(R.id.loading_bar) != null){                    v.findViewById(R.id.loading_bar).setVisibility(View.INVISIBLE);                }            }        });   }

可以看到该控件使用Picasso加载图片，用Picasso加载圆角图片的方法可以从网上搜到，主要是在Picasso.load方法后使用.transform方法，在transform方法中new一个实现Transformation接口的类。
BaseSliderView类中加载图片直接用Picasso.with(context).load(url).into(targetImageView)了，在load方法之后没有调用transform方法处理图片，所以我试了试自己写了类继承BaseSliderView类，想在该类中添加Picasso的transformation方法，然后又写了个DefaultSliderView类继承该类，但是最后运行时会报错。

View v = LayoutInflater.from(getContext()).inflate(R.layout.render_type_default,null);

DefaultSliderView类中这行会报找不到该引用。

三、实现

于是只好写个RoundSliderView类继承BaseSliderView类，然后重写BaseSliderView类的bindEventAndShow方法，在该方法中调用Picasso加载图片。
RoundSliderView类代码如下：

import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import com.daimajia.slider.library.SliderTypes.BaseSliderView;import com.squareup.picasso.Picasso;import com.wzsykj.bopihui.R;public class RoundSliderView extends BaseSliderView {    public RoundSliderView(Context context) {        super(context);    }    @Override    public View getView() {        View v = LayoutInflater.from(getContext()).inflate(R.layout.render_type_default,null);        ImageView target = (ImageView)v.findViewById(R.id.daimajia_slider_image);        bindEventAndShow(v, target);        return v;    }    @Override    protected void bindEventAndShow(View v, ImageView targetImageView) {        super.bindEventAndShow(v, targetImageView);        targetImageView.setScaleType(ImageView.ScaleType.FIT_XY);        Picasso.with(getContext()).load(getUrl()).transform(new PicassoRoundTransform()).into(targetImageView);        v.findViewById(R.id.loading_bar).setVisibility(View.INVISIBLE);    }}

PicassoRoundTransform类代码如下：

import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PorterDuff;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.RectF;import com.squareup.picasso.Transformation;public class PicassoRoundTransform implements Transformation {    @Override    public Bitmap transform(Bitmap source) {        int widthLight = source.getWidth();        int heightLight = source.getHeight();        Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);        Canvas canvas = new Canvas(output);        Paint paintColor = new Paint();        paintColor.setFlags(Paint.ANTI_ALIAS_FLAG);        RectF rectF = new RectF(new Rect(0, 0, widthLight, heightLight));        canvas.drawRoundRect(rectF, heightLight/9, heightLight/9, paintColor);        Paint paintImage = new Paint();        paintImage.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));        canvas.drawBitmap(source, 0, 0, paintImage);        source.recycle();        return output;    }    @Override    public String key() {        return "roundcorner";    }}

圆角的大小可以通过改变这行代码中第2和第3个参数来改变：

canvas.drawRoundRect(rectF, heightLight/9, heightLight/9, paintColor);

使用的时候用RoundSliderView类替代DefaultSliderView类即可。

四、后记

设置圆形图片也是同理，网上搜索一下Picasso加载圆形图片即可。