三微授渔如何使用Kotlin构建Android旋转旋钮以帮助儿子练习钢琴
本文插图
当我儿子的钢琴老师告诉他应该使用节拍器练习计时时 ， 我借此机会使用了Kotlin 。 我决定使用编程语言和Android的生态系统 ， 以便构建Metronome应用程序 。
我最初的实现使用SeekBar来控制BPM（每分钟节拍数）-节拍器滴答声的速率 。 但是 ， 随着项目的进行 ， 我想使其像一个物理数字单元 ， 就像现实世界中许多音乐家所使用的那样 。 物理单位没有“ SeekBar视图” ， 我想模拟实际单位可能具有的旋钮 。 旋钮是非常有用的UI控件 。 它们很像滑块或SeekBar ， 可在许多情况下使用 。 以下是它们的一些优点：他们在您的应用中消耗的很少 ， 它们可用于控制值的连续或离散范围 ， 用户可以立即从实际应用程序中识别它们 ， 它们不是标准的Android控件 ， 因此可为您的应用赋予独特的“自定义”感觉 ， 尽管存在一些适用于Android的开放源代码旋钮库 ， 但我在任何一个库中都找不到我想要的东西 。， 对于我的适度需求 ， 许多工具都有些过分了 ， 例如设置背景图像或处理两个或多个模式操作的水龙头等 。 有些工具没有我想适合我的项目的可定制性 ， 而是带有自己的旋钮图像 。 还有一些假设值或位置的离散范围 。 而且其中许多似乎比需要的要复杂得多 。 因此 ， 我决定自己设计一个 ， 这就变成了一个有趣的小项目了 。 在本文中 ， 我将讨论如何构建它 。 下面这个就是成品 。
本文插图
节拍器应用程序及其旋钮
因此 ， 让我们看看如何创建一个旋钮 。
设计旋钮
第一步是为旋钮本身创建图形 。 我不是一个设计师 ， 但是我想到在旋钮控件中营造“深度”和运动感的关键是使用偏心的径向渐变 。 这将使我产生表面凹陷和光反射的错觉 。 我使用Sketch绘制了旋钮 ， 然后将其导出到svg 。 然后 ， 将其作为可绘制对象导入Android Studio 。
本文插图
在xml中创建视图
创建视图的第一步是在res / layout文件夹中创建一个xml布局文件 。 可以使用代码完全创建视图 ， 但是应该使用xml创建Android中良好的可重用视图 。
注意 标记-我们将使用它 ， 因为我们将扩展现有的Android Layout类 ， 并且此布局将是该布局的内部结构 。 我们将对旋钮使用ImageView ， 并随着用户移动它进行旋转 。
本文插图
为了使该旋钮可通过xml配置 ， 我们将为该旋钮将返回的值的范围以及用于可视化的drawable创建属性 。 我们将在res / values下创建一个attrs.xml文件 。
本文插图
接下来 ， 创建一个新的Kotlin类文件RotaryKnobView ， 该文件扩展了RelativeLayout并实现了接口GestureDetector.OnGestureListener 。
我们将使用RelativeLayout作为控件的父容器 ， 并实现OnGestureListener来处理旋钮的移动手势 。 接下来 ， 我们将初始化一些默认值并定义类成员 。
本文插图
关于分频器变量的注释-我希望旋钮具有开始和结束位置 ， 而不是能够无限旋转 ， 就像立体声系统上的音量旋钮一样 。 我将起点和终点分别设置为-150度和150度 。 因此 ， 旋钮的有效运动仅为300度 。
我们将使用除法器来分配希望旋钮在这些可用的300度上返回的值的范围-以便我们可以根据旋钮的位置角度来计算实际值 。
推荐阅读
- 传奇英雄▲荒野乱斗：最值得培养的传奇英雄，微氪玩家如何选择？
- 【】财鑫闻丨两市成交量连续2日破万亿，牛市真的来了？下一步如何擒“牛”？
- 精选泛科技|结果如何？，一加8续航遭质疑：上半年最全机型横评出炉
- 健康干货桶|重症肝病患者可否活动？如何掌握？
- 精选泛科技一加8续航遭质疑：上半年最全机型横评出炉，结果如何？
- 「孙权」孙策逝世后，弟弟孙权是如何对待20岁嫂子大桥的？说出来别不信
- 科学家■如果宇宙由奇点大爆炸而来，那么奇点又是如何来的？
- 娱娱乐道|厚嘴唇加大饼脸，网友：她是如何火的？，杨超越大量旧照曝光
- “健康北京”微信公众号|新型冠状病毒肺炎确诊病例如何分型？北京中医医院院长解答
- 央视网|上直播、转内销……外贸企业如何突围？