뷰 컨테이너(View Container)

이수민·2022년 10월 16일

안드로이드 스튜디오

목록 보기

12/18

🎨 뷰 컨테이너(View Container)

ViewGroup 클래스의 하위 위젯은 주로 다른 위젯을 담는 컨테이너 역할을 한다.

ViewGroup 클래스의 하위 위젯들중 레이아웃을 제외한 것들

🧵 스크롤뷰(ScrollView)

위젯이나 레이아웃이 화면에 넘칠 때 스크롤뷰에 넣으면, 위아래로 스크롤하는 효과를 낼 수 있다.
수직(위아래)으로 스크롤하는 기능
수평(좌우)으로 스크롤하는 수평스크롤뷰 (HorizontalScrollView)는 따로 있음

⚠️ 스크롤뷰에는 단 하나의 위젯만 넣을 수 있다.
따라서, 스크롤뷰 안에 리니어레이아웃을 1개 넣고, 리니어레이아웃 안에 필요한 위젯을 여러 개 넣는 방법을 사용한다.

1~18행: 전체 화면을 스크롤할 수 있도록 레이아웃 전체가 스크롤뷰에 쌓여있어 xmlns도 스크롤뷰에 정의된다.
6~16행: 스크롤뷰에는 1개의 위젯만 넣을 수 있으므로, 리니어레이아웃을 넣는 것이 가장 일반적이다. (다른 레이아웃도 가능함)
9행: 스크롤뷰는 수직으로 스크롤되므로, 레이아웃의 orientation은 vertical이어야 한다.
11~15행: 원하는 위젯을 넣는다.

🧵 슬라이딩 드로어(SlidingDrawer)

위젯들을 서랍처럼 열어서 보여주거나 닫아서 감춤

🖌️ 일반적인 형태

규칙

슬라이딩드로어의 handle 이름과 슬라이딩드로어의 손잡이 역할을 하는 버튼 id가 동일해야 함
슬라이딩드로어의 content 이름과 리니어레이아웃의 id가 동일해야 함

🧵 뷰플리퍼(ViewFlipper)

안에 여러 개의 위젯을 배치한 후, 필요에 따라서 화면을 왼쪽과 오른쪽으로 밀어서 하나의 위젯씩 화면에 보여주는 방식의 뷰 컨테이너

🖌️ 일반적인 형태

6행: 위젯변수를 선언할 때 final을 붙인 것은 14행의 내부 클래스 안에서 vFlipper에 접근하기 위한 약속된 문법이기 때문이다. (vFlipper 변수를 전역변수로 선언해도 된다.)
14행: showPrevious()로 인해 <이전화면>을 클릭하면 뷰플리퍼의 이전 화면이 나온다.

showPrevious(): 이전 화면으로 넘김

showNext() : 다음 화면으로 넘김

startFlipping() : 화면 넘김 시작

stopFlipping() : 화면 넘김 정지

setFlipInterval(밀리초) : 화면 넘김 간격 설정

🧵 탭호스트(TabHost)

여러 탭을 두고 각 탭을 클릭할 때마다 해당 화면이 나오도록 설정하는 뷰 컨테이너
예: 인터넷 익스플로러의 상단 탭
실제 동작하는 부분은 Java로 코딩

🖌️ 일반적인 형태

⚠️ 탭호스트, 탭위젯, 프레임레이아웃은 지정된 id를 변경하지 않아야 안드로이드가 탭호스트의 구성임을 인식할 수 있다.

탭호스트의 구성방식

⭐ 탭 생성 & 탭 화면 연결을 위한 java 코드 형식

실제로 Java 코드에서 중요하게 할 작업
- 탭위젯 안에 들어가는 3개의 탭을 생성하는 것
- 각 탭과 대응되는 탭 화면(레이아웃)을 연결하는 것
탭스펙(TabSpec) : 탭을 구성하는 요소들의 집합
탭 : 탭스펙을 준비하여 탭호스트에 붙여넣은 것

전체 XML을 탭호스트로 감싸고, 그 내부에 리니어 레이아웃을 배치한다.
2행: 탭호스트의 아이디는 @android:id/tabhost로 해야한다.
4~6행: 상단에 탭위젯을 배치한다.
탭위젯의 아이디는 @android:id/tabs로 해야한다.
7~21행: 하단에 프레임레이아웃을 배치한다.
프레임레이아웃의 아이디는 @android:id/tabcontent로 해야한다.

