'수도쿠 예제'에 해당되는 글 3건

  1. 2009.08.20 Android Sudoku #3. 옵션메뉴, 게임 시작화면 구성 (2)
  2. 2009.08.15 Android Sudoku #2. 게임설명 추가하기:버튼 구현, 새 액티비티와 레이아웃 추가
  3. 2009.08.14 Android Sudoku #1. 기본적인 메뉴구성

Android Sudoku #3. 옵션메뉴, 게임 시작화면 구성

|

1. 옵션 메뉴 생성

옵션메뉴는 D패드 위의 Menu버튼을 눌렀을때 나타나는 메뉴이며 지금은 그 메뉴 생성을 위해 필요한 이름값을 strings.xml에 집어넣는 것으로 시작한다.


이제 액티비티 클래스에서 옵션메뉴를 생성해야 하므로 Sudoku.java파일의 onCreateOptionsMenu메소드를 다음과 같이 구성한다. (Alt+Shift+S 후 v키를 누르면 Override/Overload할 수 있는 함수들이 나타나므로 익혀두자.) 

MenuInflater는 menu.xml의 메뉴정의를 읽어와서 실제화면의 메뉴로 '부풀린다(inflate)'.

다음은 옵션 메뉴의 항목이 선택되었을때의 동작을 결정한다

선택된 아이템의 id가 R.id.settings와 같다면 Settings.class(Settings.java) 액티비티를 시작 시킨다는 내용으로 이제 Settings.java를 생성할 차례

2. Settings 추가하기
안드로이드에서는 프로그램의 preference을 resource 파일들을 통해서도 정의 가능하다.

음악과 힌트의 설정을 변경할 CheckBox들의 설정을 정의하고 있다.
그리고 Settings.class를 PreferenceActivity를 확장하여 생성된다.

addPreferencesFromResource메소드가 xml에서 읽어온 preference들을 현재 액티비티의 view에 추가한다.
Settings.class에서 Activity를 확장했으니 Manifest파일에 적어주어야 한다.
여기까지는 아무일도 하지 않는 옵션메뉴를 만드는 과정이었다. 사실 뭐 어떤가... 아직 게임은 시작도 안되는데 >_<b


2. 새 게임 시작하기
New Game 버튼을 누르면 난이도를 설정한 뒤 각 난이도에 맞는 게임판을 불러오게끔 구성할 것이며 일단 시작은 언제나 그랬듯이 이에 필요한 문자열 정보들을 기록하며 시작한다.

난이도 목록을 resource로 관리하기

이제 Sudoku.java파일을 열어서 onClick()메소드에 다음과 같은 내용을 추가해서 New Game버튼을 눌렀을때 난이도 설정하는 메뉴가 보이게끔 설정해준다.

openNewGameDialog() 메서드는 난이도 설정을 위한 UI를 다룬다.

openNewGameDialog에서 난이도 설정하면 startGame()을 이용해 게임 시작한다. 하지만 본격적으로 게임 화면을 구성하기 전에 난이도 선택이 잘 되고 있는지를 확인하기 위해 Log를 통해 확인할 수 있는 코드로 대신

게임종료하기는 finishi() 메서드를 이용해 구현 할 수 있으며 일단 현재 프로그램에서도 사용할 수 있도록 Exit버튼에 연결한다. onClick()메서드에 switch구문 내에 다음 내용을 추가한다.



여기까지는 화면의 초기화면과 옵션, 난이도 메뉴를 이용하면서 기본적인 UI구성에 대해 알아보았고 이후로는 2D그래픽관련 함수들을 이용하여 실제 게임화면과 게임에 사용되는 논리부분 구현이 될 것이다.
Trackback 0 And Comment 2
  1. 잡학저장소 2009.08.22 05:05 신고 address edit & del reply

    님 좀 짱인듯

Android Sudoku #2. 게임설명 추가하기:버튼 구현, 새 액티비티와 레이아웃 추가

|

1. 반응하는 버튼 만들기
일단 메뉴화면을 만들었으니 이제 버튼을 눌러서 기능에 맞는 기능을 부여해줄 차례이다.
이 것을 구현하기 위한 절차로,
⊙ 버튼에 클릭 리스너 추가
⊙ Dialog를 출력하는 액티비티 추가
⊙ 밋밋한 화면에 Theme적용해보기
우선 버튼에 클릭할 리스너를 추가하기 전에 사용자에게 보여줄 문구를 strings.xml에 적어주자.
(그래야 R.class에도 추가가 되고 프로그래밍 하는 동안 에러 볼일이 적어지니까..)

../res/values/strings.xml

