前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android 必知必会-使用 supportV4 的 RoundedBitmapDrawable 实现圆角

Android 必知必会-使用 supportV4 的 RoundedBitmapDrawable 实现圆角

作者头像
他叫自己MR.张
发布2019-07-01 15:17:32
7450
发布2019-07-01 15:17:32
举报
文章被收录于专栏:Android必知必会

版权声明:本文为他叫自己Mr.张的原创文章,转载请注明出处,否则禁止转载。 https://cloud.tencent.com/developer/article/1453384

如果移动端访问不佳,请访问 –> Github版

RoundedBitmapDrawablesupportV4 下的一个类,有了它,显示圆角和圆形图片的情况下就不需要额外的第三方类库了,还能和各种图片加载库配合使用。

背景

今天无意间看到一段实现圆形头像的代码:

代码语言:javascript
复制
RoundedBitmapDrawable drawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
drawable.setCircular(true);

RoundedBitmapDrawable 这个类顿时就引起我的好奇了,一查发现是 android.support.v4.graphics.drawable.RoundedBitmapDrawable点击此处 可以看到官方的介绍。这个类中的两个方法是今天的主角:

return

method

void

setCircular(boolean circular) : Sets the image shape to circular.

void

setCornerRadius(float cornerRadius) : Sets the corner radius to be applied when drawing the bitmap.

setCircular(boolean circular) : 把图片的形状设为圆形;

setCornerRadius(float cornerRadius) : 设置图片的圆角半径。

这里贴一下源码,更能清晰的知道它的实现:

代码语言:javascript
复制
    /**
     * Sets the image shape to circular.
     * <p>This overwrites any calls made to {@link #setCornerRadius(float)} so far.</p>
     */
    public void setCircular(boolean circular) {
        mIsCircular = circular;
        mApplyGravity = true;
        if (circular) {
            updateCircularCornerRadius();
            mPaint.setShader(mBitmapShader);
            invalidateSelf();
        } else {
            setCornerRadius(0);
        }
    }

    private void updateCircularCornerRadius() {
        final int minCircularSize = Math.min(mBitmapHeight, mBitmapWidth);
        mCornerRadius = minCircularSize / 2;
    }

    /**
     * Sets the corner radius to be applied when drawing the bitmap.
     */
    public void setCornerRadius(float cornerRadius) {
        if (mCornerRadius == cornerRadius) return;

        mIsCircular = false;
        if (isGreaterThanZero(cornerRadius)) {
            mPaint.setShader(mBitmapShader);
        } else {
            mPaint.setShader(null);
        }

        mCornerRadius = cornerRadius;
        invalidateSelf();
    }

至于具体的实现,阅读源码发现官方使用了 BitmapShader 来实现的圆角。

如果你有兴趣研究,更多资料:

实现

其中第一个图片是圆形,第二个和第三个图片设置了自定义大小的圆角。

xxActivity

代码语言:javascript
复制
private void init() {
        RoundedBitmapDrawable drawableA = RoundedBitmapDrawableFactory.create(getResources(), id2Bitmap(this, R.drawable.icon_avatar));
        drawableA.setCircular(true);
        rbA.setImageDrawable(drawableA);

        RoundedBitmapDrawable drawableB = RoundedBitmapDrawableFactory.create(getResources(), id2Bitmap(this, R.drawable.icon_avatar));
        drawableB.setCornerRadius(30L);
        rbB.setImageDrawable(drawableB);

        RoundedBitmapDrawable drawableC = RoundedBitmapDrawableFactory.create(getResources(), id2Bitmap(this, R.drawable.icon_avatar));
        drawableC.setCornerRadius(60L);
        rbC.setImageDrawable(drawableC);
    }

    public static Bitmap id2Bitmap(Context context, int id) {
        return BitmapFactory.decodeResource(context.getResources(), id);
    }

activity_xx.xml

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    >

    <ImageView
        android:id="@+id/rb_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <ImageView
        android:id="@+id/rb_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        />

    <ImageView
        android:id="@+id/rb_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        />

</LinearLayout>

代码比较简单,有什么问题欢迎随时和我联系。

总结

一个小小的发现,让我又少使用了一个第三方库,心情大好。另外在此过程中发现的 BitmapShader 是学习自定义 View 的一个不错的切入点,需要再研究研究。

PS:你可以通过下面的方式和我联系

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016年08月25日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 实现
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档