안녕하세요~ 두결입니다.
지난시간에는 배경음악 및 효과음 재생하는 방법을 알아보았습니다.
이번시간에는
Sound On/Off 기능을 넣기위한 팝업창을 한번 만들어보겠습니다.
▣ 팝업창 디자인하기
먼저, 팝업창을 디자인해보도록 하겠습니다.
팝업창 디자인은 위와 같이 간단하게 해보았습니다. ^^
상단에 소리 On/Off 버튼과 게임종료할수 있는 버튼을 배치하였고
아래쪽에는 "게임시작"버튼을 두었습니다.
앱실행하면 바로 이 팝업창이 뜨고 여기에서 "게임시작"버튼 누를때 게임이 시작되도록 할 예정입니다.
이 배경이미지를 popup_back01.png로 저장하였고 프로젝트 리소스에 등록하였습니다.
▣ 팝업창 생성하기
자, 이제 디자인을 끝냈으니 팝업창을 만들어보겠습니다.
프로젝트창에서 오른쪽버튼
New->Activity->Empty Views Activity 를 선택!!
Activity Name을 PopupSetting이라고 하고 Finish!!
그리고, 팝업화면의 기본적인 세팅 3가지를 해주겠습니다.
먼저, 타이틀바를 없애고...
supportRequestWindowFeature(Window.FEATURE_NO_TITLE); // 타이틀바 없애기
뒤로가기 버튼을 막고
// 뒤로가기 버튼 막기
OnBackPressedCallback callback = new OnBackPressedCallback(true) {
@Override
public void handleOnBackPressed() {
setEnabled(true); // 뒤로가기 막기
}
};
getOnBackPressedDispatcher().addCallback(this, callback);
마지막으로 뷰 바깥영역 터치안되게 하겠습니다.
@Override
public boolean onTouchEvent(MotionEvent event) {
// 뷰 바깥영역 터치시 강제로 막음
if(event.getAction() == MotionEvent.ACTION_OUTSIDE)
{
return false;
}
return true;
}
팝업화면 만들면 위 3가지는 기본공식처럼 해주면 되겠네요.^^
▣ 팝업창 설정 및 앱시작시 띄우기
이제 팝업창을 만들었으니 팝업창의 배경을 설정해보겠습니다.
findViewById(R.id.main).setBackgroundResource(R.drawable.popup_back01); // 배경이미지 설정
위와같이 위에서 만든 배경이미지를 팝업창의 배경으로 설정하였습니다.
그리고, AndroidManifest.xml에서 팝업창 설정을 해보겠습니다.
<activity
android:name=".PopupSetting"
android:exported="false"
android:theme="@style/Theme.AppCompat.Dialog" />
위와같이 테마를 Dialog로 해주면 됩니다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="320dp"
android:layout_height="210dp"
tools:context=".PopupSetting">
</androidx.constraintlayout.widget.ConstraintLayout>
그리고, activity_popup_setting.xml에서 팝업창의 크기를 320x210으로 설정해주었습니다.
이제 앱시작시 띄워보도록 하겠습니다.
팝업창 띄우는것은 Intent를 이용하면 되죠?
// 설정창 띄우기
private void ShowPopupSetting()
{
Intent intent = new Intent(getApplicationContext(), PopupSetting.class);
mPopupSettingForResult.launch(intent);
}
ActivityResultLauncher<Intent> mPopupSettingForResult = registerForActivityResult(new ActivityResultContracts.StartActivityForResult(),
result -> {
if (result.getResultCode() == RESULT_OK) {
// OK일때 처리
}
}
);
위와같이 ShowPopupSetting()함수를 만들어서
금방만든 팝업창을 띄웠습니다.
결과값 받는 Launcher도 만들었구요~
PlayBackgroundSound(); // 배경음악 재생하기..
ShowPopupSetting(); // 팝업창 띄우기
nGameStage = 1;
// NewGame(); // 새게임 시작
배경음악 재생후에
ShowPopupSetting()함수를 호출하여 팝업창을 띄워보았습니다.
NewGame()함수는 일단 주석처리 해두구요~
여기까지 잘되는지 실행해보겠습니다.
네. 앱이 실행되고 바로 팝업창이 잘 뜨네요.. ^^
▣ 팝업창에 Image버튼 추가
이제, 마지막으로 Image버튼만 추가하면 되겠네요...
위와같이 먼저 이미지를 준비해보았습니다.
Sound Off, Sound On 버튼
게임시작 버튼
그리고, 종료 버튼 이미지입니다.
평상시 이미지와 터치했을때 이미지 2개씩 준비하였습니다.
종료하고 게임시작같은 경우는 터치하자마자 바로 화면이 바뀌기때문에 굳이 터치했을때 이미지는 필요없긴한데...
일단 적용해보도록 하겠습니다.
이 8개 이미지를 복사한후에 프로젝트 리소스에 붙여넣기 하구요~
XML 디자인 화면에서 ImageView 4개를 갖다놓고 이미지를 설정하겠습니다.
네 위와같이 XML 디자인화면에서 ImageView 4개를 갖다놓고 해당 이미지를 설정하였습니다.
<ImageView
android:id="@+id/imgvSoundOff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/soundoffbtn_normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.1" />
<ImageView
android:id="@+id/imgvSoundOn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/soundonbtn_normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.45"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.1"/>
<ImageView
android:id="@+id/imgvExit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/exitbtn_normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.92"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.1"/>
<ImageView
android:id="@+id/imgvPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/playbtn_normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.9"/>
그리고, 위와같이 각각의 ID는
imgvSoundOff, imgvSoundOn, imgvExit, imgvPlay라고 하였습니다.
자, 적용이 잘 되었는지 실행해보겠습니다.
네 앱 시작시 팝업창이 잘 뜨고
이미지 버튼 4개도 잘 보이네요..^^
조금 길어졌으니까 이번시간은 여기까지만 하구요~
다음시간에는 이렇게 만든 4개의 이미지버튼 기능구현을 해보도록 하겠습니다.
감사합니다. ^^
