该网站已经迁移到:blog.xwdoor.net

模仿微信图片编辑器–向上弹出文字编辑框(遮罩)界面

android xwdoor 183℃ 0评论

微信公众号:XWdoor
有问题或疑问请在微信公众号留言

豪言壮志

今天天气不错,挺风和日丽的,出去逛逛街,溜溜弯,拍上一张美图,配上高逼格的格言警句,发到朋友圈,一片鸡汤文就此诞生。。。

最近会有事没事会在朋友圈发动态:写一句格言警句,配上一张意境美图。因为懒,我总是在想,图片能够自动随机网上选择该多好,能不能直接将文字写在图片上,能不能一键分享到朋友圈,再配上二维码,那感觉,妙。。。

花半天时间找了一下,目标就它了:微信的「图片编辑器」,然后自己配上图片的素材,不就能满足上述条件嘛。

可是图片素材只能是手机相册,万一以后用完了怎么办,而且没有二维码。微信估计不干了:你行你上啊。对啊,那就自己干。

确定效果图

先不说马赛克、涂鸦、裁剪等功能,我现在需要的是文字编辑的功能,所以就先搞一搞这个。

微信的效果我就不贴出来了,大家估计都体验过吧,哈哈。

什么,你没有用过?呵呵,(尴尬),那就只是你一个而已。。。对,你应该与时俱进一下。

纳尼,你们都没有用过?!好吧,你们怎么看到我的文章的,难道不是搜索微信图片编辑器过来的吗~

给大家贴上目标效果图:

editMask

哦哦,你要微信的效果是吧,OK,拿出你的手机,给我发张图片就可以啦。

开始实现布局界面

好,开始撸代码了。

创建工程,引用最新的 Kotlin 库:

MainActivity 中创建布局:

额,界面效果丑是丑了点,但咱看中的是实力,对吧。况且,以后咱可以美颜呀

向上弹出界面

网上通用的几个解决方案:Dialog,PopupWindow,Activity 等都可以实现相同的效果。

但是我觉得比较重,再加上要写比较多的代码(这是主要原因),所以我采用动画的方式实现这个效果。

给「编辑」按钮添加点击事件,开启动画:

好啦,基本上完事大吉啦,聪明如你,肯定知道这个动画什么意思吧。如果你第一次接触,就仔细看代码,有注释哦。

细节优化

动画启动时,需要隐藏「编辑」按钮;

点击「取消」或「完成」时,隐藏「编辑界面」,显示「编辑」按钮;

动画不需要每次都创建等等。

最终界面布局:

提取出来的方法:

结束

这个小功能算是搞完了,感觉好简单啊,真不知道为什么我弄了一天才写出来,哎,看来我不是天才,你才是啊。

下集预告:软键盘的显示与隐藏,视图悬浮在软键盘上。非常简单。

转载请注明:xwdoor » 模仿微信图片编辑器–向上弹出文字编辑框(遮罩)界面

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址