欢迎访问宙启技术站
智能推送

Android自定义View实现APP启动页倒计时效果

发布时间:2023-05-14 21:46:59

在APP中,启动页是一个非常重要的页面,是用户 次接触到APP的界面,常常会留下很深的印象。为了增加用户体验,一些APP会在启动页上添加倒计时效果,提示用户APP正在加载。而这个倒计时效果可以通过自定义View来实现。

1.创建自定义View类

首先需要创建一个自定义View类,用于绘制倒计时效果。还可以添加一些属性,例如倒计时的总时间和字体大小等。

public class CountDownView extends View {

    private Paint mPaint;
    private int mTotalTime;
    private int mCurrentTime;
    private float mTextSize;

    // 构造函数
    public CountDownView(Context context) {
        this(context, null);
    }

    public CountDownView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CountDownView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    // 初始化
    private void init(AttributeSet attrs) {
        // 初始化画笔
        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setAntiAlias(true);
        mPaint.setTextAlign(Paint.Align.CENTER);

        // 获取自定义属性
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.CountDownView);
        mTextSize = ta.getDimension(R.styleable.CountDownView_textSize, 30);
        mTotalTime = ta.getInt(R.styleable.CountDownView_totalTime, 5);
        ta.recycle();

        // 设置字体大小
        mPaint.setTextSize(mTextSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制倒计时数字
        canvas.drawText(String.valueOf(mCurrentTime), getWidth() / 2, getHeight() / 2, mPaint);
    }

    // 设置倒计时总时间
    public void setTotalTime(int totalTime) {
        mTotalTime = totalTime;
    }

    // 开始倒计时
    public void start() {
        final ValueAnimator animator = ValueAnimator.ofInt(mTotalTime, 0);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentTime = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.setDuration(mTotalTime * 1000);
        animator.start();
    }
}

2.在布局文件中使用自定义View

在布局文件中添加自定义View,并设置一些属性,例如倒计时总时间和字体大小等。

<com.example.countdownview.CountDownView
    android:id="@+id/countDownView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    app:textSize="50"
    app:totalTime="5" />

3.在Activity中启动倒计时

在Activity中获取CountDownView对象,并通过调用start()方法开始倒计时。

public class MainActivity extends AppCompatActivity {

    private CountDownView mCountDownView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mCountDownView = findViewById(R.id.countDownView);
        mCountDownView.start();
    }
}

这样就实现了一个简单的APP启动页倒计时效果。当然,还可以进一步优化,例如添加动画效果,更改倒计时数字的样式等。