自定义drawable

最新推荐文章于 2022-10-18 11:31:56 发布

原创最新推荐文章于 2022-10-18 11:31:56 发布 · 309 阅读

1 ·

CC 4.0 BY-SA版权

自定义控件专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用自定义Drawable实现的简单波浪动画效果的方法。通过不断调用draw()方法来更新UI显示，并利用Handler机制控制动画的帧率。文章提供了完整的代码示例，包括自定义Drawable类和Activity的实现。

这里主要是为了说明如何在drawable中重复调用draw()方法。

只要调用invalidateSelf();就能再次调用draw（）方法下面贴出自定义的drawable代码

package com.example.yangzhelin.myzxing;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.util.Log;

/**
 * Created by yangzhelin on 2016/9/21.
 */
public class HaloveWave extends Drawable {
    private Paint mPaint;
    private boolean isRunning;
    private boolean isAdd;
    private float offset;
    private Handler handler;
    private final static int WRAP_CONTENT=200;
    private final static int SPEED=15;
    private final static int OFFSETMIN=0;
    private final static int OFFSETMAX=20;
    private final static int PAINTWIDTH=17;
    public HaloveWave(){
        handler=new Handler();
        mPaint=new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(PAINTWIDTH);
        mPaint.setColor(Color.parseColor("#FEDA14"));
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        isRunning=true;
        isAdd=true;
    }

    /**
     * 获得当前是否继续跑
     * @return
     */
    public boolean isRunning() {
        return isRunning;
    }

    /**
     * 设置是跑还是暂停
     * @param running
     */
    public void setRunning(boolean running) {
        isRunning = running;
        if(running==true){
            overDraw();
        }
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawLine(20f,60f-offset,20f,100f+offset,mPaint);
        canvas.drawLine(50f,40f+offset,50f,120f-offset,mPaint);
        canvas.drawLine(80f,20f+offset,80f,140f-offset,mPaint);
        canvas.drawLine(110f,40f+offset,110f,120f-offset,mPaint);
        canvas.drawLine(140f,60f-offset,140f,100f+offset,mPaint);
        if(isRunning&&canvas!=null){
            overDraw();
        }
    }
    public void overDraw(){
        if(isAdd){
            offset++;
            if(offset>OFFSETMAX){
                isAdd=false;
            }
        }else {
            offset--;
            if(offset<OFFSETMIN){
                isAdd=true;
            }
        }
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                invalidateSelf();
            }
        },SPEED);

    }

    @Override
    public int getIntrinsicHeight() {

        return WRAP_CONTENT;

    }

    @Override
    public int getIntrinsicWidth() {

        return WRAP_CONTENT;
    }

    @Override
    public void setBounds(Rect bounds) {

        super.setBounds(bounds);
    }

    @Override
    public void setAlpha(int alpha) {

        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {

        mPaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return 0;
    }
}

getIntrinsicWidth、getIntrinsicHeight主要是为了在View使用wrap_content的时候，提供一下尺寸

代码我固定死了为200,200；

Activity 代码：

public class MainActivity extends AppCompatActivity {
    ImageView iv;
    HaloveWave wave;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv= (ImageView) findViewById(R.id.iv);
        wave=new HaloveWave();
        iv.setImageDrawable(wave);
    }


    public void doclick(View view){
       boolean isRunning= wave.isRunning();
        wave.setRunning(!isRunning);
    }

    
}

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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.yangzhelin.myzxing.MainActivity">


    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="生成"
        android:onClick="doclick"
        android:layout_below="@+id/iv"
        />
</RelativeLayout>

总结比自定义view简单很多，