레이아웃을 활용한 다양한 뷰 배치 - FrameLayout

FrameLayout

FrameLayout은 레이아웃에 포함된 뷰들을 같은 영역에 배치할 때 사용. Tab 구조에서 특히 잘 사용된다.

Tab화면 구현(TapHost)

TabHost: 탭 전체 영역

TabWidget: 탭 버튼이 들어갈 영역

FrameLayout: 탭 버튼 클릭시 나올 화면 영역

.xml

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

// tabhost로 변경. TabHost는 tab화면을 위한 일종의 컨테이너이다.

// TabHost : Container for a tabbed window view. This object holds two children:

// a set of tab labels that the user clicks to select a specific tab,

// and a FrameLayout object that displays the contents of that page.

// The individual elements are typically controlled using this container object,

// rather than setting values on the child elements themselves.

xmlns:tools="http://schemas.android.com/tools" // 이거 뭔지 모르겠다. 추후 학습

android:id="@+id/host" // 여기서 새로운 지식을 습득했다.

//@ : id를 R.java에 정의하거나 참조한다는 약속의 기호

//@+id : 새로 추가하는 리소스 아이디

//@id : 이미 추가되어 있는 리소스 아이디를 가리킴

//@android:id : 안드로이드에 예약되어 있는 리소스 아이디

android:layout_width="match_parent"

android:layout_height="match_parent" >

<LinearLayout

// TabHost라는 전체 컨테이너에서 결국 필요한 것은 TabWidget과 FrameLayout이다.

// 이 두 가지를 정리하기 위해서 LinearLayout을 중첩시킨 것이고

// 일반적으로 탭과 탭 내용이 위-아래 혹은 아래-위로 되어 있기 때문에 orientation을

// vertical로 했다. 물론 탭이 왼쪽, 내용이 우측인 경우에는 orientation을 horizontal로 하면 된다

// 혹은 그냥 LinearLayout말고 다른 Layout을 사용해도 된다

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TabWidget

android:id="@android:id/tabs"

// TabWidget은 반드시 id 설정을 정해진 아이디인 "tabs" 로 해야하고 정해진 id 이므로

// @androdi:id 의 방식으로 설정해야 한다

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorPrimary"/>

// TabWidget이 끝난 것에 주목하자. LinearLayout의 두 구성요소인 TabWidget과 FrameLayout은

// 동등한 관계이므로 중첩을 시키지 않는다.

// 후에 .java에서 spec에 의해 TabWidget과 FrameLayout은 묶이게 된다.

<FrameLayout

android:id="@android:id/tabcontent"

// FrameLayout도 TabWidget과 마찬가지로 정해진 아이디인 "tabcontent" 로 설정해야하고

// 이를 위해서 아이디 설정 방식도 꼭 @android:id 로 설정해야 한다. (안그러면 에러)

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

// FrameLayout에 설정되는 것들은 탭의 내용이 될 것들이다.

// 여기서 id 설정을 해서 java에서 spec에 집어 넣게 된다.

// TabHost의 TabWidget과 FrameLayout은 findViewById()를 이용하지 않아도 된다.

// 이유는 .java에서 TabHost.setup()을 하는 과정에서 TabHost의 하위에 있는

// TabWidget과 FrameLayout을 획득하기 때문이다.

// 역으로 이런 이유에서 TabWidget과 FrameLayout의 id값은 꼭 android.R.java에

// 기 등록되어 있는 id 값인 tabs와 tabcontent를 사용해야 하는 것이다.

android:id="@+id/tab1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="first"

android:gravity="center"

/>

<TextView

android:id="@+id/tab2"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="second"

android:gravity="center"

/>

<TextView

android:id="@+id/tab3"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="third"

android:gravity="center"

/>

</FrameLayout>

</LinearLayout>

</TabHost>

.Java

package com.kimjungkwon.tabhosttestnew;

import android.support.v4.content.res.ResourcesCompat;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.TabHost;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

TabHost host = (TabHost) findViewById(R.id.host);

// .xml에서 전체 레이아웃으로 잡아둔 TabHost의 id 값을 잡아서 넣는 과정

host.setup(); // adding tabs 하기 전에 call setup하는 기능(일단 원래 해야하는 거라고 알자)

TabHost.TabSpec spec1 = host.newTabSpec("tab1").setIndicator("첫번째");

//TapSpec은 indicator, content, tag를 가진 Tab이다.

// 즉, TabWidget과 FrameLayout을 spec으로 묶어서 관리하는 것이 Tab방식의 핵심이다.

// spec은 라벨 혹은 컨테이너와 같은 역할이므로 계속 묶어서 연결시키지 않아도 되므로

// spec1 말고 그냥 spec으로 선언하고 계속 spec을 사용해도 무방하다.

// (코드는 위에서 아래로 순차진행이므로)

//newTabSpec의 tag 설명 : tag for the tab specification, must be non-null

// 즉, tag는 개발자를 위한 코드로서 인터페이스에 나타나진 않는다

// setIndicator에서는 인터페이스에 tab의 명칭으로 나오게 된다

spec1.setContent(R.id.tab1);

// spec1과 .xml의 리소스를 연결시키는 과정이다

host.addTab(spec1);

//TapSpec은 indicator, content, tag를 가진 Tab이다.

//newTabSpec의 tag 설명 : tag for the tab specification, must be non-null

TabHost.TabSpec spec2 = host.newTabSpec("tab2").setIndicator("두번째");

spec2.setContent(R.id.tab2);

host.addTab(spec2);

TabHost.TabSpec spec3 = host.newTabSpec("tab3").setIndicator("세번째");

spec3.setContent(R.id.tab3);

host.addTab(spec3);

}

}

+ a

특히 오늘 익힌 것 중 인상깊고 앞으로도 유념해야 할 것

@ : id를 R.java에 정의하거나 참조한다는 약속의 기호

@+id : 새로 추가하는 리소스 아이디(R.java 에 추가되게 된다)

@id : 이미 추가되어 있는 리소스 아이디를 가리킴

@android:id : 안드로이드에 예약되어 있는 리소스 아이디

(안드로이드 android.R.java파일에 이미 등록이 되어있는 id를 참조한다는 뜻)