Skip to content

🔥🔥🔥万能的Drawable,支持圆图、圆角图以及自定义图形;不再需要学习各个图片加载框架各种设置圆角,圆形图,甚至任何的特殊图形也无缝支持;不需要再让 UI 切各种圆角、圆形图或其他图形的 placeholder、error 资源图

License

Notifications You must be signed in to change notification settings

FlyJingFish/GraphicsDrawable

Repository files navigation

GraphicsDrawable

Maven central GitHub stars GitHub forks GitHub issues GitHub license

GraphicsDrawable支持圆图、圆角图以及自定义图形;不再需要学习各个图片加载框架各种设置圆角,圆形图,甚至任何的特殊图形也无缝支持;不需要再让 UI 切各种圆角、圆形图或其他图形的 placeholder、error 资源图

最重要的是不挑显示控件

show

show

特色功能

1、支持圆形图案、圆角矩形图案、以及自定义图形,完美兼容所有的图片加载库

2、使用三方图片加载框架,不需要再让 UI 切各种圆角、圆形图或其他图形的 placeholder、error 资源图

3、矩形图片支持四个角独立设置角度值

4、完美兼容所有的图片加载库,支持定义任意图形,只有你想不到没有它做不到

5、不挑显示控件,任何View都可以,只要支持 Drawable 就可以

第一步、引入本库

dependencies {
    //必选项
    implementation 'io.github.FlyJingFish:GraphicsDrawable:1.0.3'
    //可选项,如果您使用 Glide 则使用这个
    implementation 'io.github.FlyJingFish:GraphicsDrawableGlideLib:1.0.3'
    //可选项,如果您使用 Coil 则使用这个
    implementation 'io.github.FlyJingFish:GraphicsDrawableCoilLib:1.0.3'
}

第二步、使用说明

一、GraphicsDrawable 使用说明

方法名 说明
setDrawable 设置绘制的图片
setCustomDrawable 设置自定义的显示形状
setBackgroundMode 设置背景模式
setScaleType 设置自定义 ScaleType 的类型
setShapeType 设置显示的形状
setRadius 设置矩形图的圆角值
setRelativeRadius 设置矩形图的圆角值(适配 Rtl)
setUseViewPadding 设置是否适应View的padding
  • 四个角相等的矩形圆角图
val graphicsDrawable = GraphicsDrawable(view)
graphicsDrawable.setShapeType(GraphicsDrawable.ShapeType.RECTANGLE)
graphicsDrawable.setRadius(20.dp)
  • 四个角不同的矩形圆角图
val graphicsDrawable = GraphicsDrawable(view)
graphicsDrawable.setShapeType(GraphicsDrawable.ShapeType.RECTANGLE)
graphicsDrawable.setRelativeRadius(10.dp,20.dp,30.dp,40.dp)
  • 圆形图
val graphicsDrawable = GraphicsDrawable(view)
graphicsDrawable.setShapeType(GraphicsDrawable.ShapeType.OVAL)
  • 自定义图形
val graphicsDrawable = GraphicsDrawable(view)
graphicsDrawable.setShapeType(GraphicsDrawable.ShapeType.CUSTOM)
graphicsDrawable.setCustomDrawable(R.drawable.ic_vector_flower)

💡💡💡图形资源设置提示

setCustomDrawable 就是让UI提前将图形导出的图片资源,可以是shape,可以是vector,可以是png图片,但是强烈建议使用shape或vector矢量图形效果更佳

如果使用是png或svg资源可以将其转化为vector,详情可以看我的博客:博客使用说明

  • 将上述配置好的 GraphicsDrawable 设置给 View
//设置实际想要显示的Drawable
graphicsDrawable.setDrawable(d)
//给 ImageView 设置 GraphicsDrawable 即可显示
view.setImageDrawable(graphicsDrawable)
//给 view 设置背景
view.setBackground(graphicsDrawable)

二、Glide 使用

  • ImageView 的使用,以下例子默认跟随 ImageView 的 ScaleType 显示
val pic1Drawable = GraphicsDrawable(view)
pic1Drawable.setShapeType(GraphicsDrawable.ShapeType.RECTANGLE)
pic1Drawable.setRadius(20.dp)
Glide
    .with(view)
    .load(url)
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .into(GlideGraphicsImageViewTarget(pic1Drawable))
  • View 设置 背景
val pic1Drawable = GraphicsDrawable(view)
pic1Drawable.setShapeType(GraphicsDrawable.ShapeType.RECTANGLE)
pic1Drawable.setRadius(20.dp)

Glide
    .with(view)
    .load(url)
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .into(GlideGraphicsViewBackgroundTarget(pic1Drawable))

三、Coil 使用

  • ImageView 的使用,以下例子默认跟随 ImageView 的 ScaleType 显示
val pic1Drawable = GraphicsDrawable(view)
pic1Drawable.setShapeType(GraphicsDrawable.ShapeType.RECTANGLE)
pic1Drawable.setRadius(20.dp)

