Android自定义View(二)

ゝ一纸荒年。 2022-09-22 11:43 165阅读 0赞

前面说到了自定义View一般有3种方式来实现，现在这里先说第一种实现方式，也是经常用到的--------对现有控件进行扩展。

在系统原生控件的基础上进行扩展，实现增加功能、修改UI等。一般来说，我们在onDraw()方法中对原生控件行为进行扩展。

下面实现更改TextView的背景为例，为其多绘制几层背景。

原生的TextView使用onDraw()方法绘制显示的文字，当继承了系统的TextView之后，如果不重写其onDraw()方法，则不会修改TextView的任何效果。可以认为在自定义的TextView中调用TextView类的onDraw()方法来绘制了显示的文字，代码如下：

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

程序调用super.onDraw(canvas)方法来实现原生控件的功能，但是在调用super.onDraw()方法之前和之后，我们都可以实现自己的逻辑，分别在系统绘制文字的前后，完成自己的操作，即如下所示。

@Override
    	protected void onDraw(Canvas canvas) {
      //在回调父类方法之前，实现自己的逻辑，对TextView来说即是在绘制文本内容前
    		super.onDraw(canvas);
     //在回调父类方法之后，实现自己的逻辑，对TextView来说即是在绘制文本内容后
    }

所以，为了改变原生的绘制行为，在系统调用super.onDraw(canvas)方法前，也就是在绘制文字之下，绘制两个不用大小的矩形，形成一个重叠的效果，再让系统调用super.onDraw(canvas)方法，执行绘制文字的工作。这样，我们就通过改变控件的绘制行为，创建了一个全新的控件。

代码如下：

@Override
    	protected void onDraw(Canvas canvas) {
    		Log.e("被调用-----》", "onDraw");
    		mPaint1.setColor(getResources().getColor(
    				android.R.color.holo_blue_bright));
    		mPaint1.setStyle(Paint.Style.FILL);
    		mPaint2.setColor(Color.WHITE);
    		mPaint2.setStyle(Paint.Style.FILL);
    		canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint1);
    		canvas.drawRect(2, 2, getMeasuredWidth() - 2, getMeasuredHeight() - 2,
    				mPaint2);
    		canvas.save();
    		canvas.translate(2, 0);
    		super.onDraw(canvas);
    		canvas.restore();
    }

其中的画笔的初始化在其两个参数的构造方法中去实现

public DefineView1(Context context, AttributeSet attrs) {
    		super(context, attrs);
    		mPaint1 = new Paint();
    		mPaint2 = new Paint();
    		Log.e("被调用-----》", "初始化");
    	}

效果如下：

![Center][]  
完整代码如下

package com.example.define_view;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.LinearGradient;
    import android.graphics.Matrix;
    import android.graphics.Paint;
    import android.graphics.Paint.Style;
    import android.graphics.Shader;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.widget.TextView;
    
    public class DefineView1 extends TextView {
    	private Paint mPaint1, mPaint2;
            int mTranslate;
    	public DefineView1(Context context) {
    		super(context);
    	}
    
    	public DefineView1(Context context, AttributeSet attrs) {
    		super(context, attrs);
    		mPaint1 = new Paint();
    		mPaint2 = new Paint();
    		Log.e("被调用-----》", "初始化");
    	}
    
    	public DefineView1(Context context, AttributeSet attrs, int defStyleAttr) {
    		super(context, attrs, defStyleAttr);
    	}
    
    	@Override
    	protected void onDraw(Canvas canvas) {
    		Log.e("被调用-----》", "onDraw");
    		mPaint1.setColor(getResources().getColor(
    				android.R.color.holo_blue_bright));
    		mPaint1.setStyle(Paint.Style.FILL);
    		mPaint2.setColor(Color.WHITE);
    		mPaint2.setStyle(Paint.Style.FILL);
    		canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint1);
    		canvas.drawRect(2, 2, getMeasuredWidth() - 2, getMeasuredHeight() - 2,
    				mPaint2);
    		canvas.save();
    		canvas.translate(2, 0);
    		super.onDraw(canvas);
    		canvas.restore();
    		
    	}
    
    }

activity\_main.xml

扩展

