个性化阅读
专注于IT技术分析

带有ViewPager的Kotlin Android TabLayout

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.srcmini02.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.srcmini02.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.srcmini02.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
    }
}

将片段创建为新建->片段->片段(空白)。

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.srcmini02.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.srcmini02.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.srcmini02.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.srcmini02.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

输出:

带有ViewPager的Kotlin Android TabLayout
带有ViewPager的Kotlin Android TabLayout
带有ViewPager的Kotlin Android TabLayout
赞(0)
未经允许不得转载:srcmini » 带有ViewPager的Kotlin Android TabLayout

评论 抢沙发

评论前必须登录!