自定义view实现圆形加载
2017-10-09 13:37
393 查看
[java] view
plain copy
print?
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
/**
* Created by Administrator on 2017/9/3 0003.
*/
public class MyView extends View{
/*圆弧线宽*/
private float circleBorderWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
/*内边距*/
private float circlePadding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
/*字体大小*/
private float textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 50, getResources().getDisplayMetrics());
/*绘制圆周的画笔*/
private Paint backCirclePaint;
/*绘制圆周白色分割线的画笔*/
private Paint linePaint;
/*绘制文字的画笔*/
private Paint textPaint;
/*百分比*/
private int percent = 0;
/*渐变圆周颜色数组*/
private int[] gradientColorArray = new int[]{Color.GREEN, Color.parseColor("#fe751a"), Color.parseColor("#13be23"), Color.GREEN};
private Paint gradientCirclePaint;
private boolean flag = true;
private boolean flag1 = true;
private boolean flag3 = true;
public MyView(Context context) {
super(context);
init();
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
backCirclePaint = new Paint();
backCirclePaint.setStyle(Paint.Style.STROKE);
backCirclePaint.setAntiAlias(true);
backCirclePaint.setColor(Color.LTGRAY);
backCirclePaint.setStrokeWidth(circleBorderWidth);
// backCirclePaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.OUTER));
gradientCirclePaint = new Paint();
gradientCirclePaint.setStyle(Paint.Style.STROKE);
gradientCirclePaint.setAntiAlias(true);
gradientCirclePaint.setColor(Color.LTGRAY);
gradientCirclePaint.setStrokeWidth(circleBorderWidth);
linePaint = new Paint();
linePaint.setColor(Color.WHITE);
linePaint.setStrokeWidth(5);
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setTextSize(textSize);
textPaint.setColor(Color.BLACK);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//1.绘制灰色背景圆环
canvas.drawArc(
new RectF(circlePadding * 2, circlePadding * 2,
getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, 360, false, backCirclePaint);
//2.绘制颜色渐变圆环
LinearGradient linearGradient = new LinearGradient(circlePadding, circlePadding,
getMeasuredWidth() - circlePadding,
getMeasuredHeight() - circlePadding,
gradientColorArray, null, Shader.TileMode.MIRROR);
gradientCirclePaint.setShader(linearGradient);
gradientCirclePaint.setShadowLayer(10, 10, 10, Color.RED);
canvas.drawArc(
new RectF(circlePadding * 2, circlePadding * 2,
getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, (float) (percent / 100.0) * 360, false, gradientCirclePaint);
//半径
float radius = (getMeasuredWidth() - circlePadding * 3) / 2;
//X轴中点坐标
int centerX = getMeasuredWidth() / 2;
//3.绘制100份线段，切分空心圆弧
for (float i = 0; i < 360; i += 3.6) {
double rad = i * Math.PI / 180;
float startX = (float) (centerX + (radius - circleBorderWidth) * Math.sin(rad));
float startY = (float) (centerX + (radius - circleBorderWidth) * Math.cos(rad));
float stopX = (float) (centerX + radius * Math.sin(rad) + 1);
float stopY = (float) (centerX + radius * Math.cos(rad) + 1);
canvas.drawLine(startX, startY, stopX, stopY, linePaint);
}
//4.绘制文字
float textWidth = textPaint.measureText(percent + "%");
int textHeight = (int) (Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent) + 2);
canvas.drawText(percent + "%", centerX - textWidth / 2, centerX + textHeight / 4, textPaint);
if (flag3) {
if (flag1) {
setPercent(percent);
} else {
if (percent == 100) {
flag = false;
} else if (percent == 0) {
flag = true;
}
if (flag == false) {
setPercents(percent);
} else {
setPercent(percent);
}
}
} else {
setPercentss(percent);
}
}
public void setPercentss(int percent) {
this.percent = percent;
invalidate();
}
public void setData(boolean flag3) {
this.flag3 = flag3;
}
/**
* 设置百分比
*
* @param percent
*/
public void setPercent(int percent) {
percent++;
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
this.percent = percent;
invalidate();
}
public void setPercents(int percent) {
percent--;
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
this.percent = percent;
invalidate();
}
public void setRtate(boolean flag2) {
this.flag1 = flag2;
}
plain copy
print?
<Button
android:id="@+id/zanting"
android:textSize="25sp"
android:text="暂停"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/myview"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="64dp"
android:layout_marginEnd="64dp"
android:layout_marginTop="74dp" />
<Button
android:id="@+id/zidong"
android:textSize="25sp"
android:text="开始"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="68dp"
android:layout_marginStart="68dp"
android:layout_alignBaseline="@+id/zanting"
android:layout_alignBottom="@+id/zanting"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<com.example.administrator.xml_demo0903_yuanxingjiazai.MyView
android:id="@+id/myview"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="31dp" />
[java] view
plain copy
print?
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private Button button;
private Button zanting;
private MyView myView;
private Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
myView.setData(true);
myView.setRtate(false);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myView = (MyView) findViewById(R.id.myview);
button = (Button) findViewById(R.id.zidong);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
handler.sendEmptyMessage(0);
}
});
zanting = (Button) findViewById(R.id.zanting);
zanting.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
myView.setData(false);
}
});
}
plain copy
print?
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
/**
* Created by Administrator on 2017/9/3 0003.
*/
public class MyView extends View{
/*圆弧线宽*/
private float circleBorderWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
/*内边距*/
private float circlePadding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
/*字体大小*/
private float textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 50, getResources().getDisplayMetrics());
/*绘制圆周的画笔*/
private Paint backCirclePaint;
/*绘制圆周白色分割线的画笔*/
private Paint linePaint;
/*绘制文字的画笔*/
private Paint textPaint;
/*百分比*/
private int percent = 0;
/*渐变圆周颜色数组*/
private int[] gradientColorArray = new int[]{Color.GREEN, Color.parseColor("#fe751a"), Color.parseColor("#13be23"), Color.GREEN};
private Paint gradientCirclePaint;
private boolean flag = true;
private boolean flag1 = true;
private boolean flag3 = true;
public MyView(Context context) {
super(context);
init();
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
backCirclePaint = new Paint();
backCirclePaint.setStyle(Paint.Style.STROKE);
backCirclePaint.setAntiAlias(true);
backCirclePaint.setColor(Color.LTGRAY);
backCirclePaint.setStrokeWidth(circleBorderWidth);
// backCirclePaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.OUTER));
gradientCirclePaint = new Paint();
gradientCirclePaint.setStyle(Paint.Style.STROKE);
gradientCirclePaint.setAntiAlias(true);
gradientCirclePaint.setColor(Color.LTGRAY);
gradientCirclePaint.setStrokeWidth(circleBorderWidth);
linePaint = new Paint();
linePaint.setColor(Color.WHITE);
linePaint.setStrokeWidth(5);
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setTextSize(textSize);
textPaint.setColor(Color.BLACK);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//1.绘制灰色背景圆环
canvas.drawArc(
new RectF(circlePadding * 2, circlePadding * 2,
getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, 360, false, backCirclePaint);
//2.绘制颜色渐变圆环
LinearGradient linearGradient = new LinearGradient(circlePadding, circlePadding,
getMeasuredWidth() - circlePadding,
getMeasuredHeight() - circlePadding,
gradientColorArray, null, Shader.TileMode.MIRROR);
gradientCirclePaint.setShader(linearGradient);
gradientCirclePaint.setShadowLayer(10, 10, 10, Color.RED);
canvas.drawArc(
new RectF(circlePadding * 2, circlePadding * 2,
getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, (float) (percent / 100.0) * 360, false, gradientCirclePaint);
//半径
float radius = (getMeasuredWidth() - circlePadding * 3) / 2;
//X轴中点坐标
int centerX = getMeasuredWidth() / 2;
//3.绘制100份线段，切分空心圆弧
for (float i = 0; i < 360; i += 3.6) {
double rad = i * Math.PI / 180;
float startX = (float) (centerX + (radius - circleBorderWidth) * Math.sin(rad));
float startY = (float) (centerX + (radius - circleBorderWidth) * Math.cos(rad));
float stopX = (float) (centerX + radius * Math.sin(rad) + 1);
float stopY = (float) (centerX + radius * Math.cos(rad) + 1);
canvas.drawLine(startX, startY, stopX, stopY, linePaint);
}
//4.绘制文字
float textWidth = textPaint.measureText(percent + "%");
int textHeight = (int) (Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent) + 2);
canvas.drawText(percent + "%", centerX - textWidth / 2, centerX + textHeight / 4, textPaint);
if (flag3) {
if (flag1) {
setPercent(percent);
} else {
if (percent == 100) {
flag = false;
} else if (percent == 0) {
flag = true;
}
if (flag == false) {
setPercents(percent);
} else {
setPercent(percent);
}
}
} else {
setPercentss(percent);
}
}
public void setPercentss(int percent) {
this.percent = percent;
invalidate();
}
public void setData(boolean flag3) {
this.flag3 = flag3;
}
/**
* 设置百分比
*
* @param percent
*/
public void setPercent(int percent) {
percent++;
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
this.percent = percent;
invalidate();
}
public void setPercents(int percent) {
percent--;
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
this.percent = percent;
invalidate();
}
public void setRtate(boolean flag2) {
this.flag1 = flag2;
}
下面就是xml的布局：
[java] viewplain copy
print?
<Button
android:id="@+id/zanting"
android:textSize="25sp"
android:text="暂停"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/myview"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="64dp"
android:layout_marginEnd="64dp"
android:layout_marginTop="74dp" />
<Button
android:id="@+id/zidong"
android:textSize="25sp"
android:text="开始"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="68dp"
android:layout_marginStart="68dp"
android:layout_alignBaseline="@+id/zanting"
android:layout_alignBottom="@+id/zanting"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<com.example.administrator.xml_demo0903_yuanxingjiazai.MyView
android:id="@+id/myview"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="31dp" />
现在就可以在mainactivity中添加控制按钮：
[java] viewplain copy
print?
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private Button button;
private Button zanting;
private MyView myView;
private Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
myView.setData(true);
myView.setRtate(false);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myView = (MyView) findViewById(R.id.myview);
button = (Button) findViewById(R.id.zidong);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
handler.sendEmptyMessage(0);
}
});
zanting = (Button) findViewById(R.id.zanting);
zanting.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
myView.setData(false);
}
});
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android 自定义圆形头像CircleImageView支持加载网络图片的实现代码
- 自定义View实现圆形百分比加载的效果
- Android--自定义View加载网络图片,实现缩放，圆形剪裁
- 自定义view实现圆形加载效果
- Android 三种方式实现自定义圆形页面加载中效果的进度条
- IOS 使用自定义View实现圆形布局(Swift)
- 【Android学习】自定义View的实现----以圆形图片控件为例
- Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框：LayerDrawable实现
- Android 自定义view实现进度条加载效果实例代码
- Android自定义view实现阻尼效果的加载动画
- Android实现自定义圆形/圆角ImageView
- Android自定义view利用Xfermode实现动态文字加载动画
- Android自定义View实现带百分比圆形进度条
- 自定义RecyclerView实现下拉刷新，加载更多
- Android开发之自定义圆形的ImageView的实现
- Android中使用自定义的view实现圆形图片的效果
- Android自定义View实现旋转的圆形图片
- 自定义view实现录音功能，圆形进度条
- 圆形图片的实现自定义view
- 自定义View实现圆形进度条(有个点在移动)