Android自绘控件要点梳理

最新推荐文章于 2024-07-29 07:41:07 发布
最新推荐文章于 2024-07-29 07:41:07 发布
阅读量1.5k 收藏
点赞数
分类专栏： android 文章标签： android ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csfchh/article/details/121595666
版权

本文所有内容来自网络，通过本人梳理编撰成文。文章仅对知识要点做罗列整理，属于知识大纲，预期读者为具备相关开发经验的研发，不建议初学者阅读。如果需要进一步探究，可以查看参考资料查看原文。

UI基础概念

坐标系

屏幕坐标系

移动设备的坐标系一般定义屏幕的左上角为坐标原点，向右为X轴增大方向，向下为Y轴增大方向。全局偏移量是指控件相对屏幕坐标系原点的偏移量。控件的屏幕全局偏移量可以通过以下方式获取：

  1. view.getLocationOnScreen(int[] location)获取相对屏幕的全局坐标
  2. view.getLocationInWindow(int[] location)获取相对窗口的全局坐标，当窗口与屏幕重合时就等于全局偏移量
  3. view.getGlobalVisibleRect(Rect rect)获取相对屏幕的全局坐标

view.getWindowVisibleDisplayFrame(rect)可获取可见view所在window的全局坐标，比如可以通过rect.top来获取状态栏高度。由于是从WMS获取，涉及IPC，注意性能。

View坐标系

控件的坐标系是相对于父控件而言的，对应局部偏移量。可以通过下述方式获取view的局部偏移量：

  1. 通过view.getLeft()/view.getRight()/view.getTop()/view.getBottom()获取四条边偏移量（float类型），此数值是在布局完成后赋值的
  2. 通过view.getX()/view.getY()获取局部x/y轴偏移量（float类型），这是实际局部偏移量
  3. 通过view.getLocalVisibleRect(Rect rect)获取局部偏移量，与left/top相对应

其中：

x = left + translationX
y = top + translationY

当我们执行view的位置偏移动画时便是通过修改translationX/translationY实现的。

事件坐标系

触摸事件的坐标提供了上述两个坐标系，即一个相对于整个手机屏幕的坐标，另一个相对于当前控件的坐标。

角度deg与弧度rad

  • 大小关系：
    360(deg) = 2π(rad)

  • 增大方向：
    ref: https://www.jianshu.com/p/682d329a4845

颜色

  • 类型
类型枚举存储格式
四通道颜色（32位）ARGB88880x00000000->0xffffffff
三通道颜色（16位）RGB8880x000000->0xffffff
  • 相关API
    • int color =Color.GRAY;
    • int color =Color.argb(127,255,0,0);
    • int color = 0xaaff0000; //0x大小写敏感，其他大小写不敏感
    • int color= Color.parseColor("#ff00ff00");
    • int color = context.getResources().getColor(R.color.mycolor);
    • xml中颜色硬编码：#00ff0000

绘制操作

视图构成

  • Activity：内部有个Window成员，它的实例为PhoneWindow；
  • PhoneWindow：有个内部类是DecorView；
  • DecorView：继承FrameLayout用于存放布局文件，里面有TitleActionBar和setContentView传进去的layout布局文件，其中id=content的就是我们传入的布局视图；

绘制流程

DecorView被加载到Window流程：

  • 从Activity的startActivity开始，最终调用到ActivityThread的handleLaunchActivity方法来创建Activity，首先，会调用performLaunchActivity方法，内部会执行Activity的onCreate方法，从而完成DecorView和Activity的创建。然后，会调用handleResumeActivity，里面首先会调用performResumeActivity去执行Activity的onResume()方法，执行完后会得到一个ActivityClientRecord对象，然后通过r.window.getDecorView()的方式得到DecorView，然后会通过a.getWindowManager()得到WindowManager，最终调用其addView()方法将DecorView加进去。
  • WindowManager的实现类是WindowManagerImpl，它内部会将addView的逻辑委托给WindowManagerGlobal，可见这里使用了接口隔离和委托模式将实现和抽象充分解耦。在WindowManagerGlobal的addView()方法中不仅会将DecorView添加到Window中，同时会创建ViewRootImpl对象，并将ViewRootImpl对象和DecorView通过root.setView()把DecorView加载到Window中。这里的ViewRootImpl是ViewRoot的实现类，是连接WindowManager和DecorView的纽带。View的三大流程均是通过ViewRoot来完成的。

扩展阅读：

measure

MeasureSpec