利用LinearGradient Shader和Matrix来 实现一个稍微复杂的TextView，绘制一个类似于跑马灯类似的动态文字闪烁的效果。

要实现这一效果，可以充分利用Android中Paint对象的Sharder渲染器。通过设置一个不断变化的LinearGradient,并使用带有该属性的Paint对象来绘制显示的文字。

首先在onSizeChange()方法中进行一些对象的初始化工作，并根据View的宽高设置一个LinearGradient渐变渲染器，代码如下：

@Override
    	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    		// TODO 自动生成的方法存根
    		super.onSizeChanged(w, h, oldw, oldh);
    		if (mViewWidth == 0) {
    			mViewWidth = getMeasuredWidth();
    			if (mViewWidth > 0) {
    				mPaint1 = getPaint();
    				mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
    						new int[] { Color.BLUE, 0xffffffff, Color.BLUE }, null,
    						Shader.TileMode.CLAMP);
    			}
    			mPaint1.setShader(mLinearGradient);
    			mGradientMatrix=new Matrix();
    		}
    	}

其中最关键的就是利用getPaint()方法获取当前绘制TextView的Paint对象，并给这个Paint对象设置原生TextView没有的LinearGradient属性。最后，在onDraw()方法中，通过矩阵的方式来不断平移渐变效果，从而在绘制文字时，产生动态的闪动效果，代码如下：

@Override
    	protected void onDraw(Canvas canvas) {
    		Log.e("被调用-----》", "onDraw");
    		super.onDraw(canvas);
    		if (mGradientMatrix != null) {
    			mTranslate += mViewWidth / 5;
    			if (mTranslate>2*mViewWidth) {
    				mTranslate=-mViewWidth;
    				Log.e("onDraw---->", ""+mTranslate);
    			}
    			mGradientMatrix.setTranslate(mTranslate, 0);
    			mLinearGradient.setLocalMatrix(mGradientMatrix);
    			postInvalidateDelayed(200);
    		}
    	}

效果如下 ![Center 1][]

其中onSizeChanged()方法，是组件大小改变时回调。

package com.example.define_view;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.LinearGradient;
    import android.graphics.Matrix;
    import android.graphics.Paint;
    import android.graphics.Paint.Style;
    import android.graphics.Shader;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.widget.TextView;
    
    public class DefineView1 extends TextView {
    	private Paint mPaint1, mPaint2;
    	private int mViewWidth = 0;
    	LinearGradient mLinearGradient;
            Matrix mGradientMatrix;
            int mTranslate;
    	public DefineView1(Context context) {
    		super(context);
    	}
    
    	public DefineView1(Context context, AttributeSet attrs) {
    		super(context, attrs);
    		Log.e("被调用-----》", "初始化");
    	}
    
    	public DefineView1(Context context, AttributeSet attrs, int defStyleAttr) {
    		super(context, attrs, defStyleAttr);
    	}
    
    	@Override
    	protected void onDraw(Canvas canvas) {
    		Log.e("被调用-----》", "onDraw");
    		super.onDraw(canvas);
    		if (mGradientMatrix != null) {
    			mTranslate += mViewWidth / 5;
    			if (mTranslate>2*mViewWidth) {
    				mTranslate=-mViewWidth;
    				Log.e("onDraw---->", ""+mTranslate);
    			}
    			mGradientMatrix.setTranslate(mTranslate, 0);
    			mLinearGradient.setLocalMatrix(mGradientMatrix);
    			postInvalidateDelayed(200);
    		}
    	}
    
    	@Override
    	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    		// TODO 自动生成的方法存根
    		super.onSizeChanged(w, h, oldw, oldh);
    		if (mViewWidth == 0) {
    			mViewWidth = getMeasuredWidth();
    			if (mViewWidth > 0) {
    				mPaint1 = getPaint();
    				mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
    						new int[] { Color.BLUE, 0xffffffff, Color.BLUE }, null,
    						Shader.TileMode.CLAMP);
    			}
    			mPaint1.setShader(mLinearGradient);
    			mGradientMatrix=new Matrix();
    		}
    	}
    }

[Center]: /images/20220721/78bb75496d2847018dbee50bde982eb5.png
[Center 1]: /images/20220721/719a043ba4f94c2abce06034435614de.png