Android自定义控件View(实现控件的动画效果，自定义类画简略时钟，TextView中文字逐一显示，动态设置progress的圆环/扇形ProgressBar等)

工作内容：

1.自定义控件——实现动画效果（TextView中文字逐一显示）

2.自定义一个简略时钟

注意：postInvalidate();是在回调onDraw()方法，如果是想动态的去设置控件的一些属性，在设置后应该调用这个方法去在去按新的属性值画一次

自定义属性：需在values目录下创建Values resource file，声明，下面有具体的操作

学习分享：

第一步：.新建一个java类继承自View，内容如下：

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;
import com.liu.lightmusic.R;
import com.liu.lightmusic.activity.tools.MyLogTools;

import java.util.Timer;
import java.util.TimerTask;

/**
 * Created by Administrator on 2016/8/27.
 */
public class TextView_wel extends View {
    private String text = "",tempText = "";
    private float textSize = 0;
    private int textColor;
    private int index = 0;
    public TextView_wel(Context context) {
        this(context, null);
    }
    public TextView_wel(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    /**
     * 构造函数：重写2个参数以上的的构造函数才能在xml中显示
     * @param context 上下文
     * @param attrs 属性集合
     * @param defStyleAttr  默认属性
     */
    public TextView_wel(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TextView_wel);
        //获取到xml中的属性的值
        text = typedArray.getString(0);
        textSize = typedArray.getDimension(R.styleable.TextView_wel_textSize, 12);
        textColor = typedArray.getInt(R.styleable.TextView_wel_textColor, Color.BLACK);
        showText();
    }
    //使用timer来实现：逐个显示文字
    private void showText() {
        Timer timer = new Timer();
        TimerTask timerTask = new TimerTask() {
            @Override
            public void run() {
                if(index!=text.length()+1){
                    tempText = text.substring(0,index);
                    //回调onDraw方法
                    postInvalidate();
                    index++;
//                    MyLogTools.d("showText——tempText:index"+tempText+":"+index);//测试将要显示的文字
                }else{
                    this.cancel();
                }
            }
        };
        timer.schedule(timerTask,0,200);		//每200毫秒执行一次timerTask中的run方法
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setTextSize(textSize);
        paint.setColor(textColor);
        //设置打印的字体为stroke（空心）
//        paint.setStyle(Paint.Style.STROKE);
//        paint.setStrokeWidth(1);
        canvas.drawText(tempText,0,textSize,paint);
        super.onDraw(canvas);
    }
}

第二步：在values目录下创建一个Values resource file,命名为：attrs_tv_wel(按自己的组件名来起名)

内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TextView_wel">
        <attr name="text" format="string"/>
        <attr name="textSize" format="dimension"/>
        <attr name="textColor" format="color"/>
    </declare-styleable>
</resources>

第三步：在xml（activity）文件中,使用刚刚自定义的组件TextView_wel

方法如下：

<com.liu.lightmusic.activity.view.TextView_wel
    android:layout_width="200dp"
    android:layout_height="20dp"
    android:layout_centerHorizontal="true"
    android:layout_above="@+id/iv_wel"
    android:layout_marginBottom="45dp"
    android:id="@+id/tv_wel"
    app:textSize="15sp"
    app:textColor="#666"
    app:text="@string/wel_tv_info"	//这个是@string是我在strings文件中配置好的，这里是在调用
    />

其中属性：

app:text="@string/wel_tv_info"

app:textSize="15sp"

app:textColor="#666"

这三个属性对应着 attrs_tv_wel中定义的三个属性，也对应着TextView_wel中的三个属性（text,textSize,textColor）

获取这三个在xml中设置好的属性：在TextView_wel类中有讲解

第四步：Activity中初始化

TextView_wel myTv = (TextView_wel)findViewById(R.id.tv_wel);

运行：能看到文字逐一显示的效果

二、自定义一个简约的时钟类

//画一个简略的时钟
public class MyWatch extends View {
    public MyWatch(Context context) {
        super(context);
    }

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

    public MyWatch(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);//消除锯齿
        paint.setStrokeWidth(6);//空【实心的会画出一个圆饼】
        paint.setColor(Color.BLUE);
        RectF rectF = new RectF(15,15,300,300);//绘画区域
        canvas.drawArc(rectF,-180,360,false,paint);//画一个圆
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GRAY);
        paint.setStrokeWidth(3);//设置线的宽度
        canvas.drawLine(150,150,200,150,paint);//画出一条线
        paint.setStrokeWidth(3);
        canvas.drawLine(150,150,60,190,paint);//画出一条线
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(150,150,5,paint);//在圆心画一个圆点
    }
}

xml使用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_demo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context="read.liu.com.wait.demo.DemoActivity">
    <read.liu.com.wait.demo.MyWatch
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:id="@+id/mw_demo"
        />
</RelativeLayout>

演示效果：