欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自定义Drawable 实现图片圆角、圆形、椭圆形

程序员文章站 2024-02-02 12:38:52
...

什么是Drawable ?
Android 把所有显示出来的图形都抽象为drawable ,意思就是可绘制的,包括,图片、色块、背景等。
简单的drawable都是静态的图形,当然也有其他的,比如StateListDrawable,可以根据不同的触摸来变换不同的图形。也是通常我们在drawable文件中创建的selector.xml
我们通过简单三个例子来了解一下自定义drawable

效果图

自定义Drawable 实现图片圆角、圆形、椭圆形

图片圆形的实现

/**
 * 圆形图片实现
 */

public class CircleDrawable extends BitmapDrawable {

    private final Paint mPaint;

    public CircleDrawable(Resources resources, Bitmap bitmap){
        super(resources,bitmap);
        BitmapShader shader=new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(shader);
        mPaint.setColor(Color.RED);
    }

    @Override
    public void draw(Canvas canvas) {
        int width = getBitmap().getWidth();
        int height = getBitmap().getHeight();
        int radius = Math.min(width/2, height/2);
        int x = (width>radius+radius)?width/2:radius;
        int y = (height>radius+radius)?height/2:radius;
        canvas.drawCircle(x,y,radius,mPaint);
    }

    /**
     * 这两个方法可以获取到drawable绘制的区域,不过ImageView的源码中调用的是下面的
     * @param bounds
     */
    @Override
    public void setBounds(Rect bounds) {
        super.setBounds(bounds);
    }

    /**
     * 这两个方法可以获取到drawable绘制的区域 Imagview中会调用该方法,设置宽高
     */
    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
    }
}

图片圆角的实现

/**
 * 圆角图片实现
 */

public class RoundDrawable extends BitmapDrawable {


    private final Paint paint;
    private float radisu;
    private RectF rectF;

    public RoundDrawable(Resources resources, Bitmap bitmap){
        super(resources,bitmap);
        BitmapShader shader=new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setShader(shader);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawRoundRect(rectF,radisu,radisu,paint);
    }

    public void setRadius(float radisu){

        this.radisu = radisu;
    }


    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        rectF = new RectF(left,top,right,bottom);
    }
}

椭圆图片的实现

/**
 * 椭圆图片实现
 */

public class OvalDrawable extends BitmapDrawable {

    private final Paint mPaint;
    private RectF rectF;

    public OvalDrawable(Resources res, Bitmap bitmap){
        super(res,bitmap);
        BitmapShader shader=new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setShader(shader);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawOval(rectF,mPaint);
    }

    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
        rectF = new RectF(left,top,right,bottom);
    }
}

按钮点击调用

public void onClick(View v) {
        switch (v.getId()) {
            case R.id.original: // 原图
                imageView.setImageResource(R.drawable.demo);
                break;

            case R.id.circle: // 圆形
                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.demo);
                CircleDrawable drawable = new CircleDrawable(getResources(), bitmap);
                imageView.setImageDrawable(drawable);
                break;

            case R.id.round: // 圆角
                Bitmap roundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.demo);
                RoundDrawable roundDrawable = new RoundDrawable(getResources(), roundBitmap);
                roundDrawable.setRadius(30);
                imageView.setImageDrawable(roundDrawable);
                break;

            case R.id.oval: // 椭圆
                Bitmap ovalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.demo);
                OvalDrawable ovalDrawable = new OvalDrawable(getResources(), ovalBitmap);
                imageView.setImageDrawable(ovalDrawable);
                break;

        }
    }

MainActivity界面xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.lg.customdrawable.MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:src="@drawable/demo" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/original"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="原图" />

        <Button
            android:id="@+id/circle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="圆形" />

        <Button
            android:id="@+id/round"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="圆角" />

        <Button
            android:id="@+id/oval"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="椭圆" />
    </LinearLayout>
</LinearLayout>

总结
简单实现了三种效果,帮助理解自定义Drawable。
Demo下载地址有需要的可以看下