Android群英传知识点回顾——第三章：Android控件架构与自定义控件详解

Android群英传知识点回顾——第三章：Android控件架构与自定义控件详解

知识点目录

3.1 Android控件架构

3.2 View的测量

3.3 View的绘制

3.4 ViewGroup的测量

3.5 ViewGroup的绘制

3.6 自定义View

3.6.1 对现有的空间进行拓展

3.6.2 创建复合控件

3.6.3 重写View来实现全新的空间

3.7 自定义ViewGroup

3.8 事件拦截机制分析

知识点回顾

3.1 Android控件架构

控件大致非为两类：

view控件：视图控件

viewGroup控件：包含多个View控件，并管理其包含的View控件

两者之间的关系：上层控件负责下层子控件的测量与绘制，并传递交互事件

UI界面架构：

Activity都包含一个Window对象，通常由PhoneWindow来实现

PhoneWindow将一个DecorView设置为整个应用窗口的根View

DecorView为整个Window界面的最顶层View

DecorView只有一个子元素为LinearLayout，代表整个Window界面，包含通知栏，标题栏，内容显示栏三块区域

LinearLayout里有两个FrameLayout子元素：

标题栏显示界面。只有一个TextView显示应用的名称

内容栏显示界面。就是setContentView()方法载入的布局界面

3.2 View的测量

MeasureSpec类：32位的int值，高2位为测量模式，低30位为测量大小

MeasureSpec模式：

EXACTLY：精确模式 ，当控件的layout_width属性或layout_height属性指定为具体值，控件大小也是该具体值

AT_MOST：最大值模式，当控件layout_width属性或layout_height属性指定为warp_content时，控件的尺寸不要超过父控件允许的最大尺寸

UNSPECIFIED：未指定模式，控件要多大就多大，通常情况下再绘制自定义View中才会使用

View类默认的onMeasure()方法只支持EXACTLY模式，View需要支持warp_content属性，那么就必须重写onMeasure()方法，来制定warp_content的大小

下面我们通过一个简单的实例，演示如何进行View的测量，首先，需要重写onMeasure()方法：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

可以发现，onMeasure方法调用了父类的onMeasure方法，代码跟踪父类onMeasure方法

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}

可以发现，系统最终会调用setMeasuredDimension(int measuredWidth，int measuredHeight)方法将测量后的宽高值设置进去，我们调用自定义的measureWidth()方法和measureHeight()方法，分别对宽高进行重新定义

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureWidth(widthMeasureSpec),measureHeight(heightMeasureSpec));
}

下面以measureWidth()方法为例：

第一步：从MeasureSpec对象中提取出具体的测量模式和大小

int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);

第二步：通过不同的测量模式给出不同的测量值：

EXACTLY：使用指定的specSize即可

AT_MOST：取出我们指定的大小和SpecSize的最小值

UNSPECIFIED：200px

下面这段代码基本上可以作为模板代码：

private int measureWidth(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);

if (specMode == MeasureSpec.EXACTLY) {
result = specSize;

} else {
result = 200;
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}

可以发现，当指定warp_content属性时，View就获得一个默认值200px

3.3 View的绘制

当测量好了一个View之后，我们通过重写View类中的onDraw()方法来绘图，要想绘制相应的图像，就必须在Canvas上进行绘制

Canvas canvas = new Canvas(Bitmap);

Canvas就像是一个画板，我们传进去一个bitmap，通过这个bitmap创建的Canvas画布紧紧联系在一起，这个过程我们称之为装载画布，这个bitmap用来存储所有绘制在Canvas上的像素信息，所以当你在后面调用所有的Canvas.drawxxx方法都会发生在这个bitmap上

3.4 ViewGroup的测量

ViewGroup在测量时通过遍历所有子View，从而调用子View的Measure方法来获得每一个子View的结果

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
}
}

ViewGroup测量完毕后，通常会去重写onLayout()方法来控制其子View显示位置的逻辑

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i = 0; i < getChildCount(); i++) {
this.getChildAt(i).layout(l, t, r, b);
}
}

3.5 ViewGroup的绘制

ViewGroup通常不需要绘制，如果不是指定ViewGroup的背景颜色，那么ViewGroup的onDraw()方法都不会被调用，但是，ViewGroup会使用dispatchDraw()方法来绘制子View

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

3.6 自定义View

在View中通常有以下一些重要的回调方法：

onFinishInflate()：从XML加载组件后回调

onSizeChanged()：组件大小改变时回调

onMeasure()：回调该方法来进行测量

onLayout()：回调该方法来确定显示的位置

onTouchEvent()：监听到触摸事件时回调

