Kotlin Android TabLayout 搭配 FrameLayout

17 Mar 2025 | 4 分钟阅读

Android TabLayout 是一个用于构建水平选项卡的布局。在本教程中，使用 ViewPager 的 Android TabLayout 我们使用 newTab() 方法创建 TabLayout 的选项卡，但选项卡也可以使用布局活动中的 android.support.design.widget.TabItem 实现。

选项卡的标题和图标分别通过实现 text 和 icon 属性来提供。

为了给 TabLayout 的每个选项卡提供空间，我们可以使用 FrameLayout。 FrameLayout 旨在覆盖屏幕上的区域以显示单个项目。

Kotlin Android TabLayout 搭配 FrameLayout 示例

在此示例中，我们将使用 TabItem 和 FrameLayout 创建 TabLayout。

build.gradle

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

implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
implementation 'com.android.support:support-v4:26.1.0'
testImplementation 'junit:junit:4.12'
implementation 'com.android.support:design:26.1.0'

activity_main.xml

在 activity_main.xml 布局文件中添加 TabLayout、TabItem 和 FrameLayout。

<?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.kotlintablayoutwithframelayout.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.TabItem
            android:id="@+id/tabJava"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Java" />

        <android.support.design.widget.TabItem
            android:id="@+id/tabAndroid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android" />

        <android.support.design.widget.TabItem
            android:id="@+id/tabKotlin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Kotlin" />

        <android.support.design.widget.TabItem
            android:id="@+id/tabPhp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Php" />

        <android.support.design.widget.TabItem
            android:id="@+id/tabPython"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Python" />
    </android.support.design.widget.TabLayout>
    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabLayout">
    </FrameLayout>
</android.support.constraint.ConstraintLayout>

strings.xml

<resources>
    <string name="app_name">Kotlin TabLayout with FrameLayout</string>
    <string name="java_fragment">Java fragment</string>
    <string name="android_fragment">Android fragment</string>
    <string name="kotlin_fragment">Kotlin fragment</string>
    <string name="php_fragment">Php fragment</string>
    <string name="python_fragment">Python 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 和 FrameLayout 的实例。调用 TabLayout 的 addOnTabSelectedListener() 监听器并重写其方法。

package example.javatpoint.com.kotlintablayoutwithframelayout

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentTransaction
import android.widget.FrameLayout

class MainActivity : AppCompatActivity() {
    var tabLayout: TabLayout? = null
    var frameLayout: FrameLayout? = null
    var fragment: Fragment? = null
    var fragmentManager: FragmentManager? = null
    var fragmentTransaction: FragmentTransaction? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        tabLayout = findViewById<TabLayout>(R.id.tabLayout)
        frameLayout = findViewById<FrameLayout>(R.id.frameLayout)

        fragment = JavaFragment()
        fragmentManager = supportFragmentManager
        fragmentTransaction = fragmentManager!!.beginTransaction()
        fragmentTransaction!!.replace(R.id.frameLayout, fragment)
        fragmentTransaction!!.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
        fragmentTransaction!!.commit()
        //adding listener for tab select
        tabLayout!!.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                // creating cases for fragment
                when (tab.position) {
                    0 -> fragment = JavaFragment()
                    1 -> fragment = AndroidFragment()
                    2 -> fragment = KotlinFragment()
                    3 -> fragment = PhpFragment()
                    4 -> fragment = PythonFragment()
                }
                val fm = supportFragmentManager
                val ft = fm.beginTransaction()
                ft.replace(R.id.frameLayout, fragment)
                ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
                ft.commit()
            }

            override fun onTabUnselected(tab: TabLayout.Tab) {

            }

            override fun onTabReselected(tab: TabLayout.Tab) {

            }
        })

    }
}

为每个片段创建 FrameLayout，步骤为：新建 -> 片段 -> 片段（空白）。

fragment_java.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.kotlintablayoutwithframelayout.JavaFragment">

    <!-- 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/java_fragment" />
    <Button
        android:id="@+id/androidButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:text="Click Me"/>

</FrameLayout>

MainActivity.kt

