[안드로이드/Android] 안드로이드 SurfaceView

안드로이드 SurfaceView

오늘은 안드로이드에서 그림을 그리는 방법중 SurfaceView에서 그리는 방법에 대해 정리해 보려고 합니다.

안드로이드 SurfaceView는 뷰 계층 구조 내에서 그리기 공간(Surface)를 제공하는 특수한 클래스 입니다.

SurfaceView를 만들기 위해서는 먼저 SurfaceView를 상속받은 클래스가 필요하며 SurfaceHolder.Callback을 구현해야 합니다.

다른 그리기와는 달리 SurfaceView는 SurfaceHolder을 통해서만 그리기가 가능하며 SurfaceView가 초기화 될때 getHolder()를 호출하여 SurfaceHolder을 얻고 난뒤 addCallback()을 호출해서 SurfaceHolder에게 알려주어야 합니다.

말이 무쟈게 어렵네요. 일단 간단한 코드를 통해서 하나씩 설명하도록 하겠습니다.

설명의 편의를 위해 하나의 파일안에 작성하도록 하겠습니다.

추후 필요에 따라서 파일의 양이 부담이 되신다면 따로 분리 하셔서 작성하셔도 됩니다.

SurfaceViewTest01Activity.java

package com.tistory.jwandroid.surfaceview;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

public class SurfaceViewTest01Activity extends Activity {

   

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(new MySurfaceView(this));    --  ㉠

    }

    

    class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback{

public MySurfaceView(Context context) {    -- ㉡

super(context);

}

public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {    -- ㉢

}

public void surfaceCreated(SurfaceHolder holder) {    -- ㉣

}

public void surfaceDestroyed(SurfaceHolder holder) {    -- ㉤

}

   

    }

    

    class MyViewThread extends Thread{    -- ㉥

   

    }

}

붉게 색상처리된 부분이 기본적으로 파일을 만드신 후 추가되는 코드들 입니다.

㉠ - 먼저 해당 Activity에 뷰를 구성하기 위해 레이아웃에서 가지고 오는 것이 아니라 SurfaceView를 상속받은 클래스의 객체를 생성하여 화면을 구성합니다. 즉 레이아웃을 통해 화면을 만드는 것이 아니라 SurfaceView에서 그려지는 녀석으로 내가 화면을 구성하겠다. 라는게 되는것이죠.

㉡ - SurfaceView를 상속 받게 되면 반드시 생성자를 만드셔서 부모클래스(SurfaceView)의 생성자를 호출하여 초기화를 해야 합니다.

㉢ ~ ㉤ 까지는 SurfaceHolder.CallBack 인터페이스를 implements했을때 반드시 오버라이딩 해야 하는 메소드 입니다.

- surfaceChanged : surface 에 화면상의 변화 ( format, size 등 ) 가 있을 때 호출됩니다. 

- surfaceCreated : surface가 처음 생성될 때 호출됩니다.

- surfaceDestroyed : surface가 소멸(Destroyed)될 때 호출됩니다. 

㉥ - 여기 Thread에서 여러분들이 실제로 그리는 작업을 적절히 시간텀을 주어서 작업하시면 됩니다.

아직 완성된 코드가 아니죠 좀더 추가해서 나가보도록 하겠습니다.

가장 먼저 Thread를 상속받은 내부클래스를 추가 수정해 보도록 하겠습니다.

class MyViewThread extends Thread{

    private SurfaceHolder surfaceholder;

        private boolean running = false;

        

        int imgX = 0;

        int imgY = 0;        

        

        MyViewThread(SurfaceHolder _holder){    -- ㉠

        surfaceholder = _holder;

        }

        

    public void run(){    -- ㉡

        Canvas c;

   

        while (running) {

                c = null;

                try {

                    c = surfaceholder.lockCanvas(null);    -- ㉢

                    synchronized (surfaceholder) {    -- ㉣

                        drawBackground(c);

                        drawMyBitmap(c);

                    }

                } finally {

                    

                    if (c != null) {

                        surfaceholder.unlockCanvasAndPost(c);    -- ㉤

                    }

                }

            }

    }

   

    public void drawBackground(Canvas _canvas){    -- ㉥

    _canvas.drawARGB(255, 255, 255, 255);

    }

   

    private void drawMyBitmap(Canvas _canvas){    -- ㉦

    _canvas.drawBitmap(testImage01, imgX, imgY, null);

    }

    }

㉠ - 그리기 뷰를 가지고 있는 Holder를 객체가 만들어 질때 생성자 내에서 SurfaceView로 부터 받아 옵니다.

㉡ - Thread를 구현합니다. 그리고 종료되기 전까지 계속 실행되기 위해 while문을 통해 계속 반복을 합니다.

