[Android UI] 自定义 View 练习——TaggedSeekBar

最新推荐文章于 2022-11-12 12:27:40 发布

weixin_33814685

最新推荐文章于 2022-11-12 12:27:40 发布

阅读量130

点赞数

文章标签： ui ffmpeg 移动开发

原文链接：https://juejin.im/post/5cdd40f4f265da039a3d964d

版权

序

一直没有自己梳理一遍 View 体系的知识，以前写自定义 View 一涉及细节就全靠 Google。最近在 deepin 下搞了一份 AOSP 项目，准备从源码中再学习一遍自定义 View 的写法。在开始之前，先写了一个简单的自定义 View，用来复习自定义 View 的流程。

TaggedSeekBar 在 SeekBar 的基础上加了一个显示进度值的标签，也可以当做 ProgressBar 使用，最终效果如下(压缩的比较惨，重在领会精神)：

知识点

TaggedSeekBar 直接继承自 View，虽然比较简陋，但确实包含了自定义 View 的大部分知识点。比如：

View 的坐标体系
Paint 基本属性
Canvas 基本绘制函数
onMeasure 测量自身
onTouchEvent 处理用户交互

详情就不展开说了，有很多大佬都专门写过的。

流程

写自定义 View 时，最重要的第一步是「拆」。良好的拆解可以使 xml 中的参数更易理解，也可以简化 onDraw 中的绘制坐标计算过程。

我把 TaggedSeekBar 拆分成三部分：progress bar，thumb 和 tag（tag 分为箭头和本体），详情如图（看我充满灵魂的手绘）：

拆分以满足需求为主，尽量保证良好的可扩展性。拆完之后就可以开始编码了

1. xml属性配置

当多个自定义 attr 的 name 冲突时，可以将 attr 的定义提取到外层，结构是这样的：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="progressWidth" format="dimension|reference"/>
    <declare-styleable name="TaggedSeekBar">
        <attr name="progressWidth"/>
    </declare-styleable>
    <declare-styleable name="XXProgressBar">
        <attr name="progressWidth"/>
    </declare-styleable>
</resources>
复制代码

2. 读取属性，配置默认值

xml 配置参数的缺点是无法限制属性关联，每个属性都可能没写，所以获取属性的时候都需要填入默认值。

设置的默认值需要考虑到 View 元素相关性，尽量少用固定值，这样能尽可能降低上手难度。

3. 测量和定位

View 的 layout 方式符合我们的需求，不需要重写 onLayout。onMeasure 需要重写来支持 wrap_content。进度条是水平方向的，所以 width 能多大就取多大，height 可以 wrap_content，最小高度只要显示完整内容就好。

//当height的测量模式是 AT_MOST 时，
//height = tagHeight+ThumbHeight+indicatorHeight

height = paddingBottom + paddingTop + thumbRadius * 2 + thumbStrokeWidth * 2 + indicatorHeight + tagHeight).toInt()
复制代码