'sudoku'에 해당되는 글 1건

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

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