安卓笔记[1]--圆形立体按钮view

1 效果

用代码去实现美团安卓APP首页圆形阴影按钮

使用简单：

参数	值
srcImg	中心部位的图片
shadowWidth	阴影宽度 建议15dp左右
beginColor	开始颜色
endColor	结束颜色
numFen	图片在圆形按钮中的占比 一般设置为4合适

2 代码

2.1 MyShadowButtn.java

public class MyShadowButtn extends View {
	/*
	思路
	1：把测量举例设为正方形
	2：画笔设置渐变+阴影，画一个圆
	3：圆中间画图
	注意判断好各种间距即可
	*/
    private int rgb_begin,rgb_end;
    private int numFen;
    private LinearGradient linearGradient=null;
    private Bitmap bitmap;
    private RectF rectF;
    private Rect rectFImg;
    private float shadowWidth;
    private Resources mResources;
    private Paint basePaint,imgPaint;

    public MyShadowButtn(Context context) {
        this(context, null);
    }

    public MyShadowButtn(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public MyShadowButtn(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mResources = getResources();

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.myCView);
        bitmap = ((BitmapDrawable) mResources.getDrawable(ta.getResourceId(R.styleable.myCView_srcImg,R.drawable.test_foot))).getBitmap();
        shadowWidth=ta.getDimension(R.styleable.myCView_shadowWidth,30);
        rgb_begin=ta.getColor(R.styleable.myCView_beginColor,0xff00CED1);
        rgb_end=ta.getColor(R.styleable.myCView_endColor,0xff00FF7F);
        numFen=ta.getInt(R.styleable.myCView_numFen,4);

        initData();
    }

    private void initData(){
        setLayerType(LAYER_TYPE_SOFTWARE, null);//对单独的View在运行时阶段禁用硬件加速
        basePaint=new Paint();
        basePaint.reset();
        basePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        basePaint.setStrokeCap(Paint.Cap.ROUND);
        basePaint.setAntiAlias(true);
        basePaint.setShadowLayer(shadowWidth,0, 0, Color.BLACK);

        imgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        imgPaint.setFilterBitmap(true);//抗锯齿
        imgPaint.setDither(true);//防抖动
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(linearGradient==null){
            linearGradient = new LinearGradient(0,0,0,getHeight(), rgb_begin, rgb_end, Shader.TileMode.CLAMP);
            basePaint.setShader(linearGradient);
        }
        if(rectF==null){
            float ww=getWidth()/numFen;
            float hh=getHeight()/numFen;
            rectF=new RectF(ww,hh,ww*(numFen-1),hh*(numFen-1));
            rectFImg=new Rect(0,0,bitmap.getWidth(),bitmap.getHeight());
        }
        canvas.drawCircle(getWidth()/2, getHeight()/2, (getWidth()/2)-shadowWidth, basePaint);
        canvas.drawBitmap(bitmap,rectFImg,rectF,imgPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMySize(500, widthMeasureSpec);
        int height = getMySize(500, heightMeasureSpec);
        //设置成正方形
        if (width < height) {
            height = width;
        } else {
            width = height;
        }
        setMeasuredDimension(width, height);
    }

    private int getMySize(int defaultSize, int measureSpec) {
        int mySize = defaultSize;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        switch (mode) {
            case MeasureSpec.EXACTLY: {
                mySize = size;
                break;
            }
            case MeasureSpec.UNSPECIFIED: {
                mySize = defaultSize;
                break;
            }
            case MeasureSpec.AT_MOST: {
                mySize = defaultSize;
                break;
            }
        }
        return mySize;
    }
}

2.2 xml

<com.example.baseproject.myViews.MyShadowButtn
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        app:srcImg="@drawable/test_foot"
        app:numFen="4"
        app:beginColor="#00CED1"
        app:endColor="#00FF7F"
        app:shadowWidth="15dp">
</com.example.baseproject.myViews.MyShadowButtn>

2.3 attr

<declare-styleable name="myCView">
        <attr name = "srcImg" format = "reference" />
        <attr name = "shadowWidth" format = "dimension" />
        <attr name = "beginColor" format = "color" />
        <attr name = "endColor" format = "color" />
        <attr name = "numFen" format = "integer" />
</declare-styleable>