通常情况下，有以下三种方法来实现自定义的控件：

对现有的控件进行拓展

通过组合来实现新的控件

重写View来实现全新的控件

3.6.1 对现有的控件进行拓展

自定义修改TextView……见经典代码回顾，案例一

闪动的文字效果……见经典代码回顾，案例二

3.6.2 创建复合控件

自定义ToolBar的实现……见经典代码回顾，案例三

3.6.3 重写View来实现全新的控件

弧线展示图……见经典代码回顾，案例四

音频条形图……见经典代码回顾，案例五

3.7 自定义ViewGroup

自定义ViewGroup，仿ScrollView……见经典代码回顾，案例六

3.8 事件拦截机制分析

事件拦截机制三个重要方法

dispatchTouchEvent()：分发事件

onInterceptTouchEvent()：拦截事件

onTouchEvent()：处理事件

举一个例子说明事件分发机制：

ViewGroupA：处于视图最下层

ViewGroupB：处于视图中间层

View：处于视图最上层

正常的事件分发机制流程：

ViewGroupA dispatchTouchEvent

ViewGroupA onInterceptTouchEvent

ViewGroupB dispatchTouchEvent

ViewGroupB onInterceptTouchEvent

View dispatchTouchEvent

View onTouchEvent

ViewGroupB onTouchEvent

ViewGroupA onTouchEvent

若ViewGroupB的onInterceptTouchEvent()方法返回true的分发机制流程：

ViewGroupA dispatchTouchEvent

ViewGroupA onInterceptTouchEvent

ViewGroupB dispatchTouchEvent

ViewGroupB onInterceptTouchEvent

ViewGroupB onTouchEvent

ViewGroupA onTouchEvent

若View的onTouchEvent()方法返回true的分发机制流程：

ViewGroupA dispatchTouchEvent

ViewGroupA onInterceptTouchEvent

ViewGroupB dispatchTouchEvent

ViewGroupB onInterceptTouchEvent

View dispatchTouchEvent

View onTouchEvent

若ViewGroupB的onTouchEvent()方法返回true的分发机制流程：

ViewGroupA dispatchTouchEvent

ViewGroupA onInterceptTouchEvent

ViewGroupB dispatchTouchEvent

ViewGroupB onInterceptTouchEvent

View dispatchTouchEvent

View onTouchEvent

ViewGroupB onTouchEvent

简单的说dispatchTouchEvent()和onInterceptTouchEvent()是从下往上一层一层分发下去的，而onTouchEvent()是从上往下一层一层分发下去的

经典代码回顾

案例一：自定义修改TextView

public class CustomTextView extends TextView {

private Paint paint1, paint2;

public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
}

/**
* 初始化画笔
*/
private void initPaint() {
paint1 = new Paint();
paint1.setColor(getResources().getColor(android.R.color.holo_blue_light));
paint1.setStyle(Paint.Style.FILL);
paint2 = new Paint();
paint2.setColor(Color.YELLOW);
paint2.setStyle(Paint.Style.FILL);
}

@Override
protected void onDraw(Canvas canvas) {
//绘制外层矩形
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint1);
//绘制内层矩形
canvas.drawRect(10, 10, getMeasuredWidth() - 10, getMeasuredHeight() - 10, paint2);
canvas.save();
//绘制文字前平移10像素
canvas.translate(10, 0);
//父类完成的方法，即绘制文本
super.onDraw(canvas);
canvas.restore();
}
}

效果图

案例二：闪动的文字效果

public class FlashTextView extends TextView {

int mViewWidth = 0;
private Paint mPaint;
private LinearGradient mLinearGradient;
private Matrix matrix;
private int mTranslate;

public FlashTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (mViewWidth == 0) {
mViewWidth = getMeasuredWidth();
if (mViewWidth > 0) {
mPaint = getPaint();
mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0, new int[]{Color.BLUE, 0xffffffff, Color.BLUE},
null, Shader.TileMode.CLAMP);
mPaint.setShader(mLinearGradient);
matrix = new Matrix();
}
}
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (matrix != null) {
mTranslate += mViewWidth + 5;
if (mTranslate > 2 * mViewWidth / 5) {
mTranslate = -mViewWidth;
}
matrix.setTranslate(mTranslate, 0);
mLinearGradient.setLocalMatrix(matrix);
postInvalidateDelayed(100);
}
}
}

效果图

案例三：自定义ToolBar的实现

