深入理解Android之自定义View_android 自定义view-程序员宅基地

技术标签: Android  

       自定义View多线程网络,被认为是Android开发者必须牢固掌握的最基础的三大基本功。而自定义View又是Android开发中特别重要的一环,很多地方都需要用到自定义View。这篇文章我就梳理一下自定义View的相关知识。

 

目录

(一)什么是自定义View   

(二)自定义组合View

(三)自定义View的绘制

1. Canvas.drawXXX()

Path用法详解

2. Paint的完全攻略

3. Canvas对绘制的辅助——范围裁切和几何变换

(1)范围裁切

(2)几何变换

4. 使用不同的绘制方法来控制绘制顺序

(四)自定义View的布局

(五)自定义View的触摸反馈


 

(一)什么是自定义View   

       什么是自定义View?自定义View,顾名思义就是现有的官方提供的View(控件)已经无法满足我们的日常看法的需要,需要我们自己去定义实现一个View。而在我们项目开发的过程中,遇到一些复杂的布局或者控件是在所难免的。因此,对于我们来说,学习好自定义View才会变得如此重要。

       首先我们先了解一下View的绘制流程,它对应了View中的三个抽象方法:即onMeasure->onLayout->onDraw

  • onMeasure: 测量View的宽高
  • onLayout: 计算View的位置并布局
  • onDraw: 绘制View

       其次我们应该明确,学习自定义View的三个关键点:

  • 布局
  • 绘制
  • 触摸反馈

       掌握了这三点也就基本掌握了自定义View。这里的布局是指自定义View在哪个位置显示,包括测量和布局两方面,对应了onMeasure和onLayout方法;绘制是让自定义View显示在屏幕上,对应了onDraw方法;而触摸反馈则是比较高级的概念,它对应了自定义View的行为。

       最后,我们着重了解一下如何自定义View。通常有以下三种方法

(1)自定义组合View

(2)继承系统控件或布局(系统View控件:如TextView,系统ViewGroup布局:如LinearLayout)

(3)直接继承View/ViewGroup

 

(二)自定义组合View

        这种方法非常特殊,因为它不需要重写相关方法就可以直接使用,因此开发起来非常方便。但是缺点也非常明显,它只能够通过现有的View(系统View)进行组合,如果我们需要自定义的View是形状非常不规则,无法通过现有View直接组合得出的话,这种方法是无法满足要求的。

        如下图,以实现一个自定义的TitleBar为例:

               

1. 自定义属性

       在values文件夹下,新建一个attrs.xml文件,并且自定义相关属性。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CusTitleBar">
        <attr name="bg_color" format="color"></attr>
        <attr name="text_color" format="color"></attr>
        <attr name="title_text" format="string"></attr>
    </declare-styleable>
</resources>

2. 自定义布局

      然后在layout文件夹,新建一个布局文件layout_custom_titlebar,并根据需要进行自定义布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:id="@+id/layout_titlebar_root">

    <ImageView
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:src="@drawable/ico_return"
        android:paddingLeft="10dp" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ico_title_right"
        android:paddingRight="10dp" />
</RelativeLayout>

3. 实现自定义View

       通过继承一个系统Layout父布局,并且将自定义View的布局和属性进行关联。再根据需要,编写一些功能代码。

public class CustomTitleBar extends RelativeLayout {
    private int mBgColor = Color.BLUE;
    private int mTextColor = Color.WHITE;
    private String mTitleText = "";

    private ImageView btn_left;
    private ImageView btn_right;
    private TextView tvTitle;
    private RelativeLayout relativeLayout;

    public CustomTitleBar(Context context) {
        super(context);
        initView(context);
    }

