自定义UI 基础知识

Posted Notzuonotdied

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义UI 基础知识相关的知识，希望对你有一定的参考价值。

系列文章目录

HenCode报名链接：hencoder.ke.qq.com

  1. 自定义UI 基础知识
  2. 自定义UI 绘制饼图
  3. 自定义UI 圆形头像
  4. 自定义UI 自制表盘
  5. 自定义UI 简易图文混排
  6. 自定义UI 使用Camera做三维变换
  7. 自定义UI 属性动画
  8. 自定义UI 自定义布局

文章目录

前言

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

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

自定义UI

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

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

  • 完全自定义组件；
  • 整合包含一组现有控件的可再用组件，也称为复合组件。
    • 复合组件的好处：可以非常快速地构建任意复杂化的复合视图，并像使用单个组件一样重复使用它们。
  • 修改现有 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 绘制基础 - 插播四： 抗锯齿」的内容。

附录

以上是关于自定义UI 基础知识的主要内容，如果未能解决你的问题，请参考以下文章

自定义UI 基础知识

一起Talk Android吧（第五百回：自定义View总结与忠告)

自定义 UI 视图更改帧大小

自定义UI 自定义布局

自定义UI 自定义布局

自定义UI 自定义布局