模仿微信图片编辑器--动画实现向上弹出文字编辑框（遮罩）界面

豪言壮志

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

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

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

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

确定效果图

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

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

什么，你没有用过？呵呵，（尴尬），那就只是你一个而已。。。对，你应该与时俱进一下。

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

给大家贴上目标效果图：

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

开始实现布局界面

好，开始撸代码了。

创建工程，引用最新的 Kotlin 库：

// dependency.gradle
def anko_version = "0.10.5"ext {ankoSdk = "org.jetbrains.anko:anko-sdk25:$anko_version" // sdk15, sdk19, sdk21, sdk23 are also availableankoAppCompat = "org.jetbrains.anko:anko-appcompat-v7:$anko_version"ankoListeners = "org.jetbrains.anko:anko-sdk25-listeners:$anko_version"
}// basemodule.gradle
dependencies {// 最新的 api 引用方式api ankoSdkapi ankoAppCompatapi ankoListeners
}

在 `MainActivity` 中创建布局：

relativeLayout {editToolBar = linearLayout {button("编辑")}// todo: 之后采用 constraintLayouteditMask = verticalLayout {relativeLayout {textView("取消").lparams(wrapContent, wrapContent) {alignParentLeft()}textView("完成").lparams {alignParentRight()}}editView = editText {padding = 15gravity = Gravity.TOPbackgroundColor = Color.GREEN// 刚进入界面时不获取焦点isFocusable = false}.lparams(matchParent, 0, 1f)// scrollView 是为 view 漂浮在软键盘上做准备scrollView {linearLayout {textView("tool bar")}}}.lparams(matchParent, matchParent) {alignParentBottom()}
}

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

向上弹出界面

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

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

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

onClick {ValueAnimator.ofInt(0, rootView.height) // 设置遮罩的高度变化是从 0 到 整个界面的高度.setDuration(100) // 动画时长：100ms.apply {// 添加监听，动画中数值的每一次变化，都是遮罩界面高度的变化addUpdateListener {editMask.layoutParams = editMask.layoutParams.apply {// 遮罩高度动态变化，值为每次动画改变后的值height = it.animatedValue as Int}}}.start() // 开始动画
}

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

细节优化

动画启动时，需要隐藏「编辑」按钮；

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

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

最终界面布局：

relativeLayout {editToolBar = linearLayout {button("编辑").onClick { openEditMask()}}.lparams(matchParent, wrapContent) {alignParentBottom()}// todo: 之后采用 constraintLayouteditMask = verticalLayout {relativeLayout {textView("取消").lparams(wrapContent, wrapContent) {alignParentLeft()}.onClick { closeEditMask() }textView("完成").lparams {alignParentRight()}.onClick { closeEditMask() }}editView = editText {padding = 15gravity = Gravity.TOPbackgroundColor = Color.GREEN// 刚进入界面时不获取焦点isFocusable = false}.lparams(matchParent, 0, 1f)// scrollView 是为 view 漂浮在软键盘上做准备scrollView {linearLayout {textView("tool bar")}}}.lparams(matchParent, 0) {alignParentBottom()}
}

提取出来的方法：

// 关闭遮罩
private fun openEditMask() {openAnimator.start()editToolBar.visibility = View.GONE
}// 关闭遮罩
private fun closeEditMask() {closeAnimator.apply {addListener(object : AnimatorListenerAdapter() {override fun onAnimationEnd(animation: Animator?) {editToolBar.visibility = View.VISIBLE}})}.start()
}// 呈现动画
private val openAnimator by lazy {ValueAnimator.ofInt(0, window.decorView.height).setDuration(100).apply {addUpdateListener {val h = it.animatedValue as InteditMask.layoutParams = editMask.layoutParams.apply {height = h}}}
}// 关闭动画
private val closeAnimator by lazy {ValueAnimator.ofInt(window.decorView.height, 0).setDuration(100).apply {addUpdateListener {val h = it.animatedValue as InteditMask.layoutParams = editMask.layoutParams.apply {height = h}}}
}

结束

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

如果文章对你有帮助的话，欢迎关注公众号：goodKotlin，你的关注，就是最大的支持。

文章源码：GitHub: Ethos（https://github.com/xwdoor/Ethos），欢迎大家给颗星星，哈哈。

推荐阅读：
1. 图片编辑器–向上弹出文字编辑框（遮罩）界面
2. 图片编辑器–视图布局 View 悬浮在软键盘上