项目需求，需要类似于支付宝支付时的圆形进度条，主要效果是圆形有无到有，再变成由有到无，如果加载成功，则在有无到有结束的时候，显示对号
具体效果图：
类似的实现，在github上有一个开源项目，github，我下载下来，在原有代码的基础上进行了修改
CusImage.java
public class CusImage extends View {
private Paint myPaint;
private Paint myFramePaint;
public TextView value;
private float startAngle;
public float temp;
float sweepAngle;
private int flag = 0;
RectF rect;
private MasterLayout m;
int pix = 0;
public boolean progressFlag = true;//两种绘画方式，由无到有为true，由有到无为false
public CusImage(Context context, AttributeSet attrs, MasterLayout m) {
super(context, attrs);
this.m = m;
init();
}
public CusImage(Context context, MasterLayout m) {
super(context);
this.m = m;
init();
}
private void init() {
myPaint = new Paint();
DisplayMetrics metrics = getContext().getResources()
.getDisplayMetrics();
int width = metrics.widthPixels;
int height = metrics.heightPixels;
float scarea = width * height;
pix = (int) Math.sqrt(scarea * 0.07);
myPaint.setAntiAlias(true);
myPaint.setStyle(Paint.Style.STROKE);
myPaint.setColor(getResources().getColor(R.color.baseGreen)); // Edit this to change
// progress arc color.
myPaint.setStrokeWidth(15);
myFramePaint = new Paint();
myFramePaint.setAntiAlias(true);
myFramePaint.setColor(Color.TRANSPARENT);
float startx = (float) (pix * 0.05);
float endx = (float) (pix * 0.95);
float starty = (float) (pix * 0.05);
float endy = (float) (pix * 0.95);
rect = new RectF(startx, starty, endx, endy);
}
public void setupprogress(int progress) {
// Updating progress arc
sweepAngle = (float) (progress * 3.6);
//Log.e("sweepAngle", sweepAngle+"");
}
public void setupprogress2(int progress) {
// Updating progress arc
sweepAngle = (float) (progress * 3.6) - 360;
//Log.e("sweepAngle", sweepAngle+"");
}
public void reset() {
// Resetting progress arc
sweepAngle = 0;
startAngle = -90;
flag = 1;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int desiredWidth = pix;
int desiredHeight = pix;
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width;
int height;
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
width = Math.min(desiredWidth, widthSize);
} else {
width = desiredWidth;
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
height = Math.min(desiredHeight, heightSize);
} else {
height = desiredHeight;
}
setMeasuredDimension(width, height);
}
@Override
protected void onDraw(Canvas canvas) {
/*if(progressFlag==1){
canvas.drawArc(rect, startAngle, sweepAngle, false, myPaint);
startAngle = -90;
invalidate();
else if (flag == 1) {
sweepAngle = 0;
startAngle = -90;
flag = 0;
invalidate();
} else {
reset();
invalidate();
sweepAngle = 0;
startAngle = -90;
m.finalAnimation();
}
}else{
canvas.drawArc(rect, startAngle, sweepAngle, false, myPaint);
sweepAngle = 270;
if (startAngle < 360 && flag == 0) {
invalidate();
} else {
reset();
invalidate();
sweepAngle = 0;
startAngle = -90;
m.finalAnimation();
}
}*/
canvas.drawArc(rect, startAngle, sweepAngle, false, myPaint);
startAngle = -90;
invalidate();
//取消注释，可以演示对号效果
/*if(progressFlag==true){
m.finalAnimation();
}*/
}
}MasterLayout.java
//圆形进度条
public class MasterLayout extends FrameLayout {
public CusImage cusview;
public int pix = 0;
public RectF rect;
private ImageView buttonimage, fillcircle, full_circle_image, arc_image;
private Path tick, download_triangle, download_rectangle;
private Bitmap third_icon_bmp, second_icon_bmp, first_icon_bmp;
private Paint stroke_color, fill_color, icon_color, final_icon_color;
private AnimationSet in, out;
private RotateAnimation arcRotation;
private ScaleAnimation new_scale_in, scale_in, scale_out;
private AlphaAnimation fade_in, fade_out;
public int flg_frmwrk_mode = 0;
boolean first_click = false;
Canvas full_circle_canvas;
public MasterLayout(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
initialise();
setpaint();
setAnimation();
displayMetrics();
iconCreate();
init(true);
}
public MasterLayout(Context context) {
super(context);
setBackgroundColor(Color.CYAN);
initialise();
setpaint();
setAnimation();
displayMetrics();
iconCreate();
init(true);
}
private void initialise() {
cusview = new CusImage(getContext(), this);
buttonimage = new ImageView(getContext());
full_circle_image = new ImageView(getContext());
arc_image = new ImageView(getContext());
fillcircle = new ImageView(getContext());
cusview.setClickable(false);
buttonimage.setClickable(false);
full_circle_image.setClickable(false);
arc_image.setClickable(false);
cusview.setClickable(false);
setClickable(true);
fillcircle.setClickable(false);
}
private void setpaint() {
// Setting up color
stroke_color = new Paint(Paint.ANTI_ALIAS_FLAG);
stroke_color.setAntiAlias(true);
stroke_color.setColor(getResources().getColor(R.color.baseGreen)); // Edit this to change
// the circle color
stroke_color.setStrokeWidth(15);
stroke_color.setStyle(Paint.Style.STROKE);
icon_color = new Paint(Paint.ANTI_ALIAS_FLAG);
icon_color.setColor(getResources().getColor(R.color.baseGreen));
icon_color.setStyle(Paint.Style.FILL_AND_STROKE); // Edit this to change
// the icon color
icon_color.setAntiAlias(true);
final_icon_color = new Paint(Paint.ANTI_ALIAS_FLAG);
final_icon_color.setColor(getResources().getColor(R.color.baseGreen)); // Edit this to change the final
// icon color
final_icon_color.setStrokeWidth(15);
final_icon_color.setStyle(Paint.Style.STROKE);
final_icon_color.setAntiAlias(true);
fill_color = new Paint(Paint.ANTI_ALIAS_FLAG);
fill_color.setColor(getResources().getColor(R.color.baseGreen)); // Edit this to change the
// circle fill color
//fill_color.setStrokeWidth(15);
fill_color.setStyle(Paint.Style.FILL_AND_STROKE);
fill_color.setAntiAlias(true);
}
private void setAnimation() {
// Setting up and defining view animations.
arcRotation = new RotateAnimation(0.0f, 360.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
arcRotation.setDuration(1000);
in = new AnimationSet(true);
out = new AnimationSet(true);
out.setInterpolator(new AccelerateDecelerateInterpolator());
in.setInterpolator(new AccelerateDecelerateInterpolator());
scale_in = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
scale_out = new ScaleAnimation(1.0f, 3.0f, 1.0f, 3.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
new_scale_in = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
new_scale_in.setDuration(200);
fade_in = new AlphaAnimation(0.0f, 1.0f);
fade_out = new AlphaAnimation(1.0f, 0.0f);
scale_in.setDuration(150);
scale_out.setDuration(150);
fade_in.setDuration(150);
fade_out.setDuration(150);
in.addAnimation(scale_in);
in.addAnimation(fade_in);
out.addAnimation(fade_out);
out.addAnimation(scale_out);
arcRotation.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub
first_click = false;
buttonimage.startAnimation(out);
}
});
out.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
System.out.println("print this");
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
buttonimage.setVisibility(View.GONE);
buttonimage.setImageBitmap(second_icon_bmp);
buttonimage.setVisibility(View.VISIBLE);
buttonimage.startAnimation(in);
arc_image.setVisibility(View.GONE);
full_circle_image.setVisibility(View.VISIBLE);
cusview.setVisibility(View.VISIBLE);
flg_frmwrk_mode = 2;
System.out.println("flg_frmwrk_mode" + flg_frmwrk_mode);
}
});
new_scale_in.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
cusview.setVisibility(View.GONE);
buttonimage.setVisibility(View.VISIBLE);
buttonimage.setImageBitmap(third_icon_bmp);
full_circle_canvas.drawArc(rect, 0, 360, false, stroke_color);
flg_frmwrk_mode = 3;
buttonimage.startAnimation(in);
}
});
}
private void displayMetrics() {
// Responsible for calculating the size of views and canvas based upon
// screen resolution.
DisplayMetrics metrics = getContext().getResources()
.getDisplayMetrics();
int width = metrics.widthPixels;
int height = metrics.heightPixels;
float scarea = width * height;
pix = (int) Math.sqrt(scarea * 0.07);
}
private void iconCreate() {
// Creating icons using path
// Create your own icons or feel free to use these
/* play = new Path();
play.moveTo(pix * 40 / 100, pix * 36 / 100);
play.lineTo(pix * 40 / 100, pix * 63 / 100);
play.lineTo(pix * 69 / 100, pix * 50 / 100);
play.close();
stop = new Path();
stop.moveTo(pix * 38 / 100, pix * 38 / 100);
stop.lineTo(pix * 62 / 100, pix * 38 / 100);
stop.lineTo(pix * 62 / 100, pix * 62 / 100);
stop.lineTo(pix * 38 / 100, pix * 62 / 100);
stop.close();*/
download_triangle = new Path();
download_triangle.moveTo(pix * 375 / 1000, (pix / 2)
+ (pix * 625 / 10000) - (pix * 3 / 100));
download_triangle.lineTo(pix / 2, (pix * 625 / 1000)
+ (pix * 625 / 10000) - (pix * 3 / 100));
download_triangle.lineTo(pix * 625 / 1000, (pix / 2)
+ (pix * 625 / 10000) - (pix * 3 / 100));
download_triangle.close();
download_rectangle = new Path();
download_rectangle.moveTo(pix * 4375 / 10000, (pix / 2)
+ (pix * 625 / 10000) - (pix * 3 / 100));
download_rectangle.lineTo(pix * 5625 / 10000, (pix / 2)
+ (pix * 625 / 10000) - (pix * 3 / 100));
download_rectangle.lineTo(pix * 5625 / 10000, (pix * 375 / 1000)
+ (pix * 625 / 10000) - (pix * 3 / 100));
download_rectangle.lineTo(pix * 4375 / 10000, (pix * 375 / 1000)
+ (pix * 625 / 10000) - (pix * 3 / 100));
download_rectangle.close();
tick = new Path();
tick.moveTo(pix * 30 / 100, pix * 50 / 100);
tick.lineTo(pix * 45 / 100, pix * 625 / 1000);
tick.lineTo(pix * 65 / 100, pix * 350 / 1000);
}
//第一次初始化，默认显示圆形，其他调用，不显示圆形
public void init(boolean isFirstInit) {
// Defining and drawing bitmaps and assigning views to the layout
FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
FrameLayout.LayoutParams.WRAP_CONTENT,
FrameLayout.LayoutParams.WRAP_CONTENT);
lp.setMargins(10, 10, 10, 10);
fillcircle.setVisibility(View.GONE);
Bitmap.Config conf = Bitmap.Config.ARGB_8888; // see other conf types
Bitmap full_circle_bmp = Bitmap.createBitmap(pix, pix, conf);
Bitmap arc_bmp = Bitmap.createBitmap(pix, pix, conf);
Bitmap fill_circle_bmp = Bitmap.createBitmap(pix, pix, conf);
first_icon_bmp = Bitmap.createBitmap(pix, pix, conf); // Bitmap to draw
// first icon(
// Default -
// Play )
second_icon_bmp = Bitmap.createBitmap(pix, pix, conf); // Bitmap to draw
// second icon(
// Default -
// Stop )
third_icon_bmp = Bitmap.createBitmap(pix, pix, conf); // Bitmap to draw
// third icon(
// Default -
// Tick )
//Canvas first_icon_canvas = new Canvas(first_icon_bmp);
//Canvas second_icon_canvas = new Canvas(second_icon_bmp);
Canvas third_icon_canvas = new Canvas(third_icon_bmp);
//Canvas fill_circle_canvas = new Canvas(fill_circle_bmp);
full_circle_canvas = new Canvas(full_circle_bmp);
//Canvas arc_canvas = new Canvas(arc_bmp);
float startx = (float) (pix * 0.05);
float endx = (float) (pix * 0.95);
System.out.println("full circle " + full_circle_canvas.getWidth()
+ full_circle_canvas.getHeight());
float starty = (float) (pix * 0.05);
float endy = (float) (pix * 0.95);
rect = new RectF(startx, starty, endx, endy);
//first_icon_canvas.drawPath(play, fill_color); // Draw second icon on canvas( Default - Stop ).
// *****Set your second icon here****
//second_icon_canvas.drawPath(stop, icon_color); // Draw second icon on canvas( Default - Stop ).
// *****Set your second icon here****
third_icon_canvas.drawPath(tick, final_icon_color); // Draw second icon on canvas( Default - Stop ).
// *****Set your second icon here****
if(isFirstInit){
full_circle_canvas.drawArc(rect, 0, 360, false, stroke_color);
}
//fill_circle_canvas.drawArc(rect, 0, 360, false, fill_color);
//arc_canvas.drawArc(rect, -80, 340, false, stroke_color);
buttonimage.setImageBitmap(first_icon_bmp);
flg_frmwrk_mode = 1;
fillcircle.setImageBitmap(fill_circle_bmp);
full_circle_image.setImageBitmap(full_circle_bmp);
arc_image.setImageBitmap(arc_bmp);
cusview.setVisibility(View.GONE);
addView(full_circle_image, lp);
addView(arc_image, lp);
addView(fillcircle, lp);
addView(buttonimage, lp);
addView(cusview, lp);
buttonimage.setVisibility(View.GONE);
fillcircle.setVisibility(View.GONE);
}
public void animation() {
// Starting view animation and setting flag values
if (first_click == false) {
if (flg_frmwrk_mode == 1) {
//去掉所有views，重新初始化，进行动画
removeAllViews();
fill_color.setColor(getResources().getColor(R.color.black));
init(false);
first_click = true;
full_circle_image.setVisibility(View.GONE);
/*arc_image.setVisibility(View.VISIBLE);
arc_image.startAnimation(arcRotation);*/
buttonimage.setVisibility(View.GONE);
buttonimage.setImageBitmap(second_icon_bmp);
buttonimage.setVisibility(View.VISIBLE);
buttonimage.startAnimation(in);
arc_image.setVisibility(View.GONE);
full_circle_image.setVisibility(View.VISIBLE);
cusview.setVisibility(View.VISIBLE);
}
}
}
public void finalAnimation() {
// Responsible for final fill up animation
buttonimage.setVisibility(View.GONE);
fillcircle.setVisibility(View.VISIBLE);
fillcircle.startAnimation(new_scale_in);
}
public void reset() {
// Responsible for resetting the state of view when Stop is clicked
cusview.reset();
cusview.setVisibility(View.GONE);
buttonimage.setImageBitmap(first_icon_bmp);
flg_frmwrk_mode = 1;
}
//点击控件，需要先填满圆形，然后将圆形取消，进行动画
public void onClick(){
removeAllViews();
init(false);
full_circle_canvas.drawArc(rect, 0, 360, false, fill_color);
}
}
MainActivity.java
mIdTextViewSign.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mIdTextViewSign.setClickable(false);
mMasterLayout01.onClick();
mIdTextViewSign.setTextColor(getResources().getColor(R.color.white));
new Handler().postDelayed(new Runnable() {
public void run() {
//mMasterLayout01.removeViews();
mIdTextViewSign.setVisibility(View.GONE);
mMasterLayout01.animation(); //Need to call this method for animation and progression
if (mMasterLayout01.flg_frmwrk_mode == 1) {
if(mTimer==null){
mTimer = new Timer();
mTimerTask = new TimerTask() {
@Override
public void run() {
progress++;
if (progress == 100) {
progress = 0;
if (mMasterLayout01.cusview.progressFlag) {
mMasterLayout01.cusview.progressFlag = false;
} else {
mMasterLayout01.cusview.progressFlag = true;
}
}
if (mMasterLayout01.cusview.progressFlag) {
mMasterLayout01.cusview.setupprogress(progress);
} else {
mMasterLayout01.cusview.setupprogress2(progress);
}
}
};
//开始一个定时任务
mTimer.schedule(mTimerTask, 0, 10);
}
}
}
}, 500);
}
});activity_main.xml
//省略...
<FrameLayout
android:id="@+id/id_frameLayoutSign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="45dp">
<boerpower.com.electricmanager.CustomViews.MasterLayout
android:id="@+id/MasterLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
>
</boerpower.com.electricmanager.CustomViews.MasterLayout>
<TextView
android:id="@+id/id_textViewSign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#2ebea0"
android:textSize="18sp"
android:layout_margin="10dp"
android:textStyle="bold"
android:text="签到"
android:layout_gravity="center"
/>
</FrameLayout>
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
