最近项目上有个需求,让在原来的横向ProgressBar的基础上添加一个动画小人,让小人跟着那个进度条移动位置!
然后自己就做了一个,但是不知道这个编辑器要怎么传视频,而且gif弄了半天也没弄好,就传张截图代替吧!截图上的小人是会动的!
文章图片
这个是demo的截图,点击开始按钮后,小人会蹦蹦跳跳的往前移动!
实现原理:
1.未采用继承ProgressBar或者直接继承view的方式去写,而是采用了自定义view最简单的组合控件的方式,就是把一个ImageView和一个ProgressBar进行了组合.
2.在自定义的view中提供public方法setProgress,在该方法内部一方面改变ProgressBar的进度,另一方法更改小人的位置!
原理就是这么简单!
package com.example.myprogressbar;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;
public class MyProgress extends RelativeLayout {private View mProgressBar_layout;
private ImageView progress_imageview;
private ProgressBar progressBar;
private int max = 100;
//默认ProgressBar的最大值为100
private int mProgress = 0;
private int left;
private int top;
private int right;
private int bottom;
public MyProgress(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}public MyProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}public MyProgress(Context context) {
this(context, null);
}private void init(Context context) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mProgressBar_layout = inflater.inflate(R.layout.progressbar_layout, null);
progress_imageview = (ImageView) mProgressBar_layout.findViewById(R.id.progress_imageview);
AnimationDrawable background = (AnimationDrawable) progress_imageview.getBackground();
background.start();
progressBar = (ProgressBar) mProgressBar_layout.findViewById(R.id.progressBar);
this.addView(mProgressBar_layout);
}@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
int iv_height = progress_imageview.getMeasuredHeight();
int iv_width = progress_imageview.getMeasuredWidth();
int iv_bottom = progress_imageview.getBottom();
int progress_left = progressBar.getLeft();
int progress_width = progressBar.getMeasuredWidth();
progress_imageview.layout(progress_left + mProgress * (progress_width - iv_width) / max, iv_bottom - iv_height, progress_left + mProgress * (progress_width - iv_width) / max + iv_width, iv_bottom);
}/**
* 设置ProgressBar的进度及小人的位置
*
* @param progress
*/
@SuppressLint("WrongCall")
public void setProgress(int progress) {
if (progress > max) {
this.mProgress = max;
} else {this.mProgress = progress;
}
this.onLayout(true, left, top, right, bottom);
progressBar.setProgress(mProgress);
}/**
* 获取当前ProgressBar的进度
*
* @return
*/
public int getProgress() {
return mProgress;
}/**
* 设置ProgressBar的最大值
*
* @param max
*/
public void setMax(int max) {
this.max = max;
}
}
【自定义带动画效果的ProgressBar】点击下载源码