MeasureSpec表示的是一个32位的整形值，它的高2位表示测量模式SpecMode，低30位表示某种测量模式下的规格大小SpecSize，它有三种测量模式：

  • EXACTLY：精确测量模式，视图宽高指定为match_parent或具体数值时生效，表示父视图已经决定了子视图的精确大小，这种模式下View的测量值就是SpecSize的值。
  • AT_MOST：最大值测量模式，当视图的宽高指定为wrap_content时生效，此时子视图的尺寸可以是不超过父视图允许的最大尺寸的任何尺寸。
  • UNSPECIFIED：不指定测量模式, 父视图没有限制子视图的大小，子视图可以是想要的任何尺寸，通常用于系统内部，应用开发中很少用到。

打包方法为makeMeasureSpec，解包方法为getMode和getSize。

普通View的MeasureSpec的创建规则

layout

未完待续…

LayoutParams

未完待续…

draw

未完待续…

Canvas

未完待续…

Paint

未完待续…

Path

未完待续…

触摸事件

事件分发机制

流程伪代码：

public boolean dispatchTouchEvent(MotionEvent ev) {
    boolean consume = false;
    if (onInterceptTouchEvent(ev)) {
        consume = onTouchEvent(ev);
    } else {
        coonsume = child.dispatchTouchEvent(ev);
    }
    return consume;
}
  • View#dispatchTouchEvent：分发事件的入口方法
    • true表示事件被当前视图消费掉；
    • false表示交给父类的onTouchEvent处理；
    • super.dispatchTouchEvent表示继续分发该事件;
  • ViewGroup#onInterceptTouchEvent：容器决绝是否自己消费还是向下传递
    • true表示拦截这个事件并交由自身的onTouchEvent方法进行消费，比如ScrollView、ListView等支持交互的容器；
    • false表示不拦截需要继续传递给子视图，如LinearLayout、 RelativeLayout等纯布局容器。
    • super.onInterceptTouchEvent(ev)根据子View情况决定：
      • 存在子View且点击到了该子View, 则不拦截继续分发给子View处理, 相当于返回false；
      • 没有子View或有子View但是没有点击中子View(此时ViewGroup 相当于普通View), 则交由该View的onTouchEvent响应，相当于返回true；
  • View#onTouchEvent：消费事件的方法
    • true表示当前视图可以处理对应的事件；
    • false表示当前视图不处理这个事件，交给父View的onTouchEvent方法进行处理；
    • super.onTouchEvent(ev)控件默认策略：
      • 如果该View是clickable或者longclickable的，则返回true表示消费了该事件，如Button等系统默认的可触摸交互的控件；
      • 如果该View非clickable或者longclickable的，则返回false表示不消费该事件，如TextView等默认不支持触摸交互的控件；

特别注意：

  1. Activity也拥有分发和消费两个方法；
  2. 事件的传递是从外向内（activity最先），而消费是从内向外（activity最后）；
  3. 控件消费端三个回调的优先级：onTouchListener.onTouch > onTouchEvent > onClickListener.onClick；
  4. 事件的消费是按序列来的，一旦消费了ACTION_DOWN，那么后续的ACTION_MOVE、ACTION_DOWN等事件直接交给同一个View处理；
  5. View的enable属性不影响onTouchEvent的默认返回值；
  6. requestDisallowInterceptTouchEvent方法可以在子元素中干预父元素的事件分发过程，但是ACTION_DOWN事件除外；

扩展阅读：

滑动冲突解决方案

  • 外部拦截法：
    指点击事件都先经过父容器的拦截处理，如果父容器需要此事件就拦截，否则就不拦截。具体方法：需要重写父容器的onInterceptTouchEvent方法，在内部做出相应的拦截。
      @Override
  public boolean onInterceptTouchEvent(MotionEvent event) {
      boolean intercepted = false;
      switch(event.getAction()) {
          case MotionEvent.ACTION_DOWN:{
              // 不可以拦截 ACTION_DOWN 否则后续事件都会交由父容器来处理
              intercepted = false
              break;
          }
          case MotionEvent.ACTION_MOVE:{
              if(父容器需要拦截当前事件) {
                  intercept = true;
              } else {
                  intercept = false;
              }
              break;
          }
          case MotionEvent.ACTION_UP:{
              intercept = false;
              break;
          }
          default:
          break;
      }
      return intercept;
  }
  • 内部拦截法：
    指父容器不拦截任何事件，而将所有的事件都传递给子容器，如果子容器需要此事件就直接消耗，否则就交由父容器进行处理。具体方法：需要配合requestDisallowInterceptTouchEvent方法。
      @Override
  public boolean dispatchTouchEvent(MotionEvent ev) {
      // 一定要在ACTION_DOWN时就要求父容器不能拦截
      if(ev.getAction() == MotionEvent.ACTION_DOWN){
          getParent().requestDisallowInterceptTouchEvent(true);
      }
      return super.dispatchTouchEvent(ev);
  }

