본문 바로가기

Wanna be a Programmer/Android

Android - 탭(TAB)을 이용한 화면 작성


layout.xml

  - Root 태그 : <TabHost> - id - android:id:id/tabhost

  - <TabHost>의 subtag : <LinearLayout>

  - <LinearLayout>의 subtab

* <TabWidget> - id - android:id/tabs(Tab Indicator들이 들어갈 곳)

* <FrameLayout> - id - android:id/tabcontent(Tab내용들이 들어갈 곳)

- 탭을 선택했을 때 나올 화면(tab content들)을 FrameLayout 내에 작성

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical">

        <!-- TabWidget - id : android:id/tabs -->

        <TabWidget 

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

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

        

        <!-- Tab 내용(Content)들이 들어갈 위치 지정 - FrameLayout

        id- android:id/tabcontent

        내부에 탭의 content를 담당할 화면을 구성한다 -->

        <FrameLayout 

            android:layout_width="match_parent"

            android:layout_height="match_parent"

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

        <LinearLayout 

           android:layout_width="match_parent"

           android:layout_height="match_parent"

           android:id="@+id/tab1">

           <TextView 

               android:layout_width="match_parent"

               android:layout_height="wrap_content"

               android:text="탭 A입니다."/>

        </LinearLayout>

        <LinearLayout 

           android:layout_width="match_parent"

           android:layout_height="match_parent"

           android:id="@+id/tab2">

           <TextView 

               android:layout_width="match_parent"

               android:layout_height="wrap_content"

               android:text="탭 B입니다."/>

        </LinearLayout>   

        <RelativeLayout 

           android:layout_width="match_parent"

           android:layout_height="match_parent"

           android:id="@+id/tab3">

           <TextView 

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_centerInParent="true"

               android:text="탭 C입니다."

               android:background="#3333FF"/>

        </RelativeLayout>    

        </FrameLayout>

    </LinearLayout>

</TabHost>


Activity 작성

  - TabActivity를 상속

  - getTabHost() : TabHost객체를 return

  - TabHost객체,newTabSpec() : TabSpec객체 return


MainActivity.java

package org.kosta.tab.test;

import android.app.TabActivity;

import android.os.Bundle;

import android.view.Menu;

import android.widget.TabHost;

import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        //TabHost 객체 조회

        TabHost th = getTabHost();

        //TabSpec 생성

        // 생성 : TabHost객체.newTabSpec()

        // TabSpect 구현

        // - tab Indicator(탭)

        // - tab content(내용)

        TabSpec tab1 = th.newTabSpec("f-1");

        tab1.setIndicator("1번탭");

        tab1.setContent(R.id.tab1);

        TabSpec tab2 = th.newTabSpec("f-2").setIndicator("2번탭").setContent(R.id.tab2);

        TabSpec tab3 = th.newTabSpec("f-3").setIndicator("3번탭").setContent(R.id.tab3);

        th.addTab(tab1);

        th.addTab(tab2);

        th.addTab(tab3);

    }


    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.activity_main, menu);

        return true;

    }

}



'Wanna be a Programmer > Android' 카테고리의 다른 글

Android -  (0) 2012.07.31
안드로이드 - LinearLayout을 이용한 어플리케이션  (0) 2012.07.16
안드로이드의 개요  (0) 2012.07.12
Android 초기 설정(path, 언어변경)  (0) 2012.07.12