그림짝맞추기 앱만들기 21 - 게임 6단계 구현하기, "갤러리 사진 추가하기" Image 버튼 만들기, 갤러리 사진 열기 팝업창 띄우기

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

 

지난시간에는  Sound On/Off 기능, 앱종료 기능, Play 기능 구현하기까지 해보았는데요..

 

 

이번시간에는

그림짝맞추기 앱 6단계를 구현을 해보도록 하겠습니다.

---

▣  게임 6단계 구현하기

먼저, 

switch(nGameStage)
{
    case 1:
        nCurImageCount = 4; // 1단계 이미지 개수 4개
        break;
    case 2:
        nCurImageCount = 6; // 2단계 이미지 개수 6개
        break;
    case 3:
        nCurImageCount = 8; // 3단계 이미지 개수 8개
        break;
    case 4:
        nCurImageCount = 12; // 4단계 이미지 개수 12개
        break;
    case 5:
        nCurImageCount = 16; // 5단계 이미지 개수 16개
        break;
    case 6:
        nCurImageCount = 20; // 6단계 이미지 개수 20개
        break;
}

 

6단계 일때의 이미지 개수를 20개로 설정하였습니다.

 

다음으로

switch(nGameStage)
{
    case 1:
        fImagePosX[0] = 0.1f; fImagePosY[0] = 0.3f;
        fImagePosX[1] = 0.9f; fImagePosY[1] = 0.3f;
        fImagePosX[2] = 0.1f; fImagePosY[2] = 0.67f;
        fImagePosX[3] = 0.9f; fImagePosY[3] = 0.67f;
        break;
    case 2:
        fImagePosX[0] = 0.1f; fImagePosY[0] = 0.2f;
        fImagePosX[1] = 0.9f; fImagePosY[1] = 0.2f;
        fImagePosX[2] = 0.1f; fImagePosY[2] = 0.5f;
        fImagePosX[3] = 0.9f; fImagePosY[3] = 0.5f;
        fImagePosX[4] = 0.1f; fImagePosY[4] = 0.8f;
        fImagePosX[5] = 0.9f; fImagePosY[5] = 0.8f;
        break;

    case 3:
        fImagePosX[0] = 0.2f; fImagePosY[0] = 0.2f;
        fImagePosX[1] = 0.8f; fImagePosY[1] = 0.2f;
        fImagePosX[2] = 0.2f; fImagePosY[2] = 0.44f;
        fImagePosX[3] = 0.8f; fImagePosY[3] = 0.44f;
        fImagePosX[4] = 0.2f; fImagePosY[4] = 0.68f;
        fImagePosX[5] = 0.8f; fImagePosY[5] = 0.68f;
        fImagePosX[6] = 0.2f; fImagePosY[6] = 0.92f;
        fImagePosX[7] = 0.8f; fImagePosY[7] = 0.92f;
        break;

    case 4:
        fImagePosX[0] = 0.1f; fImagePosY[0] = 0.2f;
        fImagePosX[1] = 0.5f; fImagePosY[1] = 0.2f;
        fImagePosX[2] = 0.9f; fImagePosY[2] = 0.2f;

        fImagePosX[3] = 0.1f; fImagePosY[3] = 0.39f;
        fImagePosX[4] = 0.5f; fImagePosY[4] = 0.39f;
        fImagePosX[5] = 0.9f; fImagePosY[5] = 0.39f;

        fImagePosX[6] = 0.1f; fImagePosY[6] = 0.58f;
        fImagePosX[7] = 0.5f; fImagePosY[7] = 0.58f;
        fImagePosX[8] = 0.9f; fImagePosY[8] = 0.58f;

        fImagePosX[9] = 0.1f; fImagePosY[9] = 0.77f;
        fImagePosX[10] = 0.5f; fImagePosY[10] = 0.77f;
        fImagePosX[11] = 0.9f; fImagePosY[11] = 0.77f;
        break;

    case 5:
        fImagePosX[0] = 0.1f; fImagePosY[0] = 0.2f;
        fImagePosX[1] = 0.37f; fImagePosY[1] = 0.2f;
        fImagePosX[2] = 0.64f; fImagePosY[2] = 0.2f;
        fImagePosX[3] = 0.91f; fImagePosY[3] = 0.2f;

        fImagePosX[4] = 0.1f; fImagePosY[4] = 0.39f;
        fImagePosX[5] = 0.37f; fImagePosY[5] = 0.39f;
        fImagePosX[6] = 0.64f; fImagePosY[6] = 0.39f;
        fImagePosX[7] = 0.91f; fImagePosY[7] = 0.39f;

        fImagePosX[8] = 0.1f; fImagePosY[8] = 0.58f;
        fImagePosX[9] = 0.37f; fImagePosY[9] = 0.58f;
        fImagePosX[10] = 0.64f; fImagePosY[10] = 0.58f;
        fImagePosX[11] = 0.91f; fImagePosY[11] = 0.58f;

        fImagePosX[12] = 0.1f; fImagePosY[12] = 0.77f;
        fImagePosX[13] = 0.37f; fImagePosY[13] = 0.77f;
        fImagePosX[14] = 0.64f; fImagePosY[14] = 0.77f;
        fImagePosX[15] = 0.91f; fImagePosY[15] = 0.77f;
        break;

    case 6:
        fImagePosX[0] = 0.1f; fImagePosY[0] = 0.2f;
        fImagePosX[1] = 0.37f; fImagePosY[1] = 0.2f;
        fImagePosX[2] = 0.64f; fImagePosY[2] = 0.2f;
        fImagePosX[3] = 0.91f; fImagePosY[3] = 0.2f;

        fImagePosX[4] = 0.1f; fImagePosY[4] = 0.35f;
        fImagePosX[5] = 0.37f; fImagePosY[5] = 0.35f;
        fImagePosX[6] = 0.64f; fImagePosY[6] = 0.35f;
        fImagePosX[7] = 0.91f; fImagePosY[7] = 0.35f;

        fImagePosX[8] = 0.1f; fImagePosY[8] = 0.5f;
        fImagePosX[9] = 0.37f; fImagePosY[9] = 0.5f;
        fImagePosX[10] = 0.64f; fImagePosY[10] = 0.5f;
        fImagePosX[11] = 0.91f; fImagePosY[11] = 0.5f;

        fImagePosX[12] = 0.1f; fImagePosY[12] = 0.65f;
        fImagePosX[13] = 0.37f; fImagePosY[13] = 0.65f;
        fImagePosX[14] = 0.64f; fImagePosY[14] = 0.65f;
        fImagePosX[15] = 0.91f; fImagePosY[15] = 0.65f;

        fImagePosX[16] = 0.1f; fImagePosY[16] = 0.8f;
        fImagePosX[17] = 0.37f; fImagePosY[17] = 0.8f;
        fImagePosX[18] = 0.64f; fImagePosY[18] = 0.8f;
        fImagePosX[19] = 0.91f; fImagePosY[19] = 0.8f;
        break;
}

 

