TIL #83

fragement bottom bar 만들기

BottomNavigationView, Fragment 사용하기 (velog.io)

bottombar 폰트 바꾸기

Android - How to change bottom navigation bar text's font family - Stack Overflow
In your layout:

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemTextAppearanceActive="@style/BottomNavigationViewTextStyle"
    app:itemTextAppearanceInactive="@style/BottomNavigationViewTextStyle"
    ... />

In your styles.xml:

<style name="BottomNavigationViewTextStyle">
    ...
    <item name="android:fontFamily">@font/whatever_font</item>
    ...
</style>

bottombar 의 크기가 하단여백이 생기는 문제

-> 일단 ViewCompat을 제거해줌

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->  
    val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())  
    v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)  
    insets  
}

bottombar의 배경제거(선택 됐을때 생기는 아이콘에 알약모양 배경 )

app:itemActiveIndicatorStyle="@null" 을 xml에 추가

<com.google.android.material.bottomnavigation.BottomNavigationView  
    android:id="@+id/bottomNavigationView"  
    android:layout_width="0dp"  
    android:layout_height="wrap_content"  
    android:background="@color/primary"  
    app:itemIconTint="@color/white"  
    app:itemRippleColor="@color/secondary"  
    app:itemActiveIndicatorStyle="@null"  
    app:itemTextAppearanceActive="@style/BottomNavigationViewTextStyle"  
    app:itemTextAppearanceInactive="@style/BottomNavigationViewTextStyle"  
    app:itemTextColor="@color/white"  
    app:layout_constraintBottom_toBottomOf="parent"  
    app:layout_constraintEnd_toEndOf="parent"  
    app:layout_constraintStart_toStartOf="parent"  
    app:menu="@menu/bottom_bar_menu" />

바텀바의 시작 탭 설정하기

kotlin파일에서 바꿔 해당 코드 입력
binding.bottomNavigationView.selectedItemId = R.id.contactsItem

---

ViewPager2 과 TapLaytout사용하기

ViewPager2 개념정리 + 사용법 (velog.io)
라이브러리 추가

implementation "androidx.viewpager2:viewpager2:1.0.0"

ViewPager2 레이아웃 추가

<androidx.viewpager2.widget.ViewPager2  
    android:id="@+id/random_view_pager"  
    android:layout_width="0dp"  
    android:layout_height="0dp"  
    app:layout_constraintBottom_toBottomOf="parent"  
    app:layout_constraintEnd_toEndOf="parent"  
    app:layout_constraintStart_toStartOf="parent"  
    app:layout_constraintTop_toBottomOf="@+id/random_tabs" />

TabLayout 레이아웃 추가

<com.google.android.material.tabs.TabLayout  
    android:id="@+id/random_tabs"  
    android:layout_width="0dp"  
    android:layout_height="wrap_content"  
    android:layout_marginStart="16dp"  
    android:layout_marginTop="30dp"  
    android:background="@android:color/transparent"  
    app:layout_constraintStart_toStartOf="parent"  
    app:layout_constraintTop_toTopOf="parent"  
    app:layout_constraintWidth_percent=".6"  
    app:tabIndicator="@drawable/shape_rectangle_background"  
    app:tabIndicatorColor="@color/primary"  
    app:tabIndicatorFullWidth="true"  
    app:tabIndicatorHeight="4dp"  
    app:tabPaddingEnd="0dp"  
    app:tabPaddingStart="0dp"  
    app:tabRippleColor="@null"  
    app:tabSelectedTextColor="@color/primary"  
    app:tabTextAppearance="@style/body_b"  
    app:tabTextColor="@color/gray">  
  
    <com.google.android.material.tabs.TabItem        android:layout_width="20dp"  
        android:layout_height="wrap_content"  
        tools:text="랜덤 전화 걸기" />  
  
    <com.google.android.material.tabs.TabItem        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        tools:text="최근 랜덤 전화" />  
  
</com.google.android.material.tabs.TabLayout>

Fragment에서 ViewPager과 TabLayout 연결

with(binding) {
    randomViewPager.adapter = RandomViewPageAdapter(this@RandomFragment)  
    TabLayoutMediator(randomTabs, randomViewPager) { tab, position ->  
        tab.text = when (position) {  
            in 0..1 -> resources.getStringArray(R.array.random_tab)[position]  
            else -> throw IllegalStateException("Unexpected position: $position")  
        }
    }.attach()  
}