Cutom TabLayout - ToggleButton

TabLayout을 ToggleButton을 이용하여 구성하는 방법이다.

즉 토글버튼들을 위치시키고 토글버튼을 누르면 토글버튼의 상태를 일일이 다 바꾸고

화면에 보여지는 Fragment를 직접 이동시켜주는 방식이다.

 

결과이미지

 

---

토글버튼의 배경이미지

이전 샘플을 그대로 사용

res / drawable / tab_select.xml

res / drawable / tab_unselcted.xml

res / drawable / selector_tab.xml

셀렉터에서 토글버튼은 상태를 checked로 구분하기 때문에 state_checked로 변경하였다.

https://quantum-programmer.tistory.com/entry/Custom-TabLayout-Background-Indicator

Custom TabLayout - Background, Indicator

 

---

 

토글버튼의 포그라운드 이미지

토글버튼의 foreground에 설정을 하기 위해 selector를 만들었다.

셀럭터만으로는 이미지의 사이즈를 조절할 수 없기 때문에 inset을 이용하여

토글버튼 내에 들어가는 이미지의 사이즈를 조절하였다.

inset 0,1,2

selector_tab 이미지만 다르고 모두 동일하다.

 

res / drawable / inset_tab0.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/selector_tab0_icon"
    android:insetTop="30dp"
    android:insetBottom="30dp"
    android:insetLeft="30dp"
    android:insetRight="30dp"/>

 

res / drawable / selector_tab0_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/home"/>
    <item android:drawable="@drawable/home_gray"/>
</selector>

 

---

ActivityMain의 레이아웃

기존과 동일하나 하단의 TabLayout을 제거하고

ToggleButton들을 배치하였다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ActivityMain">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/clToggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/clToggle"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <ToggleButton
            android:id="@+id/toggleButton0"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="5dp"
            android:textOn=""
            android:textOff=""
            android:foreground="@drawable/inset_tab0"
            android:background="@drawable/selector_tab"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/toggleButton1"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ToggleButton
            android:id="@+id/toggleButton1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:textOn=""
            android:textOff=""
            android:foreground="@drawable/inset_tab1"
            android:background="@drawable/selector_tab"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/toggleButton2"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/toggleButton0"
            app:layout_constraintTop_toTopOf="parent" />

        <ToggleButton
            android:id="@+id/toggleButton2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:textOn=""
            android:textOff=""
            android:foreground="@drawable/inset_tab2"
            android:background="@drawable/selector_tab"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/toggleButton1"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

---

ActivityMain의 처리

토글버튼을 누르거나 viewPager에서 사용자가 스와이프로 이동시

페이지화면을 임의로 바꾸고 토글버튼의 상태도 임의로 바꿔주는 방법을 적용하였다.

class ActivityMain : AppCompatActivity() {

    val _binding by lazy { ActivityMainBinding.inflate(layoutInflater) }
    lateinit var _listFragments:List<FragmentBase>
    lateinit var _listToggleButtons:MutableList<ToggleButton>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(_binding.root)

        //.// 1. 페이지 데이터를 로드
        _listFragments = listOf(FragmentA("홈"), FragmentB("프로필"), FragmentC("설정") )

        //.// 2. 아답터 생성
        val pagerAdapter = AdapterTab(_listFragments, this)

        //.// 3. 아답터와 뷰페이저 연결
        _binding.viewPager.adapter = pagerAdapter
        //_binding.tabLayout.getTabAt(2)?.select()

        with(_binding){
            //.// 손으로 스와이프했을 때 토글버튼의 상태를 변경
            viewPager.registerOnPageChangeCallback(object: ViewPager2.OnPageChangeCallback(){
                override fun onPageSelected(position: Int) {
                    super.onPageSelected(position)
                    selectToggle(position)
                }
            })

            //.// 토글버튼의 이벤트를 처리
            _listToggleButtons = mutableListOf(toggleButton0, toggleButton1, toggleButton2)
            val onClickListener = object: View.OnClickListener{
                override fun onClick(view: View?) {
                    when(view){
                        toggleButton0 -> selectFragment(0)
                        toggleButton1 -> selectFragment(1)
                        toggleButton2 -> selectFragment(2)
                    }
                }
            }
            for( toggle in _listToggleButtons ) toggle.setOnClickListener(onClickListener)
        }
        selectFragment(0)
    }

    //.// 화면에 보여지는 Fragment 변경
    fun selectFragment(index:Int){
        with(_binding){
            viewPager.currentItem = index
            selectToggle(index)
        }
    }

    //.// 토글버튼의 상태 변경
    fun selectToggle(index:Int){
        with(_binding){
            for( toggle in _listToggleButtons ) toggle.isChecked = false
            _listToggleButtons.get(index).isChecked = true
        }
    }
}

 

---