在values文件夹中创建一个attrs.xml文件来自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TopBar">
<attr name="title" format="string" />
<attr name="titleTextSize" format="dimension" />
<attr name="titleTextColor" format="color" />
<attr name="leftTextColor" format="color" />
<attr name="leftBackground" format="reference|color" />
<attr name="leftText" format="string" />
<attr name="rightTextColor" format="color" />
<attr name="rightBackground" format="reference|color" />
<attr name="rightText" format="string" />
</declare-styleable>
</resources>

开始创建我们的ToolBar

public class ToolBar extends RelativeLayout {

private int mLeftTextColor;
private Drawable mLeftBackground;
private String mLeftText;

private int mRightTextColor;
private Drawable mRightBackgroup;
private String mRightText;

private float mTitleTextSize;
private int mTitleTextColor;
private String mTitle;

private Button mLeftButton;
private Button mRightButton;
private TextView mTitleView;

private RelativeLayout.LayoutParams mLeftParams;
private RelativeLayout.LayoutParams mRightParams;
private RelativeLayout.LayoutParams mTitleParams;

//带参构造方法
public ToolBar(Context context, AttributeSet attrs) {
super(context, attrs);

//通过这个方法，将你在attrs.xml文件中定义的declare-styleable
//的所有属性的值存储到TypedArray中
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
//从TypedArray中取出对应的值来设置的属性赋值
mLeftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);
mLeftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);
mLeftText = ta.getString(R.styleable.TopBar_leftText);

mRightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);
mRightBackgroup = ta.getDrawable(R.styleable.TopBar_rightBackground);
mRightText = ta.getString(R.styleable.TopBar_rightText);

mTitleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 10);
mTitleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0);
mTitle = ta.getString(R.styleable.TopBar_title);

//获取完TypedArray的值之后，一般要调用recycle方法来避免重复创建时候的错误
ta.recycle();

mLeftButton = new Button(context);
mRightButton = new Button(context);
mTitleView = new TextView(context);

//为创建的元素赋值
mLeftButton.setTextColor(mLeftTextColor);
mLeftButton.setBackground(mLeftBackground);
mLeftButton.setText(mLeftText);

mRightButton.setTextColor(mRightTextColor);
mRightButton.setBackground(mRightBackgroup);
mRightButton.setText(mRightText);

mTitleView.setText(mTitle);
mTitleView.setTextColor(mTitleTextColor);
mTitleView.setTextSize(mTitleTextSize);
mTitleView.setGravity(Gravity.CENTER);

//为组件元素设置相应的布局元素
mLeftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
addView(mLeftButton, mLeftParams);
mRightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
addView(mRightButton, mRightParams);
mTitleParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
mTitleParams.addRule(RelativeLayout.CENTER_IN_PARENT);
addView(mTitleView, mTitleParams);
}

}

在布局文件中使用

<?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="match_parent">

<com.handsome.qunyingzhuang.chapter_3.ToolBar.ToolBar xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="40dp"
custom:leftBackground="#0000ff"
custom:leftText="back"
custom:leftTextColor="#00ff00"
custom:rightBackground="#333333"
custom:rightText="more"
custom:rightTextColor="#ff0000"
custom:title="我的标题"
custom:titleTextColor="#ff0000"
custom:titleTextSize="14sp" />
</RelativeLayout>

效果图

案例四：弧线展示图

public class CircleProgressView extends View {

private int mCircleXY;
private int length;
private float mRadius;

private Paint mCirclePaint;
private Paint mArcPaint;
private Paint mTextPaint;
private String mShowText = "Hensen_";

private int mTextSize = 25;
private float mSweepValue = 270;

public CircleProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
//获取屏幕高宽
WindowManager wm = (WindowManager) getContext()
.getSystemService(Context.WINDOW_SERVICE);
length = wm.getDefaultDisplay().getWidth();
init();
}

private void init() {
mCircleXY = length / 2;
mRadius = (float) (length * 0.5 / 2);

mCirclePaint = new Paint();
mCirclePaint.setColor(Color.BLUE);

mArcPaint = new Paint();
mArcPaint.setStrokeWidth(50);
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setColor(Color.BLUE);

mTextPaint = new Paint();
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextSize(mTextSize);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//矩形
RectF mArcRectF = new RectF((float) (length * 0.1), (float) (length * 0.1), (float) (length * 0.9), (float) (length * 0.9));
//绘制圆
canvas.drawCircle(mCircleXY, mCircleXY, mRadius, mCirclePaint);
//绘制弧线
canvas.drawArc(mArcRectF, 270, mSweepValue, false, mArcPaint);
//绘制文字
canvas.drawText(mShowText, 0, mShowText.length(), mCircleXY, mCircleXY + (mTextSize / 4), mTextPaint);
}

