ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • DrawArc 를 이용한 원그리기
    안드로이드/학습&강좌 2011. 6. 6. 16:09

    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 만 해주었다. 참으로 간단하지 않은가..

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

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

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


    댓글 0

COPYRIGHT 2010 EpoNg. ALL RIGHTS RESERVED.