[ Tab Layout에 아이콘 넣기 ]
Tab Layout 을 사용하다 보니 Tab Layout에 Icon을 넣는 방법이 필요해졌다.
가장 간결한 방법을 찾아보았다.
1. 우선 icon 들을 View Pager 의 position 에 따라서 넣어주기 위한 배열이 필요하다.
private val iconView = arrayOf(
R.drawable.ic_baseline_home_24,
R.drawable.ic_baseline_search_24,
R.drawable.ic_baseline_person_search_24,
R.drawable.ic_baseline_videocam_24,
R.drawable.ic_baseline_face_24,
)
iconView : Array<Int> 배열을 만들어 준다 .
해당 배열은 Tab Layout 의 postion에 따라 iconView[0]인 경우 home Drawable,
iconView[1]인 경우 search Drawable.... 등에 적용되도록 도와준다.
2. TabLayoutMediator 를 이용한다.
위에서 아이콘들의 배열을 만들어 주었으니 해당 배열을 적용하는데 도와줄 TabLayoutMediator 가 필요하다.
이는 Tab Layout과 View Pager의 연결을 도와주며, Icon 설정까지 도움을 준다.
TabLayoutMediator(tabUser,viewPager){ tab, position ->
tab.setIcon(iconView[position])
}.attach()
해당 탭의 포지션으로 각 아이콘을 연결해주며 최종적으로는 View에 attach 해준다.
자세한 내용은 공식 개발 홈페이지에 나와있다. TabLayoutMediator | Android Developers
TabLayoutMediator | Android Developers
Stay organized with collections Save and categorize content based on your preferences. public final class TabLayoutMediator extends Object java.lang.Object ↳ com.google.android.material.tabs.TabLayoutMediator A mediator to link a TabLayout with a V
developer.android.com
[ Tab Layout 선택 시 아이콘 색상 변경하기]
Tab Layout에 Icon을 넣어주는 방법을 알아봤는데 한가지 문제점이 생겼다.
해당 Icon을 선택 하였을 때 어떤 icon을 선택했는지 구분이 어려워서 원하는 색상으로 변경하는 방법이 필요해졌다.
R.attr 속성을 이용하는 것이다. R.attr | Android Developers
R.attr | Android Developers
developer.android.com
해당 속성 중에는 state_selected 라는 속성이 있다. 이 속성을 이용하면 Tab Layout이 선택 되었을 경우 색상을 변경하는
코드를 작성할 수 있다.
1 . 우선 ColorStateList 를 선언 해준다. 해당 List는 지정된 상태에 따라서 색상을 변환해주는 리스트이다.
private val tintColor= ColorStateList(
arrayOf(intArrayOf(android.R.attr.state_selected), intArrayOf(-android.R.attr.state_selected)),
//selected 시 첫번째 color 적용, unselected 시 두번째 color 적용
intArrayOf(Color.parseColor("#FF000000"),Color.parseColor("#FF6B99B3"))
)
R.attr의 속성 중 state_selected 속성일 경우 #FF000000 색상이 적용된다.
R..attr의 속성이 -state_selected 속성일 경우 #FF6B99B3 색상이 적용된다.
2. 해당 ColorStateList 를 Tab Layout에 연결해준다.
tabUser.tabIconTint = tintColor
이제 Tab Layout을 선택할 경우 해당 동작 상태에 맡게 색상이 변하게 될 것이다.
끝