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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xwdoor/article/details/80507550

豪言壮志

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

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

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

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

确定效果图

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

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

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

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

给大家贴上目标效果图:

editMask

哦哦,你要微信的效果是吧,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 available
    ankoAppCompat = "org.jetbrains.anko:anko-appcompat-v7:$anko_version"
    ankoListeners = "org.jetbrains.anko:anko-sdk25-listeners:$anko_version"
}

// basemodule.gradle
dependencies {
     // 最新的 api 引用方式
    api ankoSdk
    api ankoAppCompat
    api ankoListeners
}
在 `MainActivity` 中创建布局:
relativeLayout {
    editToolBar = linearLayout {
        button("编辑")
    }

    // todo: 之后采用 constraintLayout
    editMask = verticalLayout {
        relativeLayout {
            textView("取消").lparams(wrapContent, wrapContent) {
                alignParentLeft()
            }

            textView("完成").lparams {
                alignParentRight()
            }
        }

        editView = editText {
            padding = 15
            gravity = Gravity.TOP
            backgroundColor = 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: 之后采用 constraintLayout
    editMask = verticalLayout {
        relativeLayout {
            textView("取消").lparams(wrapContent, wrapContent) {
                alignParentLeft()
            }.onClick { closeEditMask() }

            textView("完成").lparams {
                alignParentRight()
            }.onClick { closeEditMask() }
        }

        editView = editText {
            padding = 15
            gravity = Gravity.TOP
            backgroundColor = 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 Int
                    editMask.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 Int
                    editMask.layoutParams = editMask.layoutParams.apply {
                        height = h
                    }
                }
            }
}

结束

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

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

文章源码:GitHub: Ethoshttps://github.com/xwdoor/Ethos),欢迎大家给颗星星,哈哈。

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

微信公众号

展开阅读全文

没有更多推荐了,返回首页