#2020征文-手机# HarmonyOS App开发造轮子--自定义圆形图片组件 原创 精华
一、背景
在采用Java配合xml布局编写鸿蒙app页面的时候,发现sdk自带的Image组件并不能将图片设置成圆形,反复了翻阅了官方API手册(主要查阅了Compont和Image相关的API),起初发现了一个setCornerRadius方法,于是想着将图片宽度和高度设置为一样,然后调用该方法将radios设置为宽度或者高度的一半,以为可以实现圆形图片的效果,后来发现不行。于是乎想着能不能通过继承原有的Image自己来动手重新自定义一个支持圆形的图片组件。
二、思路:
1、对比之前自己在其他程序开发中自定义组件的思路,首先寻找父组件Image和Component相关的Api,看看是否具备OnDraw方法。
2、了解Canvas相关Api操作,特别是涉及到位图的操作。
通过翻阅大量资料,发现了两个关键的api,分别是Component的addDrawTask方法和其内部静态接口DrawTask
三、自定义组件模块
1、新建一个工程之后,创建一个独立的Java FA模块,然后删除掉里面所有布局以及自动生成的java代码,然后自己创建一个class继承ImageView
2、写一个类继承ImageView,在其中暴露出public的设置圆形图片的api方法以供后面调用;
3、在原有的Image组件获取到位图之后,利用该位图数据利用addDrawTask方法配合Canvas进行位图输出形状的重新绘制,这里需要使用Canvas的一个
关键api方法drawPixelMapHolderRoundRectShape;
4、注意,为了让Canvas最后输出的图片为圆形,需要将图片在布局中的宽度和高度设置成一样,否则输出的为圆角矩形或者椭圆形。
最后封装后的详细代码如下:
5、修改config.json文件,代码如下
这样该模块就可以导出后续给其他所有工程引用了,后面还可以编译之后发布到gradle上直接通过添加依赖来进行使用(这个是后话),下面我们先通过本地依赖导入的方式来调用这个自定义组件模块吧。
四、其他工程调用该自定义组件并测试效果
1、再来新建一个工程,然后将之前的模块导入到新建的工程中(DevEco暂时不支持自动导入外部模块的操作,需要手动导入操作,请关注我的另外一篇博客)
2、在gradle中引用导入的模块的组件,代码如下:
3、在布局中引用自定义的圆形图片,代码如下:
4、在Java代码中进行调用,代码如下:
5、开启手机模拟器进行测试,效果如下
征文大赛正在火热进行中,楼主这么优秀的文章真的不考虑多写几篇文章投递到征文吗?
例如这篇在标题开头添加“#2020征文-其它“,
再找到相应的专栏位置投稿,
就可以参加比赛啦!
详细步骤可以点击链接https://harmonyos.51cto.com/posts/1940进行了解
用更多的文章来赢取更多的奖励和人气吧!期待楼主后续的活跃表现。
DevEco暂时不支持自动导入外部模块的操作,太那啥了
👍👍👍
自定义属性怎么弄?
专门针对你的问题写了篇博客,目前网上确实没有这块的博客,所以自己就此原创了一篇
https://harmonyos.51cto.com/posts/3334
学习了
这个帖子又上来了
赞,学习了