이 글에서는 주로 Android에서 순환 LoadingView 효과를 사용자 정의하는 방법을 자세히 소개합니다. 관심 있는 친구는 최근 프로젝트에 대해
을 참조할 수 있습니다. , Github에 비슷한 DashedCircularProgress 컨트롤이 있지만 브러시의 점선 효과를 설정하여 그리는 진행률에 간격이 지정됩니다. ProgressPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, dashSpace )); 내부 레이어에 또 다른 링 레이어가 있으므로 동적 설정 중에 내부 레이어와 외부 레이어 사이에 약간의 차이가 있으므로 원하는 효과를 얻기 위해 원래 기반으로 하나를 변경했습니다. 진행 애니메이션 설정 또는 애니메이션 없음):
제어 구현:
#🎜 🎜# 이 컨트롤은 RelativeLayout을 상속하고 onDraw 중에 두 가지 작업을 수행합니다.
1 먼저 하단에 검은색 링을 그립니다.
2. 진행률 값
은 현재 진행률 값을 콜백하는 외부 인터페이스를 제공합니다.
public interface OnValueChangeListener {
void onValueChange(float value);
}로그인 후 복사
핵심 그리기 수업:
InternalCirclePainterImp2, 내부 검은색 고리 그리기:
/**
* @author Chuck
*/
public class InternalCirclePainterImp2 implements InternalCirclePainter {
private RectF internalCircle;//画出圆弧时,圆弧的外切矩形
private Paint internalCirclePaint;
private int color;
private float startAngle = 270f;
int arcQuantity=100;//等分(圆弧加间隔),比如arcQuantity=100时,表示将有100个圆弧,和100个空白间隔
float ratio=0.5f;//每段圆弧与圆弧加间隔之和的比例,ratio=0.5表示每个圆弧与相邻的间隔弧度比是1:1
private int width;
private int height;
private int internalStrokeWidth = 48;//圆环宽度
public InternalCirclePainterImp2(int color, int progressStrokeWidth, int arcQuantity,float ratio) {
this.color = color;
this.internalStrokeWidth = progressStrokeWidth;
this.arcQuantity = arcQuantity;
if(ratio>0&&ratio<1){
this.ratio = ratio;
}
init();
}
private void init() {
initExternalCirclePainter();
}
private void initExternalCirclePainter() {
internalCirclePaint = new Paint();
internalCirclePaint.setAntiAlias(true);
internalCirclePaint.setStrokeWidth(internalStrokeWidth);
internalCirclePaint.setColor(color);
internalCirclePaint.setStyle(Paint.Style.STROKE);
}
//圆弧外切矩形
private void initExternalCircle() {
internalCircle = new RectF();
float padding = internalStrokeWidth * 0.5f;
internalCircle.set(padding, padding , width - padding, height - padding);
initExternalCirclePainter();
}
@Override
public void draw(Canvas canvas) {
float eachAngle=360f/arcQuantity;
float eachArcAngle=eachAngle*ratio;
for(int i=0;i<arcQuantity*2;i++){
if(i%2==0){//遇到偶数就画圆弧,基数则跳过
canvas.drawArc(internalCircle, startAngle+eachAngle*i/2, eachArcAngle, false, internalCirclePaint);
}
else{
continue;
}
}
}
public void setColor(int color) {
this.color = color;
internalCirclePaint.setColor(color);
}
@Override
public int getColor() {
return color;
}
@Override
public void onSizeChanged(int height, int width) {
this.width = width;
this.height = height;
initExternalCircle();
}
}로그인 후 복사
# 🎜🎜 #ProgressPainterImp2, 내부 검정색 링 그리기:
/**
* @author Chuck
*/
public class ProgressPainterImp2 implements ProgressPainter {
private RectF progressCircle;
private Paint progressPaint;
private int color = Color.RED;
private float startAngle = 270f;
private int internalStrokeWidth = 48;
private float min;
private float max;
private int width;
private int height;
private int currentPecent;//当前的百分比
int arcQuantity=100;//等分(圆弧加间隔),比如arcQuantity=100时,表示将有100个圆弧,和100个空白间隔
float ratio=0.5f;//每段圆弧与圆弧加间隔之和的比例,ratio=0.5表示每个圆弧与相邻的间隔弧度比是1:1
public ProgressPainterImp2(int color, float min, float max, int progressStrokeWidth, int arcQuantity,float ratio) {
this.color = color;
this.min = min;
this.max = max;
this.internalStrokeWidth = progressStrokeWidth;
this.arcQuantity = arcQuantity;
this.ratio = ratio;
init();
Log.e("ProgressPainterImp","构造函数执行");
}
private void init() {
initInternalCirclePainter();
}
private void initInternalCirclePainter() {
progressPaint = new Paint();
progressPaint.setAntiAlias(true);
progressPaint.setStrokeWidth(internalStrokeWidth);
progressPaint.setColor(color);
progressPaint.setStyle(Paint.Style.STROKE);
}
//初始化外切的那个矩形
private void initInternalCircle() {
progressCircle = new RectF();
float padding = internalStrokeWidth * 0.5f;
progressCircle.set(padding, padding , width - padding, height - padding);
initInternalCirclePainter();
}
@Override
public void draw(Canvas canvas) {
float eachAngle=360f/arcQuantity;
float eachArcAngle=eachAngle*ratio;
int quantity=2*arcQuantity*currentPecent/100;
for(int i=0;i<quantity;i++){
if(i%2==0){//遇到偶数就画圆弧,基数则跳过
canvas.drawArc(progressCircle, startAngle+eachAngle*i/2, eachArcAngle, false, progressPaint);
}
else{
continue;
}
}
}
public float getMin() {
return min;
}
public void setMin(float min) {
this.min = min;
}
public float getMax() {
return max;
}
public void setMax(float max) {
this.max = max;
}
public void setValue(float value) {
this.currentPecent = (int) (( 100f * value) / max);
}
@Override
public void onSizeChanged(int height, int width) {
Log.e("ProgressPainterImp","onSizeChanged执行");
this.width = width;
this.height = height;
initInternalCircle();
}
public int getColor() {
return color;
}
public void setColor(int color) {
this.color = color;
progressPaint.setColor(color);
}
}로그인 후 복사
사용자 정의 가능한 속성:
#🎜🎜 #
<declare-styleable name="CircularLoadingView">
<attr name="base_color" format="color" /> <!--内层圆环的颜色-->
<attr name="progress_color" format="color" /><!--进度圆环的颜色-->
<attr name="max" format="float" /><!--最小值-->
<attr name="min" format="float" /><!--最大值-->
<attr name="duration" format="integer" /><!--动画时长-->
<attr name="progress_stroke_width" format="integer" /><!--圆环宽度-->
<!--等分(圆弧加间隔),比如arcQuantity=100时,表示将有100个圆弧,和100个空白间隔-->
<attr name="argQuantity" format="integer" />
<!--每段圆弧与圆弧加间隔之和的比例,ratio=0.5表示每个圆弧与相邻的间隔弧度比是1:1-->
<attr name="ratio" format="float" />
</declare-styleable>
로그인 후 복사
전화:
main_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:background="#ffffff"
>
<!--自定义控件,继承RelativeLayout-->
<qdong.com.mylibrary.CircularLoadingView
android:id="@+id/simple"
custom:base_color="@color/pager_bg"
custom:min="0"
custom:max="100"
custom:argQuantity="100"
custom:ratio="0.6"
custom:progress_color="@android:color/holo_green_light"
custom:progress_icon="@mipmap/ic_launcher"
custom:duration="1000"
custom:progress_stroke_width="28"
android:layout_centerInParent="true"
android:layout_width="200dp"
android:layout_height="200dp">
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_centerInParent="true"
android:textSize="20sp"
android:layout_centerHorizontal="true"
android:id="@+id/number"
android:text="0"
android:gravity="center"
android:textColor="@color/pager_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</qdong.com.mylibrary.CircularLoadingView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set_Value"
android:id="@+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Animation"
android:id="@+id/button3"
android:layout_alignTop="@+id/button"
android:layout_alignParentEnd="true"/>
</RelativeLayout>로그인 후 복사
#🎜 🎜## 🎜🎜#MainActivity:
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
try {
mDashedCircularProgress.setValue(66);//没有动画的,直接设置
} catch (Exception e) {
e.printStackTrace();
}
}
});
findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
try {
mDashedCircularProgress.setValue(0);//无动画,归零
mDashedCircularProgress.setValueWithAnimation(100,2000);//带动画
} catch (Exception e) {
e.printStackTrace();
}
}
});로그인 후 복사
Github 주소: https://github.com/506954774/ AndroidCircularLoadingView#🎜 🎜#
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 추천:
AJAX jQuery로 구현한 간단한 팝업 레이어 효과
# 🎜🎜 #BLOB 파일을 다운로드하는 jQuery의 ajax 방법
위 내용은 Android 사용자 정의 원형 LoadingView 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
