[Kotlin App] TabHost

탭호스트

여러 탭을 두고 각 탭을 클릭할 때마다 해당 화면이 나오도록 설정하는 뷰 컨테이너

 

 

 

 

탭스펙

• 탭을 구성하는 요소들의 집합
• 탭스펙을 준비하여 탭호스트에 붙여넣으면 탭이 됨

 

 

탭호스트를 사용할 때 주의사항

1. TabWidget의 id 속성값은 반드시 "@adroid:id/tabs"값을 지정해야 함.

탭호스트, 탭위젯, 프레임레이아웃은 id가 지정되어 있는데 이 지정된 id를
변경하지 않고 그대로 사용해야 안드로이드가 탭호스트의 구성을 인식함

 

2. 탭호스트의 형태는 리니어 레이아웃 > 탭 위젯 > 프레임 레이아웃이며, 프레임 레이아웃에 보여줄 내용을 포함시킴

 

 

 

탭호스트를 사용한 Kotlin코드

var tabHost = this.tabHost //탭호스트 변수 생성
//탭스펙 생성
var tabSpec1 = tabHost.newTabSpec("TAB1").setIndicator("탭에 출력될 글자")
tabSpec1.setContent(R.id.tab1)		//탭스펙을 탭과 연결
tabHost.addTab(tabSpec1)		//탭을 탭호스트에 부착

 

 

 

예제 실습

 

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@android:id/tabhost"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">

        </TabWidget>

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@android:id/tabcontent">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/tabSong"
                android:orientation="vertical" >
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:id="@+id/tabArtist">
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:id="@+id/tabAlbum">
            </LinearLayout>
            
        </FrameLayout>
    </LinearLayout>
</TabHost>

 

 

MainActivity.kt

@Suppress("deprecation")
class MainActivity2 : TabActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var tabHost = this.tabhost

        var tabSpecSong = tabHost.newTabSpec("SONG").setIndicator("음악별")
        tabSpecSong.setContent(R.id.tabSong)
        tabHost.addTab(tabSpecSong)

        var tabSpecArtist = tabHost.newTabSpec("ARTIST").setIndicator("가수별")
        tabSpecArtist.setContent(R.id.tabArtist)
        tabHost.addTab(tabSpecArtist)

        var tabSpecAlbum = tabHost.newTabSpec("ALBUM").setIndicator("앨범별")
        tabSpecAlbum.setContent(R.id.tabAlbum)
        tabHost.addTab(tabSpecAlbum)

        tabHost.currentTab = 0
    }
}