Android群英传读书笔记---自定义控件(-)

自定义控件

虽然我也写过自定义控件，但是从没有进行一个系统的总结，正好借这本书的内容，重新梳理一下，

通常情况下，常用的有三种方法：

对现有控件进行扩展

通过组合控件来实现新的控件

重写view来实现全新的控件（最难）

1. 对现有控件进行拓展

对原生控件的扩展，只需要重写onDraw(Canvas canvas)即可

private void initPaint(){
paint1 = new Paint();
paint1.setColor(getResources().getColor(android.R.color.holo_blue_bright));
paint1.setStyle(Paint.Style.FILL);
paint2 = new Paint();
paint2.setColor(getResources().getColor(android.R.color.holo_green_dark));
paint2.setStyle(Paint.Style.FILL);
}
@Override
protected void onDraw(Canvas canvas) {
//TODO 回调父类方法前，对TextView来说绘制文本内容之前
//绘制一个外层矩形
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint1);
//绘制一个内层矩形
canvas.drawRect(10, 10, getMeasuredWidth()-10, getMeasuredHeight()-10, paint2);
canvas.save();
//绘制文字前平移10px
canvas.translate(10, 0);
super.onDraw(canvas);
canvas.restore();
//TODO 回调父类方法后，对TextView来说绘制文本内容之后
}

控件效果如下图：



再来一个复杂点的效果（动态文字闪烁效果）：

思路：通过设置一个不断变化的LinearGradient,并使用带有该属性的Paint对象来绘制要显示的文字。首先，在onSizeChanged(),中进行一些对象的初始化工作，根据view的宽设置一个LinearGradient渐变渲染器。

private int mViewWidth;
private Paint paint;
private LinearGradient linearGradient;
private Matrix matrix;
private int mTranslate;
@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){
paint = getPaint();
linearGradient = new LinearGradient(0, 0, mViewWidth, 0,
new int[]{Color.BLUE,0xffffffff,Color.GREEN}, new float[]{0,1,2}, Shader.TileMode.MIRROR);
paint.setShader(linearGradient);
matrix = new Matrix();
}
}
}

其中最关键的是，使用getPaint()方法获取绘制当前TextView的Paint，并给这个Paint设置一个LinearGradient,

最后，

在onDraw()方法中，通过矩阵的方式来不断平移渐变效果

@Override
protected void onDraw(Canvas canvas) {
//TODO 回调父类方法前，对TextView来说绘制文本内容之前
super.onDraw(canvas);
Log.e("mess", "------onDraw----");
if(matrix != null){
mTranslate += mViewWidth/5;
if(mTranslate>2*mViewWidth){
mTranslate =-mViewWidth;
}
matrix.setTranslate(mTranslate, 0);
linearGradient.setLocalMatrix(matrix);
postInvalidateDelayed(100);
}
//TODO 回调父类方法后，对TextView来说绘制文本内容之后
}

下面看效果图：

2. 创建复合控件

复合控件，最常见的其实就是我们的TitleBar了，一般就是一个left+title+right组合，我以前是做成一个xml文件，然后各个需要的地方，用<\include>标签引用，看了书上的例子，是把我这种xml的形式，做成了一个单独控件，就学习学习这种写法吧。

Begin

(1). values 目录下新建attrs.xml 定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TitleBar">
<!-- 定义title文字，大小，颜色 -->
<attr name="title" format="string" />
<attr name="titleTextSize" format="dimension"/>
<attr name="titleTextColor" format="color" />
<!-- 定义left 文字，大小，颜色，背景 -->
<attr name="leftText" format="string" />
<attr name="leftTextSize" format="dimension" />
<attr name="leftTextColor" format="color" />
<!-- 表示背景可以是颜色，也可以是引用 -->
<attr name="leftBackGround" format="color|reference" />
<!-- 定义right 文字，大小，颜色，背景 -->
<attr name="rightText" format="string" />
<attr name="rightTextSize" format="dimension"/>
<attr name="rightTextColor" format="color" />
<attr name="rightBackGround" format="color|reference" />
</declare-styleable>
</resources>

(2). 获取自定义的属性

/**
* 获取自定义的属性
*
* @param context
*/
private int leftTextColor;
private Drawable leftBackGround;
private String leftText;
private float leftTextSize;

