그림짝맞추기 앱만들기 08 - 다음단계 설정 팝업창 만들기 및 기본설정하기, 팝업창 반투명으로 설정하기, 1단계 성공 시, 다음단계 설정 팝업창 표시하기

안녕하세요~ 두결입니다.

 

지난시간에는  이미 맞춘 그림은 터치가 안되도록 처리하고 처음 시작시 5초간 카운트 다운할때는 모든 이미지 카드의 터치가 안되도록 하였습니다. 그리고,  모든 그림 다 맞추었는지 체크하기까지 해보았습니다.

 

이번시간에는

1단계 성공 시, 다음단계 설정을 위한 팝업창을 띄워보도록 하겠습니다.

 

---

▣  다음단계 설정 팝업창 만들기 및 기본설정하기

먼저, 1단계 성공시 다음단계 설정 팝업창을 만들어보겠습니다.

 

 

좌측의 프로젝트 속성창에서 오른쪽 버튼!

New->Activity->Empty Views Activity 선택!

 

 

ActivityName은 PopupNextStage라고 하고 Finish!!

 

팝업화면을 띄우는것은 이전에 한 강좌가 있으니 그부분 참고하시길 바랍니다. ^^

https://eun9073.tistory.com/25

모바일앱개발 강좌 #07 - 팝업화면이란?, 팝업으로 띄울 화면 생성하기, 버튼 클릭시 팝업화면 띄

 

 

먼저, 팝업화면의 기본설정을 해보겠습니다.

 

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    EdgeToEdge.enable(this);
    
    supportRequestWindowFeature(Window.FEATURE_NO_TITLE); // 타이틀바 없애기
    setContentView(R.layout.activity_popup_next_stage);

 

supportRequestWindowFeature()로 팝업화면의 타이틀바를 없애주고요~

 

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    EdgeToEdge.enable(this);

    supportRequestWindowFeature(Window.FEATURE_NO_TITLE); // 타이틀바 없애기
    setContentView(R.layout.activity_popup_next_stage);

    // 뒤로가기 버튼 막기
    OnBackPressedCallback callback = new OnBackPressedCallback(true) {
        @Override
        public void handleOnBackPressed() {
            setEnabled(true); // 뒤로가기 막기
        }
    };
    getOnBackPressedDispatcher().addCallback(this, callback);

 

OnBackPressedCallback으로 뒤로가기 버튼도 막아주겠습니다.

 

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 뷰 바깥영역 터치시 강제로 막음
    if(event.getAction() == MotionEvent.ACTION_OUTSIDE)
    {
        return false;
    }
    return true;
}

 

마지막으로 onTouchEvent()로 뷰 바깥영역 터치시 강제로 막아주었습니다.

 

 

<?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="300dp"
    android:layout_height="300dp"
    tools:context=".PopupNextStage">

</androidx.constraintlayout.widget.ConstraintLayout>

 

그리고, activity_popup_next_stage.xml에서

width와 height를 300dp로 설정하였습니다.

 

---

▣  팝업창 반투명으로 설정하기

팝업창으로 반투명으로 만드는 법도 예전에 했던 강좌에 있으니 

그부분 참고해주시면 됩니다. 

 

https://eun9073.tistory.com/27

모바일앱개발 강좌 #09 - style작성 후 새로운 테마작성하기, 투명테마 적용하기, 투명한 팝업화면

 

 

 

먼저, style을 하나 추가하구요~

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name = "Theme.AppCompat.PopupTransparent" parent="Theme.AppCompat.Dialog">
        <item name ="android:windowIsTranslucent"> true </item>
        <item name="android:windowBackground"> #55E2F0D9 </item>
    </style>           
</resources>

 

위와같이 투명속성과 배경색을 지정해줍니다.

 

<activity
    android:name=".PopupNextStage"
    android:exported="false"
    android:theme="@style/Theme.AppCompat.PopupTransparent"/>
<activity
    android:name=".MainActivity"
    android:exported="true">

다음으로 AndroidManifest.xml에서

금방 만든 Transparent 테마를 설정해줍니다.

 

 

---

▣  1단계 성공 시, 다음단계 설정 팝업창 표시하기

이제, 이렇게 만든 팝업화면을 1단계 성공 시, 띄워보도록 하겠습니다.

 

// 같은그림인지 체크해주는 함수
private void CheckSameImage(ImageView imgvFirst, int nFirstID, int nFirstPos,
                            ImageView imgvSecond, int nSecondID, int nSecondPos)
{
    if(nFirstID == nSecondID)
    {
        bPairOK[nFirstPos]= true;
        bPairOK[nSecondPos]= true;

        // 모든 그림을 찾았는지 체크
        bNotFindAllPair = false;
        for(int i=0;i<nCurImageCount;i++)
        {
            if(!bPairOK[i])
            {
                bNotFindAllPair = true;
            }
        }

        if(!bNotFindAllPair)
        {
            Toast.makeText(getApplicationContext(),"1단계 성공!!",Toast.LENGTH_SHORT).show();
            bGameStart =false;
        }
    }
    else
    {
        FlipCardAnimation(imgvFirst);
        FlipCardAnimation(imgvSecond);
    }
}

 

이부분은 지난시간에 한 같은 그림인지 체크해주는 함수인데요~

여기에서 모든 이미지 짝을 찾으면 "1단계 성공!" 메세지를 띄웠었습니다.

 

이제 이 메세지 대신에 팝업창을 띄워주면 됩니다.

 

if(!bNotFindAllPair)
{
    ShowPopupNextStage(); // 다음단계 설정 팝업창 띄우기
    bGameStart =false;
}

 

위와같이  메세지 대신에 ShowPopupNextStage()란 함수를 호출하였습니다.

 

// 다음단계 설정 팝업창 띄우는 함수.
private void ShowPopupNextStage()
{
    Intent intent = new Intent(getApplicationContext(), PopupNextStage.class);
    mStartForResult.launch(intent);
}

ActivityResultLauncher<Intent> mStartForResult = registerForActivityResult(new ActivityResultContracts.StartActivityForResult(),
        result -> {
            if (result.getResultCode() == RESULT_OK) {
                Intent intent = result.getData();
                int nResult = intent.getIntExtra("popup_result", 0);

                // 팝업화면의 결과 상태에 따른 처리
            }
        }
);

 

ShowPopupNextStage()함수에서는

intent를 이용해서 Popup화면을 띄워주고 팝업화면의 결과값을 받는 ActivityResultLauncher까지 작성하였습니다.

 

여기까지 잘 실행이 되는지 한번 보겠습니다.

 

네 1단계 4개 그림을 모두 맞추었을때 위와같이

반투명 팝업창이 잘 표시가 되네요..^^

 

 

네 이번시간은 여기까지만 하도록 하구요~

 

다음시간에는 저 팝업창에 1단계 성공 메세지도 띄워보고 

"닫기"버튼과 "다음단계" 버튼도 추가해보도록 하겠습니다.

 

그럼, 이만~

 

감사합니다. ^^