그림짝맞추기 앱개발

그림짝맞추기 앱만들기 02 - 프로젝트 생성 및 전체화면으로 띄우기, 배경이미지 디자인 및 앱에 배경이미지 표시하기, 동적 ImageView생성하여 2개의 이미지를 4개의 그림카드에 표시하기

두결앱개발 2025. 12. 12. 08:58
반응형
SMALL

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

 

지난시간에 그림짝맞추기 앱화면 설계하고 주요기능들에 대해서 알아보았는데요

 

이번시간부터 본격적으로 앱만들기를 해보겠습니다.

▣  프로젝트 생성 및 전체화면으로 띄우기

먼저, 프로젝트를 만들어보겠습니다.

 

Empty Views Activity를 선택하고 Next!

 

 

프로젝트 명은 DK_ImagePair라고 하였습니다. Finish!!

 

이제, 전체화면으로 띄우는 것을 해보겠습니다.

 

전체화면으로 앱 실행하는 것은 전에 했던 강좌가 있으니 참고하시기 바랍니다.

 

 

// 전체 화면으로 만들기
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

// 시스템 바 안보이게 하기
WindowInsetsControllerCompat windowInsetsController =
        WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

위와같이 하면 전체화면으로 만들고 시스템바도 안보이게 할수 있습니다.

 

 

실행을 해보면.

 

 

전체화면으로 앱이 실행되었고 가운데에 Hello World가 보이네요..^^

 

 

▣  배경이미지 디자인  및 앱에 배경이미지 표시하기

다음으로 배경이미지를 디자인해서 앱에 배경으로 표시해보겠습니다.

 

배경이미지를 뭘로할까 고민하다가 위와같이 3개를 만들어봤는데요... 

배경은 최대한 심플한게 좋을 것 같은데..  어떤게 좋을까요?

 

일단은 고르기 어려우니 셋다 써보는걸로 하죠 ㅎㅎ

배경이미지 3개를 저장해놓고 랜덤으로 띄우는 것으로 해보겠습니다.

 

 

background01~03.png로 저장을 하였습니다.

 

 

app->res->drawable 폴더 밑에 배경이미지 3개가 잘 등록이 되었습니다.

 

// 배경이미지 설정함수
private void SetBackgroundImage()
{
    int[] nArrBackgroundImageID = new int[3];
    nArrBackgroundImageID[0] = R.drawable.background01;
    nArrBackgroundImageID[1] = R.drawable.background02;
    nArrBackgroundImageID[2] = R.drawable.background03;

    Random random = new Random();
    int nSelectBackID = random.nextInt(3);

    findViewById(R.id.main).setBackgroundResource(nArrBackgroundImageID[nSelectBackID]);
}

 

위와같이 배경이미지를 설정해주는 함수인 SetBackgroundImage()를 만들었습니다.

배경이미지가 3개니까 3개의 배경이미지 ID를 담을 변수를 만들구요

랜덤으로 0~2값이 나오게 한 뒤에

setBackgroundResource()로 배경이미지를 설정하였습니다.

 

 

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

    // 전체 화면으로 만들기
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

    // 시스템 바 안보이게 하기
    WindowInsetsControllerCompat windowInsetsController =
            WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
    windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

    // 배경 이미지 설정
    SetBackgroundImage();

    ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
        Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
        v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
        return insets;
    });
}

 

이렇게 만든 SetBackgroundImage()함수를 위와같이 호출만 해주면 됩니다.

 

 

 

실행을 해볼까요?

 

 

 

네 배경이미지가 잘 설정이 되었네요..^^

 

▣  동적 ImageView생성하여 2개의 이미지를 4개의 그림카드에 표시하기

다음으로 동적 ImageView를 생성해보도록 하겠습니다.

 

https://eun9073.tistory.com/36

 

모바일앱개발 강좌 #18 - 동적뷰란?, 버튼 클릭시 Spinner의 값 가져오기, 동적 ImageView객체 생성하

안녕하세요~ 두결입니다. 지난시간에는 이미지버튼을 만들고, 이미지 버튼 터치이벤트로 클릭효과를 내보았습니다.그리고, 현재 미디어볼륨 정보 가져와서 이미지버튼의 이미지로 설정하는 방

eun9073.tistory.com

동적 ImageView에 대한 내용은 이전 강좌내용 참고해주시기 바랍니다. 

 

먼저, 2개의 이미지를 준비해보겠습니다.

네 위와같이 2개의 이미지를 준비하였구요

imagepair_01.png, imagepair_02.png로 저장하였습니다.

이제 복사해서 프로젝트 리소스에 붙여넣기 하겠습니다.

 

 

네~ 이렇게 리소스에 잘 등록이 되었습니다.

 

int[] nArrImageID;
final int MAX_IMAGECOUNT = 4;

 

먼저, 이미지를 담을 배열을 선언하고

MAX_IMAGECOUNT는 4라고합니다. 이미지는 2개지만 2개씩 보여주니까 총 이미지 개수는 4개입니다.

 

