Android 사용자 정의 원형 진행 막대 구현

오늘 본의 아니 게 원형 진 도 를 발견 하고 자신 이 하 나 를 실현 하 는 것 을 생각해 보 세 요.다음 과 같은 그림 입 니 다.

기본 적 인 사고방식 은 이렇다.
1.먼저 옹 골 진 원 을 그립 니 다.
2.흰색 옹 골 진 정사각형 을 그 려 옹 골 진 원 을 가린 다
3.원 의 중심 에 현재 진도 의 백분율 문 자 를 동적 으로 그립 니 다.
4.속 이 꽉 찬 원 과 같은 색 의 빈 원 을 그립 니 다.
5.현재 의 백분율 을 점차 변경
6.백분율 에 따라 정사각형 의 크기 를 점차적으로 바 꾸 고 정사각형 의 밑부분 y 축의 좌 표를 점점 줄 이 며 100%에 이 를 때 까지 계속 다시 그립 니 다.
우선 사용자 정의 속성 을 봅 니 다.
values 디 렉 터 리 에 새 attrs.xml 내용 은 다음 과 같 습 니 다.
원형 을 그 리 는 배경 색 과 원형 을 그 리 는 반지름 크기 를 정의 합 니 다.

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <attr name="circlecolor" format="color"></attr>
  <attr name="half" format="dimension"></attr>

  <declare-styleable name="myCircleImage">
    <attr name="circlecolor"></attr>
    <attr name="half"></attr>
  </declare-styleable>

</resources>

사용자 정의 보기

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class CirclePro extends View {

 private Paint paint;
 private int circleBack;//     
 private int mschedual = 0;//        
 float circleHalf; //    
 String percent = "";//         

 @SuppressLint("Recycle")
 public CirclePro(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 paint = new Paint();
 TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.myCircleImage, defStyleAttr,0);
 @SuppressWarnings("unused")
 int leng = array.length();
 //        ，     R.styleable.myCircleImage_circlecolor   R.attr.circlecolor
 circleBack = array.getColor(R.styleable.myCircleImage_circlecolor,Color.GREEN);
 circleHalf = array.getDimension(R.styleable.myCircleImage_half,200.f);
 System.out.println(circleBack);

 }

 /**
 *       ，          view   ，         
 * @param context
 * @param attrs
 */
 public CirclePro(Context context, AttributeSet attrs) {
 this(context, attrs, 0);//         

 }

 /**
 *      
 * @param text
 * @param textSize
 * @return
 */
 public float getTextWidth(String text,float textSize) {

 TextPaint textPaint = new TextPaint();
 textPaint.setTextSize(textSize);
 return textPaint.measureText(text);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 // TODO Auto-generated method stub
 super.onDraw(canvas);

 float height = getHeight();
 float width = getWidth();
// float circleHalf = (float) (width*0.7/2);

 paint.setColor(circleBack);
 paint.setAntiAlias(true);
 paint.setStyle(Paint.Style.FILL);
 canvas.drawCircle(width/2,height/2,circleHalf, paint);//    

 if (mschedual <= 100) {//，        100，     
  paint.setColor(Color.WHITE);
  canvas.drawRect(width/2-circleHalf,height/2-circleHalf,width/2+circleHalf,height/2+circleHalf - mschedual*circleHalf/50, paint);
 }

 //         
 paint.setColor(Color.BLACK);
 paint.setTextSize(30.f);
 percent = mschedual+" %";
 canvas.drawText(percent, width/2-getTextWidth(percent,30)/2,height/2+paint.getTextSize()*3/8, paint);//     =paint.getTextSize()*3/4

 //    
 paint.setColor(circleBack);
 paint.setStyle(Paint.Style.STROKE);
 canvas.drawCircle(width/2,height/2,circleHalf, paint);

 if (mschedual < 100) {//       ，   
  mschedual++;
  invalidate();
 }
 }
}

activitymain.xml 에 서 는 사용자 정의 속성 을 사용 해 야 합 니 다.먼저 네 임 스페이스 를 추가 합 니 다:xmlns:liu="http://schemas.android.com/apk/res/com.example.androidcirclepro”
그 중에서 liu 는 사용자 정의 접두사 로 임의로 이름 을 지 었 습 니 다.com.example.androidcirclepro 는 우리 가 사용 하 는 패키지 이름 입 니 다.
activity_main.xmln 내용 은 다음 과 같 습 니 다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:liu="http://schemas.android.com/apk/res/com.example.androidcirclepro"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity" >

  <com.example.androidcirclepro.CirclePro
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    liu:half="90dp"
    liu:circlecolor="#fff0f0"
    />

</RelativeLayout>

이로써 사용자 정의 원형 진도 가 완성 되 었 습 니 다.간단 하지 않 습 니까?