Kotlin Android TabLayout 与 ViewPager

2025年3月17日 | 阅读 3 分钟

Android TabLayout 是用于构建水平选项卡的布局。TabLayout 的选项卡是使用 newTab() 方法创建的。要将此选项卡显示在布局上，我们需要使用 addTab(Tab) 方法添加此选项卡。

使用 setText(int) 和 setIcon(int) 方法，我们分别设置 TabLayout 的标题和图标。

我们还可以将 ViewPager 与 TabLayout 集成。ViewPager 在布局上提供平滑的选项卡滑动。

Kotlin Android TabLayout 与 ViewPager 示例

在此示例中，我们将创建一个带有 ViewPager 的 TabLayout。

build.gradel

在 build.gradle 文件中添加以下依赖项。

implementation 'com.android.support:design:26.1.0'
implementation 'com.android.support:support-v4:26.1.0'

activity_main.xml

在 activity_main.xml 文件中添加 TabLayout 和 ViewPager。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="example.javatpoint.com.kotlintablayoutexample.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00a294"
        app:tabTextColor="@android:color/background_light">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tabLayout">

    </android.support.v4.view.ViewPager>
</android.support.constraint.ConstraintLayout>

strings.xml

<resources>
    <string name="app_name">Kotlin TabLayout Example</string>
    <!-- TODO: Remove or change this placeholder text -->
    <string name="home_fragment">Home Fragment</string>
    <string name="sport_fragment">Sport Fragment</string>
    <string name="movie_fragment">Movie Fragment</string>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#03DAC6</color>
    <color name="colorPrimaryDark">#aeded9</color>
    <color name="colorAccent">#00a294</color>
</resources>

MainActivity.kt

在 MainActivity.kt 类中添加以下代码。在这个类中，使用 tabLayout!!.newTab() 方法创建新的选项卡，并使用 tabLayout!!.addTab(Tab) 将此选项卡添加到 TabLayout 上。

调用 ViewPager 的 addOnPageChangeListener() 监听器以在页面更改时加载选项卡。

package example.javatpoint.com.kotlintablayoutexample

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v4.view.ViewPager

class MainActivity : AppCompatActivity() {

    var tabLayout: TabLayout? = null
    var viewPager: ViewPager? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        tabLayout = findViewById<TabLayout>(R.id.tabLayout)
        viewPager = findViewById<ViewPager>(R.id.viewPager)

        tabLayout!!.addTab(tabLayout!!.newTab().setText("Home"))
        tabLayout!!.addTab(tabLayout!!.newTab().setText("Sport"))
        tabLayout!!.addTab(tabLayout!!.newTab().setText("Movie"))
        tabLayout!!.tabGravity = TabLayout.GRAVITY_FILL

        val adapter = MyAdapter(this, supportFragmentManager, tabLayout!!.tabCount)
        viewPager!!.adapter = adapter

        viewPager!!.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tabLayout))

        tabLayout!!.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                viewPager!!.currentItem = tab.position
            }
            override fun onTabUnselected(tab: TabLayout.Tab) {

            }
            override fun onTabReselected(tab: TabLayout.Tab) {

            }
        })

    }
}

MyAdapter.kt

创建一个适配器类 MyAdapter.kt 并扩展 FragmentPagerAdapter() 类并返回 Fragment。将此适配器类添加到 ViewPager 上。

package example.javatpoint.com.kotlintablayoutexample

import android.support.v4.app.FragmentPagerAdapter
import android.content.Context;
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager

class MyAdapter(private val myContext: Context, fm: FragmentManager, internal var totalTabs: Int) : FragmentPagerAdapter(fm) {

    // this is for fragment tabs
    override fun getItem(position: Int): Fragment? {
        when (position) {
            0 -> {
              //  val homeFragment: HomeFragment = HomeFragment()
                return HomeFragment()
            }
            1 -> {
                return SportFragment()
            }
            2 -> {
               // val movieFragment = MovieFragment()
                return MovieFragment()
            }
            else -> return null
        }
    }

    // this counts total number of tabs
    override fun getCount(): Int {
        return totalTabs
    }
}

创建一个片段，选择 New -> Fragment -> Fragment (Blank)。

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:text="@string/home_fragment" />
</FrameLayout>

HomeFragment.kt

package example.javatpoint.com.kotlintablayoutexample

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class HomeFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                          savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater!!.inflate(R.layout.fragment_home, container, false)
    }
}// Required empty public constructor

fragment_sport.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:text="@string/sport_fragment" />
</FrameLayout>

SportFragment.kt

package example.javatpoint.com.kotlintablayoutexample

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.ViewGroup
import android.view.LayoutInflater
import android.view.View

class SportFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater!!.inflate(R.layout.fragment_sport, container, false)
    }

}// Required empty public constructor   Required empty public constructor

fragment_movie.xml

<FrameLayout 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"
    tools:context="example.javatpoint.com.kotlintablayoutexample.MovieFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:text="@string/movie_fragment" />

</FrameLayout>

MovieFragment.kt

package example.javatpoint.com.kotlintablayoutexample

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class MovieFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater!!.inflate(R.layout.fragment_movie, container, false)
    }

}// Required empty public constructor

输出

下一主题#

Kotlin Android TabLayout 与 ViewPager

Kotlin Android TabLayout 与 ViewPager 示例

build.gradel

activity_main.xml

strings.xml

colors.xml

MainActivity.kt

MyAdapter.kt

fragment_home.xml

HomeFragment.kt

fragment_sport.xml

SportFragment.kt

fragment_movie.xml

MovieFragment.kt

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Kotlin 教程

控制流

函数

Array

String

异常处理

Null 安全

集合

注解

反射

Kotlin OOPs

范围

Java 互操作性

Regex

Android 启动

Kotlin Android

Kotlin Android TabLayout 与 ViewPager

Kotlin Android TabLayout 与 ViewPager 示例

build.gradel

activity_main.xml

strings.xml

colors.xml

MainActivity.kt

MyAdapter.kt

fragment_home.xml

HomeFragment.kt

fragment_sport.xml

SportFragment.kt

fragment_movie.xml

MovieFragment.kt

相关帖子

内部存储

Android ListView

Android 显式 Intent

Android 自定义 ListView

Google AdMob 横幅广告

SQLite 教程

身份验证 - Google 登录

Google reCAPTCHA

Google AdMob 插页式广告

SharedPreferences

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器