안드로이드 스튜디오 주사위게임 앱 제작 2 - 화면개발하기

 

배경화면 만들기

화면개발은 지난시간 MainActivity를 생성하면 자동으로 만들어지는 activity_main.xml에서 한다. 이파일은 화면의 왼쪽 project창에서 layout 폴더 하위에 있다.

 

activity_main.xml파일을 더블클릭하면 아래와 같이 화면구성하는 파일이 보인다. 

 

먼저 배경화면을 만들어보자. 화면에서 우측 상단에 돋보기 모양을 클릭하고 "back"정도만 입력하면 바로아래 back가 들어가는 기능들이 보이는데 여기서 "background"에서 아래그림에서 화살표가 가르키는 곳을 클릭한다.

 

 

Pick a Resource 팝업창이 뜨는데 여기서 지나시간에 drawble안에 넣어둔 이미지 파일중 배경으로 쓰려는 파일을 선택한다.

 

 

순서대로 잘 따라 했다면 아래와 같이 안드로이드 스튜디오를 이용한 주사위게임 앱의 배경화면을 만든것이다,

 

 

이미지 배치하기

 

이미지는 총 3개를 배치할 것이다. 그중에서 먼저 주사위게임이라는 느낌을 주기위한 이미지를 넣어보자.

 

Palette창에서 Common -> imageView를 마우스로 클릭하여 화면에 끌어와 배치시킨다.

 

 

배경화면 고른것과 마찬가지로 Pick a Resource 창에서 이미지를 선택한다.

 

 

적당한 위치에 이미지를 배치 시켰으면 Constraint Widget에서 상,좌,우 를 연결시킨다. 여기서 숫자를 입력하면 해당위치의 간격이 조절된다.

 

 

버튼 배치하기

 

이미지 배치와 마찬가지로 Common -> Button을 마우스로 끌어놓는다

 

 

아래 그림을 참조하여 button의 layout_width를 match_parent를 입력하여 버튼의 폭을 화면전체에 꽉 차도록 한다.

 

 

버튼의 text는 "ROLL THE DICE!"로 변경해주고 textsize는 적당한 크기로 변경하여 준다. 아래 화면의 오른쪽에서 직접찾아 해당기능을 사용해도 되지만, 돋보기를 눌러서 해당기능을 빠르게 찾아 사용하는것도 좋다.

 

 

화면에 꽉찬 버튼에 좌우 여백을 조금씩 주기위해서 돋보기로 "margin"을 찾고 layout margin에서 좌,우의 여백값을 준다.

 

 

완성

화면에서 주사위 그림 두개는 위에서 불러온것과 같은 방법으로 불러오면 된다. 

 

이렇게 하면 안드로이드 스튜디오 주사위게임 앱만들기 화면개발은 완성이다.

 

다음시간에는 MainActivity에 로직구현을 하여 앱개발 마무리를 짓겠다.