自定义UI 基础知识

Posted 2021-07-14 Notzuonotdied

系列文章目录

1. 自定义UI 基础知识
2. 自定义UI 绘制饼图

文章目录

• 系列文章目录
• 前言
• 自定义UI
• • 自定义视图组件
• 补充知识点
• • Paint
  • • 抗锯齿
• 附录

---

前言

最近在学习android自定义UI。在网上搜索了一番关于自定义UI的内容，发现目前反馈最好的应该是扔物线的自定义UI教程（腾讯课堂的上课链接）。在万能的Github交友社区找到了扔物线的HenCoderPlus课程的源码。这系列的文章主要是基于扔物线的源码来分析学习。

本篇文章不详细介绍一些官方已经有详细讲解的内容，仅仅是作为官方文档外补充的笔记^_^。如果有必要，将会将官方文档的链接贴出来，方便各位看官享用。

---

自定义UI

本部分内容参考整理自 Android Developer：自定义视图组件

直接看官方文档的定义：自定义UI就是通过创建自己的 View 子类，您可以精确控制屏幕元素的外观和功能。自定义UI可以根据自定义的程度分为三种：

• 完全自定义组件；
  • 完全自定义组件需要扩展 onDraw() 和 onMeasure()。
• 整合包含一组现有控件的可再用组件，也称为复合组件。
  • 复合组件的好处：可以非常快速地构建任意复杂化的复合视图，并像使用单个组件一样重复使用它们。
• 修改现有 View 类型
  • 如果已经有一个组件非常契合您的需要，则只需扩展该组件并只替换您希望更改的行为即可。

自定义视图组件

这一块直接看Android Developer的官方文章，就可以熟悉大概的流程。

1. 概览
2. 创建自定义视图类
3. 实现自定义绘图
4. 使视图可交互
5. 优化视图：以下内容摘录自本文章。
   • 不要在onDraw()方法中分配对象。因为分配可能会引起垃圾回收，从而造成卡顿。
   • 确保尽可能降低调用onDraw()的频率。对onDraw()的大多数调用是由对invalidate()的调用引起的，因此请避免对invalidate()的不必要调用。
   • 尽可能保持较浅的视图层次结构。Android 界面系统都需要遍历整个视图层次结构，以确定每个视图所需的尺寸。如果发现有冲突的尺寸，可能需要多次遍历该层次结构。

补充知识点

Paint

官方类说明文档：Paint

抗锯齿

在创建Paint的时候，默认需要加上ANTI_ALIAS_FLAG来开启反锯齿的功能。该功能可以主动在绘制时，平滑处理图像的边缘，让图像显示效果更加圆润。对比效果可见下图（左图未开抗锯齿，右图主动添加了抗锯齿）。如果看不清晰，可以放大图片查看^_^。

附上演示的代码：

public class PieChart extends View {

    private static final int RADIUS = (int) Utils.dp2px(150);
    // 抗锯齿（可以有效的解决毛边的问题）
    // Paint paint = new Paint(); // 图一配置：默认
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 图二配置：抗锯齿

    public PieChart(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int dot = getWidth() / 2;
        canvas.drawCircle(dot, dot, RADIUS, paint);
    }
}

如果需要更加详细的说明，可以查看：「HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础 - 插播四： 抗锯齿」的内容。

附录

• Android Developer：自定义视图组件
• 扔物线官网：扔物线
  • 很感谢大佬提供的教程和源码，才能好好系统学习下自定义UI的内容。
  • rengwuxian/HenCoderPlus
  • rengwuxian/HenCoderPlus3