CHAP 8. 그래픽

안드로이드에서의 그래픽 XML 파일로 그래픽이나 애니메이션을 정의한다. 그 리는 작업은 안드로이드 시스템이 담당한다. onDraw() 메소드 안에 draw...()와 같은 메소드를 호 출하여 직접 그린다.

커스텀 뷰를 사용하여 그리기 ... class MyView extends View { public MyView(Context context) { super(context); setBackgroundColor(Color.YELLOW); } @Override protected void onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setColor(Color.RED); canvas.drawLine(20, 50, 350, 50, paint); canvas.drawRect(10, 110, 350, 250, paint); canvas.drawCircle(50, 430, 100, paint); paint.setTextSize(50); canvas.drawText("텍스트도 그릴 수 있습니다", 10, 700, paint);

커스텀 뷰를 사용하여 그리기 public class GraphicsActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); MyView w = new MyView(this); setContentView(w); }

Canvas 클래스와 Paint 클래스 Canvas 클래스는 그림을 그리는 캔버스(화포)에 해 당

몇 개의 기초 도형 그리기 ... @Override protected void onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setColor(Color.YELLOW); canvas.drawColor(Color.BLUE); canvas.drawRoundRect(new RectF(30,50,330,550), 15, 15, paint); canvas.drawOval(new RectF(450,50,750,550), paint); paint.setColor(Color.RED); canvas.drawArc(new RectF(30,600,330,1100), 360, 1000, true, paint); float[] pts= 30, 1250, 300, 1350, 300, 1350, 60, 1450, 60, 1450, 360, 1500; paint.setStrokeWidth(10); canvas.drawLines(pts, paint); }

커스텀 뷰를 XML에서 참조하기 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <kr.co.company.graphiccustomview.CustomView android:layout_height="match_parent" /> </LinearLayout>

