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


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

效果图 首先我们看一下进度条组件运行出来的效果,如下图显示 进度条组件 实现过程 项目搭建 progressbar组件在一个可以直接运行的npm包,通...
  • enterlind
  • enterlind
  • 2017年03月08日 13:54
  • 9042

Vue 圆圈形进度条

vue圆圈形进度条
  • tjzc1352640
  • tjzc1352640
  • 2018年01月11日 22:19
  • 248

android 自定义扇形

需求类型:转速表,电表等 需要一张表图片import android.animation.Animator; import android.animation.AnimatorListenerAda...
  • louyxlovess
  • louyxlovess
  • 2016年11月02日 13:48
  • 922

Android 仿扇形菜单实现(path)

记得在eoe上有人发过,但代码质量不好。我重写了一下,抽成了控件。但没有经过各种控件的相容性测试,如果和其他控件的相容性不好,就直接在activity中写代码吧,应该差不多的。 我用的是平板,所以效...
  • xizhilang87
  • xizhilang87
  • 2014年10月11日 23:54
  • 1201

Android 自定义view之扇形菜单(中)

一个扇形菜单,可以滑动切换,添加删除,拖动排序等炫酷的菜单
  • jeden
  • jeden
  • 2017年04月11日 20:15
  • 343

Android 自定义view之扇形菜单(上)

一个扇形菜单,可以滑动切换,添加删除,拖动排序等炫酷的菜单
  • jeden
  • jeden
  • 2017年04月11日 15:23
  • 1107

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

工作内容: 自定义控件——实现动画效果(TextView中文字逐一显示) 学习分享: 第一步:.新建一个java类继承自View,内容如下: import android.content.Conte...
  • yingtian648
  • yingtian648
  • 2016年08月29日 00:04
  • 813

显示文本进度的TextView

public class MyTextView extends TextView{ private TextPaint mPaint; private int currentX =...
  • u012762986
  • u012762986
  • 2014年07月23日 16:24
  • 439

Android自定义环形ProgressBar

在项目中有个需求,要实现如下图所示的进度条: 下面我们就用自定义的View来实现它。 package cn.yubo.roundprogress; import android.content....
  • yubo_725
  • yubo_725
  • 2015年01月23日 16:13
  • 1198

android在代码里直接画出环形统计图

先看效果图。 具体实现代码如下
  • l349440843
  • l349440843
  • 2014年07月25日 15:28
  • 6568
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android自定义控件View(实现控件的动画效果,自定义类画简略时钟,TextView中文字逐一显示,动态设置progress的圆环/扇形ProgressBar等)
举报原因:
原因补充:

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