이제 About버튼을 클릭하면 알아차릴 수록 있도록 About버튼에 리스너를 달아주고 그때 해야 할 일을 정해주는 일을 할 차례이다. 

리스너 달기
../src/Sudoku.java

나중을 위해서 4개의 버튼 모두에다 리스너를 달았지만 버튼이 클릭( onClick())이 되었을때 실행시킬 것은 About만 구현하였다. 그리고 아직 할 일이 더 있다. 소스에 보이는 About.class를 아직 작성안했으니 에러가 나니까 어서 About.class를 준비해줘야겠다.
그전에 짚을 부분은 Sudoku클래스가 레이아웃을 준비하면서 버튼 누르는 것을 "듣고"(Listen)있는 기능을 구현해주는 OnClickListener를 "구현"시키기 위해 implements OnClickListener를 꼭 적어주는 것과 이 인터페이스(OnClickListener)를 구현시키려면 반드시 추가해줘야 하는 public void onClick(View v) 함수를 구현해줘야 한다는 것이다. 만약 버튼에서 클릭하는 동작(이벤트)이 감지되면 이 onClick함수가 실행된다.
onClick에서는 이벤트를 일으킨 객체를 식별하기 위해 ID를 사용하고 있는데 우리는 이를 미리 앞에서 만들어서 ../res/strings.xml에 저장해 두었다. 
어쨌든 지금 해야 할 일은 About.class라는 놈을 만드는 것인데, 방법은 About.java를 만들어 보는 것!!

../src/../About.java

이어서 실제로 화면에 보여질 화면을 구성...

../res/layout/about.xml

자... 이제 대충 정리가 된 듯 하다.
About에 불러올 화면(about.xml)과 글(strings.xml)도 준비 되었고, 버튼에 리스너도 달았고(Sudoku.java) 버튼 클릭시 불러올 액티비티(About.java)도 준비 되었다. 하지만 반드시 알아둬야 할 것은 새로운 엑티비티를 추가하게 되면 AndroidManifest.xml에 그 내용을 기재해줘야 한다. About.java를 작성할때 extends Activity라고 되있는데 이렇게 선언되어있으면 AndroidManifest.xml에 등록시켜줘야 한다는 뜻.

/AndroidManifest.xml

이 내용을 덛붙일 위치는 <application> 블럭 아래에 <activity> 블럭 한쌍이 있는데 그 블럭이 끝나는 부분에 붙여주면 된다. 
그럼 아래와 같은 화면을 볼 수가 있다.

음... 좀 보기가 그렇다...


일단은 기쁘게도 버튼이 잘 동작하긴 하지만 출력되는 모양이 별로 마음에 들지 않는데, 이것을 테마(Theme)를 적용해서 바꿔볼까 한다. 상당히 쉽게 구현할 수가 있는데 여러가지 방법이 있겠지만 이번엔 Manifest파일을 직접 수정해서 바꿔보았다.(사실 특별할 것도 없지만... 흑)
/AndroidManifest.xml
결과화면은 다음과 같이 기대할 수 있다.

그리 화려하진 않지만 아까보다는 봐줄만 하다. 뒤로가기 버튼을 누르면 메뉴로 돌아갈 수 있다.


여기까지가 About버튼에 액션을 주고, 다른 액티비티 클래스를 호출하고, 액티비티 작성 후 mainfest파일에 액티비티를 등록뿐만 아니라 테마도 바꿔주는 것 까지 해봤다. 

사실 안드로이드에서 Intent클래스를 이용해서 다른 액티비티를 불러오는 과정은 자주 만나게 될 부분이므로 다른 예제들도 해보면서 익숙하게 해둘 필요가 있다. 물론 Manifest파일에 등록해두는 것을 잊어선 안된다.

다음 글에서는 New Game에 난이도 조절UI 연결, Exit 버튼 그리고 옵션메뉴(배경음과 힌트 옵션) 구현.

Trackback 0 And Comment 0

Android Sudoku #1. 기본적인 메뉴구성

|
노트패드는 소스를 복사해서도 해보고 직접 타이핑(2번씩이나..)해보고 하면서도 원인을 잘 모르겠어서 나중에 내공이 쌓이거나 다른 사람에게서 해결책을 듣기전까지 잠시 접어두고, 인터넷에서 구한 책의 예제를 따라해볼까 하는데, 이번 주제는 바로 수도쿠!

난이도 자체는 Hello World찍는 것보다 딱히 어려울 것이 없지만 세로 화면(Portrait)에서는 잘 보이지만 가로 화면(Landscape)에서 제대로 보이지 않는 경우의 해결법을 알아보는 정도의 포스팅. @_@;