20개의 이미지의 위치를 지정해주었습니다.

 

그리고, 

switch(nGameStage) {
    case 1:
        layoutParams.width = 415;
        layoutParams.height = 510;
        break;
    case 2:
        layoutParams.width = 415;
        layoutParams.height = 510;
        break;
    case 3:
        layoutParams.width = 345;
        layoutParams.height = 430;
        break;
    case 4:
        layoutParams.width = 282;
        layoutParams.height = 350;
        break;
    case 5:
        layoutParams.width = 220;
        layoutParams.height = 275;
        break;
    case 6:
        layoutParams.width = 220;
        layoutParams.height = 275;
        break;
}

 

6단계일때의 이미지 크기까지 지정해주었습니다.

 

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

 

네 6단계 20개 이미지가 잘 보이고 게임도 잘 실행이 되네요..^^

 

6단계도 30초안에 맞출수 있긴 하네요~ 

 

다음에 할 7단계는 24개 이미지로 하면 될듯합니다..

 

---

▣  "갤러리 사진 추가하기" Image 버튼 만들기

다음으로 사용자 그림 추가하는 기능을 추가해보겠습니다.

 

핸드폰에 있는 사진을 불러서 그림짝맞추기 게임에 적용해보면 조금 더 재미있을것 같은데요..

 

