Android FrameLayout 예제 만들어보기

Android FrameLayout 예제

이번 글에서는 안드로이드 프레임 레이아웃을 활용해서 View를 전환하는 예제를 만들어보려고 하는데요. (초보가 취미로 안드로이드 공부하면서 노트 정리하듯이 작성하는 글이니 허접해도 이해 부탁드립니다.^^) 프레임 레이아웃은 가장 단순한 레이아웃으로.... 하나의 레이아웃에 하나의 View만을 보여주기 때문에 여러 개를 쌓아놓고 바꿔가면서 하나만 보이게 하면 화면을 전환하는 효과를 만들수 있습니다. 예를 들어 FrameLayout에 여러 개의 ImageView를 중첩해서 올려놓고 그중 하나씩만 보이게 할 수 있습니다.

 

이번에 만들어볼 예제에서는 FrameLayout에 각각 다른 그림을 넣은 ImageView 두 개를 올리고 버튼을 하나 배치한 후 클릭할 때마다 그림이 바뀌면서 보이도록 하는 코딩을 해볼 겁니다. 여기서는 두 개의 이미지만 사용했지만 여러 개를 사용할 때도 같은 방법으로 하면 됩니다.

 

 

먼저 Android Studio에서 프로젝트를 생성한 후 두 개의 이미지를 준비해서 drawable 폴더에 넣겠습니다.

 

 

▲ 프로젝트 이름은 MyFrameLayout으로 했고요. 두 장의 사진 bit01.png와 bit02.png 파일을 drawable 폴더에 첨부했는데요. 왼쪽 drawable 폴더의 이미지들을 더블클릭해서 확인해보겠습니다.

 

 

▲ 위 사진이 bit01 이미지이고요.

 

 

▲ 이게 bit02 사진입니다. 이 둘을 ImageView에 담아서 FrameLayout에 올린 후 버튼을 클릭할 때마다 바뀌면서 보이도록 하는 소스 코드를 작성하겠습니다. 먼저 activity_main.xml 파일에서 레이아웃을 배치하겠습니다.

 

 

▲ 클릭하면 이미지를 바꿔줄 버튼을 하나 배치했고요. 그 아래쪽으로 FrameLayout을 배치했습니다. 다음으로 버튼의 이름을 바꾸고 FrameLayout에 두 개의 ImageView를 올리면서 앞에서 준비한 이미지들을 넣겠습니다.

 

 

▲ Palette의 Image에서 ImageView를 끌어다가 프레임 레이아웃에 올리면서 준비한 이미지들을 넣었습니다.

 

 

 

▲ 그리고 두 개의 ImageView 중 하나만 Visibility 속성값을 Visible로 해서 앱이 실행됐을 때 보일 이미지를 선택했습니다. 배치가 완료됐으니 일단 앱을 실행해서 이미지가 제대로 보이는지 확인해보고 전환하는 소스 코드를 작성하겠습니다.

 

 

▲ 이미지가 위치가 조금 애매하긴 한데..... 일단은 이대로 진행할게요. ㅎㅎ 이제 위쪽에 있는 버튼을 클릭할 때마다 때 두 개의 이미지가 서로 바뀌면서 보이도록 하는 소스 코드를 작성할 건데요. 배치한 ImageView 두 개를 각각의 변수에 넣은 후 setVisibility() 메서드를 이용해서 버튼을 클릭할 때마다 보이는 그림을 바뀌도록 하는 내용입니다.

 

먼저 버튼을 클릭했을 때 실행될 메소드 이름을 입력하겠습니다.

 

 

▲ 조금 엉성하긴 해도 버튼을 클릭했을 때 실행될 'onChangeButtonClicked'라는 이름의 메소드를 만들었습니다. 이제 java 파일에서 소스 코드를 작성하겠습니다.

 

 

▲ ImageView를 저장할 전역 변수 두 개를 선언하고요. findViewById를 이용해서 각각의 이미지 뷰를 찾은 다음 변수에 저장하고 있습니다.

 

 

 

▲ 그리고 버튼을 클릭할 때 실행될 메소드를 작성했는데요. 이 안에서 사용할 int형 변수 a도 전역변수로 선언을 했습니다. 이제 onChangeButtonClicked()의 내용을 정의합니다.

 

 

▲ 버튼을 클릭할 때마다 a 값을 1증가시키게 되는데요. 이 값이 2 이상이 됐을 때는 a의 값에 0을 대입합니다. 즉, 0과 1만 반복돼서 대입되겠죠? 그리고 setVisibility() 메서드를 이용해서 a의 값이 0일 때는 첫 번째 사진만 보이도록 하고 있으며 1일 때는 두 번째 사진만 보이도록 해서 화면을 전환하는 효과를 만들고 있습니다.

 

 

이렇게 해서 안드로이드 프레임 레이아웃을 활용하는 예제를 만들어봤는데요. 마치기 전에 대충 한 번 더 정리하자면 하나의 View만을 보여주는 FrameLayout에 여러 개의 ImageView를 올려놓고 setVisibility() 메소드를 사용해 그중 하나씩만 보이게 해서 화면을 전환하는 효과를 만들어봤습니다. 유용하게 사용될 녀석인 거 같으니 한두 번 더 연습해서 완전히 익히도록 해야겠습니다.^^ 수고하셨어요.