带有ViewPager的Kotlin Android TabLayout ViewPagerTabLayout|Kotlin

Android TabLayout是用于构建水平制表符的布局。 TabLayout的选项卡是使用newTab()方法创建的。要在布局上显示此选项卡, 我们需要使用addTab（Tab）方法添加此选项卡。
使用setText（int）和setIcon（int）方法, 我们分别设置TabLayout的标题和图标。
我们还可以将ViewPager与TabLayout集成。 ViewPager使选项卡在布局上平滑滑动。
带有ViewPager示例的Kotlin Android TabLayout 在此示例中, 我们将使用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.srcmini.com.kotlintablayoutexample.MainActivity"> < android.support.design.widget.TabLayoutandroid: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.ViewPagerandroid: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.srcmini.com.kotlintablayoutexampleimport android.support.v7.app.AppCompatActivityimport android.os.Bundleimport android.support.design.widget.TabLayoutimport android.support.v4.view.ViewPagerclass MainActivity : AppCompatActivity() {var tabLayout: TabLayout? = nullvar viewPager: ViewPager? = nulloverride 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_FILLval adapter = MyAdapter(this, supportFragmentManager, tabLayout!!.tabCount)viewPager!!.adapter = adapterviewPager!!.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.srcmini.com.kotlintablayoutexampleimport android.support.v4.app.FragmentPagerAdapterimport android.content.Context; import android.support.v4.app.Fragmentimport android.support.v4.app.FragmentManagerclass MyAdapter(private val myContext: Context, fm: FragmentManager, internal var totalTabs: Int) : FragmentPagerAdapter(fm) {// this is for fragment tabsoverride 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 tabsoverride fun getCount(): Int {return totalTabs}}

将片段创建为新建-> 片段-> 片段（空白）。
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"> < TextViewandroid: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.srcmini.com.kotlintablayoutexampleimport android.os.Bundleimport android.support.v4.app.Fragmentimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupclass HomeFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentreturn 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 --> < TextViewandroid: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.srcmini.com.kotlintablayoutexampleimport android.os.Bundleimport android.support.v4.app.Fragmentimport android.view.ViewGroupimport android.view.LayoutInflaterimport android.view.Viewclass SportFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentreturn inflater!!.inflate(R.layout.fragment_sport, container, false)}}// Required empty public constructorRequired 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.srcmini.com.kotlintablayoutexample.MovieFragment"> < !-- TODO: Update blank fragment layout --> < TextViewandroid: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.srcmini.com.kotlintablayoutexampleimport android.os.Bundleimport android.support.v4.app.Fragmentimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupclass MovieFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentreturn inflater!!.inflate(R.layout.fragment_movie, container, false)}}// Required empty public constructor

【带有ViewPager的Kotlin Android TabLayout】输出：