val imageLoader = Coil.imageLoader(context)
val request = ImageRequest.Builder(context)
    .data(url)
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .target(CoilGraphicsImageViewTarget(pic1Drawable))//或 setGraphicsImageViewDrawable(pic1Drawable)
    .build()
    
imageLoader.enqueue(request)

// 或者用 Coil 里 ImageView 的拓展函数

imageView.load(url){
    placeholder(R.drawable.placeholder)
    error(R.drawable.error)
    setGraphicsImageViewDrawable(pic1Drawable)
}
  • View 设置 背景
val pic1Drawable = GraphicsDrawable(view)
pic1Drawable.setShapeType(GraphicsDrawable.ShapeType.RECTANGLE)
pic1Drawable.setRadius(20.dp)

val imageLoader = Coil.imageLoader(context)
val request = ImageRequest.Builder(context)
    .data(url)
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .target(CoilGraphicsViewBackgroundTarget(pic1Drawable))//或 setGraphicsViewBackground(pic1Drawable)
    .build()
imageLoader.enqueue(request)

四、番外:使用 svg 资源图作为自定义图形

如果想直接使用svg格式图可以这样做(不建议这样做,因为 svg 图可以直接转化为 vector 图,点此查看转化说明

引用三方解析包

dependencies {
    implementation 'com.caverock:androidsvg-aar:1.4'
}

新增如下两个类

public class SvgDecoder implements ResourceDecoder<InputStream, SVG> {

    @Override
    public boolean handles(@NonNull InputStream source, @NonNull Options options) {
        // TODO: Can we tell?
        return true;
    }

    public Resource<SVG> decode(
            @NonNull InputStream source, int width, int height, @NonNull Options options)
            throws IOException {
        try {
            SVG svg = SVG.getFromInputStream(source);
            if (width != SIZE_ORIGINAL) {
                svg.setDocumentWidth(width);
            }
            if (height != SIZE_ORIGINAL) {
                svg.setDocumentHeight(height);
            }
            return new SimpleResource<>(svg);
        } catch (SVGParseException ex) {
            throw new IOException("Cannot load SVG from stream", ex);
        }
    }
}
public class SvgDrawableTranscoder implements ResourceTranscoder<SVG, PictureDrawable> {
    @Nullable
    @Override
    public Resource<PictureDrawable> transcode(
            @NonNull Resource<SVG> toTranscode, @NonNull Options options) {
        SVG svg = toTranscode.get();
        Picture picture = svg.renderToPicture();
        PictureDrawable drawable = new PictureDrawable(picture);
        return new SimpleResource<>(drawable);
    }
}

新增glide配置

MyAppGlideModule

@GlideModule
public class MyAppGlideModule extends AppGlideModule {

    @Override
    public void registerComponents(
            @NonNull Context context, @NonNull Glide glide, @NonNull Registry registry) {
        registry
                .register(SVG.class, PictureDrawable.class, new SvgDrawableTranscoder())
                .append(InputStream.class, SVG.class, new SvgDecoder());
    }

    @Override
    public boolean isManifestParsingEnabled() {
        return false;
    }
}

开始使用svg

  • 本地资源
val pic4Drawable = GraphicsDrawable(binding.iv4)
pic4Drawable.setShapeType(GraphicsDrawable.ShapeType.CUSTOM)

val uri = Uri.parse(
    ContentResolver.SCHEME_ANDROID_RESOURCE
            + "://"
            + packageName
            + "/"
            + R.raw.dog_heart
)
Glide.with(this)
    .`as`(PictureDrawable::class.java)
    .transition(DrawableTransitionOptions.withCrossFade())
    .load(uri).into(object : CustomTarget<PictureDrawable?>() {

        override fun onResourceReady(
            resource: PictureDrawable,
            transition: Transition<in PictureDrawable?>?
        ) {
            pic4Drawable.setCustomDrawable(resource)
        }

        override fun onLoadCleared(placeholder: Drawable?) {}
    })
  • 网络资源
val pic4Drawable = GraphicsDrawable(binding.iv4)
pic4Drawable.setShapeType(GraphicsDrawable.ShapeType.CUSTOM)

val uri = Uri.parse("http://www.clker.com/cliparts/u/Z/2/b/a/6/android-toy-h.svg")
Glide.with(this)
    .`as`(PictureDrawable::class.java)
    .transition(DrawableTransitionOptions.withCrossFade())
    .load(uri).into(object : CustomTarget<PictureDrawable?>() {

        override fun onResourceReady(
            resource: PictureDrawable,
            transition: Transition<in PictureDrawable?>?
        ) {
            pic4Drawable.setCustomDrawable(resource)
        }

        override fun onLoadCleared(placeholder: Drawable?) {}
    })

最后推荐我写的另外一些库

About

🔥🔥🔥万能的Drawable,支持圆图、圆角图以及自定义图形;不再需要学习各个图片加载框架各种设置圆角,圆形图,甚至任何的特殊图形也无缝支持;不需要再让 UI 切各种圆角、圆形图或其他图形的 placeholder、error 资源图

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published