반응형
SMALL
안녕하세요~ 두결입니다.
지난시간에는 2단계 6개 이미지를 표시하는 부분까지 해보았는데요..
이번시간에는
그림짝맞추기 2단계를 완료하고 3단계 이미지 표시하는 부분까지 해보겠습니다.
▣ 2단계 완료하기
먼저, 2단계 완료가 잘되는지 확인해보겠습니다.
실행을 해보면
네 2단계 6개도 다 맞추면 "2단계 성공!"이란 메세지가 잘 보이네요..^^
소스 더 수정할게 있나 싶었는데..
1단계 로직그대로써도 2단계도 잘 되는군요..
▣ 3단계 이미지 8개 표시하기
그럼, 바로 3단계로 넘어가보겠습니다.
2단계에서 "다음 단계" 버튼 클릭시 3단계 8개 이미지를 표시해보겠습니다.
// 새게임 시작
private void NewGame()
{
InitImageArray(); // 초기화
CreateImageView(); // 동적 ImageView 생성
StartCountDownTimer(); // 5초 카운트다운 타이머 생성
}
NewGame()할때 위와같이 3개의 함수를 호출하는데요
하나씩 살펴보겠습니다.
// 리소스의 이미지ID를 배열에 초기화 해주는 함수
private void InitImageArray()
{
nArrImageID = new int[MAX_IMAGECOUNT];
nArrImageID[0] = R.drawable.imagepair_01; nArrImageID[1] = R.drawable.imagepair_02;
nArrImageID[2] = R.drawable.imagepair_03; nArrImageID[3] = R.drawable.imagepair_04;
nArrImageID[4] = R.drawable.imagepair_05; nArrImageID[5] = R.drawable.imagepair_06;
nArrImageID[6] = R.drawable.imagepair_07; nArrImageID[7] = R.drawable.imagepair_08;
nArrImageID[8] = R.drawable.imagepair_09; nArrImageID[9] = R.drawable.imagepair_10;
switch(nGameStage)
{
case 1:
nCurImageCount = 4; // 1단계 이미지 개수 4개
break;
case 2:
nCurImageCount = 6; // 2단계 이미지 개수 6개
break;
case 3:
nCurImageCount = 8; // 3단계 이미지 개수 8개
break;
}
InitImageArray()함수에서 3단계일때 이미지개수를 8개 설정하였습니다.
// 동적으로 ImageView 생성해주는 함수
@SuppressLint("ClickableViewAccessibility")
private void CreateImageView()
{
// ArrayList 초기화
if(!arrayListImage.isEmpty())
{
for(int i=0;i<arrayListImage.size();i++ )
{
ImageView imgvCur = arrayListImage.get(i);
if(imgvCur !=null)
{
constraintLayout.removeView(imgvCur);
}
}
arrayListImage.clear();
}
// ArrayList에 새로운 값 추가
for(int i=0; i<nCurImageCount; i++)
{
ImageView imgvDynamic = new ImageView(getApplicationContext());
arrayListImage.add(imgvDynamic);
}
fImagePosX = new float[nCurImageCount];
fImagePosY = new float[nCurImageCount];
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.1f; fImagePosY[0] = 0.2f;
fImagePosX[1] = 0.9f; fImagePosY[1] = 0.2f;
fImagePosX[2] = 0.1f; fImagePosY[2] = 0.4f;
fImagePosX[3] = 0.9f; fImagePosY[3] = 0.4f;
fImagePosX[4] = 0.1f; fImagePosY[4] = 0.6f;
fImagePosX[5] = 0.9f; fImagePosY[5] = 0.6f;
fImagePosX[6] = 0.1f; fImagePosY[6] = 0.8f;
fImagePosX[7] = 0.9f; fImagePosY[7] = 0.8f;
break;
}
다음으로 CreateImageView() 함수에서
3단계일때 8개의 이미지의 위치를 설정해주었습니다.
이정도만 하면 될것 같은데
한번 실행해보겠습니다.
2단계 클리어시 3단계 8개 이미지가 잘 보이긴 하는데
좀 겹치네요.. 이부분 수정해보겠습니다.
▣ 3단계 이미지 8개 크기 수정하기
3단계 일때는 이미지 8개의 크기를 수정해보겠습니다.
for(int i=0;i<nCurImageCount;i++)
{
ImageView imgvCur = arrayListImage.get(i);
imgvCur.setImageResource(nArrSelectImageID[nArrImagePos[i]]);
imgvCur.setId(View.generateViewId());
imgvCur.setBackgroundResource(R.drawable.round_border_style);
imgvCur.setPadding(7,7,7,7);
constraintLayout.addView(imgvCur);
// ImageView의 가로, 세로 크기 설정
layoutParams = imgvCur.getLayoutParams();
layoutParams.width = 415;
layoutParams.height = 510;
imgvCur.setLayoutParams(layoutParams);
CreateImageView()함수에서 동적 ImageView를 생성하는 부분인데요..
여기에서 width와 height가 415와 510으로 설정되어있습니다
이부분을 단계에 따라 바꾸어주면 될것 같네요..
for(int i=0;i<nCurImageCount;i++)
{
ImageView imgvCur = arrayListImage.get(i);
imgvCur.setImageResource(nArrSelectImageID[nArrImagePos[i]]);
imgvCur.setId(View.generateViewId());
imgvCur.setBackgroundResource(R.drawable.round_border_style);
imgvCur.setPadding(7,7,7,7);
constraintLayout.addView(imgvCur);
// ImageView의 가로, 세로 크기 설정
layoutParams = imgvCur.getLayoutParams();
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;
}
imgvCur.setLayoutParams(layoutParams);
네 위와같이 게임단계에 따라서 이미지의 크기도 바꾸어주었습니다.
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;
}
그리고, 이미지 크기가 바뀜에 따라서 이미지의 위치도 조정해주었습니다.
자, 한번 실행해볼까요?
네 3단계 8개 이미지도 잘 표시가 되네요.. ^^
그런데, 여기에서 카운트다운 하는 숫자가 이미지에 걸쳐서 조금 보기가 그렇네요..
다음시간에는 4단계 가기전에 저 카운트다운하는 부분을 아예 팝업창으로 띄워서 화면가운데에 나오도록 수정해보도록 하겠습니다.
그럼, 이만~
감사합니다. ^^
반응형
LIST