android - 如何在 Android 中将 TabLayout 中的自定义选项卡项与 ViewPager2 一起使用,TabLayoutMediator 不显示自定义 TabItem
问题描述
我正在尝试使用带有视图寻呼机 2 的选项卡布局 android 生成自定义选项卡视图,但我无法看到生成的选项卡项。
布局.xml
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/userInfoContainer">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="@dimen/figma_48_dp"
android:background="@color/darkBlack"
app:tabBackground="@color/darkBlack"
app:tabGravity="fill"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabRippleColor="@null"
app:tabIndicatorColor="@android:color/white">
<!--
app:tabPaddingEnd="16dp"
app:tabPaddingStart="16dp"
app:tabSelectedTextColor="@color/white"
app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="@color/white"-->
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:alpha="1"
android:layout="@layout/custom_tab_header" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout="@layout/custom_tab_header" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout="@layout/custom_tab_header" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout="@layout/custom_tab_header" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout="@layout/custom_tab_header" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:outlineProvider="bounds" />
</androidx.appcompat.widget.LinearLayoutCompat>
自定义标签视图
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/nav_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="@dimen/figma_27_dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/tab_icon"
android:layout_width="@dimen/figma_18_dp"
android:layout_height="@dimen/figma_18_dp"
android:src="@drawable/ic_home_tab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tab_label"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tab_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/figma_10_dp"
android:layout_marginEnd="@dimen/figma_10_dp"
android:maxLines="1"
android:singleLine="true"
android:text="Home"
android:textColor="@color/white"
android:textSize="@dimen/figma_14_sp"
android:visibility="visible"
app:fontFamily="@font/worksans_regular"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/tab_icon"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Kotlin 代码
TabLayoutMediator(
binding.tabLayout,
binding.viewPager,
TabLayoutMediator.TabConfigurationStrategy { tab, position ->
//binding custom tab view
val tabBinding: CustomTabHeaderBinding = DataBindingUtil.inflate(
LayoutInflater.from(binding.tabLayout.context),
R.layout.custom_tab_header, binding.tabLayout,
false
)
//Name of Tab (Home)
tabBinding.tabLabel.text =
viewModel?.getTabsName()?.value!![position].tabName
//Name of Tab (Home Icon)
tabBinding.tabIcon.setImageResource(viewModel?.getTabsName()?.value!![position].tabIcon)
tab.let {
it.customView = tabBinding.root
}
onTabSelected(tab)
onTabUnselected(tab)
when (position) {
0 -> {
tab.select()
}
homePager.itemCount - 1 -> {
// populateTabItem(ktradeMainViewModel?.getTabsName()?.value!![position])
val currentPage = 0
binding.viewPager.setCurrentItem(currentPage, true)
}
}
//for first time initialization tab will call for each view , it basically delete tabs and re-create tabs
}).attach()
我面临的问题是已选择选项卡未显示其属性(UI 组件)
生成的结果
期望的结果
解决方案
选项卡模式可滚动解决了我的问题。
应用程序:tabMode =“可滚动”
推荐阅读
- javascript - 如果包含确切数字,则将类添加到 div
- php - 如何在 TCPDF 中使用命名空间?
- java - 我正在创建一个用于预订实验室测试的 android 应用程序。如何为客户创建时间段以选择可用时间?
- r - 通过字符串匹配匹配并合并两个数据帧
- python - 将 pandas 数据框与计算合并
- sql-server - 如何在 SQL Server 上获取 VIEW 的查询 - 没有 CREATE VIEW 部分
- python-3.x - 如何在 Python 中使用不同的列表元素更新字典
- python - 由于“会话太新”,无法使用 Telethon 关闭会话
- sas - 在 SAS 中重新排列数据
- python - pyTelegramBotAPI 连接问题还是什么?