关闭

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

497人阅读 评论(0) 收藏 举报
分类:

工作内容:

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>
演示效果:


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:47090次
    • 积分:1575
    • 等级:
    • 排名:千里之外
    • 原创:110篇
    • 转载:2篇
    • 译文:0篇
    • 评论:8条
    文章分类
    最新评论