您的位置:首页 > 移动开发 > Android开发

自定义View android 像支付宝支付界面的progress

2016-05-02 15:59 691 查看


成功打钩






失败打X

其主要用于自定义View 的ondraw方法来实现,然后利用 

postInvalidateDelayed(time);来实现刷新动态;


先来看自定义View类:
package com.example.administrator.myapplication.views;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import com.example.administrator.myapplication.R;

public class MyView extends View {

private float width = 5;
private int color = Color.BLUE;
//绘制圆弧的进度值
private int progress = 0;
//线1的x轴
private int line1_x = 0;
//线1的y轴
private int line1_y = 0;
//线2的x轴
private int line2_x = 0;
//线2的y轴
private int line2_y = 0;
private Paint paint;
private boolean isFish = false;
private int newI;
private long time = 5;
private boolean isSucces = true;

public MyView(Context context) {
this(context, null);
}

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

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyView);
color = typedArray.getColor(R.styleable.MyView_paintColor, color);
width = typedArray.getFloat(R.styleable.MyView_strokeWidth, width);
time = (long) typedArray.getFloat(R.styleable.MyView_time, time);
typedArray.recycle();
paint = new Paint();
//设置画笔颜色
paint.setColor(color);
//设置圆弧的宽度
paint.setStrokeWidth(width);
//设置圆弧为空心
paint.setStyle(Paint.Style.STROKE);
//消除锯齿
paint.setAntiAlias(true);
}

public int getProgress() {
return progress;
}

public void setProgress(int progress) {
this.progress = progress;
}
//设置颜色
public void setColor(int color) {
this.color = color;
}
//设置宽度
public void setWidth(float width) {
this.width = width;
}

//设置动画的结束
public void setFish(boolean fish) {
isFish = fish;
}
//设置刷新频率
public void setTime(long time) {
this.time = time;
}
//设置是否成功
public void setSucces(boolean succes) {
isSucces = succes;
}

//绘制
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
refresh(canvas);
}

private void refresh(Canvas canvas) {
progress++;
//获取圆弧形的x坐标
int center = getWidth() / 2;
int height = getHeight();
int lineCenter = center - getWidth() / 5;
int lineCenter2 = center + getWidth() / 5;
//圆弧半径
int radius = getWidth() / 2 - 5;
//定义的圆弧大小
RectF rectF = new RectF(center - radius - 1, center - radius - 1, center + radius + 1, center + radius + 1);
int i = -360 * progress / 100;
newI = 235;
if (i != -360) {
newI = i;
//根据进度画圆弧
canvas.drawArc(rectF, newI, newI + 50, false, paint);
} else {
if (!isFish) {
//根据进度画圆弧
progress = 0;
canvas.drawArc(rectF, newI, newI + 50, false, paint);

} else {
progress = 100;
}
}
if (progress >= 100) {
if (isSucces) {
if (line1_x < radius / 3) {
line1_x++;
line1_y++;
}
//画第一根线
canvas.drawLine(lineCenter, center, lineCenter + line1_x, center + line1_y, paint);

if (line1_x == radius / 3) {
line2_x = line1_x;
line2_y = line1_y;
line1_x++;
line1_y++;
}
if (line1_x >= radius / 3 && line2_x <= radius) {
line2_x++;
line2_y--;
}
//画第二根线
canvas.drawLine(lineCenter + line1_x - 1, center + line1_y, lineCenter + line2_x, center + line2_y, paint);
} else {
if (line1_x < radius / 2 + 40) {
line1_x++;
line1_y++;
line2_x++;
line2_y++;
}
//画第一根线
canvas.drawLine(lineCenter, height / 3, lineCenter + line1_x, height / 3 + 10 + line1_y, paint);
canvas.drawLine(lineCenter2, height / 3, lineCenter2 - line2_x, height / 3 + 20 + line2_y, paint);

}
}

//每隔指定毫秒界面刷新
postInvalidateDelayed(time);
}

}
当请求网络完成后可以调用:
setFish(boolean fish)  结束旋转动画 <pre name="code" class="java" style="font-size: 13.0667px;">setSucces(boolean succes) <span style="font-size: 13.0667px;
ae8d
font-family: 宋体;">根据回调来设置是否成功</span>


setColor(int color) 设置画笔的颜色 也可以在布局中设置
<strong>来看看属性文件</strong>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyView">
//画笔的颜色
<attr name="paintColor" format="reference|color"/>
//宽度
<attr name="strokeWidth" format="integer|float"/>
//刷新的频率
<attr name="time" format="integer|float"/>
</declare-styleable>
</resources>
布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:xlh="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.myapplication.MainActivity">

<com.example.administrator.myapplication.views.MyView
android:id="@+id/myView"
android:layout_width="95dp"
android:layout_height="95dp"
android:layout_centerInParent="true"
xlh:paintColor="#f00"
xlh:strokeWidth="10"
/>
</RelativeLayout>


MainActivity.java
package com.example.administrator.myapplication;

import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;

import com.example.administrator.myapplication.views.MyView;

public class MainActivity extends AppCompatActivity {

private MyView myView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myView = (MyView) findViewById(R.id.myView);
//设置失败
myView.setSucces(false);
//模拟请求网络操作
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
myView.setFish(true);
}
}, 4000);
}
}<strong>
</strong>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息