public void setSweepValue(float sweepValue) {
if (sweepValue != 0) {
mSweepValue = sweepValue;
} else {
mSweepValue = 25;
}
invalidate();
}
}

当用户不指定具体的比例值时，可以调用以下代码来设置相应的比例值

CircleProgressView circleProgressView = (CircleProgressView) findViewById(R.id.circle);
circleProgressView.setSweepValue(270);

效果图

案例五：音频条形图

public class MusicView extends View {

private int mWidth;
private int mRectHeight;
private int mRectWidth;
private int mRectCount = 20;
private LinearGradient mLinearGradient;
private Paint mPaint=new Paint();

private float currentHeight;
private int offset = 5;
private double mRandom;

public MusicView(Context context, AttributeSet attrs) {
super(context, attrs);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = getWidth();
mRectHeight = getHeight();
mRectWidth = (int) (mWidth * 0.6 / mRectCount);
mLinearGradient = new LinearGradient(0, 0, mRectWidth, mRectHeight, Color.YELLOW, Color.BLUE, Shader.TileMode.CLAMP);
mPaint.setShader(mLinearGradient);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//遍历绘制矩形，留中间间隔
for (int i = 0; i < mRectCount; i++) {
//开始绘制
canvas.drawRect((float) (mWidth * 0.4 / 2 + mRectWidth * i + offset),
currentHeight, (float) (mWidth * 0.4 / 2 + mRectWidth * (i + 1)), mRectHeight, mPaint);
}
//获取随机数
mRandom = Math.random();
currentHeight = ((float) (mRectHeight * mRandom));
//延迟300去刷新
postInvalidateDelayed(300);
}

}

效果图

案例六：自定义ViewGroup，仿ScrollView

自定义的ScrollView没有系统自带的性能好，毕竟很多因素都没考虑到，这里只是适用于练手使用

public class CustomScrollView extends ViewGroup {

private int mScreenHeight;
private Scroller mScroller;
private int mLastY;
private int mStart;
private int mEnd;

public CustomScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
//获取屏幕高宽
WindowManager wm = (WindowManager) getContext()
.getSystemService(Context.WINDOW_SERVICE);
mScreenHeight = wm.getDefaultDisplay().getHeight();
mScroller = new Scroller(getContext());
}

@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
int childCount = getChildCount();
MarginLayoutParams mlp = (MarginLayoutParams) getLayoutParams();
mlp.height = mScreenHeight * childCount;
setLayoutParams(mlp);

for (int j = 0; j < childCount; j++) {
View child = getChildAt(j);
if (child.getVisibility() != View.GONE) {
child.layout(i, j * mScreenHeight, i2, (j + 1) * mScreenHeight);
}
}
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int count = getChildCount();
for (int i = 0; i < count; ++i) {
View childView = getChildAt(i);
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
}
}

@Override
public boolean onTouchEvent(MotionEvent event) {
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastY = y;
mStart = getScrollY();
break;
case MotionEvent.ACTION_MOVE:
if (!mScroller.isFinished()) {
mScroller.abortAnimation();
}
int dy = mLastY - y;
if (getScrollY() < 0) {
dy = 0;
}
if (getScrollY() > getHeight() - mScreenHeight) {
dy = 0;
}
scrollBy(0, dy);
mLastY = y;
break;
case MotionEvent.ACTION_UP:
mEnd = getScrollY();
int dScrollY = mEnd - mStart;
if (dScrollY > 0) {
if (dScrollY < mScreenHeight / 3) {
mScroller.startScroll(0, getScrollY(), 0, -dScrollY);
} else {
mScroller.startScroll(0, getScrollY(), 0, mScreenHeight - dScrollY);
}
} else {
if (-dScrollY < mScreenHeight / 3) {
mScroller.startScroll(0, getScrollY(), 0, -dScrollY);
} else {
mScroller.startScroll(0, getScrollY(), 0, -mScreenHeight - dScrollY);
}
}
break;
}
postInvalidate();
return true;
}

@Override
public void computeScroll() {
super.computeScroll();
if (mScroller.computeScrollOffset()) {
scrollTo(0, mScroller.getCurrY());
}
}
}

在布局中使用

<?xml version="1.0" encoding="utf-8"?>
<com.handsome.qunyingzhuang.chapter_3.CustomScrollView.CustomScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000"
android:text="Hensen_博客(1)" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ff00"
android:text="Hensen_博客(2)" />

</com.handsome.qunyingzhuang.chapter_3.CustomScrollView.CustomScrollView>

效果图

经典回顾源码下载

github：https://github.com/CSDNHensen/QunYingZhuang