private int rightTextColor;
private String rightText;
private float rightTextSize;

private int titleTextColor;
private String titleText;
private float titleTextSize;

private void initAttr(Context context, AttributeSet attrs) {
TypedArray typed = context.obtainStyledAttributes(attrs, R.styleable.TitleBar);
// 从TypedArray中取出对应的值为要设置的属性赋值，给个默认值
leftTextColor = typed.getColor(R.styleable.TitleBar_leftTextColor, 0XFFFFFFFF);
leftBackGround = typed.getDrawable(R.styleable.TitleBar_leftBackGround);
leftText = typed.getString(R.styleable.TitleBar_leftText);
leftTextSize = typed.getDimension(R.styleable.TitleBar_leftTextSize, 20);

rightTextColor = typed.getColor(R.styleable.TitleBar_rightTextColor, 0XFFFFFFFF);
rightText = typed.getString(R.styleable.TitleBar_rightText);
rightTextSize = typed.getDimension(R.styleable.TitleBar_rightTextSize, 20);

titleTextColor = typed.getColor(R.styleable.TitleBar_titleTextColor, 0XFFFFFFFF);
titleText = typed.getString(R.styleable.TitleBar_title);
titleTextSize = typed.getDimension(R.styleable.TitleBar_titleTextSize, 20);
// 不要忘记调用
typed.recycle();

}

（3）.代码布局组件

private TextView titleView;
private Button leftButton;
private Button rightButton;

private RelativeLayout.LayoutParams leftParams;
private RelativeLayout.LayoutParams rightParams;
private RelativeLayout.LayoutParams titleParams;

/**
* 代码布局
*
* @param context
*/
@SuppressWarnings("deprecation")
private void initView(Context context) {
titleView = new TextView(context);
leftButton = new Button(context);
rightButton = new Button(context);

// 为创建的组件赋值
titleView.setText(titleText);
titleView.setTextSize(titleTextSize);
titleView.setTextColor(titleTextColor);
titleView.setGravity(Gravity.CENTER);

leftButton.setText(leftText);
leftButton.setTextColor(leftTextColor);
leftButton.setBackgroundDrawable(leftBackGround);
leftButton.setTextSize(leftTextSize);

rightButton.setText(rightText);
rightButton.setTextSize(rightTextSize);
rightButton.setTextColor(rightTextColor);

// 为组件布局
// 在左边
leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
addView(leftButton, leftParams);

// 在右边
rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
addView(rightButton, rightParams);

//中间
titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
rightParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
addView(titleView, titleParams);

//添加点击监听，（下面讲述如何引入的）
leftButton.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
if (listener != null) {
listener.leftClick();
}
}
});

rightButton.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
if (listener != null) {
listener.rightClick();
}
}
});

}

（4）.定义接口

public interface TitleBarClickListener{
//左点击
void leftClick();
//右点击
void rightClick();
}

（5）.暴露接口给调用者

public void setTitleBarClickListener(TitleBarClickListener listener) {
this.listener = listener;
}

看下例子 布局文件

<com.example.day_1.TitleBar
android:id="@+id/titlebar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
app:leftBackGround="#ff000000"
app:leftText="left"
app:leftTextColor="#ffff6734"
app:leftTextSize="25dp"
app:rightText="right"
app:rightTextSize="25dp"
app:rightTextColor="#ff123456"
app:title="title"
app:titleTextColor="#ff654321"/>

代码

private TitleBar titlebar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
titlebar = (TitleBar) findViewById(R.id.titlebar);
titlebar.setTitleBarClickListener(this);
}

@Override
public void leftClick() {
Toast.makeText(this, "left---", Toast.LENGTH_LONG).show();

}

@Override
public void rightClick() {
Toast.makeText(this, "right---", Toast.LENGTH_LONG).show();

}

效果如下图:

3.重写view实现全新的控件

这个是我觉着三种自定义类型里，最难得了，迄今为止没有写出过什么出彩的控件，所以还是好好学习书上的内容吧，增加新技能。

———————————Begin——————————-

(1) .弧线展示图



思路：这个view可以分为三个部分，中间的圆圈，中间显示的文字，外圈的圆弧。只要有了这样的思路，剩余的就是在onDraw()方法中去绘制了。

