Android TabLayout是用于构建水平制表符的布局。在本教程中, 使用带有ViewPager的Android TabLayout, 我们使用newTab()方法创建了TabLayout的标签, 但是这些标签也可以在布局活动中使用android.support.design.widget.TabItem来实现。
通过分别实现text和icon属性来提供选项卡的标题和图标。
要为TabLayout的每个选项卡提供空间, 我们可以使用FrameLayout。 FrameLayout旨在覆盖屏幕上的区域以显示单个项目。
Kotlin Android TabLayout与FrameLayout示例 在此示例中, 我们将使用带有TabLayout的TabItem创建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.srcmini.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.srcmini.com.kotlintablayoutwithframelayoutimport 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.FrameLayoutclass 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为New-> Fragment-> Fragment（Blank）。
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.srcmini.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.srcmini.com.kotlintablayoutwithframelayoutimport 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.srcmini.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.srcmini.com.kotlintablayoutwithframelayoutimport 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.srcmini.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.srcmini.com.kotlintablayoutwithframelayoutimport 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.srcmini.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.srcmini.com.kotlintablayoutwithframelayoutimport 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.srcmini.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.srcmini.com.kotlintablayoutwithframelayoutimport 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与FrameLayout】输出：

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

推荐阅读

• 

  关于大型群众性活动重大安全事故案件的相关解释主要内容都有哪些
• 

  mysql数据库的作用 mysql数据库有什么用
• 

  火龙果补血效果怎么样 火龙果的神奇功效
• 

  为什么说布尔战争是大英帝国的落日余晖、回光返照？
• 

  宁可大器晚成，不可一事无成
• 

  拜托请你爱我一共多少集
• 

  lua|Lua - 实现单链表及链表操作
• 

  日向宁次的经典语录
• 

  电商需要什么设备 电商要写什么设备，电商要写什么设备的名称
• 

  江山绿牡丹简介
• 

  陆良有什么特产
• 

  小妙招让油性头发立刻治
• 

  #|使用beego与mysql开发web前后端分离的后台API接口
• 

  虾和杏子可以一起吃吗
• 

  诗经女孩子名字文雅有寓意起名思路 诗经女孩子名字文雅有寓意
• 

  全网流行的十首古风歌 2021抖音最火古风歌曲前十名
• 

  苹果手机怎么换图标
• 

  苹果14灵动岛怎么打开，iPhone14 Pro满电无法开机咋回事
• 

  关于生活英文的句子
• 

  四氧化三铁与盐酸反应的化学方程式 四氧化三铁与盐酸反应的化学方程式是什么

• Kotlin Android SQLite教程
• 带有ViewPager的Kotlin Android TabLayout
• Kotlin Android SeekBar
• Kotlin android sharedpreferences用法
• Kotlin Android读写内部存储
• Kotlin Android读写外部存储
• Kotlin Android ListView
• Kotlin Android弹出菜单
• Kotlin Android选项菜单