CHAP 8. 그래픽.

Presentation on theme: "CHAP 8. 그래픽."— Presentation transcript:

1 CHAP 8. 그래픽

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

3 커스텀 뷰를 사용하여 그리기 ... 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, 100, 50, paint); canvas.drawRect(10, 110, 100, 150, paint); canvas.drawCircle(50, 200, 30, paint); canvas.drawText("텍스트도 그릴 수 있습니다", 10, 300, paint);

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

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

6 몇 개의 기초 도형 그리기 ... @Override protected void onDraw(Canvas canvas) {
Paint paint = new Paint(); paint.setColor(Color.YELLOW); canvas.drawColor(Color.BLUE); canvas.drawRoundRect(new RectF(10,10,110,110), 5, 5, paint); canvas.drawOval(new RectF(150,10,250,110), paint); paint.setColor(Color.RED); canvas.drawArc(new RectF(10,120,110,220), 120, 270, true, paint); float[] pts={ 10, 250, 100, 270, 100, 270, 20, 290, 20, 290, 120, 300}; canvas.drawLines(pts, paint); }

7 커스텀 뷰를 XML에서 참조하기 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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>

8 커스텀 뷰를 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);

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

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

11 원호그리기 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(Contextcontext) {                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(40, 10,280, 250);         }

12 원호그리기 @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));        

13 원호그리기

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

15 폰트 static Typeface create (Typeface family, int style)
메소드 static Typeface create (Typeface family, int style) static Typeface create (String familyName, int style) Typeface 객체는 Typeface 클래스 내부의 create() 메소드로 생성된다. family: 폰트 이름 , DEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIF 중의 하나 style: 폰트 스타일, NORMAL, BOLD, ITALIC, BOLD_ITALIC 중의 하나 위의 메소드들은 주어진 폰트와 스타일에 가장 일치하는 Typeface 객체를 생성한다. 이 메소드는 주로 이미 존재하는 폰트로부터 새로운 스타일의 폰트를 생성하고자 할 때 호출한다. 만약 family가 null이면 디폴트 폰트 패밀리를 선택한다. Typeface setTypeface (Typeface typeface) 폰트를 typeface로 변경한다. void drawText(String text, float x, float y, Paint paint) void drawText(String text, int start, int end, float x, float y, Paint paint) void drawText(char[] text, int index, int count, float x, float y, Paint paint) 텍스트를 화면에 그린다.

16 폰트 예제 ... @Override protected void onDraw(Canvas canvas) {
Paint paint = new Paint(); paint.setAntiAlias(true); paint.setTextSize(25); Typeface t; t = Typeface.create(Typeface.DEFAULT, Typeface.NORMAL); paint.setTypeface(t); canvas.drawText("DEFAULT 폰트", 10, 100, paint); t = Typeface.create(Typeface.DEFAULT_BOLD, Typeface.NORMAL); paint.setTypeface(t); canvas.drawText("DEFAULT_BOLD 폰트", 10, 150, paint); t = Typeface.create(Typeface.MONOSPACE, Typeface.NORMAL); canvas.drawText("MONOSPACE 폰트", 10, 200, paint); t = Typeface.create(Typeface.SERIF, Typeface.NORMAL); canvas.drawText("SERIF 폰트", 10, 250, paint); t = Typeface.create(Typeface.SANS_SERIF, Typeface.NORMAL); canvas.drawText("SANS_SERIF 폰트", 10, 300, paint); }

17 폰트 예제 실행 결과

18 외부 폰트 사용 폰트 파일을 구하여 프로젝트의 asset 폴더로 복사 @Override
protected void onDraw(Canvas canvas) { Typeface myFont; Paint paint = new Paint(); paint.setAntiAlias(true); myFont = Typeface.createFromAsset(getContext().getAssets(), "animeace2_ital.ttf"); paint.setTypeface(myFont); paint.setTextSize(25); canvas.drawText("This is a New Font!!!", 10, 100, paint); canvas.drawText("Have Fun!!!", 10, 200, paint); }

19 패스 그리기 패스(path)는 복잡한 기하학적인 경로를 표현 패스는 직선과 타원, 곡선으로 이루어질 수 있다 @Override
protected void onDraw(Canvas canvas) { Path path = new Path(); Paint paint = new Paint(); paint.setStyle(Paint.Style.STROKE); path.moveTo(20, 100); path.lineTo(100, 200); path.cubicTo(150, 30, 200, 300, 300, 200); paint.setColor(Color.BLUE); canvas.drawPath(path, paint); paint.setStyle(Paint.Style.FILL); paint.setTextSize(50); canvas.drawTextOnPath("This is a test!!", path, 0, 0, paint); }

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

21 이미지 표시하기: ImageView 사용 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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" /> <ImageView android:layout_width="wrap_content" /> </LinearLayout>

22 코드로 화면에 이미지 표시 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);

23 이미지 크기 변환 변환 행렬 사용 ... 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);

24 이미지 크기 변환 ... 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); }

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

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

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

28 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); }

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

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

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

32 프로퍼티 애니메이션 코드

33 뷰 애니메이션

34 코드

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

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

37

38 서피스 뷰 서피스뷰는 사용자 인터페이스와는 별도로 애플리 케이션에게 그림을 그릴 수 있는 화면을 제공

39 서피스 뷰의 구조 SurfaceView 클래스를 상속한 뷰를 생성한다.
class MyView extends SurfaceView implements SurfaceHolder.Callback { public void surfaceCreated(SurfaceHolder holder) { // 서피스가 준비되었으므로 스레드를 시작한다. ... } public void surfaceDestroyed(SurfaceHolder holder) { // 서피스가 소멸되었으므로 스레드를 종료한다. public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { // 서피스가 변경

40 스레드를 정의한다. class MyThread extends Thread { SurfaceHolder holder; ... public void run() { canvas = holder.lockCanvas(); // 캔버스에 그림을 그린다. holder.unlockCanvasAndPost(canvas); }

41 서피스 뷰 예제

42 핵심적인 코드 // 서피스 뷰 정의 public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback { … public MySurfaceView(Context context) { // 생성자 super(context); SurfaceHolder holder = getHolder(); // 서피스 뷰의 홀더를 얻는다. holder.addCallback(this); // 콜백 메소드를 처리한다. thread = new MyThread(holder); // 스레드를 생성한다. // Ball 객체를 생성하여서 배열에 넣는다. for (int i = 0; i < 10; i++) basket[i] = new Ball(20); } public MyThread getThread() { return thread;

43 핵심적인 코드 public void surfaceCreated(SurfaceHolder holder) { // 스레드를 시작한다. thread.setRunning(true); thread.start(); } public void surfaceDestroyed(SurfaceHolder holder) { boolean retry = true; // 스레드를 중지시킨다. thread.setRunning(false); while (retry) { try { thread.join(); // 메인 스레드와 합친다. retry = false; } catch (InterruptedException e) { } public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

44 핵심적인 코드 public class MyThread extends Thread { public void run() { while (mRun) { Canvas c = null; try { c = mSurfaceHolder.lockCanvas(null); c.drawColor(Color.BLACK); // 캔버스의 배경을 지운다. synchronized (mSurfaceHolder) { for (Ball b : basket) { // basket의 모든 원소를 그린다. b.paint(c); } } finally { if (c != null) { mSurfaceHolder.unlockCanvasAndPost(c); }

45 서피스 뷰 예제