kotlin,Android 运用Tablayout+Viewpager2实现导航栏，手把手教会你

目录

一.准备工作

1.新建一个包名为fragment，用于存放新建的fragment

2.在fragment包中新建三个fragment

3.删除新建fragment中的无用内容

4.修改每个Fragment布局文件

5.创建一个包名为Adapter,包内创建一个kt文件为ViewpagerAdapter

二.修改ViewpagerAdapter内容

三.修改activity的xml文件

四.修改Activity文件

五.效果

---

实现导航栏效果，需要一个Activity和若干个Fragment来实现

文章的最后，我放了一个视频，感兴趣的朋友可以先划到最后看一看

一.准备工作

1.新建一个包名为fragment，用于存放新建的fragment

2.在fragment包中新建三个fragment

分别命名为FragmentA,FragmentB,FragmentC

3.删除新建fragment中的无用内容

以FragmentA为例

删除完成后保留这些内容

4.修改每个Fragment布局文件

给每个Freament布局文件放置一个TextView以便后面区分

以FragmentA为例，这边放代码，需要的可以直接复制（运用的是线性布局)

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".fragment.FragmentA">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FragmentA"
        android:textSize="50sp"/>



</androidx.appcompat.widget.LinearLayoutCompat>

效果图：

5.创建一个包名为Adapter,包内创建一个kt文件为ViewpagerAdapter

二.修改ViewpagerAdapter内容

按照这样写，然后会发现class ViewpagerAdapter会标红，不要担心

package com.example.tablayoutviewpager2.Adapter

import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class ViewpagerAdapter(fragmentActivity: FragmentActivity,var title:List<String>):FragmentStateAdapter(fragmentActivity) {
}

光标选中 ViewpagerAdapter后按Alt+Enter，系统会自动帮你构建方法

点击OK即可

最后修改成这样即可

package com.example.tablayoutviewpager2.Adapter

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.tablayoutviewpager2.fragment.FragmentA
import com.example.tablayoutviewpager2.fragment.FragmentB
import com.example.tablayoutviewpager2.fragment.FragmentC

class ViewpagerAdapter(fragmentActivity: FragmentActivity,var title:List<String>):FragmentStateAdapter(fragmentActivity) {
    override fun getItemCount(): Int {
        return title.size
    }

    override fun createFragment(position: Int): Fragment {
        return when(position){
            0->FragmentA()
            1->FragmentB()
            2->FragmentC()
            else->FragmentA()
        }
    }
}

三.修改activity的xml文件

因为是利用Tablayout和viewpager2实现导航栏，所以在xml文件中要加入这两个控件

我用的是相对布局（用线性布局实现不了滑动，不知道为啥）

给这两个控件都加上id

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"/>
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabLayout"/>
</RelativeLayout>

四.修改Activity文件

package com.example.tablayoutviewpager2

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.lifecycle.ReportFragment.Companion.reportFragment
import androidx.viewpager2.widget.ViewPager2
import com.example.tablayoutviewpager2.Adapter.ViewpagerAdapter
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        
        var titles = listOf("AAA","BBB","CCC")
        var tabLayout :TabLayout?=null
        var viewPager:ViewPager2?=null
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        //初始化控件
        tabLayout = findViewById(R.id.tabLayout)
        viewPager = findViewById(R.id.viewPager)
        //设置adapter
        viewPager?.adapter = ViewpagerAdapter(this,titles)
        //tablayout和viewpager联动
        TabLayoutMediator(tabLayout,viewPager){tab,position->
            tab.text =titles[position]
        }.attach()
    }
}

五.效果

按照上面一步一步来的话，就可以实现Tablayout+Viewpager2实现导航栏的效果的

这边放了一个视频，可以点开看看

Tablayout+Viewpager2 效果