推荐：当子元素占满父元素空间时使用外部拦截法，当没有占满时使用内部拦截

核心API

MotionEvent

封装了触摸事件的详细数据，包括位置、基础事件类型等信息。

GestureDetector

手势识别封装工具类，对于所有触控点击事件，我们无非就是要分析它的触控操作类型然后执行相应的逻辑，这些逻辑都是可以复用的，因此封装了GestureDetector这个工具类。
总结一下触控操作类型包括：

  1. 单击SingleTap
    时间很短：onDown ----> onSingleTapUp ----> onSingleTapConfirmed
    时间稍长：onDown ----> onShowPress ----> onSingleTapUp ----> onSingleTapConfirmed
    当GestureDetector支持双击时，我们应当以onSingleTapConfirmed作为单击的回调，因为onSingleTapUp只要手指离开屏幕就会触发，意味着双击时第一次点击抬起时也会触发。
  2. 双击DoubleTap
    onDown ----> onSingleTapUp ----> onDoubleTap ----> onDoubleTapEvent ----> onDown ----> onDoubleTapEvent
    这里需要注意onDoubleTap是在第二次点击的down回调前触发，而不是第二次点击up的时候。
  3. 长按LongPress
    手指始终在屏幕上不移动：onDown ----> onShowPress ----> onLongPress
  4. 滚动Scroll
    手指始终在屏幕上发生移动：onDown ----> [onShowPress手指停留115毫秒不移动触发] ----> onScroll…
  5. 抛Filing
    手指在触摸移动过程中离开屏幕：onDown ----> onScroll… ----> onFling，理论上只要手指离开时还具有滚动速度，那么onFling就会触发，现实中屏幕操作基本是符合这个现象的，所以Scroll最后往往伴随Filing。

GestureDetector的用法分两步：

  1. 构造GestureDetector实例，需传入GestureDetector.OnGestureListener，这是处理手势事件的地方；
  2. 代理boolean onTouchEvent(MotionEvent event)或boolean onTouch(View v, MotionEvent event)方法进行事件分析。

一个简单的示例如下：

public class GestureActivity extends BaseActivity {

    private static final String TAG = "GestureActivity";
    private TextView mTextView;
    private GestureDetector mDetector;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mDetector = new GestureDetector(this, getCallback());
        View content = findViewById(android.R.id.content);
        content.setFocusable(true);
        content.setClickable(true);
        content.setLongClickable(true);
        content.setOnTouchListener((v, event) -> mDetector.onTouchEvent(event));
    }
    

    private GestureDetector.OnGestureListener getCallback() {
        return new GestureDetector.SimpleOnGestureListener(){
            @Override
            public boolean onSingleTapUp(MotionEvent e) {
                log( "onSingleTapUp() called with: e = [" + e + "]");
                return false;
            }

            @Override
            public void onLongPress(MotionEvent e) {
                super.onLongPress(e);
                log( "onLongPress() called with: e = [" + e + "]");
            }

            @Override
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                log( "onScroll() called with: e1 = [" + e1 + "], e2 = [" + e2 + "], distanceX = [" + distanceX + "], distanceY = [" + distanceY + "]");
                return false;
            }

            @Override
            public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                log( "onFling() called with: e1 = [" + e1 + "], e2 = [" + e2 + "], velocityX = [" + velocityX + "], velocityY = [" + velocityY + "]");
                return false;
            }

            @Override
            public void onShowPress(MotionEvent e) {
                super.onShowPress(e);
                log( "onShowPress() called with: e = [" + e + "]");
            }

            @Override
            public boolean onDown(MotionEvent e) {
                log( "onDown() called with: e = [" + e + "]");
                return false;
            }

            @Override
            public boolean onDoubleTap(MotionEvent e) {
                log( "onDoubleTap() called with: e = [" + e + "]");
                return false;
            }

            @Override
            public boolean onDoubleTapEvent(MotionEvent e) {
                log( "onDoubleTapEvent() called with: e = [" + e + "]");
                return false;
            }

            @Override
            public boolean onSingleTapConfirmed(MotionEvent e) {
                log( "onSingleTapConfirmed() called with: e = [" + e + "]");
                return false;
            }

            @Override
            public boolean onContextClick(MotionEvent e) {
                log( "onContextClick() called with: e = [" + e + "]");
                return false;
            }
        };
    }
}

ViewDragHelper

