feat: smooth navbar indicator

This commit is contained in:
rebelonion 2024-02-29 03:54:56 -06:00
parent 94e3dff909
commit 89aaef8355
2 changed files with 81 additions and 71 deletions

View file

@ -13,7 +13,7 @@ class TripleNavAdapter(
private val nav3: AnimatedBottomBar, private val nav3: AnimatedBottomBar,
anime: Boolean, anime: Boolean,
format: String, format: String,
isVertical: Boolean = false private val isScreenVertical: Boolean = false
) { ) {
var selected: Int = 0 var selected: Int = 0
var selectionListener: ((Int, Int) -> Unit)? = null var selectionListener: ((Int, Int) -> Unit)? = null
@ -31,16 +31,12 @@ class TripleNavAdapter(
} }
val commentTab = nav3.createTab(R.drawable.ic_round_comment_24, R.string.comments, R.id.comment) val commentTab = nav3.createTab(R.drawable.ic_round_comment_24, R.string.comments, R.id.comment)
nav1.addTab(infoTab) nav1.addTab(infoTab)
nav2.addTab(watchTab)
nav3.addTab(commentTab)
nav1.visibility = ViewGroup.VISIBLE nav1.visibility = ViewGroup.VISIBLE
nav2.visibility = ViewGroup.VISIBLE if (isScreenVertical) {
nav3.visibility = ViewGroup.VISIBLE nav2.visibility = ViewGroup.GONE
if (!isVertical) { nav3.visibility = ViewGroup.GONE
nav1.indicatorColor = Color.TRANSPARENT nav1.addTab(watchTab)
nav2.indicatorColor = Color.TRANSPARENT nav1.addTab(commentTab)
nav3.indicatorColor = Color.TRANSPARENT
} else {
nav1.updateLayoutParams<ViewGroup.MarginLayoutParams> { nav1.updateLayoutParams<ViewGroup.MarginLayoutParams> {
bottomMargin = navBarHeight bottomMargin = navBarHeight
} }
@ -50,6 +46,38 @@ class TripleNavAdapter(
nav3.updateLayoutParams<ViewGroup.MarginLayoutParams> { nav3.updateLayoutParams<ViewGroup.MarginLayoutParams> {
bottomMargin = navBarHeight bottomMargin = navBarHeight
} }
} else {
nav1.indicatorColor = Color.TRANSPARENT
nav2.indicatorColor = Color.TRANSPARENT
nav3.indicatorColor = Color.TRANSPARENT
nav2.visibility = ViewGroup.VISIBLE
nav3.visibility = ViewGroup.VISIBLE
nav2.addTab(watchTab)
nav3.addTab(commentTab)
nav2.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {
override fun onTabSelected(
lastIndex: Int,
lastTab: AnimatedBottomBar.Tab?,
newIndex: Int,
newTab: AnimatedBottomBar.Tab
) {
selected = 1
deselectOthers(selected)
selectionListener?.invoke(selected, newTab.id)
}
})
nav3.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {
override fun onTabSelected(
lastIndex: Int,
lastTab: AnimatedBottomBar.Tab?,
newIndex: Int,
newTab: AnimatedBottomBar.Tab
) {
selected = 2
deselectOthers(selected)
selectionListener?.invoke(selected, newTab.id)
}
})
} }
nav1.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener { nav1.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {
override fun onTabSelected( override fun onTabSelected(
@ -58,32 +86,10 @@ class TripleNavAdapter(
newIndex: Int, newIndex: Int,
newTab: AnimatedBottomBar.Tab newTab: AnimatedBottomBar.Tab
) { ) {
selected = 0 if (!isScreenVertical) {
deselectOthers(selected) selected = 0
selectionListener?.invoke(selected, newTab.id) deselectOthers(selected)
} } else selected = newIndex
})
nav2.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {
override fun onTabSelected(
lastIndex: Int,
lastTab: AnimatedBottomBar.Tab?,
newIndex: Int,
newTab: AnimatedBottomBar.Tab
) {
selected = 1
deselectOthers(selected)
selectionListener?.invoke(selected, newTab.id)
}
})
nav3.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {
override fun onTabSelected(
lastIndex: Int,
lastTab: AnimatedBottomBar.Tab?,
newIndex: Int,
newTab: AnimatedBottomBar.Tab
) {
selected = 2
deselectOthers(selected)
selectionListener?.invoke(selected, newTab.id) selectionListener?.invoke(selected, newTab.id)
} }
}) })
@ -105,13 +111,17 @@ class TripleNavAdapter(
} }
fun selectTab(tab: Int) { fun selectTab(tab: Int) {
when (tab) {
0 -> nav1.selectTabAt(0)
1 -> nav2.selectTabAt(0)
2 -> nav3.selectTabAt(0)
}
selected = tab selected = tab
deselectOthers(selected) if (!isScreenVertical) {
when (tab) {
0 -> nav1.selectTabAt(0)
1 -> nav2.selectTabAt(0)
2 -> nav3.selectTabAt(0)
}
deselectOthers(selected)
} else {
nav1.selectTabAt(selected)
}
} }
fun setVisibility(visibility: Int) { fun setVisibility(visibility: Int) {

View file

@ -2,9 +2,9 @@
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" xmlns:tools="http://schemas.android.com/tools"
android:fitsSystemWindows="false"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent"> android:layout_height="match_parent"
android:fitsSystemWindows="false">
<com.google.android.material.appbar.AppBarLayout <com.google.android.material.appbar.AppBarLayout
android:id="@+id/mediaAppBar" android:id="@+id/mediaAppBar"
@ -235,8 +235,8 @@
android:id="@+id/mediaViewPager" android:id="@+id/mediaViewPager"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
android:layout_marginBottom="72dp" android:layout_marginBottom="72dp"
android:nestedScrollingEnabled="true"
tools:ignore="SpeakableTextPresentCheck" /> tools:ignore="SpeakableTextPresentCheck" />
</LinearLayout> </LinearLayout>
@ -247,39 +247,39 @@
android:layout_gravity="center|bottom" android:layout_gravity="center|bottom"
android:orientation="horizontal"> android:orientation="horizontal">
<nl.joery.animatedbottombar.AnimatedBottomBar <nl.joery.animatedbottombar.AnimatedBottomBar
android:id="@+id/mediaTab1" android:id="@+id/mediaTab1"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="72dp" android:layout_height="72dp"
android:layout_weight="1" android:layout_gravity="center_horizontal|bottom"
android:layout_gravity="center_horizontal|bottom" android:layout_weight="1"
android:background="?attr/colorSurface" android:background="?attr/colorSurface"
android:padding="0dp" android:padding="0dp"
app:abb_animationInterpolator="@anim/over_shoot" app:abb_animationInterpolator="@anim/over_shoot"
app:abb_selectedTabType="text" app:abb_indicatorAppearance="round"
app:abb_textAppearance="@style/NavBarText" app:abb_indicatorLocation="top"
app:abb_selectedTabType="text"
app:abb_textAppearance="@style/NavBarText"
app:itemActiveIndicatorStyle="@style/BottomNavBar" app:itemActiveIndicatorStyle="@style/BottomNavBar"
app:itemIconTint="@color/tab_layout_icon" app:itemIconTint="@color/tab_layout_icon"
app:itemRippleColor="#00000000" app:itemRippleColor="#00000000"
app:itemTextAppearanceActive="@style/NavBarText" app:itemTextAppearanceActive="@style/NavBarText"
app:itemTextAppearanceInactive="@style/NavBarText" app:itemTextAppearanceInactive="@style/NavBarText"
app:itemTextColor="@color/tab_layout_icon" /> app:itemTextColor="@color/tab_layout_icon" />
<nl.joery.animatedbottombar.AnimatedBottomBar <nl.joery.animatedbottombar.AnimatedBottomBar
android:id="@+id/mediaTab2" android:id="@+id/mediaTab2"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="72dp" android:layout_height="72dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal|bottom" android:layout_gravity="center_horizontal|bottom"
android:layout_weight="1"
android:background="?attr/colorSurface" android:background="?attr/colorSurface"
android:padding="0dp" android:padding="0dp"
app:abb_animationInterpolator="@anim/over_shoot" app:abb_animationInterpolator="@anim/over_shoot"
app:abb_indicatorAppearance="round"
app:abb_indicatorLocation="top"
app:abb_selectedTabType="text" app:abb_selectedTabType="text"
app:abb_textAppearance="@style/NavBarText" app:abb_textAppearance="@style/NavBarText"
app:itemActiveIndicatorStyle="@style/BottomNavBar" app:itemActiveIndicatorStyle="@style/BottomNavBar"
app:itemIconTint="@color/tab_layout_icon" app:itemIconTint="@color/tab_layout_icon"
app:itemRippleColor="#00000000" app:itemRippleColor="#00000000"
@ -291,15 +291,15 @@
android:id="@+id/mediaTab3" android:id="@+id/mediaTab3"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="72dp" android:layout_height="72dp"
android:layout_weight="1"
android:layout_gravity="center_horizontal|bottom" android:layout_gravity="center_horizontal|bottom"
android:layout_weight="1"
android:background="?attr/colorSurface" android:background="?attr/colorSurface"
android:padding="0dp" android:padding="0dp"
app:abb_animationInterpolator="@anim/over_shoot" app:abb_animationInterpolator="@anim/over_shoot"
app:abb_indicatorAppearance="round"
app:abb_indicatorLocation="top"
app:abb_selectedTabType="text" app:abb_selectedTabType="text"
app:abb_textAppearance="@style/NavBarText" app:abb_textAppearance="@style/NavBarText"
app:itemActiveIndicatorStyle="@style/BottomNavBar" app:itemActiveIndicatorStyle="@style/BottomNavBar"
app:itemIconTint="@color/tab_layout_icon" app:itemIconTint="@color/tab_layout_icon"
app:itemRippleColor="#00000000" app:itemRippleColor="#00000000"
@ -375,6 +375,6 @@
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:paddingTop="16dp" android:paddingTop="16dp"
android:visibility="gone"/> android:visibility="gone" />
</androidx.coordinatorlayout.widget.CoordinatorLayout> </androidx.coordinatorlayout.widget.CoordinatorLayout>