안드로이드 앱 프로그래밍 - 18(탭레이아웃 - 탭버튼 구성)

- 탭 레이아웃

탭 레이아웃은 탭으로 구분하는 화면에서 탭버튼을 배치하는 레이아웃입니다. 이러한 탭부분을 손쉽게 만들어주는 레이아웃이 바로 탭 레이아웃입니다. 탭 레이아웃은 동적으로 만들려면 kt 코드부분에서 tab을 추가하는 코드를 만들어야합니다. 하지만 정적으로 만들어도된다면 xml파일로 만들 수 도 있습니다.

 

- 메인 액티비티.xml 탭과 화면 구성

메인액티비티.xml과 화면은 간단하게 구성하였습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabs"/>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/tabContents"/>
</LinearLayout>

 

- 메인 액티비티.kt 구성

탭화면 전환은 프래그먼트를 사용사용하여 구성하였습니다. 이는 저번에 만들어둔 것을 사용한 것으로 궁금하시다면 프래그먼트 편을 참고부탁드립니다. 관련 내용은 주석으로 달아놨습니다.

package com.example.test

import android.os.Bundle
import android.text.method.ScrollingMovementMethod
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.app.AppCompatActivity
import com.example.test.databinding.ActivityMainBinding
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayout.Tab



class MainActivity : AppCompatActivity() {
    //토클객체 선언
    lateinit var toggle: ActionBarDrawerToggle
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater) //activity_main_xml 파일의 객체들을 가져옵니다.
        setContentView(binding.root) //activity_main_xml을 화면에 출력합니다.

        //탭버튼 정의
        val tab1: TabLayout.Tab = binding.tabs.newTab()
        tab1.text = "Tab1"
        binding.tabs.addTab(tab1)

        val tab2: TabLayout.Tab = binding.tabs.newTab()
        tab2.text = "Tab2"
        binding.tabs.addTab(tab2)

        val tab3: TabLayout.Tab = binding.tabs.newTab()
        tab3.text = "Tab3"
        binding.tabs.addTab(tab3)

        //탭 버튼 이벤트 처리
        binding.tabs.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{
            //탭버튼 선택할때 이벤트
            override fun onTabSelected(tab: Tab?) {
                val transaction = supportFragmentManager.beginTransaction()
                when (tab?.text) {
                    "Tab1" -> transaction.replace(R.id.tabContents, fragementOne())
                    "Tab2" -> transaction.replace(R.id.tabContents, fragementTwo())
                    "Tab3" -> transaction.replace(R.id.tabContents, fragementThree())
                }
                transaction.commit()
            }
            //다른탭을 눌러 선택된 탭 버튼이 해제될때 이벤트
            override fun onTabUnselected(tab: Tab?) {
                
            }
            //선택된 버튼을 다시 선택할때 이벤트
            override fun onTabReselected(tab: Tab?) {
                
                }
            
        })

    }
}

 

- 출력 화면