[Kotlin App] Action Bar와 Flagment

액션바

태블릿과 같은 대형 화면에서 여러 화면을 사용하기 위해 고안됨

액션바를 구현할 때는 프래그먼트를 사용하는 것이 좋음

 

 

프래그먼트

액티비티보다 작은 단위의 화면

대형화면에서는 액티비티 화면을 분할하여 표현할 수 있음

소형화면에서는 화면의 분할보다는 실행중에 화면을 동적으로 추가하거나 제거하는데 더 많이 활용됨

 

 

---

 

연습문제 실습

탭별로 다른 화면을 출력한다. 탭은 액션바를, 화면은 프래그먼트를 사용한다.

 

 

 

1. 액션바를 이용해 탭을 붙여준다.

2. MyTabFragment 클래스를 만들어준다. (프래그먼트 객체 생성을 위함)

3. onTabSelected메소드를 구현한다. (여기서 프레그먼트 생성)

 

 

MainActivity

package com.cookandroid.kotlinapp0503

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.provider.MediaStore
import androidx.appcompat.app.ActionBar
import androidx.fragment.app.FragmentTransaction

@Suppress("deprecation")
class MainActivity3 : AppCompatActivity(),ActionBar.TabListener {

    lateinit var tabSong : ActionBar.Tab
    lateinit var tabArtist : ActionBar.Tab
    lateinit var tabAlbum : ActionBar.Tab
    var myFrags = arrayOfNulls<MyTabFragment>(3)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        var bar = this.supportActionBar
        bar!!.navigationMode = ActionBar.NAVIGATION_MODE_TABS

        tabSong = bar.newTab()
        tabSong.text = "음악별"
        tabSong.setTabListener(this)
        bar.addTab(tabSong)

        tabArtist = bar.newTab()
        tabArtist.text = "가수별"
        tabArtist.setTabListener(this)
        bar.addTab(tabArtist)

        tabAlbum = bar.newTab()
        tabAlbum.text = "앨범별"
        tabAlbum.setTabListener(this)
        bar.addTab(tabAlbum)
    }

    override fun onTabReselected(tab: ActionBar.Tab?, ft: FragmentTransaction?) {}

    override fun onTabUnselected(tab: ActionBar.Tab?, ft: FragmentTransaction?) {}

    override fun onTabSelected(tab: ActionBar.Tab?, ft: FragmentTransaction?) {
        var myTabFrag:MyTabFragment? = null     //tab!!.position : 몇 번째 탭이 선택되었는지 번호(0,1,2)를 알려줌
        if(myFrags[tab!!.position]==null){      //프래그먼트가 만들어져있지 않은 경우 새로 생성
            myTabFrag = MyTabFragment()
            val data = Bundle() //Bundle : 데이터를 묶어서 저장할 수 있는 자료 구조
            data.putString("tabName", tab.text.toString())
            myTabFrag.arguments = data
            myFrags[tab.position] = myTabFrag
        }
        else    //프래그먼트가 이미 만들어져있는 경우 -> 불러옴
            myTabFrag = myFrags[tab!!.position]

        ft?.replace(android.R.id.content, myTabFrag!!)
    }
}

 

 

 

MyTabFragment

package com.cookandroid.kotlinapp0503

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.LinearLayout

class MyTabFragment : androidx.fragment.app.Fragment() {
    var tabName:String? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //setContentView(R.layout.activity_my_tab_fragment)
        var data = arguments    //arguments : 프래그먼트가 디폴트로 가지고 있는 파라미터
        tabName = data!!.getString("tabName")
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        //코드로 레이아웃 만들기
        var params = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
        LinearLayout.LayoutParams.MATCH_PARENT)
        var baseLayout = LinearLayout(super.getActivity())
        baseLayout.orientation = LinearLayout.VERTICAL
        baseLayout.layoutParams = params

        if(tabName === "음악별") baseLayout.setBackgroundColor(Color.RED)
        if(tabName === "가수별") baseLayout.setBackgroundColor(Color.GREEN)
        if(tabName === "앨범별") baseLayout.setBackgroundColor(Color.BLUE)

        return baseLayout

        //return super.onCreateView(inflater, container, savedInstanceState)
    }
}