// 리소스의 이미지ID를 배열에 초기화 해주는 함수
private void InitImageArray()
{
    nArrImageID = new int[MAX_IMAGECOUNT];
    nArrImageID[0] = R.drawable.imagepair_01;
    nArrImageID[1] = R.drawable.imagepair_01;
    nArrImageID[2] = R.drawable.imagepair_02;
    nArrImageID[3] = R.drawable.imagepair_02;
}

 

그리고, 금방 등록한 이미지 2개를 4개의 배열에 2개씩 넣어주는 함수인 InitImageArray()함수를 만들었습니다.

 

다음으로

// 동적으로 ImageView 생성해주는 함수
private void CreateImageView()
{
    
}

 

동적으로 ImageView를 생성해주는 함수인 CreateImageView()를 만들었습니다.

ViewGroup.LayoutParams layoutParams;
ArrayList<ImageView> arrayListImage;
ConstraintLayout constraintLayout;
float[] fImagePosX;
float[] fImagePosY;
constraintLayout = findViewById(R.id.main);
arrayListImage = new ArrayList<>();

// 동적 ImageView 생성
CreateImageView();
// 동적으로 ImageView 생성해주는 함수
private void CreateImageView()
{
    // ArrayList에 새로운 값 추가
    for(int i=0; i<MAX_IMAGECOUNT; i++)
    {
        ImageView imgvDynamic = new ImageView(getApplicationContext());
        arrayListImage.add(imgvDynamic);
    }

    fImagePosX = new float[MAX_IMAGECOUNT];
    fImagePosY = new float[MAX_IMAGECOUNT];

    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;


    for(int i=0;i<MAX_IMAGECOUNT;i++)
    {
        ImageView imgvCur = arrayListImage.get(i);
        imgvCur.setImageResource(nArrImageID[i]);
        imgvCur.setId(View.generateViewId());

        constraintLayout.addView(imgvCur);

        // ImageView의 가로, 세로 크기 설정
        layoutParams = imgvCur.getLayoutParams();
        layoutParams.width = 440;
        layoutParams.height = 650;
        imgvCur.setLayoutParams(layoutParams);

        // ImageView의 위치 설정
        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(constraintLayout);
        constraintSet.connect(imgvCur.getId(), ConstraintSet.TOP, constraintLayout.getId(), ConstraintSet.TOP, 0);
        constraintSet.connect(imgvCur.getId(), ConstraintSet.LEFT, constraintLayout.getId(), ConstraintSet.LEFT, 0);
        constraintSet.connect(imgvCur.getId(), ConstraintSet.RIGHT, constraintLayout.getId(), ConstraintSet.RIGHT, 0);
        constraintSet.connect(imgvCur.getId(), ConstraintSet.BOTTOM, constraintLayout.getId(), ConstraintSet.BOTTOM, 0);
        constraintSet.setHorizontalBias(imgvCur.getId(), fImagePosX[i]);
        constraintSet.setVerticalBias(imgvCur.getId(), fImagePosY[i]);
        constraintSet.applyTo(constraintLayout);
    }
}

 

갑자기 코드가 많아졌네요 ^^

이부분 자세한 내용은 이전 강좌 (동적 View생성편)를 참고하시면 좋을것 같아요~

 

간단히 설명하면

ImageView를 이미지개수만큼 for문을 돌려서 동적으로 생성하고 ArrayList에 넣어줍니다.

 

그리고, 4개의 ImageView의 위치를 담은 fImagePosX, fImagePosY값을 설정해줍니다.

 

그후에 for문을 돌려서

ArrayList에서 ImageView객체를 하나씩 꺼내서

setImageResource()로 이미지 ID를 설정하고 setId()로 ImageView의 ID를 설정해줍니다.

그리고, ConstraintLayout.addView()로 ImageView를 레이아웃에 추가해줍니다.

 

다음으로 LayoutParam을 이용해서 ImageView의 넓이, 높이를 설정해주고

ConstraintSet를 이용해서 ImageView의 위치를 설정해주면 됩니다.

 

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

 

 

 

네 총 4개의 이미지가 잘 보이네요..^^

 

 

전체 소스입니다. 참고하세요 ~

MainActivity.java

package com.example.dk_imagepair;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.core.view.WindowInsetsControllerCompat;