먼저, 사진추가 이미지 버튼을 하나 만들어보겠습니다.

 

 

 

위와같은 이미지로 디자인해봤습니다. ^^

 

 

gallery_image.png로 저장을 한후에 프로젝트 리소스에 붙여넣기 하였습니다.

 

 

그리고, 지난시간에 만든 설정팝업창에 ImageView를 하나 추가하여서 금방만든 "갤러리 사진 추가" 이미지를 설정하였습니다.

 

<ImageView
    android:id="@+id/imgvGalleryImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/gallery_image"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.65"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.1" />

 

XML에서 ID는 imgvGalleryImage라고 하였습니다.

 

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

 

 

 

네 앱시작시 팝업창이 뜨고 팝업창에 금방 추가한 "갤러리 사진추가" 이미지 버튼이 잘보이네요..^^

 

---

▣  갤러리 사진 열기 팝업창 띄우기

마지막으로 "갤러리 사진추가" 이미지 버튼을 누르면 갤러리 사진을 선택할수 있는 팝업창이 뜨는것 까지 한번 해보겠습니다.

 

 

PopupSetting.java에서

ImageView imgv_GalleryImage;

imgv_GalleryImage = findViewById(R.id.imgvGalleryImage);
imgv_GalleryImage.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        switch(motionEvent.getAction())
        {
            case MotionEvent.ACTION_DOWN:   
                break;
            case MotionEvent.ACTION_UP:                        
                break;
            case MotionEvent.ACTION_MOVE:
                break;
        }
        return true;
    }
});

 

imgv_GalleryImage 객체를 생성하고 터치이벤트까지 작성하였습니다.

 

여기에서 터치를 누르면 갤러리 사진을 선택할수 있는 팝업창을 띄워보도록 하겠습니다.

 

갤러리 사진을 선택할수 있는 팝업창을 띄우는 방법은 Intent를 이용하면 간단히 띄울수 있습니다.

// 갤러리 사진 열기
private void OpenGallery()
{
    Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
    arlauncherGalleryOpen.launch(intent);
}
ActivityResultLauncher<Intent> arlauncherGalleryOpen = registerForActivityResult(new ActivityResultContracts.StartActivityForResult(),
        result->{
            if(result.getResultCode() == RESULT_OK && result.getData() !=null)
            {
                // 갤러리 사진 연후에 할일..
            }
        }
);

 

네 위와같이 OpenGallery()라는 함수를 만들고

그안에서 Intent를 이용해서 

Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

 

이렇게 해주면 갤러리 사진 선택창을 띄울수 있습니다.

intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);

intent.putExtra()로 복수의 사진을 선택할수 있게 해주구요~

 

사진 선택한 결과는 arlauncherGalleryOpen에서  받을수 있습니다.

 

 

자, 이제 "갤러리 사진 추가" 이미지 버튼을 터치할때 위 OpenGallery()함수만 호출해주면 됩니다.

 

imgv_GalleryImage = findViewById(R.id.imgvGalleryImage);
imgv_GalleryImage.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        switch(motionEvent.getAction())
        {
            case MotionEvent.ACTION_DOWN:
                OpenGallery(); // 갤러리 사진 선택창 열기
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                break;
        }
        return true;
    }
});

 

위와같이 ACTION_DOWN이벤트에서 OpenGallery()함수를 호출해주었습니다.

 

자 잘 되는지 한번 실행해보겠습니다.

 

https://youtube.com/shorts/D8296VIspkk?si=2PwidjkquUUXRBo_

 

 

 

 

네  "갤러리 사진 추가" 이미지 버튼을 누르면 갤러리 사진을 추가할수 있는 창이 잘 뜨고 6단계도

잘 실행이 되네요.^^

 

 

 

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

 

다음시간에는 실제 갤러리에서 추가한 사진을 그림 짝맞추기 게임에 실제 적용해보도록 하겠습니다.

 

그럼, 이만~

 

감사합니다. ^^