DrawArc 를 이용한 원그리기

API Demo에 보면 DrawArc를 이용해 원을 네개를 그리는 함수가 있었다.

여러가지 모양으로 원을 만드는 모양을 정했었는데, 이 부분을 이용해서 화면을 구상햇었던 적이있었다.

상용화부분에선 제외되었지만.. 간략하게 나마 이 부분에 대해 설명을 해보려고 한다.

대략적으로 이런 UI 를 만들 수 있다.

구조를 설명 하게 되면

원을 담을 프레임 안에 동그란 이미지가 배경에 깔리고 그위에

DrawArc를 그렸다고 생각하면된다. 그림을 그려 설명 하려 했으나.. 포토샵을 실력이 꽝이라;;

양해를 구한다.

문제는 간격이 중요한데.. 간격 맞추는것은 노가다가 수반되므로 얼추 맞추고 관두었다..

코드로 설명하자면

원을 그릴 개별적인 View 클래스를 만든다.

package aa.bb;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.view.View;

public class SampleView extends View {
    private Paint mPaints;
    private Paint mFramePaint;
    private boolean[] mUseCenters;
    private RectF[] mOvals;
    private RectF mBigOval;
    private float mStart;
    private float mSweep;
    private int mBigIndex;
   
    private static final float SWEEP_INC = 1;
    private static final float START_INC = 0;
   
   
    public SampleView(Context context) {
        super(context);
       
        mPaints = new Paint();
        mUseCenters = new boolean[4];
        mOvals = new RectF[4];

        mPaints = new Paint(mPaints);
        mPaints.setStyle(Paint.Style.STROKE);
        mPaints.setStrokeWidth(30);
        mPaints.setColor(Color.rgb(255, 220, 21));
        mPaints.setAntiAlias(true);
        mPaints.setStrokeCap(Paint.Cap.BUTT);
        mBigOval = new RectF(15, 15, 155, 150);
//        mBigOval = new RectF(250, 400, 390, 540);
    }
   
    private void drawArcs(Canvas canvas, RectF oval, boolean useCenter,
                          Paint paint) {
        canvas.drawArc(oval, -90, mSweep, useCenter, paint);
    }
   
    @Override protected void onDraw(Canvas canvas) {
     canvas.drawColor(Color.alpha(Color.CYAN));
        drawArcs(canvas, mBigOval, mUseCenters[2],
                 mPaints);
       
       
        mSweep += SWEEP_INC;
        if (mSweep > 360) {
            mSweep -= 360;
            mStart += START_INC;
            if (mStart >= 360) {
                mStart -= 360;
            }
            mBigIndex = (mBigIndex) % mOvals.length;
        }
        invalidate();
    }

 public static int getSweepInc() {
  return Float.floatToIntBits(SWEEP_INC);
 }
   
   
}

이 코드는 머, Api Demo 부분에서 거의 수정하지 않았다.. 수정한 정도라면 시작값정도.

레이아웃을 보면 더 이해가 쉬울 것 같다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  <TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="68%"
   android:textStyle="bold"
   android:textSize="23dip"
   android:textColor="#DB631F" />
 </LinearLayout>
 <LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <FrameLayou   프레임 으로 감싸고..
   android:layout_width="fill_parent"

   android:layout_height="wrap_content">
   <ImageView   원을 그릴 배경을 이미지로 그려 주고
    android:background="@drawable/today_progressbar_bg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
   <LinearLayout   리니어 안에 <== 이부분에 내가 만든 뷰를 넣어 줄 것이다.
    android:id="@+id/lay_arc"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  </FrameLayout>
 </LinearLayout>
</LinearLayout>

해서 이것을 사용하는 방법은 간단하다. 

public class DrawProgress extends Activity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  
//  setContentView(R.layout.main);
   LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

   LinearLayout layBody = (LinearLayout) inflater.inflate(
     R.layout.main, null);
   LinearLayout infoview = (LinearLayout) layBody
     .findViewById(R.id.lay_arc);
   SampleView sampleView = new SampleView(this);
   infoview.addView(sampleView);
   setContentView(layBody);
   
   
 }

}

 사용할 클래스에서 Inflate 만 해주었다. 참으로 간단하지 않은가..

물론 여기서 세세하게 들어 가자면 머리에 쥐가 날 정도로 노가다를 해야된다..

해서 그냥 간단하게 나마 만들어 보았다.

완성 화면 %는 임의 적으로 주어 진 것이고, 원은 지정한 크기 만큼 애니메이션으로 그려 진다.

DrawArc.zip