    public CustomTitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        initTypeValue(context,attrs);
        initView(context);
    }

    public void initTypeValue(Context context ,AttributeSet attrs){
        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CusTitleBar);
        mBgColor = a.getColor(R.styleable.CusTitleBar_bg_color, Color.YELLOW);
        mTitleText = a.getString(R.styleable.CusTitleBar_title_text);
        mTextColor = a.getColor(R.styleable.CusTitleBar_text_color,Color.RED);
        a.recycle();
    }

    public void initView(Context context){
        LayoutInflater.from(context).inflate(R.layout.layout_custom_titlebar,this,true);

        btn_left = findViewById(R.id.btn_left);
        btn_right = findViewById(R.id.btn_right);
        tvTitle = findViewById(R.id.tv_title);
        relativeLayout = findViewById(R.id.layout_titlebar_root);

        relativeLayout.setBackgroundColor(mBgColor);
        tvTitle.setTextColor(mTextColor);
        tvTitle.setText(mTitleText);
    }

    public void setBackClickListener(OnClickListener listener){
        btn_left.setOnClickListener(listener);
    }

    public void setRightClickListener(OnClickListener listener){
        btn_right.setOnClickListener(listener);
    }

    public void setTitleText(String str){
        if(!TextUtils.isEmpty(str)){
            tvTitle.setText(str);
        }
    }

}

4. 使用自定义View

      用法非常简单,在需要使用的layout布局中,将自定义的View导入,并完善相关属性。最后在Java代码中进行调用即可。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:apps="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#eee"
    tools:context=".MainActivity">

    <software.baby.learncustomview.CustomTitleBar
        android:id="@+id/custom_title_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        apps:title_text="@string/app_name"
        apps:text_color="@color/colorWhite"
        apps:bg_color = "@color/colorPrimary" />
</LinearLayout>
public class MainActivity extends AppCompatActivity {
    private CustomTitleBar customTitleBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        customTitleBar = findViewById(R.id.custom_title_bar);
        customTitleBar.setTitleText("标题标题");
        customTitleBar.setBackClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Click Back!", Toast.LENGTH_SHORT).show();
            }
        });
        customTitleBar.setRightClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Click Right!", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

(三)自定义View的绘制

  • 自定义绘制的方式是重写绘制方法 onDraw()
  • 绘制的关键是 Canvas 的使用
    • Canvas 的绘制类方法: drawXXX() (关键参数:Paint)
    • Canvas 的辅助类方法:范围裁切和几何变换
  • 可以使用不同的绘制方法来控制遮盖关系

        自定义绘制的上手非常容易:提前创建好 Paint 对象,重写 onDraw(),把绘制代码写在 onDraw() 里面,就是自定义绘制最基本的实现。大概就像这样:

Paint paint = new Paint();

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

    // 绘制一个圆
    canvas.drawCircle(300, 300, 200, paint);
}

1. Canvas.drawXXX()

        指的是Canvas类下的所有 draw- 打头的方法,例如 drawCircle() drawBitmap()

drawCircle(float centerX, float centerY, float radius, Paint paint)

        该方法用于绘制圆形。前两个参数 centerX centerY 是圆心的坐标,第三个参数 radius 是圆的半径,单位都是像素,它们共同构成了这个圆的基本信息(即用这几个信息可以构建出一个确定的圆);第四个参数 paint提供基本信息之外的所有风格信息,例如颜色、线条粗细、阴影等。

canvas.drawCircle(300, 300, 200, paint);

drawRect(float left, float top, float right, float bottom, Paint paint)

        该方法用于绘制矩形。lefttoprightbottom 是矩形四条边的坐标。

canvas.drawRect(100, 100, 500, 500, paint);

drawPoint(float x, float y, Paint paint)

        该方法用于绘制点。x 和 y 是点的坐标。

drawPoint(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint)

        该方法用于批量绘制点。pts 这个数组是点的坐标,每两个成一对;offset 表示跳过数组的前几个数再开始记坐标;count 表示一共要绘制几个点。

float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
// 绘制四个点:(50, 50) (50, 100) (100, 50) (100, 100)
canvas.drawPoints(points, 2 /* 跳过两个数,即前两个 0 */,
          8 /* 一共绘制 8 个数(4 个点)*/, paint);

drawOval(float left, float top, float right, float bottom, Paint paint)

       该方法用于绘制椭圆。只能绘制横着的或者竖着的椭圆,不能绘制斜的。lefttoprightbottom 是这个椭圆的左、上、右、下四个边界点的坐标。

drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 

       该方法用于绘制线。startXstartYstopXstopY 分别是线的起点和终点坐标。由于直线不是封闭图形,所以 setStyle(style) 对直线没有影响。

drawLines(float[] pts, int offset, int count, Paint paint) / drawLines(float[] pts, Paint paint) 

       该方法用于批量绘制线。具体参数参照批量绘制点。

