自定义View-跑马灯效果

自定位View的广泛使用,使得我们程序更多的充满了可变性,灵活性。这个跑马灯效果是通过线程,给予自定义View一些简单的动态效果。中间我会简单的提及到一些小的知识点,比如ARGB的运用,获取字符串长度等。先创建一个class  文件使他继承View,然后定义一些变量,MyViewThread 是待会定义的一个类继承与Thread
float rx是跑马灯文字的X坐标,他的移动距离增加也代表跑马灯的移速。
Random rand 是等会会使用的颜色变化值,稍后会详细介绍
Paint paint 是创建的画笔


 public class MyView extends View{
    private MyViewThread thread;
    private float rx=0;
    Random rand=new Random();
    Paint paint=new Paint();

右键source 点击 General constructor from superclass,选择select all,让他自动生成。

前面2和是自定义属性使用,这个简单的马炮等效果没做那么复杂,所以没有去设置,如果想自定义速度、颜色之类的可以自己去宽展。
后面的才是必须的,这个可以让自己在xml文件中把这个View当做控件进行添加。这3兄弟我一般是一起添加。
    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyView(Context context) {
        super(context);
    }
重写onDraw方法,先判断是否有线程,没有的话创建线程,当线程开始后设置画笔大小,创建Text,参数分别,String,X坐标,Y坐标,画笔。  

    @Override
    protected void onDraw(Canvas canvas) {
        if (thread==null) {
            thread=new MyViewThread();
            thread.start();
        }else {
            paint.setTextSize(50);
            canvas.drawText("跑马灯效果", rx, 300, paint);
        }

    }

  然后创建一个线程,我们将在线程里面的更新进行跑马灯的判断,移动和UI的更新。在while循环中,rx代表文字的X坐标,他的+=与Thread.sleep(30)相承接,线程睡眠代表着X轴移动的触发平率,当前是0.3秒

X周移动3的距离(在xml生成以后系统会直接把dp转化为px单位,根据个每个160dpi的屏幕,1dp=1pxdip,320dps,1dp=2pxdip)
if (rx>getWidth()) {rx=0 - paint.measureText("Myview");} 是当rx大于当前View的布局,我们将获取“跑马灯效果”这段字体

的长度作为偏移量加到rx=0的时候,使他像是从来从头开始的效果。我们又给画笔设置不断变化的颜色使他显示出跑马灯的效果。


paint.setARGB(255, r, g, b);ARGB中a代表alpha 透明度,R代表Red 红色,G代表Green绿色,B代表Bule蓝色。遵循16进制原则
    0-256。

    postInvalidate();是主线程更新UI的方法。

class MyViewThread extends Thread{


        @Override
        public void run() {
            // TODO Auto-generated method stub
            while (true) {
                rx+=3;
                if (rx>getWidth()) {
                    rx=0 - paint.measureText("跑马灯效果");
                }
                int r=rand.nextInt(200)+56;
                int g=rand.nextInt(200)+56;
                int b=rand.nextInt(200)+56;
                paint.setARGB(255, r, g, b);
                postInvalidate();
                try {
                    Thread.sleep(30);
                } catch (InterruptedException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        }
    }


下载链接地址:
http://download.csdn.net/detail/connery_thunder/9409672


你可能感兴趣的:(自定义View-跑马灯效果)