1. 새 프로젝트 만들기
메뉴 탭 바에서 File -> New -> New Project를 순서대로 클릭하고 아래와 같이 No Activity를 선택합니다.
새 프로젝트의 Name을 입력합니다. 필자는 "DiceApp"이라고 이름을 지었습니다. 사용할 개발 언어는 Java입니다.
2. Main Activity 만들기
새 프로젝트가 만들어졌습니다. 이제 안드로이드 스튜디오를 사용하여 주사위 게임 앱을 만들기 위한 액티비티를 만들어 보겠습니다.
화면 왼쪽의 Project 화면에서 Java 폴더 하위의 첫 번째 폴더에서 마우스 우클릭하여 아래 그림과 같이 순서대로 클릭해 주세요.
Activity Name은 그대로 메인 액티비티로 두고, 아래 런처 액티비티 체크박스를 체크하고 Finish 버튼을 클릭합니다.
안드로이드 스튜디오 주사위 게임 앱을 만들기 위한 Main Activity가 만들어졌습니다. 이곳에서 로직 개발을 진행할 예정입니다.
Main Activity와 함께 layout 폴더에 activity_main.xml도 만들어졌습니다. 여기에는 실제로 앱 화면에 보이는 화면 개발을 진행합니다.
3. 화면개발
안드로이드 스튜디오 주사위 게임 앱 만들기 Project 및 Main Activity를 만들면 자연스럽게 activity_main.xml가 만들어집니다. 이번 시간에는 실제 앱을 구동시키면 눈에 보이는 화면 개발을 진행해 보겠습니다.
화면에 보여질 여러 그림 파일들과 동작 시 효과음을 줄 수 있는 wav 파일도 있습니다. 파일은 제작자님께서 원하시는 이미지와 효과음을 찾아서 사용하시면 됩니다.
이미지 파일 넣기
wav 파일을 제외하고 이미지만 복사(컨트롤 + C) 합니다.
Project에서 drawable 폴더를 마우스로 클릭하고 붙여넣기(컨트롤 + V) 합니다.
효과음 파일 넣기
res 폴더 클릭 -> 마우스 우클릭 -> New -> Android Resource Directory를 순서대로 클릭합니다.
팝업창에서 Resource type에서 raw를 선택하고 OK를 클릭합니다.
이미지를 넣는 방법과 같이 해당 파일을 복사하신 후 새로 만들어진 raw 폴더를 선택하신 후 붙여넣어 주세요.
4. 초기 세팅 완료
안드로이드 스튜디오 주사위 게임 앱 만들기를 위한 세팅이 완료되었습니다.
- New Project 만들기
- Main Activity 만들기
- res -> drawable 사용할 이미지 파일 넣기
- res -> raw 디렉토리 만들기
- res -> raw 사용될 효과음 파일 넣기
5. 배경화면 만들기
화면 개발은 지난 시간 MainActivity를 생성하면 자동으로 만들어지는 activity_main.xml에서 진행합니다. 이 파일은 화면의 왼쪽 project 창에서 layout 폴더 하위에 있습니다.
activity_main.xml 파일을 더블 클릭하시면 아래와 같이 화면 구성 파일이 보이게 됩니다.
먼저 배경 화면을 만들어 보겠습니다. 화면에서 우측 상단에 돋보기 모양을 클릭하고 "back" 정도만 입력하면 바로 아래 back가 들어가는 기능들이 보이는데, 여기서 "background"에서 아래 그림에서 화살표가 가리키는 곳을 클릭합니다.
Pick a Resource 팝업창이 뜨는데 여기서 지난 시간에 drawable 안에 넣어둔 이미지 파일 중 배경으로 쓰려는 파일을 선택합니다.
순서대로 잘 따라 하셨다면 아래와 같이 안드로이드 스튜디오를 이용한 주사위 게임 앱의 배경 화면을 만든 것입니다.
이미지 배치하기
이미지는 총 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에 로직 구현을 하여 앱 개발 마무리를 짓겠습니다.
앞서 안드로이드 스튜디오 주사위 게임 앱 만들기 1편과 2편으로 세팅과 화면 개발까지는 마쳤습니다. 이번 시간에는 앱에 생명을 불어넣는 로직 개발을 하여 주사위 게임 앱 개발 마무리를 지어보려고 합니다.
6. 멤버변수 만들기
화면에서 유저와 인터랙티브(Interactive) 되는 뷰들은 멤버 변수로 만듭니다.
멤버 변수를 만들 때 중요한 것은 id입니다. 지금은 간단하게 만드는 것이라 id 값을 신경 쓰지 않았지만, 복잡한 구성의 여러 개의 화면 구성을 할 때는 id 값이 매우 중요합니다.
여기서 한 가지 팁이 있는데 Design은 화면을 직관적으로 시각화하여 보는 것이지만, 탭에서 Code를 클릭하면 소스 코드로도 볼 수 있습니다. 다른 곳에서 디자인을 복사한다면 소스 코드를 복사해서 붙여넣기 하면 쉽게 작업을 할 수 있습니다.
아래와 같이 주사위 이미지 2개와 버튼 1개를 멤버 변수로 만들어 주세요.
public class MainActivity extends AppCompatActivity {
// 멤버변수 만들기
ImageView imageView2; // 첫번째 주사위
ImageView imageView3; // 두번째 주사위
Button button; // 버튼
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
7. 화면과 연결하기
imageView2 = findViewById(R.id.imageView2)와 같은 코드는 XML 레이아웃에서 정의한 위젯을 Java 코드와 연결하는 역할을 합니다. 예를 들어서 R.id.imageView2는 XML 파일에서 정의한 ImageView 위젯의 식별자를 의미합니다.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 화면과 java코드와 연결
imageView2 = findViewById(R.id.imageView2);
imageView3 = findViewById(R.id.imageView3);
button = findViewById(R.id.button);
버튼을 눌렀을때 로직구현
버튼을 클릭했을 때 이벤트 처리를 하기 위한 코드 작성 버튼이 클릭되면 내부의 onClick(View view) 메서드의 내용이 실행됩니다
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
onClick(View view) 메서드내 로직 구현
주사위 1 (imageView2)과 주사위 2(imageView3)의 눈을 1부터 6까지의 랜덤한 정수로 표시하기 위한 코드 작성.
아래는 onCLICK(View view) 메서드 내에 로직을 구현한 최종 주사위 앱 소스 코드 전부입니다. 화면 개발을 하시고 메인 액티비티에 아래와 같이 소스 코드를 넣으시면 앱이 정상적으로 실행될 것입니다.
단, 화면 개발할 때 id 이름을 정확하게 지정해야 합니다.
public class MainActivity extends AppCompatActivity {
ImageView imageView2;
ImageView imageView3;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView2 = findViewById(R.id.imageView2);
imageView3 = findViewById(R.id.imageView3);
button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Random random = new Random();
int num1 = random.nextInt(6); // 0부터 5까지의 난수 생성
int num2 = random.nextInt(6); // 0부터 5까지의 난수 생성
// 첫 번째 주사위 이미지 설정
if (num1 == 0) {
imageView2.setImageResource(R.drawable.dice1);
} else if (num1 == 1) {
imageView2.setImageResource(R.drawable.dice2);
} else if (num1 == 2) {
imageView2.setImageResource(R.drawable.dice3);
} else if (num1 == 3) {
imageView2.setImageResource(R.drawable.dice4);
} else if (num1 == 4) {
imageView2.setImageResource(R.drawable.dice5);
} else {
imageView2.setImageResource(R.drawable.dice6);
}
// 두 번째 주사위 이미지 설정
if (num2 == 0) {
imageView3.setImageResource(R.drawable.dice1);
} else if (num2 == 1) {
imageView3.setImageResource(R.drawable.dice2);
} else if (num2 == 2) {
imageView3.setImageResource(R.drawable.dice3);
} else if (num2 == 3) {
imageView3.setImageResource(R.drawable.dice4);
} else if (num2 == 4) {
imageView3.setImageResource(R.drawable.dice5);
} else {
imageView3.setImageResource(R.drawable.dice6);
}
}
});
}
}"ROLL THE DICE!" 버튼을 누르면 두개의 주사위가 랜덤으로 눈이 바뀝니다.
'Frontend > 실습' 카테고리의 다른 글
| 163. [AI][Android Studio] Android Activity Lifecycle(활동 수명 주기) 완벽 가이드 (0) | 2025.03.03 |
|---|---|
| 162. [AI][Android Studio] 안드로이드 스튜디오 설치하는 방법 (0) | 2025.03.03 |