float[] points = {20, 20, 120, 20, 70, 20, 70, 120, 20, 120, 120, 120, 150, 20, 250, 20, 150, 20, 150, 120, 250, 20, 250, 120, 150, 120, 250, 120};
canvas.drawLines(points, paint);

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 

       该方法用于绘制圆角矩形。lefttoprightbottom 是四条边的坐标,rx 和 ry 是圆角的横向半径和纵向半径。另外,它还有一个重载方法 drawRoundRect(RectF rect, float rx, float ry, Paint paint),让你可以直接填写 RectF 来绘制圆角矩形。

drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

       该方法用于批量绘制弧形或扇形。drawArc() 是使用一个椭圆来描述弧形的。lefttoprightbottom 描述的是这个弧形所在的椭圆;startAngle 是弧形的起始角度(x 轴的正向,即正右的方向,是 0 度的位置;顺时针为正角度,逆时针为负角度),sweepAngle 是弧形划过的角度;useCenter 表示是否连接到圆心,如果不连接到圆心,就是弧形,如果连接到圆心,就是扇形。

paint.setStyle(Paint.Style.FILL); // 填充模式
canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint); // 绘制扇形
canvas.drawArc(200, 100, 800, 500, 20, 140, false, paint); // 绘制弧形
paint.setStyle(Paint.Style.STROKE); // 画线模式
canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint); // 绘制不封口的弧形

drawPath(Path path, Paint paint)

         该方法用于绘制自定义图形。drawPath(path) 这个方法是通过描述路径的方式来绘制图形的,它的 path 参数就是用来描述图形路径的对象。

public class PathView extends View {

    Paint paint = new Paint();
    Path path = new Path(); // 初始化 Path 对象
    
    ......
    
    {
      path.addArc(200, 200, 400, 400, -225, 225);
      path.arcTo(400, 200, 600, 400, -180, 225, false);
      path.lineTo(400, 542);
    }

    @Override
    protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);
      
      canvas.drawPath(path, paint); // 绘制出 path 描述的图形(心形)
    }
}


Path用法详解

第一类:直接描述路径

这一类方法还可以细分为两组:添加子图形和画线(直线或曲线)

   第一组: addXxx() ——添加子图形

  • addCircle(float x, float y, float radius, Direction dir) 添加圆
  • addOval(float left, float top, float right, float bottom, Direction dir) / addOval(RectF oval, Direction dir) 添加椭圆
  • addRect(float left, float top, float right, float bottom, Direction dir) / addRect(RectF rect, Direction dir) 添加矩形
  • addRoundRect(RectF rect, float rx, float ry, Direction dir) / addRoundRect(float left, float top, float right, float bottom, float rx,       float ry, Direction dir) / addRoundRect(RectF rect, float[] radii, Direction dir) / addRoundRect(float left, float top, float right, float bottom, float[] radii, Direction dir) 添加圆角矩形
  • addPath(Path path) 添加另一个 Path

      Direction 指路径的方向。路径方向有两种:顺时针 (CW clockwise) 和逆时针 (CCW counter-clockwise) 。

