Download presentation
Presentation is loading. Please wait.
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, 350, 50, paint); canvas.drawRect(10, 110, 350, 250, paint); canvas.drawCircle(50, 430, 100, paint); paint.setTextSize(50); canvas.drawText("텍스트도 그릴 수 있습니다", 10, 700, 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(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); }
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(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); }
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
이미지 표시 리소스 폴더에 이미지 파일를 복사한다.
예를 들어서 android.png 파일을 프로젝트의 res/drawable 폴더에 복사 프로그램에서는 R.drawable.android로 참조 지원되는 파일 형식은 PNG (선호), JPG (가능), GIF (권장되지 않음)
16
이미지 표시하기: 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>
17
코드로 화면에 이미지 표시 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);
18
이미지 크기 변환 변환 행렬 사용 ... 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);
19
이미지 크기 변환 ... 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); }
20
도형 객체 사각형이나 원 같은 도형을 객체로 표시한다. Drawable 객체 XML로 객체를 생성 코드로 객체를 생성
21
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>
22
XML로 도형 객체 정의: 예제 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=" android:shape="oval"> <solid android:color="#ff0000"/> </shape>
23
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); }
24
예제: XML로 배경 정의 XML로 그라디언트로 채워진 사각형을 정의하고 이 것을 선형 레이아웃의 배경으로 하여 보자.
25
도형 정의
26
시용자 인터페이스 정의
27
예제: XML로 버튼 정의하기
28
에니메이션 프로퍼티 애니메이션(property animation) 뷰 애니메이션(view animation)
모든 객체의 속성을 애니메이션할 수 있다. 뷰 애니메이션(view animation) View 객체만을 애니메이션 드로워블 애니메이션(Drawable animation) 여러 장의 이미지를 사용
29
프로퍼티 애니메이션 다음과 같은 값들을 설정 가능 지속 시간(duration)
시간 보간(time interpolation): 시간의 함수로 값이 어떻게 변하는지를 정의 반복 횟수와 반복 동작(Repeat count and behavior) 애니메이터 집합(Animator sets): 애니메이션의 집합을 생성할 수 있다. 프레임 재생 지연(Frame refresh delay): 애니메이션을 다시 그리는 횟수를 설정한다.
30
선형 애니메이션 비선형 애니메이션
31
프로퍼티 애니메이션 코드
32
뷰 애니메이션
33
코드
34
드로워블 애니메이션 영화 필름처럼 여러 개의 이미지가 순서대로 재생되 어서 생성되는 전통적인 애니메이션
35
드로워블 애니메이션 애니메이션을 구성하는 프레임들을 나열하는 XML 파일을 생성
37
Lab: 랜덤 그래픽 작성
39
Lab: 그림판 앱 작성 윈도우에서 기존 제공되는 그림판과 유사한 애플리 케이션을 작성해보자
40
핵심 코드
Similar presentations
