Android 사용자 정의 view 라운드 비례 애니메이션 그리 기
1.실현 효과 도
핵심 코드
1.사용자 정의 MyProgressView.자바
package com.czhappy.effectdemo.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import com.czhappy.effectdemo.R;
import com.czhappy.effectdemo.utils.ScreenUtil;
public class MyProgressView extends View {
//
private Paint mCirclePaint;
//
private Paint mRingDefaultPaint;
//
private Paint mUsePaint;
//
private Paint mRingPaint;
//
private Paint mLinePaint;
//
private Paint mTextPaint;
//
private int mCircleColor;
//
private int mRingColor;
//
private float mRadius;
//
private float mRingRadius;
//
private float mStrokeWidth;
// x
private int mXCenter;
// y
private int mYCenter;
//
private float mTxtWidth;
//
private float mTxtHeight;
//
private int mTotalProgress = 100;
//
private int mProgress;
//
private int mShowProgress;
//
private String usedFlow;
private Context mContext;
private Handler circleHandler = new Handler(){
public void handleMessage(Message msg) {
super.handleMessage(msg);
if(msg.what == 1){
int temp = (Integer)msg.obj;
setProgress(temp);
}
};
};
public MyProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
//
initAttrs(context, attrs);
initVariable();
}
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.TasksCompletedView, 0, 0);
mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);
mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
mRingRadius = mRadius + mStrokeWidth / 2;
}
private void initVariable() {
//
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);//
mCirclePaint.setColor(mCircleColor);
mCirclePaint.setStyle(Paint.Style.FILL);
//“ ”
mUsePaint = new Paint();
mUsePaint.setAntiAlias(true);
mUsePaint.setStyle(Paint.Style.FILL);
mUsePaint.setColor(getResources().getColor(R.color.ticket_color));
mUsePaint.setTextSize(ScreenUtil.sp2px(mContext, 10));
//
mRingDefaultPaint = new Paint();
mRingDefaultPaint.setAntiAlias(true);
mRingDefaultPaint.setColor(getResources().getColor(R.color.default_ring_color));
mRingDefaultPaint.setStyle(Paint.Style.STROKE);
mRingDefaultPaint.setStrokeWidth(mStrokeWidth);
//
mRingPaint = new Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
mRingPaint.setStrokeWidth(mStrokeWidth);
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setColor(Color.BLACK);
mTextPaint.setTextSize(ScreenUtil.sp2px(mContext, 22));
mLinePaint = new Paint();
mLinePaint.setColor(Color.WHITE);
//
FontMetrics fm = mTextPaint.getFontMetrics();
mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
}
@Override
protected void onDraw(Canvas canvas) {
mXCenter = getWidth() / 2;
mYCenter = getHeight() / 2;
//
canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);
RectF oval = new RectF();
oval.left = (mXCenter - mRingRadius);
oval.top = (mYCenter - mRingRadius);
oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
//
canvas.drawArc(oval, -90, 360, false, mRingDefaultPaint);
//
canvas.drawArc(oval, -90, ((float) mProgress / mTotalProgress) * 360, false, mRingPaint);
//
String txt = mProgress + "%";
//
mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());
canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 9, mTextPaint);
Rect _pb = new Rect();
String sup = " ";
mUsePaint.getTextBounds(sup, 0, sup.length(), _pb);
int perX = mXCenter - _pb.width() / 2;
canvas.drawText(sup, perX, mYCenter / 2, mUsePaint);
if (!TextUtils.isEmpty(usedFlow)) {
mUsePaint.getTextBounds(usedFlow, 0, usedFlow.length(), _pb);
perX = mXCenter - _pb.width() / 2;
canvas.drawText(usedFlow, perX, (float) (mYCenter + mYCenter / 1.7), mUsePaint);
}
//
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.circle_bottom_bg);
perX = mXCenter - bitmap.getWidth() / 2;
canvas.drawBitmap(bitmap, perX, (float) (mYCenter + mYCenter / 5), mLinePaint);
}
/**
*
* @param progress
*/
public void setProgress(int progress) {
mProgress = progress;
postInvalidate();
}
/**
*
* @param progress
*/
public void setmShowProgress(int progress) {
mShowProgress = progress;
new Thread(new CircleThread()).start();
}
public void setUsedFlow(String usedFlow) {
this.usedFlow = usedFlow;
}
private class CircleThread implements Runnable{
int m=0;
int i=0;
@Override
public void run() {
// TODO Auto-generated method stub
while(!Thread.currentThread().isInterrupted()){
try {
Thread.sleep(50);
m++;
Message msg = new Message();
msg.what = 1;
if(i < mShowProgress){
i += m;
}else{
i = mShowProgress;
return;
}
msg.obj = i;
circleHandler.sendMessage(msg);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
}
2.FlowActivity.java
package com.czhappy.effectdemo.activity;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.czhappy.effectdemo.R;
import com.czhappy.effectdemo.view.MyProgressView;
/**
* Description:
* User: chenzheng
* Date: 2017/1/21 0021
* Time: 17:17
*/
public class FlowActivity extends AppCompatActivity {
private MyProgressView mTasksView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flow);
initView();
}
private void initView() {
mTasksView = (MyProgressView) findViewById(R.id.flow_prgress_view);
}
public void beginAnim(View view){
mTasksView.setUsedFlow("200.0M");
mTasksView.setmShowProgress(60);
}
}
3.activity_flow.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tc="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#fff"
android:gravity="center_horizontal"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="beginAnim"
android:text=" "/>
<com.czhappy.effectdemo.view.MyProgressView
android:id="@+id/flow_prgress_view"
android:layout_width="100dp"
android:layout_height="100dp"
tc:circleColor="@color/circle_color"
tc:radius="44dp"
tc:ringColor="@color/ring_color"
tc:strokeWidth="6dp"
android:layout_marginTop="10dp"/>
</LinearLayout>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.