0. 프로젝트 생성
Project name : Sudoku
Package : com.example.android.cgkim.sudoku
Activity : Sudoku
Target/API LV : SDK 1.1  / 2

프로젝트를 생성하면 여러 파일들이 자동으로 생성되는데 이 파일을 간단히 짚어보고 넘어갈 필요가 있다.
Sudoku/src/com.example.android.cgkim.sudoku/Sudoku.java
public class Sudoku extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}
간단하니 만큼 소스가 담고 있는 내용도 그리 복잡하진 않다. 간단히 말해 R.layout.main이라는 놈을 화면에 보여주는 것이다. 그리고 R.layout.main은 res/layout.main.xml에 대응된다고만 생각하고 넘어가련다.(사실은 그렇지 않지만 그리 틀린말도 아니고 이렇게 하는 편이 이해하기 쉬우니까...)
이쯤이면 눈치까야 한다. 처음 화면을 구성하기 위해서 res/layout/main.xml이 파일을 손보면 된다는 뜻. 이제 초라하지만 어쨋든 간단하게라도 화면을 구성해봐야 할 차례.

1. 메뉴 만들기

LinearLayout, TextView. Button


Sudoku.java는 손댈 일이 없고 ../res/layout/main.xml 파일을 xml편집모드로 위와 같은 화면을 구성한다.
Sudoku/res/layout/main.xml

main.xml에서 "@+id/...."로 된 부분은 그 객체의 id의 값을 정해주는 소스이고 "@string/...." 부분은 string에 있는(@: at) ...라는 녀석의 값을 참조하라는 뜻이다. 어쨌든 그 ...라는 값이 string이라는 곳에 없기 때문에 생기는 에러이다. 그러면 그것을 해결하려면 어째야 하는가 하니
res/values/strings.xml에 다음과 같이 입력해서 해결할 수 있다.
../res/values/strings.xml

여기까지 작성하고 일단 에뮬레이터를 실행시키면 다음과 같은 화면이 나오게 된다.


뭔가... 뭔가 다른 점이 있다... 바로 배경색!!! 실수한척 하고 있지만 의도적으로 배경색을 지정하지 않았는데 그 이유는 배경색도 버튼에서 이름을 불러오기 위해 그 값들을 다른 파일에서 불러왔듯이 배경색도 다른 파일에서 그 값을 불러와 사용할 수 있다는 것을 보여주기 위함이다. 여기서 하고픈 말은 색 정보, 이름정보 등등을 각기 다른 파일에 따로 정리해서 넣어두면 차후에 수정하기에 용이하기 때문이다. 

../res/values/color.xml


그리고 배경화면도 값을 주어 지정해주자...
../res/layout/main.xml

이렇게 손을 봐주고나서 에뮬레이터를 실행시키면 배경색이 바뀌는 것을 볼 수 있다. 

별 내용없이 글만 길어져서 여기서 맺어야 할 듯 한데 그러기 전에 해결해야할 문제가 하나있다. 말보다 그림.

Dang~ 바로 요것. 버튼이 잘려서 나온다는 문제점이 발생했다.(에뮬레이터 활성 후 키패드의 7 혹은 9)

3. 가로본능 구현
침착하자. 가로 본능에 충실한 UI를 제공해주면 될일이다. 문제는 어떻게 하느냐 인데... 생각보다 간단하다.
절차는 layout-land라는 폴더를 만들어서 거기다가도 main.xml에 화면을 보여줄 UI를 작성하면 된다. Portrait에서의 main.xml, Landscape에서의 main.xml이 각각 세로와 가로일때의 화면을 담당하며 이녀석과 대응되는 것은 처음에 보았던 R.layout.main 이녀석이다. 

어쨌든 가로본능을 위한 UI의 코드
../res/layout-land/main.xml

이제 다시 빌드시키고 에뮬레이터 구동시키면 다음과 같이 알흠다운 화면을 볼 수 있을 것이다.


지금까지의 내용만으로는 그냥 화면을 구성하고 가로로 눞혔을때에 적절한 화면을 보여주는 정도에 불과하고 옵션 메뉴나 각 버튼은 작동하지 않는다. 하지만 프로젝트 생성시 자동생성되는 폴더나 파일들 중 일부의 기능과 용도, 사용법, 연계법을 약간 맛을 보았고, 세로화면과 가로화면을 따로 구성할 수 있다는 것도 알아보았다.

다음 포스트에서는 About버튼을 누르면 글상자를 보여주는 것을 구현하려 한다. 

Trackback 0 And Comment 0
prev | 1 | next