package example.javatpoint.com.kotlintablayoutwithframelayout

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import kotlinx.android.synthetic.main.fragment_android.view.*

class JavaFragment : Fragment() {

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

        view.androidButton!!.setOnClickListener(View.OnClickListener {
            Toast.makeText(context,"java fragment", Toast.LENGTH_SHORT).show()
        })
        return view
    }
}// Required empty public constructor

fragment_android.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.kotlintablayoutwithframelayout.AndroidFragment">

    <!-- 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/android_fragment" />

    <Button
        android:id="@+id/androidButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:text="Click Me"/>

</FrameLayout>

AndroidFragment.kt

package example.javatpoint.com.kotlintablayoutwithframelayout

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import kotlinx.android.synthetic.main.fragment_android.view.*

class AndroidFragment : Fragment() {

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

        view.androidButton!!.setOnClickListener(View.OnClickListener {
            Toast.makeText(context,"android fragment",Toast.LENGTH_SHORT).show()
        })
        return view
    }

}// Required empty public constructor

fragment_kotlin.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.kotlintablayoutwithframelayout.KotlinFragment">

    <!-- 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/kotlin_fragment" />
    <Button
        android:id="@+id/androidButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:text="Click Me"/>
</FrameLayout>

KotlinFragment.kt

package example.javatpoint.com.kotlintablayoutwithframelayout

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import kotlinx.android.synthetic.main.fragment_android.view.*

class KotlinFragment : Fragment() {

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

        view.androidButton!!.setOnClickListener(View.OnClickListener {
            Toast.makeText(context,"kotlin fragment", Toast.LENGTH_SHORT).show()
        })
        return view
    }
}// Required empty public constructor

fragment_php.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.kotlintablayoutwithframelayout.PhpFragment">

    <!-- 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/php_fragment" />
    <Button
        android:id="@+id/androidButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:text="Click Me"/>
</FrameLayout>

PhpFragment.kt

package example.javatpoint.com.kotlintablayoutwithframelayout

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import kotlinx.android.synthetic.main.fragment_android.view.*

class PhpFragment : Fragment() {

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

        view.androidButton!!.setOnClickListener(View.OnClickListener {
            Toast.makeText(context,"php fragment", Toast.LENGTH_SHORT).show()
        })
        return view
    }
}// Required empty public constructor

fragment_python.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.kotlintablayoutwithframelayout.PythonFragment">

    <!-- 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/python_fragment" />
    <Button
        android:id="@+id/androidButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:text="Click Me"/>
</FrameLayout>

PythonFragment.kt

package example.javatpoint.com.kotlintablayoutwithframelayout

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import kotlinx.android.synthetic.main.fragment_android.view.*

class PythonFragment : Fragment() {

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

        view.androidButton!!.setOnClickListener(View.OnClickListener {
            Toast.makeText(context,"python fragment", Toast.LENGTH_SHORT).show()
        })
        return view
    }
}// Required empty public constructor

输出

Kotlin Android TabLayout with FrameLayout

下一主题#

Kotlin Android TabLayout 搭配 FrameLayout

Kotlin Android TabLayout 搭配 FrameLayout 示例

build.gradle

activity_main.xml

strings.xml

colors.xml

MainActivity.kt

fragment_java.xml

MainActivity.kt

fragment_android.xml

AndroidFragment.kt

fragment_kotlin.xml

KotlinFragment.kt

fragment_php.xml

PhpFragment.kt

fragment_python.xml

PythonFragment.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 搭配 FrameLayout

Kotlin Android TabLayout 搭配 FrameLayout 示例

build.gradle

activity_main.xml

strings.xml

colors.xml

MainActivity.kt

fragment_java.xml

MainActivity.kt

fragment_android.xml

AndroidFragment.kt

fragment_kotlin.xml

KotlinFragment.kt

fragment_php.xml

PhpFragment.kt

fragment_python.xml

PythonFragment.kt

相关帖子

Android 隐式 Intent

Android Options Menu

Kotlin Android Toast

Google reCAPTCHA

Android Web Service

Android 通知

身份验证 - Google 登录

Android 媒体播放器

Google Map 当前位置

Android AlertDialog

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器