커스텀 뷰를 XML에서 참조하기 ... public class CustomView extends View { public CustomView(Context context) { super(context); setBackgroundColor(Color.YELLOW); } public CustomView(Context context, AttributeSet attrs) { @Override protected void onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setColor(Color.RED); canvas.drawArc(new RectF(10, 120, 110, 220), 120, 270, true, paint);

색상 색의 3원색인 Red, Green, Blue 성분을 8비트로 표 시 paint.setColor(0xFF0000); paint.setColor(Color.RED);

선의 스타일 FILL 도형의 내부를 채운다. FILL_AND_STROKE 도형의 내부를 채우면서 외곽선도 그린다. STROKE 도형의 외곽선만 그린다.

원호그리기 class MyView extends View { private Paint mPaints, mFramePaint;         private RectF mBigOval;         private float mStart, mSweep;         private static final float SWEEP_INC = 2;         private static final float START_INC = 15;         public MyView(Context context) {                super(context);                mPaints = new Paint();                mPaints.setAntiAlias(true);                mPaints.setStyle(Paint.Style.FILL);                mPaints.setColor(0x88FF0000);               mFramePaint = new Paint();                mFramePaint.setAntiAlias(true);                mFramePaint.setStyle(Paint.Style.STROKE);               mFramePaint.setStrokeWidth(3);                mFramePaint.setColor(0x8800FF00);                mBigOval = new RectF(100, 40, 900, 1000);         }

원호그리기 @Override protected void onDraw(Canvas canvas) {                canvas.drawColor(Color.YELLOW);                canvas.drawRect(mBigOval, mFramePaint);                canvas.drawArc(mBigOval, mStart, mSweep, false, mPaints);                mSweep += SWEEP_INC;                if (mSweep >360) {                        mSweep -= 360;                        mStart += START_INC;                        if (mStart >= 360)                               mStart -= 360; }                invalidate();      } public class MyArcActivity extends Activity {         protected void onCreate(BundlesavedInstanceState) {                super.onCreate(savedInstanceState);                setContentView(new MyView(this));        

원호그리기

앤티 에일리어싱 paint.setAntiAlias(true);

이미지 표시 리소스 폴더에 이미지 파일를 복사한다. 예를 들어서 android.png 파일을 프로젝트의 res/drawable 폴더에 복사 프로그램에서는 R.drawable.android로 참조 지원되는 파일 형식은 PNG (선호), JPG (가능), GIF (권장되지 않음)

이미지 표시하기: ImageView 사용 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="match_parent“ android:layout_height="wrap_content" android:text="@string/hello" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:src="@drawable/android" /> </LinearLayout>

코드로 화면에 이미지 표시 class MyView extends View { public MyView(Context context) { super(context); setBackgroundColor(Color.YELLOW); } @Override protected void onDraw(Canvas canvas) { Paint paint = new Paint(); Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.android); canvas.drawBitmap(b, 0, 0, null); public class ImageDispActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); MyView w = new MyView(this); setContentView(w);

이미지 크기 변환 변환 행렬 사용 ... Matrix m = new Matrix();m.preScale(1, -1); Bitmap b = BitmapFactory.decodeResource(getResource(), R.drawable.android); Bitmap mb=Bitmap.createBitmap(b, 0, 0, b.getWidth(), b.getHeight(), m, false);

이미지 크기 변환 ... protected void onDraw(Canvas canvas) { Paint paint = new Paint(); Matrix m= new Matrix(); m.preScale(1, -1); Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.house); Bitmap mb = Bitmap.createBitmap(b, 0, 0, b.getWidth(), b.getHeight(), m, false); Bitmap sb = Bitmap.createScaledBitmap(b, 200, 200, false); canvas.drawBitmap(mb, 0, 0, null); canvas.drawBitmap(sb, 100, 100, null); }

도형 객체 사각형이나 원 같은 도형을 객체로 표시한다. Drawable 객체 XML로 객체를 생성 코드로 객체를 생성

XML로 도형 객체 정의 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <corners .... /> <gradient .... /> <padding .... /> <size .... /> <solid android:color="color" /> <stroke android:width="integer" .... /> </shape>

XML로 도형 객체 정의: 예제 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#ff0000"/> </shape>

XML로 도형 객체 정의: 예제 ... LinearLayout mLinearLayout; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mLinearLayout = new LinearLayout(this); ImageView i = new ImageView(this); i.setImageDrawable(R.drawable.oval); i.setMinimumHeight(100); i.setMinimumWidth(100); mLinearLayout.addView(i); setContentView(mLinearLayout); }

예제: XML로 배경 정의 XML로 그라디언트로 채워진 사각형을 정의하고 이 것을 선형 레이아웃의 배경으로 하여 보자.

도형 정의

시용자 인터페이스 정의

예제: XML로 버튼 정의하기

에니메이션 프로퍼티 애니메이션(property animation) 뷰 애니메이션(view animation) 모든 객체의 속성을 애니메이션할 수 있다. 뷰 애니메이션(view animation) View 객체만을 애니메이션 드로워블 애니메이션(Drawable animation) 여러 장의 이미지를 사용

프로퍼티 애니메이션 다음과 같은 값들을 설정 가능 지속 시간(duration) 시간 보간(time interpolation): 시간의 함수로 값이 어떻게 변하는지를 정의 반복 횟수와 반복 동작(Repeat count and behavior) 애니메이터 집합(Animator sets): 애니메이션의 집합을 생성할 수 있다. 프레임 재생 지연(Frame refresh delay): 애니메이션을 다시 그리는 횟수를 설정한다.

선형 애니메이션 비선형 애니메이션

프로퍼티 애니메이션 코드

뷰 애니메이션

코드

드로워블 애니메이션 영화 필름처럼 여러 개의 이미지가 순서대로 재생되 어서 생성되는 전통적인 애니메이션

드로워블 애니메이션 애니메이션을 구성하는 프레임들을 나열하는 XML 파일을 생성

Lab: 랜덤 그래픽 작성

Lab: 그림판 앱 작성 윈도우에서 기존 제공되는 그림판과 유사한 애플리 케이션을 작성해보자

핵심 코드