TabLayout+ViewPager实现横向tab导航栏
实现 导航 tab 横向 Viewpager
2023-09-27 14:27:30 时间
效果
实现方案
- activity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initViewPager()
initTabLayout()
}
private fun initViewPager() {
addViews()
viewPager.addOnPageChangeListener(TabLayoutOnPageChangeListener(tabLayout))
setAdapter()
}
private fun addViews() {
val view1 = LayoutInflater.from(this).inflate(R.layout.view_pager_1, null)
val view2 = LayoutInflater.from(this).inflate(R.layout.view_pager_2, null)
viewPager.addView(view1)
viewPager.addView(view2)
}
private fun setAdapter() {
viewPager.adapter = object : PagerAdapter() {
override fun getCount(): Int {
return viewPager.childCount
}
override fun isViewFromObject(view: View, obj: Any): Boolean {
return view === obj
}
override fun instantiateItem(container: ViewGroup, position: Int): Any {
return viewPager.getChildAt(position)
}
}
}
private fun initTabLayout() {
tabLayout.addOnTabSelectedListener(object : BaseOnTabSelectedListener<TabLayout.Tab> {
override fun onTabSelected(tab: TabLayout.Tab?) {
val position = tab!!.position
viewPager.currentItem = position
}
override fun onTabReselected(p0: TabLayout.Tab?) {
}
override fun onTabUnselected(p0: TabLayout.Tab?) {
}
})
}
}
- 布局文件
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab1"
android:textAllCaps="false" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab2"
android:textAllCaps="false" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
view_pager_1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="tab1页面"
android:textSize="30sp" />
</LinearLayout>
view_pager_2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="tab2页面"
android:textSize="30sp" />
</LinearLayout>
完整源代码
相关文章
- Virtualbox下利用host-only连接方式实现虚拟机和物理机联网(包括wifi)
- 【程序员代码心得】Bootatrap导航和轮播以及栅格布局的实现
- Flutter NavigationBar 优雅的实现底部导航栏菜单
- flutter BottomAppBar 实现不规则底部导航栏
- C#实现程序自重启
- WFP实现侧边栏导航菜单
- AndroidStudio制作底部导航栏以及用Fragment实现切换功能
- 【HarmonyOS】【ARKUI】鸿蒙 ets 方式 tabs+tabcontent 实现底部导航栏
- Javascript实现导航锚点滚动效果实例
- uni-app知识点:条件编译#ifdef MP、HBuilder基座和自定义基座差别、去除顶部导航栏、手机桌面应用消息角标实现、APP应用图标配置及云端打包时的注意事项、如何使app文字内容长按可以选择复制
- css 利用transform 实现页面居中效果
- 【HarmonyOS】【ARKUI】鸿蒙 ets方式tabs+tabcontent 实现底部导航栏
- C# 实现抢红包算法
- android 自己定义状态栏和导航栏分析与实现
- nginx+keepalived实现双机热备高可用性
- mui 底部导航栏的实现
- 用Java实现文件的分割与合并,不依赖于任何第三方,三种实现过程都提供按文件块大小分割、文件块数量分割,返回不同的文件分隔信息,最后封装为jar包,一行代码进行调用
- 商城分类导航实现 (css)