封装了控件拖拽逻辑的工具类，用在自定义ViewGroup内部快速实现子View的拖拽效果。使用方面也非常简单：

  1. 初始化ViewDragHelper，需要传入一个ViewDragHelper.Callback，这是整个拖拽逻辑的核心部分；
  2. 代理ViewGroup的onInterceptTouchEvent方法；
  3. 代理ViewGroup的onTouchEvent方法；

一个简单的示例如下：

public class DragContainer extends ConstraintLayout {
    private final ViewDragHelper helper;

    public DragContainer(Context context) {
        this(context, null);
    }

    public DragContainer(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DragContainer(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        helper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {
            Integer rightBound;

            @Override
            public boolean tryCaptureView(View child, int pointerId) {
                // child是被触摸的子view
                // pointerId来自MotionEvent#getPointerId(int index)，区间[0, MotionEvent#getPointerCount()-1]
                return true;
            }

            @Override
            public int clampViewPositionHorizontal(View child, int left, int dx) {
                // 1. 不对横向拖拽做限制
                // return left;
                // 2. 禁用横向拖拽
                // return 0;
                // 3. 限制横向拖拽范围不超出父控件边界
                if (rightBound == null) {
                    int[] location = new int[2];
                    getLocationOnScreen(location);
                    rightBound = location[0] + getWidth() - child.getWidth();
                }
                return Math.min(Math.max(left, 0), rightBound);                
            }

            @Override
            public int clampViewPositionVertical(View child, int top, int dy) {
                return top;
            }
        });
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return helper.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        helper.processTouchEvent(event);
        return true;
    }
}

然后在布局中使用就可以了，比如在下面的布局中view_crop这个控件就可以直接拖拽了：

<?xml version="1.0" encoding="utf-8"?>
<com.hao.android_api_test.view.DragContainer xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/robot">

    <View
        android:id="@+id/view_crop"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:background="@drawable/shape_border"/>

</com.hao.android_api_test.view.DragContainer>

动画体系

未完待续…