path.addCircle(300, 300, 200, Path.Direction.CW);

   第二组:xxxTo() ——画线(直线或曲线)

      和第一组 addXxx() 方法的区别在于,第一组是添加的完整封闭图形(除了 addPath() ),而这一组添加的只是一条线。

  • lineTo(float x, float y) / rLineTo(float x, float y) 画直线

      从当前位置向目标位置画一条直线, x 和 y 是目标位置的坐标。这两个方法的区别是,lineTo(x, y) 的参数是绝对坐标,而 rLineTo(x, y) 的参数是相对当前位置的相对坐标 (前缀 r 指的就是 relatively 「相对地」)。

  • quadTo(float x1, float y1, float x2, float y2) / rQuadTo(float dx1, float dy1, float dx2, float dy2) 画二次贝塞尔曲线
  • cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) / rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3) 画三次贝塞尔曲线
  • moveTo(float x, float y) / rMoveTo(float x, float y) 移动到目标位置
  • arcTo(RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(RectF oval, float startAngle, float sweepAngle) 画弧形

      close() 封闭当前子图形。

paint.setStyle(Style.STROKE);
path.moveTo(100, 100);
path.lineTo(200, 100);
path.lineTo(150, 150);
path.close(); // 使用 close() 封闭子图形。等价于 path.lineTo(100, 100)

        不是所有的子图形都需要使用 close() 来封闭。当需要填充图形时(即 Paint.Style 为 FILL 或 FILL_AND_STROKEPath 会自动封闭子图形。

第二类:辅助的设置或计算

Path.setFillType(Path.FillType ft) 设置填充方式

方法中填入不同的 FillType 值,就会有不同的填充效果。FillType 的取值有四个:

  • EVEN_ODD
  • WINDING (默认值)
  • INVERSE_EVEN_ODD
  • INVERSE_WINDING


drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 

      该方法用于绘制Bitmap对象。其中 left 和 top 是要把 bitmap 绘制到的位置坐标。

drawText(String text, float x, float y, Paint paint) 

      该方法用于绘制文字。参数 text 是用来绘制的字符串,x 和 y 是绘制的起点坐标。

2. Paint的完全攻略

  Paint 类的几个最常用的方法。具体是:

Paint.setStyle(Style style) 设置绘制模式

        Style 具体来说有三种: FILLSTROKE 和 FILL_AND_STROKE FILL 是填充模式,STROKE 是画线模式(即勾边模式),FILL_AND_STROKE 是两种模式一并使用:既画线又填充。它的默认值是 FILL,填充模式。

paint.setStyle(Paint.Style.STROKE); // Style 修改为画线模式
canvas.drawCircle(300, 300, 200, paint);

Paint.setColor(int color) 设置颜色

paint.setColor(Color.RED); 

Paint.setColorFilter(ColorFilter colorFilter) 设置颜色过滤

        颜色过滤的意思,就是为绘制的内容设置一个统一的过滤策略。ColorFilter 并不直接使用,而是使用它的子类。它共有三个子类:

  • LightingColorFilter   模拟简单的光照效果
  • PorterDuffColorFilter    指定的颜色和一种指定的 PorterDuff.Mode 来与绘制对象进行合成
  • ColorMatrixColorFilter 使用一个 ColorMatrix 来对颜色进行处理
ColorFilter lightingColorFilter = new LightingColorFilter(0xffffff, 0x003000);
paint.setColorFilter(lightingColorFilter);

Paint.setStrokeWidth(float width) 设置线条宽度

 Paint.setTextSize(float textSize) 设置文字大小

 Paint.setShader(Shader shader) 设置 Shader 

        Shader 这个英文单词很多人没有见过,它的中文叫做「着色器」,也是用于设置绘制颜色的。「着色器」不是 Android 独有的,它是图形领域里一个通用的概念,它和直接设置颜色的区别是,着色器设置的是一个颜色方案,或者说是一套着色规则。当设置了 Shader 之后,Paint 在绘制图形和文字时就不使用 setColor/ARGB() 设置的颜色了,而是使用 Shader 的方案中的颜色。

        Android 的绘制里使用 Shader ,并不直接用 Shader 这个类,而是用它的几个子类。具体来讲有 

  • LinearGradient   线性渐变
  • RadialGradient   辐射渐变
  • SweepGradient 扫描渐变
  • BitmapShader   用 Bitmap 的像素来作为图形或文字的填充
  • ComposeShader 混合着色器
Shader shader = new LinearGradient(100, 100, 500, 500, Color.parseColor("#E91E63"),
        Color.parseColor("#2196F3"), Shader.TileMode.CLAMP);
paint.setShader(shader);
     
...
     
canvas.drawCircle(300, 300, 200, paint);

Paint.setAntiAlias(boolean aa) 设置抗锯齿开关

       在绘制的时候,往往需要开启抗锯齿来让图形和文字的边缘更加平滑。开启抗锯齿很简单,只要在 new Paint() 的时候加上一个 ANTI_ALIAS_FLAG 参数就行。

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

       另外,你也可以使用 Paint.setAntiAlias(boolean aa) 来动态开关抗锯齿。效果如下:

3. Canvas对绘制的辅助——范围裁切和几何变换

(1)范围裁切

      范围裁切有两个方法: clipRect() 和 clipPath()

clipRect()  按矩形区域裁切

     记得要加上 Canvas.save() 和 Canvas.restore() 来及时恢复绘制范围。

canvas.save();
canvas.clipRect(left, top, right, bottom);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

clipPath()   按路径裁切

      和 clipRect() 用法完全一样,只是把参数换成了 Path。

canvas.save();
canvas.clipPath(path1);
canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
canvas.restore();

(2)几何变换

    1)使用 Canvas 来做常见的二维变换

  • Canvas.translate(float dx, float dy) 平移
  • Canvas.rotate(float degrees, float px, float py) 旋转
  • Canvas.scale(float sx, float sy, float px, float py) 放缩
  • Canvas.skew(float sx, float sy) 错切
canvas.save();
canvas.translate(200, 0);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

    2)使用 Matrix 来做常见和不常见的二维变换

       i. 使用 Matrix 来做常见变换

  Matrix 做常见变换的方式:

  • 创建 Matrix 对象;
  • 调用 Matrix 的 pre/postTranslate/Rotate/Scale/Skew() 方法来设置几何变换;
  • 使用 Canvas.setMatrix(matrix) 或 Canvas.concat(matrix) 来把几何变换应用到 Canvas

      Matrix 应用到 Canvas 有两个方法: 

  • Canvas.setMatrix(matrix) 用 Matrix 直接替换 Canvas 当前的变换矩阵,即抛弃 Canvas 当前的变换,改用 Matrix 的变换
  • Canvas.concat(matrix) 用 Canvas 当前的变换矩阵和 Matrix 相乘,即基于 Canvas 当前的变换,叠加上 Matrix 中的变换
