Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

License

NotificationsYou must be signed in to change notification settings

FlyJingFish/GraphicsDrawable

Repository files navigation

Maven centralGitHub starsGitHub forksGitHub issuesGitHub 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
//设置实际想要显示的DrawablegraphicsDrawable.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'}

新增如下两个类

publicclassSvgDecoderimplementsResourceDecoder<InputStream,SVG> {@Overridepublicbooleanhandles(@NonNullInputStreamsource,@NonNullOptionsoptions) {// TODO: Can we tell?returntrue;    }publicResource<SVG>decode(@NonNullInputStreamsource,intwidth,intheight,@NonNullOptionsoptions)throwsIOException {try {SVGsvg =SVG.getFromInputStream(source);if (width !=SIZE_ORIGINAL) {svg.setDocumentWidth(width);            }if (height !=SIZE_ORIGINAL) {svg.setDocumentHeight(height);            }returnnewSimpleResource<>(svg);        }catch (SVGParseExceptionex) {thrownewIOException("Cannot load SVG from stream",ex);        }    }}
publicclassSvgDrawableTranscoderimplementsResourceTranscoder<SVG,PictureDrawable> {@Nullable@OverridepublicResource<PictureDrawable>transcode(@NonNullResource<SVG>toTranscode,@NonNullOptionsoptions) {SVGsvg =toTranscode.get();Picturepicture =svg.renderToPicture();PictureDrawabledrawable =newPictureDrawable(picture);returnnewSimpleResource<>(drawable);    }}

新增glide配置

MyAppGlideModule

@GlideModulepublicclassMyAppGlideModuleextendsAppGlideModule {@OverridepublicvoidregisterComponents(@NonNullContextcontext,@NonNullGlideglide,@NonNullRegistryregistry) {registry                .register(SVG.class,PictureDrawable.class,newSvgDrawableTranscoder())                .append(InputStream.class,SVG.class,newSvgDecoder());    }@OverridepublicbooleanisManifestParsingEnabled() {returnfalse;    }}

开始使用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?>() {overridefunonResourceReady(resource:PictureDrawable,transition:Transition<inPictureDrawable?>?        ) {            pic4Drawable.setCustomDrawable(resource)        }overridefunonLoadCleared(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?>() {overridefunonResourceReady(resource:PictureDrawable,transition:Transition<inPictureDrawable?>?        ) {            pic4Drawable.setCustomDrawable(resource)        }overridefunonLoadCleared(placeholder:Drawable?) {}    })

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

[8]ページ先頭

©2009-2026 Movatter.jp