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

原创 2016年08月29日 00:04:24

工作内容:

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


Android自定义控件——时钟、进度条

由于Android提供的空间有限,不能满足程序的需求,所以才有了自定义控件时钟首先要写一个类继承自Viewpackage com.example.administrator.myselfview.vi...

Android 自定义控件 时钟的实现

Android 自定义控件 时钟的实现

Vue组件库之进度条(progressbar)组件

效果图 首先我们看一下进度条组件运行出来的效果,如下图显示 进度条组件 实现过程 项目搭建 progressbar组件在一个可以直接运行的npm包,通...

Android进阶——自定义View之扩展系统控件的另一种思路实现渐变文字动画的TextView

重写系统控件TextView的成员方法扩展新的实现带边框和渐变动画的自定义TextView...

Android 自定义TextView实现文字渐变动画

效果图 代码: import android.content.Context; import android.graphics.Canvas; import android.graphics.Li...

自定义TextView实现渐变色边框,渐变色文字并绘制drawable

工作需求,渐变色的边框和文字,还需要显示drawable。我们知道如果是View的背景色渐变,那么很好办,只需要写一个drawable文件,里面定义shape然后设置为View的background就...

自定义TextView 实现文字渐变效果

今天看见公司的代码 对此段代码比较疑惑看了下 自定义textview渐变 为此记录下来一杯日后自用 public class MyTextView extends TextView {  privat...

Android实现从左往右TextView淡入淡出渐变效果

首先跟大家说声抱歉,由于最近鄙人感冒身体欠安,所以博客很久没更新了,我觉得是时候不玩捉迷臧了,废话不多说,还是老套路,上效果图! 其实实现原理很简单首先我们看一张图,画的少不喜随便喷哈哈! ...

自定义颜色渐变的TextView

有时候我们会看到有些文字上面有其他颜色一闪而过,最常看见的情景就是手机在开机的时候logo的渐变。 这里先贴上一张静态图,实际上运行效果是动态的: 先贴代码: import andr...

Android自定义TextView闪烁文字的效果

要想实现这个效果,可以充分利用Android中Paint对象的Shader渲染器。通过设置一个不断变化的LinearGradient,并使用带有该属性的Paint对象来绘制显示的文字,首先在onSiz...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android自定义控件View(实现控件的动画效果,自定义类画简略时钟,TextView中文字逐一显示,动态设置progress的圆环/扇形ProgressBar等)
举报原因:
原因补充:

(最多只允许输入30个字)