Matrix matrix = new Matrix();

...

matrix.reset();
matrix.postTranslate();
matrix.postRotate();

canvas.save();
canvas.concat(matrix);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

      ii. 使用 Matrix 来做自定义变换

  Matrix 的自定义变换使用的是 setPolyToPoly() 方法。

  • Matrix.setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount) 用点对点映射的方式设置变换
Matrix matrix = new Matrix();
float pointsSrc = {left, top, right, top, left, bottom, right, bottom};
float pointsDst = {left - 10, top + 50, right + 120, top - 90, left + 20, bottom + 30, right + 20, bottom + 60};

...

matrix.reset();
matrix.setPolyToPoly(pointsSrc, 0, pointsDst, 0, 4);

canvas.save();
canvas.concat(matrix);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

    3)使用 Camera 来做三维变换

  Camera 的三维变换有三类:旋转平移移动相机

  • Camera.rotate*() 三维旋转
  • Camera.translate(float x, float y, float z) 移动
  • Camera.setLocation(x, y, z) 设置虚拟相机的位置
canvas.save();

camera.rotateX(30); // 旋转 Camera 的三维空间
camera.applyToCanvas(canvas); // 把旋转投影到 Canvas

canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
canvas.restore();

4. 使用不同的绘制方法来控制绘制顺序

       使用不同的绘制方法,以及在重写的时候把绘制代码放在 super.绘制方法() 的上面或下面不同的位置,以此来实现需要的遮盖关系。

注意事项:

  • 在 ViewGroup 的子类中重写除 dispatchDraw() 以外的绘制方法时,可能需要调用 setWillNotDraw(false)
  • 在重写的方法有多个选择时,优先选择 onDraw()

 

(四)自定义View的布局

       自定义View的布局实际上分为两个阶段,测量阶段布局阶段。其具体的流程如下:

        

        在这个过程中,我们需要重写布局过程的相关方法:

  • 测量阶段:onMeasure
  • 布局阶段:onLayout

        对于重写过程大致上又可以分为三类

1. 重写onMeasure()来修改已有View的尺寸

  • 重写onMeasure(),并调用super.onMeasure()触发原先的测量
  • 用getMeasuredWIdth()和getMeasuredHeight()取得之前测得的尺寸,利用这两个尺寸来计算出最终尺寸
  • 使用setMeasuredDimension()保存尺寸
public class SquareImageView extends ImageView {

    ...

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //先执行原测量算法
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取原先的测量结果
        int measuredWidth = getMeasuredWidth();
        int measuredHeight = getMeasuredHeight();

        //利用原先的测量结果计算出新尺寸
        if (measuredWidth > measuredHeight) {
            measuredWidth = measuredHeight;
        } else {
            measuredHeight = measuredWidth;
        }
        //保存计算后的结果
        setMeasuredDimension(measuredWidth, measuredHeight);
    }
}

2. 重写onMeasure()来全新计算自定义View的尺寸

  • 重写onMeasure()把尺寸计算出来
  • 把计算出来的结果用resolveSize()过滤一遍