3행: 상속받는 클래스는 Activity가 아닌 TabActivity여야 한다.
10행: 탭호스트 변수에 XML에서 생성한 탭호스트를 가져온다.
12~13행: 탭1에 쓰일 글자를 '음악별'로 지정하면서
새로운 탭스펙(구성요소)을 생성한 후 .setContext()를 사용해 탭화면1(레이아웃, R.id.tabSong)과 연결한다.
14행: 탭호스트에 텝스펙을 추가하면 탭1이 생성된다.

🧵 액션바(Action Bar)

위의 사진에선, starbucks라고 적힌 초록색 띠가 액션바다.
주로 액션바에 뒤로가기 버튼, 홈 버튼 등을 넣는다.
액션바(Action Bar)는 허니콤(Android 3.0, API 11)에서 태블릿과 같은 대형 화면에서 여러 화면을 사용하기 위해서 고안됨
태블릿, 스마트폰 등 다양한 크기의 화면을 디자인하는 데 활용
액션바를 사용할 때는 프래그먼트를 사용하는 것이 좋다.

🧵 프래그먼트(Fragment)

액티비티보다 작은 단위의 화면
대형 화면에서 액티비티 화면을 분할해서 표현 가능
허니콤에서 소개된 기능
스마트폰과 같은 소형 화면에서는 ~~화면의 분할보다는~~ 실행 중에 화면을 동적으로 추가/제거하는 데 더 많이 활용됨

✍🏻 액션바와 프래그먼트를 활용한 화면 구현

액션바를 생성한 후, 탭(Tab) 위젯을 액션바에 등록
- MainActivity에 TabListener 인터페이스를 구현해야한다.
XML 사용하지 않고 모두 Java로 구현

🖌️ 액션바에 탭을 추가하는 Java 코드 형식

2행: TabListener 인터페이스를 구현
16~21행에서 3개의 메서드를 임플리먼트❓해야 한다.
3행: Tab 변수 3개를 준비한다.
7~8행: 액션바를 준비하고, 액션바의 모드를 탭호스트 모양인 NAVIGATION_MODE_TABS로 설정한다.
10~13행: 첫번째 탭인 [음악별]을 생성하고 액션바에 추가한다.
14행: tabArtist와 tabAlbum을 추가한다.
16~17행: 탭을 선택하면 작동하는 메서드 (미완성, 뒤에서 완성할 예정)

탭을 클릭하면 아래쪽에 해당 프래그먼트가 나오도록 해보자.

우선 Fragment를 상속받는 MyTabFragment 클래스를 내부 클래스로 생성한다.

1행: Fragment 클래스를 상속받은 MyTabFragment 클래스를 생성한다.
2,5,6행: 3개의 탭을 클릭할 때마다 다른 프래그먼트(화면)가 나오도록, 탭을 클릭할 때 지정한 데이터로 각 프래그먼트를 지정한다. 여기서는 탭의 텍스트인 '음악별, 가수별, 앨범별'로 지정한다.
8~21행: 프래그먼트에 나타날 화면을 구성한다. 최종적으로 구성한 화면(View)을 반환한다.
9~14행: 빈 리니어레이아웃을 Java 코드로 생성한다.
16~18행: 탭별로 배경색을 다르게 지정한다.
20행: 구성한 레이아웃을 반환한다. 결국 이 레이아웃이 액션바의 아래쪽에 나타난다.

멤버변수로 프래그먼트 배열 변수를 추가, onTabSelected( ) 메소드 코딩

1행: MyTabFragment 배열을 선언한다.
이 배열에는 3개의 프래그먼트(화면)가 저장된다.
(음악별, 가수별, 앨범별) [예제6-19]의 4행에 코딩한다.
3~17행: 탭을 선택하면 동작하는 코드를 완성한다.
4행: 현재 선택한 프래그먼트(화면)로 사용할 변수이다.
6~12행: 선택한 탭이 기존에 한 번도 선택된 적이 없는 탭이라면 프래그먼트(화면)를 생성하여 1행에서 선언한 배열(myFrags[])의 해당 위치에 넣는다.
7행: 새로운 프래그먼트를 생성한다.
8~10행: 현재 프래그먼트의 값을 지정하는데, 선택한 탭의 텍스트를 tabName 변수에 저장한다. 저장된 값은 [예제6-20]의 5행과 6행에서 사용된다.
11행: 생성한 프래그먼트 배열의 해당 위치[tab.getPosition()]에 저장한다.
14행: 기존에 해당 탭을 선택한 적이 있다면 프래그먼트 배열에 이미 해당 프래그먼트가 생성되어 있으므로 재사용한다.
16행: 새로 생성한 or 기존의 프래그먼트를 액션바 아래쪽에 출력한다.