csfchh
关注
专栏目录
Android自定义控件（一）自绘控件
lanyeming2012的专栏
07-11 1022
由于公司项目的需求，需要绘制一条竖直的间断线作为分割线。这个可坑了爹了，以前只搞过水平的间断线，只要通过shape也可以简单的画出来，但是千万记得把hardwareAccelerated给关了，不然水平的虚线还是会是实线，这个以前也是我趟过的一个坑。那咋办呢，找不到原生的解决方案，不就是一条简单的间断线嘛，还能难住我等程序猿？这个时候，首先联想到的就是自绘控件了。 自绘控件，顾名思义就是
android自绘控件详细解释
11-08
近期很多网友对 Android 用户界面的设计表示很感兴趣 ， 对于 Android UI 开发自绘控件和游 戏制作而言掌握好绘图基础是必不可少的
【安卓自定义控件系列】自绘控件打造界面超炫功能超强的圆形进度条
weixin_33872660的博客
07-28 145
在前面我们讲过了安卓自定义控件三种方式中的组合控件，现在我们来讲解一下通过自绘的方式来实现自定义控件，本博客将以自定义圆形进度条为例向大家讲解自定义控件的知识，首先来看一下效果图吧，这个是本人自定义圆形进度条demo工程的运行截图： 首先说一下自己这个自定义圆形进度条要达到的目标： 1能够支持设置进度条各种属性，如圆环的大小，颜色，进度条的大小，颜色，进度条的颜...
Android——自绘控件
qq_43745685的博客
09-29 864
Android自绘控件
Android自绘制控件
weixin_30415113的博客
07-25 139
开发过程中，我们免不了需要用到一些自定义的 View，自定义 View 一般可分为三类： 　　① 继承类 View —— 一般继承系统以后的基本 View，新增/重置一些自定义属性 ，例如两端对齐的TextView； 　　②组合类 View —— 将系统某几个基本View组合在一起形成一个新的View，例如末尾带 ”ד(清空) 的EditText，就是将EditText和ImageView...
Android开发者必经之路：全面学习路线与要点梳理
安卓最佳学习路线图针对安卓初学者提供了一个全面且系统的入门路径，旨在帮助他们迅速掌握Android应用和游戏开发技能。以下是详细的步骤和知识点概览： 1. **路线图概括**： - 学习路线首先从理解Android的基本...
"Android应用程序开发流程关键知识梳理和环境搭建要点.pdf
Android应用程序开发流程要点.pdf文件提供了针对Android应用程序开发的详细流程和关键要点。该文件的目录包括了JAVA基础知识、Android应用程序开发环境搭建等内容。在实际开发中，了解和掌握这些要点对于开发高质量...
Android控件Demo开发：毕业设计与源码实践
Demo中包含了多种Android控件的实现和应用，能够帮助学生理解并掌握Android开发中常用控件的使用方法和技巧。 ### 知识点梳理 #### Android控件概述 Android控件是构成应用界面的基本元素，它们可以简单分为视图...
android知识点整理 android开发工程师必备资料文档
11-04
### Android知识点整理：Android开发工程师必备资料文档 #### 一、项目目录结构解析与资源管理 在Android开发中，合理的项目...希望这些内容能够帮助Android开发工程师更好地理解和掌握Android开发的核心技术要点。
Android 自绘控件
08-31
Android中自定义控件分为三种：1.自绘控件 2.组合控件 3.继承控件。本篇介绍下自绘控件。下面跟着小编一起来看下吧
android 控件自绘,Android自定义控件与绘制
weixin_36355328的博客
05-30 385
一、自绘控件自绘控件主要是通过继承View，然后重写onDraw()方法，绘制逻辑在onDraw中调用即可，如果需要注册事件，只需要实现相关事件监听接口即可(比如OnClickListener)；还有就是在自绘控件中如果需要重绘控件，只需要调用invalidate方法即可;在xml布局中使用只需要按普通控件使用即可。public class MyView extends View implemen...
Android的自定义View---自绘控件
lzy_tinyjoy
10-27 1408
自定义View的实现方式大概可以分为三种，自绘控件、组合控件、以及继承控件.那么今天我们就来先来介绍一下自定义View中的自绘控件. 自绘控件,顾名思义,它就是说你所展示出来的View完全是你一手绘制出来滴.那么具体实现该怎么做呢? 1、继承View，建立构造方法。 2、重写其中的onMeasure()和onDraw()方法,记得这两个方法是必须要重写的,必要时还需要重写onKeyUp()、onKe
Android控件绘制过程
08-09 139
首先，在activity 类中(activity.java)，我们可以看到两个变量，分别是： private Window mWindow; private WindowManager mWindowManager; 这两个变量在attach函数中进行赋值， ...
android: 一次自绘控件的体验
Cat的专栏
06-30 391
一个盆友在 qq 上面给我一个截图，问我有没有见过这种效果。我一看，貌似不太难，虽然我并不熟悉自定义控件，但是网上的教程很多，于是决定实现一下。 这个就是给我的截图。不是很清晰，也不完整。但是重点突出出来了。 于是，我看了看 HenCoder 的教程1，决定实现一下。（当然，实现期间，也翻阅了一下其他人的博客） 我实现的效果如下： 大体实现贴一下： @Override p...
Android自定义控件_自绘控件
weixin_34092370的博客
12-26 81
控件的划分：自绘控件、组合控件、继承控件 每种方式是如何自定义View的？ 第一：自绘控件 继承view，重写onDraw方法,在布局文件里面引用 示例：水波纹WaterRipplesActivity 1 public class WaterRipplesActivity extends Activity { 2 @Override 3 p...
Android Camera 架构好文推荐
最新发布
程序员Android
07-29 553
和你一起终身学习，这里是程序员Android经典好文推荐，通过阅读本文，您将收获以下知识点:一、Android Camera整体架构简述1.1 Android Camera 基本分层1.2 Android Camera工作大体流程二、 Camera App层简述三、Camera Framework层简述3.1 CameraServer初始化3.2 App调用CameraServer的相关操作3.2...
Android 自绘控件开发探索1
北漂猿
04-06 329
view的运行原理，自绘控件的必备知识
Android UI开发专题(五) Bitmap和Canvas实例
arm10504的专栏
03-17 530
在Android UI开发专题的前五节我们讲到的东西主要是基础和理论内容，从本次Android123将通过实例代码来演示，本次主要是Bitmap和Canvas类的使用，根据要求缩放Bitmap对象并返回新的Bitmap对象。centerToFit方法一共有4个参数，返回一个Bitmap类型，第一个参数为原始的位图对象，width和height分别为新的宽和高，而Context是用来加载资源的上下文
android使用shape来绘制控件
weixin_30241919的博客
10-27 188
在android中常使用shape来作为控件的背景，来实现对控件形状的设计 shape的文件 位于drawable文件中 在drawable目录下 添加 任意文件名的xml文件（myshape.xml） <shape xmlns:android="http://schemas.android.com/apk/res/android" > <...
Android自绘动画实现与优化实战——以Tencent OS录音机波形动画为实例
dou_yer的专栏
06-17 4037
Android 的图形绘制主要是基于 View 这个类实现。 每个 View 的绘制都需要经过 onMeasure、onLayout、onDraw 三步曲，分别对应到测量大小、布局、绘制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值