public class CustomView extends View {

    ...

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        measuredWidth = ...;
        measuredHeight = ...;

        measuredWidth = resolveSize(measuredWidth, widthMeasureSpec);
        measuredHeight = resolveSize(measuredHeight, heightMeasureSpec);

        setMeasuredDimension(measuredWidth, measuredHeight);
    }
}

3. 重写onMeasure()和onLayout()来全新计算自定义View的内部布局

(1) 重写onMeasure()来计算内部布局

  • 计算子View的尺寸  调用每个子View的measure(),让子View自我测量

        关键:1)宽度和高度的MeasureSpec的计算

                   2)结合开发者的要求(layout_xxx)和自己地可用空间(自己的尺寸上限 - 已用空间)

  • 计算子View的位置并保存子View的位置和尺寸  根据子View给出的尺寸,得出子View的位置,并保存它们的位置和尺寸
  • 计算自己的尺寸并保存  根据子View的位置和尺寸计算出自己的尺寸,并用setMeasuredDimension()保存

    难点:【可用空间】的获得

  • EXACTLY(固定值): MeasureSpec中的Size
  • AT_MOST(尺寸上限):  MeasureSpec中的Size
  • UNSPECIFIED(没有固定限制): 无限大
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);

            //子View的尺寸限制
            int childWidthSpec;
            
            //已使用的Width
            int usedWidth = ...;
            int selfWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
            int selfWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
            LayoutParams lp = childView.getLayoutParams();
            switch (lp.width) {
                case LayoutParams.MATCH_PARENT:  //子View填满父布局(可用空间)
                    if (selfWidthSpecMode == MeasureSpec.EXACTLY || selfWidthSpecMode == MeasureSpec.AT_MOST) {
                        childWidthSpec = MeasureSpec.makeMeasureSpec(selfWidthSpecSize - usedWidth, MeasureSpec.EXACTLY);
                    } else {
                        //由于无上限的可用空间无法顶满
                        childWidthSpec = MeasureSpec.makeMeasureSpec(0 ,MeasureSpec.UNSPECIFIED);
                    }
                    break;
                case LayoutParams.WRAP_CONTENT:  //子View自适应,隐含条件不能超过父布局(可用空间)
                    if (selfWidthSpecMode == MeasureSpec.EXACTLY || selfWidthSpecMode == MeasureSpec.AT_MOST) {
                        childWidthSpec = MeasureSpec.makeMeasureSpec(selfWidthSpecSize - usedWidth, MeasureSpec.AT_MOST);
                    } else {
                        //不用考虑额外的限制
                        childWidthSpec = MeasureSpec.makeMeasureSpec(0 ,MeasureSpec.UNSPECIFIED);
                    }
                    break;
                default:  //具体的值
                    childWidthSpec = MeasureSpec.makeMeasureSpec(lp.width, MeasureSpec.EXACTLY);
                    break;
            }

            childView.measure(childWidthSpec, childHeightSpec);
        }
    }

(2)重写onLayout()来摆放子View

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);
            childView.layout(childLeft[i], childTop[i], childRight[i], childBottom[i]);
        }
    }

 

(五)自定义View的触摸反馈

        自定义触摸反馈的关键:

  1. 重写 onTouchEvent(),在里面写上你的触摸反馈算法,并返回 true(关键是 ACTION_DOWN 事件时返回 true)。
  2. 如果是会发生触摸冲突的 ViewGroup,还需要重写 onInterceptTouchEvent(),在事件流开始时返回 false,并在确认接管事件流时返回一次 true,以实现对事件的拦截。
  3. 当子 View 临时需要阻止父 View 拦截事件流时,可以调用父 View 的 requestDisallowInterceptTouchEvent() ,通知父 View 在当前事件流中不再尝试通过 onInterceptTouchEvent() 来拦截。

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34519487/article/details/104076633

智能推荐

前端开发之vue-grid-layout的使用和实例-程序员宅基地

文章浏览阅读1.1w次,点赞7次,收藏34次。vue-grid-layout的使用、实例、遇到的问题和解决方案_vue-grid-layout

Power Apps-上传附件控件_powerapps点击按钮上传附件-程序员宅基地

文章浏览阅读218次。然后连接一个数据源,就会在下面自动产生一个添加附件的组件。把这个控件复制粘贴到页面里,就可以单独使用来上传了。插入一个“编辑”窗体。_powerapps点击按钮上传附件