import java.util.ArrayList;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

    int[] nArrImageID;
    final int MAX_IMAGECOUNT = 4;
    ViewGroup.LayoutParams layoutParams;
    ArrayList<ImageView> arrayListImage;
    ConstraintLayout constraintLayout;
    float[] fImagePosX;
    float[] fImagePosY;

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

        // 전체 화면으로 만들기
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

        // 시스템 바 안보이게 하기
        WindowInsetsControllerCompat windowInsetsController =
                WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
        windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

        // 배경 이미지 설정
        SetBackgroundImage();

        // 리소스의 이미지ID를 배열에 설정
        InitImageArray();

        constraintLayout = findViewById(R.id.main);
        arrayListImage = new ArrayList<>();

        // 동적 ImageView 생성
        CreateImageView();

        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
    }

    // 배경이미지 설정함수
    private void SetBackgroundImage()
    {
        int[] nArrBackgroundImageID = new int[3];
        nArrBackgroundImageID[0] = R.drawable.background01;
        nArrBackgroundImageID[1] = R.drawable.background02;
        nArrBackgroundImageID[2] = R.drawable.background03;

        Random random = new Random();
        int nSelectBackID = random.nextInt(3);

        findViewById(R.id.main).setBackgroundResource(nArrBackgroundImageID[nSelectBackID]);
    }

    // 리소스의 이미지ID를 배열에 초기화 해주는 함수
    private void InitImageArray()
    {
        nArrImageID = new int[MAX_IMAGECOUNT];
        nArrImageID[0] = R.drawable.imagepair_01;
        nArrImageID[1] = R.drawable.imagepair_01;
        nArrImageID[2] = R.drawable.imagepair_02;
        nArrImageID[3] = R.drawable.imagepair_02;
    }

    // 동적으로 ImageView 생성해주는 함수
    private void CreateImageView()
    {
        // ArrayList에 새로운 값 추가
        for(int i=0; i<MAX_IMAGECOUNT; i++)
        {
            ImageView imgvDynamic = new ImageView(getApplicationContext());
            arrayListImage.add(imgvDynamic);
        }

        fImagePosX = new float[MAX_IMAGECOUNT];
        fImagePosY = new float[MAX_IMAGECOUNT];

        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;


        for(int i=0;i<MAX_IMAGECOUNT;i++)
        {
            ImageView imgvCur = arrayListImage.get(i);
            imgvCur.setImageResource(nArrImageID[i]);
            imgvCur.setId(View.generateViewId());

            constraintLayout.addView(imgvCur);

            // ImageView의 가로, 세로 크기 설정
            layoutParams = imgvCur.getLayoutParams();
            layoutParams.width = 440;
            layoutParams.height = 650;
            imgvCur.setLayoutParams(layoutParams);

            // ImageView의 위치 설정
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(constraintLayout);
            constraintSet.connect(imgvCur.getId(), ConstraintSet.TOP, constraintLayout.getId(), ConstraintSet.TOP, 0);
            constraintSet.connect(imgvCur.getId(), ConstraintSet.LEFT, constraintLayout.getId(), ConstraintSet.LEFT, 0);
            constraintSet.connect(imgvCur.getId(), ConstraintSet.RIGHT, constraintLayout.getId(), ConstraintSet.RIGHT, 0);
            constraintSet.connect(imgvCur.getId(), ConstraintSet.BOTTOM, constraintLayout.getId(), ConstraintSet.BOTTOM, 0);
            constraintSet.setHorizontalBias(imgvCur.getId(), fImagePosX[i]);
            constraintSet.setVerticalBias(imgvCur.getId(), fImagePosY[i]);
            constraintSet.applyTo(constraintLayout);
        }
    }
}

 

 

조금 길어졌으니까 이번시간은 여기까지만 하도록 하구요~

 

다음시간에는 

ImageView 배경 디자인을 좀 해보고, 이미지 위치를 랜덤으로 배치하는 부분 해보도록 하겠습니다.

 

그럼, 이만~

감사합니다. ^^

반응형
LIST

'그림짝맞추기 앱개발' 카테고리의 다른 글

그림짝맞추기 앱만들기 09 - 팝업창에 현재 게임단계 및 성공메세지 표시하기, 팝업화면 닫기 버튼 구현하기, 다음단계 이동버튼 눌러서 2단계 시작하기  (64) 2025.12.23
그림짝맞추기 앱만들기 08 - 다음단계 설정 팝업창 만들기 및 기본설정하기, 팝업창 반투명으로 설정하기, 1단계 성공 시, 다음단계 설정 팝업창 표시하기  (114) 2025.12.22
그림짝맞추기 앱만들기 07 - 이미 맞춘 그림은 터치가 안되도록 처리하기, 처음 시작시 5초간 카운트 다운할때는 모든 이미지 카드의 터치가 안되도록 하기, 모든 그림 다 맞추었는지 체크하기  (139) 2025.12.19
그림짝맞추기 앱만들기 03 - ImageView Style바꾸기, 4개의 이미지 랜덤으로 배치하기, 10개의 이미지에서 2개의 이미지만 랜덤으로 뽑아와서 배치하기  (81) 2025.12.15
그림짝맞추기 앱만들기 01 - 그림 짝맞추기 앱 화면 설계하기, 그림 짝맞추기 앱 주요 기능목록  (90) 2025.12.11

'그림짝맞추기 앱개발'의 다른글

  • 현재글그림짝맞추기 앱만들기 02 - 프로젝트 생성 및 전체화면으로 띄우기, 배경이미지 디자인 및 앱에 배경이미지 표시하기, 동적 ImageView생성하여 2개의 이미지를 4개의 그림카드에 표시하기

관련글

티스토리툴바