测量控件大小，onMeasure()

private int mMeasureHeigth;// 控件高度
private int mMeasureWidth;// 控件宽度
// 圆形
private Paint mCirclePaint;
private float mCircleXY;//圆心坐标
private float mRadius;//圆形半径
// 圆弧
private Paint mArcPaint;
private RectF mArcRectF;//圆弧的外切矩形
private float mSweepAngle;//圆弧的角度
private float mSweepValue = 50;
// 文字
private Paint mTextPaint;
private String mShowText;//文本内容
private float mShowTextSize;//文本大小

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
mMeasureWidth = MeasureSpec.getSize(widthMeasureSpec);//获取控件宽度
mMeasureHeigth = MeasureSpec.getSize(heightMeasureSpec);//获取控件高度
setMeasuredDimension(mMeasureWidth, mMeasureHeigth);
initView();
}

/**
*准备画笔，
*/
private void initView() {

float length = Math.min(mMeasureWidth,mMeasureHeigth)
// 圆
mCircleXY = length / 2;// 确定圆心坐标
mRadius = (float) (length * 0.5 / 2);// 确定半径
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);// 去锯齿
mCirclePaint.setColor(getResources().getColor(android.R.color.holo_green_dark));

// 弧线
// 矩形
mArcRectF = new RectF((float) (length * 0.1), (float) (length * 0.1), (float) (length * 0.9),
(float) (length * 0.9));
mSweepAngle = (mSweepValue / 100f) * 360f;
mArcPaint = new Paint();
mArcPaint.setColor(getResources().getColor(android.R.color.holo_blue_bright));
mArcPaint.setStrokeWidth((float) (length * 0.1));//圆弧宽度
mArcPaint.setStyle(Style.STROKE);//圆弧
// 文字
mShowText = setShowText();
mShowTextSize = setShowTextSize();
mTextPaint = new Paint();
mTextPaint.setTextSize(mShowTextSize);
mTextPaint.setTextAlign(Paint.Align.CENTER);

}

private float setShowTextSize() {
this.invalidate();
return 50;
}

private String setShowText() {
this.invalidate();
return "Android Skill";
}

public void forceInvalidate() {
this.invalidate();
}

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

绘制控件, onDraw()

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制圆
canvas.drawCircle(mCircleXY, mCircleXY, mRadius, mCirclePaint);
// 绘制圆弧，逆时针绘制，角度跟
canvas.drawArc(mArcRectF, 90, mSweepAngle, false, mArcPaint);
// 绘制文字
canvas.drawText(mShowText, 0, mShowText.length(), mCircleXY, mCircleXY + mShowTextSize / 4, mTextPaint);

}

圆弧的绘制，开始位置如下图所示角度，以顺时针绘制图形

效果如下图



（2）.音频条形图



思路：绘制n个小矩形，每个矩形有些偏移即可

准备工作

private int mWidth;//控件的宽度
private int mRectWidth;// 矩形的宽度
private int mRectHeight;// 矩形的高度
private Paint paint;
private int mRectCount;// 矩形的个数
private int offset = 5;// 偏移
private double mRandom;
private LinearGradient lg;// 渐变

private void initView() {
paint = new Paint();
paint.setColor(Color.GREEN);
paint.setStyle(Paint.Style.FILL);
mRectCount = 12;
}

//重写onSizeChanged方法

@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);
lg = new LinearGradient(0, 0, mRectWidth, mRectHeight, Color.GREEN, Color.BLUE, TileMode.CLAMP);
paint.setShader(lg);
}

//重写onDraw方法
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < mRectCount; i++) {
mRandom = Math.random();
float currentHeight = (int) (mRectHeight * mRandom);
canvas.drawRect((float) (mWidth * 0.4 / 2 + mRectWidth * i + offset * i), currentHeight,
(float) (mWidth * 0.4 / 2 + mRectWidth * (i + 1) + offset * i), mRectHeight, paint);
}
postInvalidateDelayed(1000);
}

view的绘制坐标如下图所示：



效果图如下：

后记：

就像本书作者说的：无论多么复杂的自定义view都是慢慢迭代起来的功能，不要被自定义view吓到，总之，非常感谢作者，我对自定义view总算是有了一个完整的认识