㉢ - 넘겨받은 surfaceholder로부터 뷰를 받아옵니다. 

메소드를 보시면 lockCanvas라고 되어 있습니다. 이름처럼 holder에 있는 canvas를 정지 시킨후 그림을 그릴수 있도록 Canvas를 리턴시켜       줍니다. 그러면 우리는 넘겨받은 캔버스에가다가 원하는 그림을 그린후에 다시 Lock를 풀어주면 그린 그림이 반영되게 되는것 입니다.

㉣ - 외부의 영향을 받지 않기 위해 동기화를 시켜 줍니다. 해당내용은 추후에 Thread와 함께 강좌를 따로 올리도록 하겠습니다.

㉤ - 모든 그림을 그린후 Lock을 풀어 줍니다. 그러면 여러분이 그린 그림이 반영되게 되어 있죠.

㉥ - 그리고자 하는 녀석을 메소드로 따로 빼버렸습니다. 내용은 간단합니다. 전체 화면을 흰색으로 그려버립니다.

㉦ - Canvas에 해당 이미지를 그립니다. 현재 생성된 변수는 SurfaceViewTest01Activity 클래스 안에 있습니다. 그래서 위의 코드만 추가 하시면 아마 에러가 발생하게 될것입니다. 그러니 추가적으로 아래 코드를 작성하신 다면 에러가 사라지게 될 것입니다.

Bitmap testImage01;

MyViewThread mThread;    -- ㉠

@Override

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(new MySurfaceView(this));

        

    testImage01 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);    -- ㉡

}

public MySurfaceView(Context context) {

super(context);

getHolder().addCallback( this );    -- ㉢

}

public void surfaceCreated(SurfaceHolder holder) {

mThread = new MyViewThread(getHolder());         // GameThread 생성

mThread.start();    -- ㉣

}

public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

}

public void surfaceDestroyed(SurfaceHolder holder) {

boolean done = true;    -- ㉤

           while (done) {

        try {

            mThread.join();              

                   done = false;

               }catch (InterruptedException e) {  

           } 

       }

㉠ - 변수를 추가 합니다. Thread에서 사용되는 이미지 변수 및 Thread 멤버 변수를 추가 합니다.

㉡ - 이미지 객체를 생성합니다.

㉢ - 객체가 생성될때 Holder에다가 Callback 리스너를 추가 합니다.

㉣ - surfaceView가 생성될때 Thread객체를 생성하고 Thread를 start 시킵니다.

㉤ - surfaceView가 소멸될대 Thread를 종료 시킵니다.

아래에 전체 소스를 추가 하도록 하겠습니다.

실행 해보시면 생성된 이미지가 좌측 상단에서 우측 하단으로 이동되는걸 보실수가 있습니다.

package com.tistory.jwandroid.surfaceview;

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.os.Bundle;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

public class SurfaceViewTest01Activity extends Activity {

Bitmap testImage01;

MyViewThread mThread;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(new MySurfaceView(this));

        

        testImage01 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);

    }

    

    class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback{

public MySurfaceView(Context context) {

super(context);

getHolder().addCallback( this );

}

public void surfaceCreated(SurfaceHolder holder) {

mThread = new MyViewThread(getHolder());         // GameThread 생성

mThread.start();

}

public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

}

public void surfaceDestroyed(SurfaceHolder holder) {

boolean done = true;

       while (done) {

        try {

        mThread.join();                           

               done = false;

           }catch (InterruptedException e) {      

           } 

       }

}

   

    }

    

    class MyViewThread extends Thread{

    private SurfaceHolder surfaceholder;

        private boolean running = true;

        

        int imgX = 0;

        int imgY = 0;        

        

        MyViewThread(SurfaceHolder _holder){

        surfaceholder = _holder;

        }

        

    public void run(){

    Canvas c;

   

    while (running) {

                c = null;

                try {

                    c = surfaceholder.lockCanvas(null);

                    synchronized (surfaceholder) {

                        drawBackground(c);

                        drawMyBitmap(c);

                    }

                } finally {

                    

                    if (c != null) {

                        surfaceholder.unlockCanvasAndPost(c);

                    }

                }

            }

    }

   

    public void drawBackground(Canvas _canvas){

    _canvas.drawARGB(255, 255, 255, 255);

    }

   

    private void drawMyBitmap(Canvas _canvas){

    _canvas.drawBitmap(testImage01, imgX, imgY, null);

    imgX++;

    imgY++;

    }

    }

}

이상으로 기본적인 SurfaceView에 대해서 마치도록 하겠습니다.

여기에 터치 이벤트 등을 추가하시면 간단한 게임을 만들기 위한 기초작업으로 참고하셔도 좋을듯 싶습니다.

추가적인 의문사항이나 궁금하신 사항이 있으시면 댓글달아 주세요.^^