该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索》以及《深入理解Android 卷Ⅰ,Ⅱ,Ⅲ》中的相关知识,另外也借鉴了其他的优质博客,在此向各位大神表示感谢,膜拜!!!另外,本系列文章知识可能需要有一定Android开发基础和项目经验的同学才能更好理解,也就是说该系列文章面向的是Android中高级开发工程师。
第六篇了,,这一篇我们来看自定义View的各种姿势。前面几篇文章中我们介绍了Acitivity的启动流程以及生命周期,还介绍了Activity显示的各种原理。那么这篇文章呢,我们来实战一下。(读者可能看了好多关于Android Activity相关的知识,也看了View的实现原理。可是对于自定义View还是感觉隔着一层膜,那么今天我们试着捅破这层隔膜。)
上篇文章中我们详细讲解了ViewRootImpl,我们知道了其5大过程,知道了View的测量、布局以及绘制。那么这些知识对我们有何用处呢。下面我们就来自定义View
Android本身的控件系统可以实现我们开发中的一些基本需求,可是我们在处理实际业务的时候却催生出了Android控件系统不能很好的需求。这时,自定义控件应运而生。
在进行自定义View之前我们先来看一下View的坐标系。
上图引自刘望舒大神的博客
直接继承自View,重写其onDraw方法,这个方式主要用来实现一些不规则的效果。比如显示一个圆。需要注意的是直接继承自View的控件需要对支持wrap_content和padding做处理。所以本例中也重写了onMeasure方法。以及在onDraw方法中加入了自身padding的处理。读者可试着去除onMeasure方法或者onDraw方法中的对padding的处理看看效果
自定义的属性xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <declare-styleable name="CircleView">
- <attr name="circle_color" format="color" />
- </declare-styleable>
- </resources>
自定义CircleView
- import android.content.Context;
- import android.content.res.TypedArray;
- import android.graphics.Canvas;
- import android.graphics.Color;
- import android.graphics.Paint;
- import android.util.AttributeSet;
- import android.view.View;
- public class CircleView extends View {
- private int mColor = Color.RED;
- private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- public CircleView(Context context) {
- super(context);
- init();
- }
- public CircleView(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
- mColor = a.getColor(R.styleable.CircleView_circle_color, Color.RED);
- a.recycle();
- init();
- }
- private void init() {
- mPaint.setColor(mColor);
- }
- @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
- int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
- int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
- int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
- if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
- setMeasuredDimension(200, 200);
- } else if (widthSpecMode == MeasureSpec.AT_MOST) {
- setMeasuredDimension(200, heightSpecSize);
- } else if (heightSpecMode == MeasureSpec.AT_MOST) {
- setMeasuredDimension(widthSpecSize, 200);
- }
- }
- @Override protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- final int paddingLeft = getPaddingLeft();
- final int paddingRight = getPaddingRight();
- final int paddingTop = getPaddingTop();
- final int paddingBottom = getPaddingBottom();
- int width = getWidth() - paddingLeft - paddingRight;
- int height = getHeight() - paddingTop - paddingBottom;
- int radius = Math.min(width, height) / 2;
- canvas.drawCircle(paddingLeft + width / 2, paddingTop + height / 2, radius, mPaint);
- }
- }
使用自定义CircleView
布局文件activity_main1.xml
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#ffffff"
- android:orientation="vertical" >
- <com.mafeibiao.testapplication.CircleView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:padding="20dp"
- android:background="@color/light_green"/>
- </LinearLayout>
MainActivity.java
- package com.mafeibiao.testapplication;
- import android.support.v7.app.AppCompatActivity;
- import android.os.Bundle;
- public class MainActivity extends AppCompatActivity {
- @Override protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main1);
- }
- }
效果如下图
注:我们在这里直接继承了View并重写其onMeasure和onDraw方法,我们从上几篇文章详细分析了Activity的创建以及显示。我们在梳理一下,首先程序的入口函数是ActivityThread.main函数,从这个函数开始,然后回调我们MainActivity的attach函数,我们在这里没有重写这个函数,但是该函数内部会创建一个至关重要的对象PhoneWindow,然后会回调我们MainActivity的onCreate函数,我们在MainActivity的onCreate函数中调用了setContentView(R.layout.activity_main1);这个函数内部会创建Android 的顶级View DecorView,把我们的布局文件R.layout.activity_main1解析成相关View并关联到DecorView下。然后会调用WindowManager的addView方法把DecorView添加到PhoneWindow上,实际上完成这个过程的是ViewRootImpl,它会对我们的DecorView依次进测量、布局、绘制等工作,在这些工作的过程中会依次回调我们在View以及其子类中重写的onMeasure、onLayout、onDraw等方法。以我们上面的CircleView为例,,我们在布局文件中定义了一个LinearLayout并在LinearLayout内使用了我们自定义的CircleView,那么按照上一章讲解ViewRootImpl的工作流程。会沿着控件树从上到下依次调用到我们自定义的CircleView onMeasure(我们重写了该方法)然后沿着控件树从下向上依次回调。上文也讲过,测量过程是后根遍历,布局过程是先根遍历。(要理解Android View的层级结构是树结构)
下面我们来实现渐变的TextView。这个我们效果我们经常在锁屏应用上看到。
- 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.Shader;
- import android.support.v7.widget.AppCompatTextView;
- import android.util.AttributeSet;
- import android.util.Log;
- public class CustomTextView extends AppCompatTextView {
- private final static String TAG = CustomTextView.class.getSimpleName();
- private Paint paint1;
- private Paint paint2;
- private int mWidth;
- private LinearGradient gradient;
- private Matrix matrix;
- //渐变的速度
- private int deltaX;
- public CustomTextView(Context context) {
- super(context, null);
- }
- public CustomTextView(Context context, AttributeSet attrs) {
- super(context, attrs);
- initView(context, attrs);
- }
- private void initView(Context context, AttributeSet attrs) {
- paint1 = new Paint();
- paint1.setColor(getResources().getColor(android.R.color.holo_blue_dark));
- paint1.setStyle(Paint.Style.FILL);
- }
- @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {
- super.onSizeChanged(w, h, oldw, oldh);
- if (mWidth == 0) {
- Log.e(TAG, "*********************");
- mWidth = getMeasuredWidth();
- paint2 = getPaint();
- //颜色渐变器
- gradient = new LinearGradient(0, 0, mWidth, 0, new int[] {
- Color.GRAY,
- Color.WHITE,
- Color.GRAY
- },
- new float[] {
- 0.3f,
- 0.5f,
- 1.0f
- },
- Shader.TileMode.CLAMP);
- paint2.setShader(gradient);
- matrix = new Matrix();
- }
- }
- @Override protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- if (matrix != null) {
- deltaX += mWidth / 5;
- if (deltaX > 2 * mWidth) {
- deltaX = -mWidth;
- }
- }
- //关键代码通过矩阵的平移实现
- matrix.setTranslate(deltaX, 0);
- gradient.setLocalMatrix(matrix);
- postInvalidateDelayed(100);
- }
- }
下面我们来实现支付宝上手机号和银行卡号写入分段的效果。
如上图,在作为手机号或者银行卡时输入的数字会按照不同规则分段,并且右侧出现清空按钮。很明显,我们需要自定义一个控件符合上述要求。
style格式attrs.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <declare-styleable name="MyEditText">
- <!-- 设置自定义输入框的模式 当值为1:普通输入框模式 2:银行卡号输入框模式 3:电话号码模式 默认为1-->
- <attr name="editTextMode" format="integer" />
- <!-- 配置自定义控件在银行卡号模式下分隔位数 ,默认为4位 -->
- <attr name="splitNumber" format="integer" />
- </declare-styleable>
- </resources>
布局代码activity_main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#ffffff"
- android:orientation="vertical" >
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginBottom="5dp"
- android:layout_marginLeft="5dp"
- android:layout_marginRight="5dp"
- android:layout_marginTop="20dp"
- android:text="请绑定持卡人本人的银行卡" />
- <LinearLayout
- android:id="@+id/ll_name"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginBottom="1dp"
- android:background="#ffffff"
- android:gravity="center_vertical"
- android:orientation="horizontal"
- android:paddingBottom="5dp"
- android:paddingLeft="10dp"
- android:paddingRight="10dp"
- android:paddingTop="5dp" >
- <TextView
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:gravity="left"
- android:text="持卡人"
- />
- <com.mafeibiao.testapplication.MyEditText
- android:id="@+id/et_name"
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:layout_weight="5"
- android:hint="请输入姓名"
- android:padding="5dp" >
- </com.mafeibiao.testapplication.MyEditText>
- </LinearLayout>
- <LinearLayout
- android:id="@+id/ll_card_number"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:background="#ffffff"
- android:gravity="center_vertical"
- android:orientation="horizontal"
- android:paddingBottom="5dp"
- android:paddingLeft="10dp"
- android:paddingRight="10dp"
- android:paddingTop="5dp" >
- <TextView
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:gravity="left"
- android:text="卡号" />
- <com.mafeibiao.testapplication.MyEditText
- android:id="@+id/et_card_number"
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:layout_weight="5"
- android:hint="请输入银行卡号"
- android:padding="5dp"
- android:inputType="number"
- app:editTextMode="2"
- app:splitNumber="4">
- </com.mafeibiao.testapplication.MyEditText>
- </LinearLayout>
- <LinearLayout
- android:id="@+id/ll_phone_number"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:background="#ffffff"
- android:gravity="center_vertical"
- android:orientation="horizontal"
- android:paddingBottom="5dp"
- android:paddingLeft="10dp"
- android:paddingRight="10dp"
- android:paddingTop="5dp" >
- <TextView
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:gravity="left"
- android:text="手机号" />
- <com.mafeibiao.testapplication.MyEditText
- android:id="@+id/et_phone_number"
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:layout_weight="5"
- android:hint="请输入手机号"
- android:inputType="number"
- android:padding="5dp"
- app:editTextMode="3"
- >
- </com.mafeibiao.testapplication.MyEditText>
- </LinearLayout>
- </LinearLayout>
代码MainActivity.java
- package com.mafeibiao.testapplication;
- /**
- * Created by mafeibiao on 2017/11/21.
- */
- import android.content.Context;
- import android.content.res.TypedArray;
- import android.graphics.Rect;
- import android.graphics.drawable.Drawable;
- import android.support.v7.widget.AppCompatEditText;
- import android.text.Editable;
- import android.text.TextWatcher;
- import android.util.AttributeSet;
- import android.view.MotionEvent;
- public class MyEditText extends AppCompatEditText {
- // 每隔多少位以空格进行分隔一次,卡号一般都是每4位以空格分隔一次
- public int splitNumber = 4;
- // 自定义输入框的模式 当值为true:银行卡号输入框模式,false:普通输入框模式
- private int editTextMode = 1;
- public MyEditText(Context context) {
- this(context, null);
- }
- public MyEditText(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- init(attrs);
- }
- // 内容清除图标
- private Drawable mClearDrawable;
- /**
- * 初始化方法
- */
- private void init(AttributeSet attrs) {
- // 设置单行显示所有输入框内容
- setSingleLine();
- // 设置输入框可获得焦点
- setFocusable(true);
- setFocusableInTouchMode(true);
- TypedArray t = this.getResources().obtainAttributes(attrs, R.styleable.MyEditText);
- editTextMode = t.getInt(R.styleable.MyEditText_editTextMode, editTextMode);
- splitNumber = t.getInt(R.styleable.MyEditText_splitNumber, splitNumber);
- t.recycle();
- mClearDrawable = this.getResources().getDrawable(R.drawable.clear);
- mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
- initEvent();
- }
- // 输入框内容改变后onTextChanged方法会调用多次,设置一个变量让其每次改变之后只调用一次
- private boolean isTextChanged = false;
- /**
- * 处理事件的方法
- */
- private void initEvent() {
- addTextChangedListener(new TextWatcher() {@Override public void onTextChanged(CharSequence s, int start, int before, int count) {
- if (isTextChanged) {
- isTextChanged = false;
- return;
- }
- isTextChanged = true;
- // 处理输入内容空格与位数以及光标位置的逻辑
- handleInputContent(s, start, before, count);
- // 处理清除图标的显示与隐藏逻辑
- handleClearIcon(true);
- }
- @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) {
- }
- @Override public void afterTextChanged(Editable s) {
- }
- });
- }
- // 卡号内容
- private String content;
- // 卡号最大长度,卡号一般最长19位
- public static final int MAX_CARD_NUMBER_LENGHT = 19;
- //手机号
- public static final int MAX_PHONE_NUMBER_LENGHT = 11;
- // 缓冲分隔后的新内容串
- private String result = "";
- /**
- * 处理输入内容空格与位数的逻辑
- */
- private void handleInputContent(CharSequence s, int start, int before, int count) {
- content = s.toString();
- // 先缓存输入框内容
- result = content;
- // 去掉空格,以防止用户自己输入空格
- content = content.replace(" ", "");
- switch (editTextMode) {
- case 1:
- //普通模式
- break;
- case 2:
- //银行卡号模式
- // 限制输入的数字位数最多21位(银行卡号一般最多21位)
- if (content != null && content.length() <= MAX_CARD_NUMBER_LENGHT) {
- result = "";
- int i = 0;
- // 先把splitNumber倍的字符串进行分隔
- while (i + splitNumber < content.length()) {
- result += content.substring(i, i + splitNumber) + " ";
- i += splitNumber;
- }
- // 最后把不够splitNumber倍的字符串加到末尾
- result += content.substring(i, content.length());
- } else {
- // 如果用户输入的位数
- result = result.substring(0, result.length() - 1);
- }
- break;
- case 3:
- //手机号模式
- if (content != null && content.length() <= MAX_PHONE_NUMBER_LENGHT) {
- int length = s.toString().length();
- if (length == 3 || length == 8) {
- result += " ";
- }
- } else {
- // 如果用户输入的位数
- result = result.substring(0, result.length() - 1);
- }
- break;
- }
- // 获取光标开始位置
- // 必须放在设置内容之前
- int j = getSelectionStart();
- setText(result);
- // 处理光标位置
- handleCursor(before, j);
- }
- /**
- * 处理光标位置
- *
- * @param before
- * @param j
- */
- private void handleCursor(int before, int j) {
- // 处理光标位置
- try {
- if (j + 1 < result.length()) {
- // 添加字符
- if (before == 0) {
- // 遇到空格,光标跳过空格,定位到空格后的位置
- if (j % splitNumber + 1 == 0) {
- setSelection(j + 1);
- } else {
- // 否则,光标定位到内容之后 (光标默认定位方式)
- setSelection(result.length());
- }
- // 回退清除一个字符
- } else if (before == 1) {
- // 回退到上一个位置(遇空格跳过)
- setSelection(j);
- }
- } else {
- MyEditText.this.setSelection(result.length());
- }
- } catch(Exception e) {
- }
- }
- /**
- * 处理清除图标的逻辑
- */
- private void handleClearIcon(boolean focused) {
- if (content != null && content.length() > 0) {
- // 显示
- if (focused) {
- setEditTextIcon(null, null, mClearDrawable, null);
- } else {
- // 隐藏
- setEditTextIcon(null, null, null, null);
- }
- } else {
- // 隐藏
- setEditTextIcon(null, null, null, null);
- }
- }
- @Override public boolean onTouchEvent(MotionEvent event) {
- // 获取用户点击的坐标,这里只对X轴做了判断,
- float x = event.getX();
- // 当用户抬起手指时,判断坐标是否在图标交互区域,如果在则清空输入框内容,同时隐藏图标自己
- if (event.getAction() == MotionEvent.ACTION_UP) {
- if (x > (getWidth() - getPaddingRight() - mClearDrawable.getIntrinsicWidth())) {
- // 清空输入框内容
- setText("");
- // 隐藏图标
- setEditTextIcon(null, null, null, null);
- }
- }
- return super.onTouchEvent(event);
- }
- @Override protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
- super.onFocusChanged(focused, direction, previouslyFocusedRect);
- handleClearIcon(focused);
- //刷新界面,防止有时候出现的不刷新界面情况
- invalidate();
- }
- /**
- * 设置输入框的左,上,右,下图标
- *
- * @param left
- * @param top
- * @param right
- * @param bottom
- */
- private void setEditTextIcon(Drawable left, Drawable top, Drawable right, Drawable bottom) {
- setCompoundDrawables(left, top, right, bottom);
- }
- /**
- * 重写onMeasure,主要目的是让EditText的高度与我们显示在右侧的清空图标的高度相同,否则输入的时候可能会动态改变EditText的高度以适应清空图标的高度
- * 用户体验不好
- * @param widthMeasureSpec
- * @param heightMeasureSpec
- */
- @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
- int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
- int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
- int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
- if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
- setMeasuredDimension(mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
- } else if (widthSpecMode == MeasureSpec.AT_MOST) {
- setMeasuredDimension(mClearDrawable.getIntrinsicWidth(), heightSpecSize);
- } else if (heightSpecMode == MeasureSpec.AT_MOST) {
- setMeasuredDimension(widthSpecSize, mClearDrawable.getIntrinsicHeight());
- }
- }
- }
本篇总结
本篇文章上了一些例子来巩固我们之前学过的知识。我们自定义了CircleView来实现一个圆,该CircleView直接继承自View,需要注意的是直接继承自View的控件需要自己实现对wrap_content和padding的支持,另外我们继承了TextView和EditText来分别实现了渐变的TextView和银行卡手机号输入分隔的问题。可以看到我们继承自这些系统控件时,并单独没有实现对wrap_content和padding的支持(后面的自定义EditText不实现onMeasure方法也不会对wrap_content和padding造成影响)。
下篇预告
在下一篇文章中我们将来分析Android View的事件体系,这篇文章已经涉及到了一些,不过读者对Android View的事件体系可能还是有些模糊。并且读者可能已经发现了,本篇自定义View并没有继承ViewGroup和其子类LinearLayout,FrameLayout等,因为这部分内容我们会在分析了Android View的事件体系之后再做解释。
此致,敬礼
来源: http://www.cnblogs.com/wangle12138/p/7878273.html