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加载圆形图片即可。