C++ 面向对象(Object-Oriented)的特征 & 构造函数& 析构函数_"object(cnofd[\"ofdrender\"])十条"-程序员宅基地

文章浏览阅读264次。(1) Abstraction (抽象)(2) Polymorphism (多态)(3) Inheritance (继承)(4) Encapsulation (封装)_"object(cnofd[\"ofdrender\"])十条"

修改node_modules源码,并保存,使用patch-package打补丁,git提交代码后,所有人可以用到修改后的_修改 node_modules-程序员宅基地

文章浏览阅读133次。删除node_modules,重新npm install看是否成功。在 package.json 文件中的 scripts 中加入。修改你的第三方库的bug等。然后目录会多出一个目录文件。_修改 node_modules

【】kali--password:su的 Authentication failure问题,&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure-程序员宅基地

文章浏览阅读883次。【代码】【】kali--password:su的 Authentication failure问题,&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure

整理5个优秀的微信小程序开源项目_微信小程序开源模板-程序员宅基地

文章浏览阅读1w次,点赞13次,收藏97次。整理5个优秀的微信小程序开源项目。收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。_微信小程序开源模板

随便推点

Centos7最简搭建NFS服务器_centos7 搭建nfs server-程序员宅基地

文章浏览阅读128次。Centos7最简搭建NFS服务器_centos7 搭建nfs server

Springboot整合Mybatis-Plus使用总结(mybatis 坑补充)_mybaitis-plus ruledataobjectattributemapper' and '-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏3次。前言mybatis在持久层框架中还是比较火的,一般项目都是基于ssm。虽然mybatis可以直接在xml中通过SQL语句操作数据库,很是灵活。但正其操作都要通过SQL语句进行,就必须写大量的xml文件,很是麻烦。mybatis-plus就很好的解决了这个问题。..._mybaitis-plus ruledataobjectattributemapper' and 'com.picc.rule.management.d

EECE 1080C / Programming for ECESummer 2022 Laboratory 4: Global Functions Practice_eece1080c-程序员宅基地

文章浏览阅读325次。EECE 1080C / Programming for ECESummer 2022Laboratory 4: Global Functions PracticePlagiarism will not be tolerated:Topics covered:function creation and call statements (emphasis on global functions)Objective:To practice program development b_eece1080c

洛谷p4777 【模板】扩展中国剩余定理-程序员宅基地

文章浏览阅读53次。被同机房早就1年前就学过的东西我现在才学,wtcl。设要求的数为\(x\)。设当前处理到第\(k\)个同余式,设\(M = LCM ^ {k - 1} _ {i - 1}\) ,前\(k - 1\)个的通解就是\(x + i * M\)。那么其实第\(k\)个来说,其实就是求一个\(y\)使得\(x + y * M ≡ a_k(mod b_k)\)转化一下就是\(y * M ...

android 退出应用没有走ondestory方法,[Android基础论]为何Activity退出之后,系统没有调用onDestroy方法?...-程序员宅基地

文章浏览阅读1.3k次。首先,问题是如何出现的?晚上复查代码,发现一个activity没有调用自己的ondestroy方法我表示非常的费解,于是我检查了下代码。发现再finish代码之后接了如下代码finish();System.exit(0);//这就是罪魁祸首为什么这样写会出现问题System.exit(0);////看一下函数的原型public static void exit (int code)//Added ..._android 手动杀死app,activity不执行ondestroy

SylixOS快问快答_select函数 导致堆栈溢出 sylixos-程序员宅基地

文章浏览阅读894次。Q: SylixOS 版权是什么形式, 是否分为<开发版税>和<运行时版税>.A: SylixOS 是开源并免费的操作系统, 支持 BSD/GPL 协议(GPL 版本暂未确定). 没有任何的运行时版税. 您可以用她来做任何 您喜欢做的项目. 也可以修改 SylixOS 的源代码, 不需要支付任何费用. 当然笔者希望您可以将使用 SylixOS 开发的项目 (不需要开源)或对 SylixOS 源码的修改及时告知笔者.需要指出: SylixOS 本身仅是笔者用来提升自己水平而开发的_select函数 导致堆栈溢出 sylixos

推荐文章

热门文章

相关标签