Android开发之自定义View

2017-06-04 本文已影响98人 Reathin

自定义控件

使用场景：在实际开发中经常会遇到现有的UI控件不能满足项目需求，或一个功能涉及到多个UI控件的组合，或实现某一特效的UI，这时必须通过自定义View的方式，实现这些功能，例如股票的实时统计图、电子书等。

分类

绘制控件 - 自绘控件

1.继承View
需要自定义绘制内容，需要继承View，必须要重写onDraw方法，在onDraw方法中来进行绘制，实现onMeasure方法，来测量控件的空间。

2.继承ViewGroup

通过在ViewGroup中通过this.addView(<控件对象>)来添加控件
onMeasure方法，来测量控件的空间
onLayout方法必须实现，在此方法中处理子控件的位置。当视图初始化，或者视图位置发生改变时候，调用此方法。

组合控件

通过继承系统已经存在的视图容器，在初始化时候，直接加载布局

mInflater.inflate(<布局资源的ID>,this);
mIvBack = (ImageView) findViewById(R.id.btn_back);

继承控件

通过继承系统已经存在的视图或者视图容器，在内部改变此视图或者视图容器的功能
例如：通过改变ListView添加删除功能

自定义View步骤

创建类，继承View及View的子类，并提供相关的构造方法
重写onMeasure()方法，并调用setMeasuredDimension(int width, int height)设置控件的大小
重写onDraw()方法，实现绘制特定内容
重写onTouchEvent()方式处理触摸事件
在布局文件中使用<类全名>并设置属性

自定义View属性

1.位置：res/values/attrs.xml

2.属性集

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 声明属性集 -->
    <declare-styleable name="LabelView">
        <attr name="text" format="string"/>
        <attr name="textSize" format="dimension"/>
        <attr name="textColor" format="color" />
    </declare-styleable>
</resources>

3.指定属性名及其内容格式
例：<attr name="text" format="string" />

string 字符型
integer 整数型
dimension 尺寸值
color 颜色值
reference 参考某一资源ID
boolean：布尔值

使用自定义View属性

在布局控件标签中引用：xmlns:my="http://schemas.android.com/apk/res/{package_name}"
或xmlns:app="http://schemas.android.com/apk/res-auto"
在自定义控件中使用：my:text＝““或app:text=""

在自定义View的View(Context context, AttributeSet attrs)构造方法中,获取自定义属性的值

//TypedArray是一个用来存放由context.obtainStyledAttributes获得的属性的数组
        //在使用完成后，一定要调用recycle方法
         TypedArray ta = context.obtainStyledAttributes(attrs,
                    R.styleable.LabelView);

            CharSequence s = ta.getString(R.styleable.LabelView_text);
            if (s != null) {
                setText(s.toString());
            }

            setTextColor(ta.getColor(R.styleable.LabelView_textColor, 0xFF000000));

            int textSize = ta.getDimensionPixelSize(R.styleable.LabelView_textSize, 0);
            if (textSize > 0) {
                setTextSize(textSize);
            }
            ta.recycle();

涉及相关类

View 类

View(Context) 动态实例化控件的构造方法
View(Context context, AttributeSet attrs) 布局中使用控件的构造的方法
onMeasure(int widthMeasureSpec, int heightMeasureSpec) 自定义控件时重写的方法，用于测量控件大小
onDraw(Canvas canvas) 在自义控件上绘制相关内容
onTouchEvent(MotionEvent) 实现触摸事件处理方法
setPadding(int l,int t,int r,int b) 设置内部间距
layout(int l, int t, int r,int b) 改变控件位置的方法
requestLayout() //清除布局，获取新的布局空间(刷新UI，重新调用onDraw()方法绘制UI)
invalidate() //重新绘制新的数据(刷新UI，重新调用onDraw()方法绘制UI)

MeasureSpec 测量空间工具类

int MeasureSpec.getMode(mSpec) 获取控件大小模式
- MeasureSpec.EXACTLY，确切空间，布局中的属性值一般为match_parent或160dp固定值
- MeasureSpec.AT_MOST 尽量多的空间，布局中的属性值wrap_content
- MeasureSpec.UNSPECIFIED 未指定的，一般在父控件中使用
MeasureSpec.getSize(mSpec) 获取控件大小

TypedArray 属性数组类

TypeArray Context.obtainStyledAttributes(attrs,R.styleable.LabelView) 获取指定attrs中的所有属性
String getString(R.styleable.LabelView_text) 获取指定属性的文本值
int getDimensionPixelSize(R.styleable.LabelView_textSize, 0) 获取指定属性的间距值
int getColor(R.styleable.LabelView_textColor, 0xFF000000) 获取指定属性的颜色值

Paint 画笔类

Paint.setAntiAlias(true) 启用抗锯齿
Paint.setTextSize(int pixes) 设置字体大小，像素，一般转成sp
Paint.setColor(int color) 设置颜色
Paint.setStyle(Paint.Style) 设置画笔样式
float mTextPaint.measureText(String) 测量文字的大小
Paint.ascent() 获取文字基准线以上到文字顶部的间距，负数
Paint.descent() 获取文字基准线以下到文字底部的间距

Canvas 画布类

canvas.drawText(String,int x,int y,Paint) 绘制文本
canvas.drawRoundRect(RectF,int rx,int ry,Paint) 绘制圆角四边方形
canvas.drawBitmap(bitmap, left, top, paint) 绘制图片
canvas.drawCircle(cx, cy, radius, paint) 绘制圆
canvas.drawLine(startX, startY, stopX, stopY, paint) 绘制线条

Xfermode 两个图层的转换模式

Xfermode有三个子类 :
AvoidXfermode 指定了一个颜色和容差，强制Paint避免在它上面绘图(或者只在它上面绘图)。
PixelXorXfermode 当覆盖已有的颜色时，应用一个简单的像素异或操作。
PorterDuffXfermode 这是一个非常强大的转换模式，使用它，可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。

要应用转换模式，可以使用setXferMode方法，如下所示：

AvoidXfermode avoid = new AvoidXfermode(Color.BLUE, 10, AvoidXfermode.Mode. AVOID);
borderPen.setXfermode(avoid);

PorterDuff.Mode为枚举类,一共有16个枚举值:

1.PorterDuff.Mode.CLEAR
所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC
显示上层绘制图片
3.PorterDuff.Mode.DST
显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER
正常绘制显示，上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER
上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN
取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN
取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT
取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT
取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP
取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP
取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR
异或：去除两图层交集部分
13.PorterDuff.Mode.DARKEN
取两图层全部区域，交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN
取两图层全部，点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY
取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN
取两图层全部区域，交集部分变为透明色