自定义 View 尝试 : 简单动画的下拉选项 View(Kot

起因

作为 Android 开发人员,自定义 View 一定是一个不能绕过的问题,我却对自定义 View 一直保持着一种敬而远之的态度,经常会有意避免去使用,主要的原因就是我对控件的及布局的美感基本为 0 ,做出来的控件经常都是功能能实现但是美观程度简直不忍直视.

不过最近我意识到逃避是解决不了问题的,因此去了一些的关于布局设计的网站学习其他人分享出来的一些设计(感谢分享),也确实看到了相当多的好设计,看得多了自然想自己动手制作一个,这篇文章则是一个学习记录.

成果

设计来源

前两天在看一些布局设计时,突然看到了这么一个控件,感觉相当不错并且动画效果也相对简单就直接着手尝试制作了.

设计来源:https://www.uplabs.com/posts/a-simple-dropdown

分析

当打算制作这个控件的时候,第一步当然是分析这个控件该怎么做,动画效果都有那些,从何处着手.
首先这个控件分为两个部分,上半部分也就是标题部分是一个线性布局,而下半部分则是一个 PopupWindow (我是这么理解的)
而动画效果就有两处,一处是标题部分后面的三角标识的旋转动画,另一部分则是 PopupWindow 的弹出与消失动画

部分代码展示

当然这个控件只是一个相当简单的小控件,其中并没有什么技术难度,这里也就不详细记录开发流程,而是将动画呈现代码贴出来,之前一直头疼写动画效果,其实真正写起来还是蛮有趣的.

PS:以下均为 Kotlin 代码

    /**
     * 开始执行菜单打开动画
     */
    private fun startOpenMenuAnimator() {
        //声明属性动画
        //属性名为 rotation (旋转)
        //属性值变化 0f -> -230f -> -180f
        //先从 0 度旋转到 -230 度再旋转回 -180 度实现一个小的回弹效果
        val oa = ObjectAnimator.ofFloat(mRootView.menu_img_up_down,
                "rotation", 0f, -230f, -180f)
        oa.duration = 300
        oa.start()
    }

    /**
     * 开始执行菜单关闭动画
     */
    private fun startCloseMenuAnimator() {
        //声明属性动画
        //属性名为 rotation (旋转)
        //属性值变化 -180f -> 50f -> 0f
        //先从 -180 度旋转到 50 度再旋转到 0 度实现一个小的回弹效果
        val oa = ObjectAnimator.ofFloat(mRootView.menu_img_up_down,
                "rotation", -180f, 50f, 0f)
        oa.duration = 300
        oa.start()
    }

全部代码可见 : https://gitee.com/JinSL/SimpleDropDownMenu

问题

做这个控件时也确实遇到了点问题,暂时还没有什么解决方法,就是 PopupWindow 的阴影问题,可以看到设计中下拉选项的弹出窗是有个圆角浮动效果的,本来我打算将 PopupWindow 也设置成卡片布局(和上半部分标题部分一样),但是真的动手的时候发现在 PopupWindow 显示的时候,卡片布局的圆角效果虽然有效但是阴影效果并没有起到作用,这个问题我十分苦恼,所以找到了一个第三方的阴影工具来实现,但是我觉得应该有更好的解决办法(希望有大神能提出解决办法)

总结

开发程序就是一个提出问题并且解决问题的过程,而既然选择了程序员这份工作就要享受每次解决问题带来的那种喜悦感,永远不要恐惧问题.

• 以上项目仅为个人学习记录,如果有问题请各位指正,不胜感激
• 感谢所有分享者

a-simple-dropdown: https://www.uplabs.com/posts/a-simple-dropdown
CrazyShadow: https://github.com/Hitomis/CrazyShadow