一、概述

最近專案中要求給輪播圖設定圓角，該專案的輪播用的是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載入圓形圖片即可。