Kotlin 中的 Android 材质选项卡

在 Android 中， TabLayout是设计支持库中引入的一个新元素。它提供水平布局以在屏幕上显示选项卡。我们可以使用选项卡在单个屏幕上显示更多屏幕。我们可以在标签之间快速滑动。 TabLayout 基本上是需要添加到我们的布局（XML）中以创建滑动选项卡的 ViewClass。

我们将在本文中构建什么？

在本文中，我们将开发一个具有三个选项卡的应用程序，用户可以像在 WhatsApp 中一样从一个选项卡滑动到另一个选项卡。为此，我们将使用TabLayout 。下面给出了一个示例 GIF，以了解我们将在本文中做什么。

分步实施

第 1 步：创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。请注意，选择Kotlin作为编程语言。

第二步：添加依赖

添加依赖项以访问所有材料组件，然后单击同步。

   implementation ‘com.google.android.material:material:1.4.0’

第三步：设置主题和工具栏

导航到res > values > color.xml，设置一些鲜艳的颜色。为颜色添加以下脚本代码。

XML

    #0F9D58
    #056008
    #E39D36
  

现在，从屏幕上删除默认工具栏，我们将制作一个自定义工具栏。导航到res > values > styles.xml （对于最新版本的 android studio， res > values > themes > theme.xml ）并更改 parentTheme 。

XML

第 4 步：使用 activity_main 布局

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件中。下面是activity_main.xml文件的代码。

第 5 步：设置三个选项卡

我们需要创建三个片段类和它们各自的三个布局。这是第一个片段的代码，即GeeksFragment.kt

科特林

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.ViewGroup
  
class GeeksFragment : Fragment() {
    // inflate the layout
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ) =
        inflater.inflate(R.layout.fragment_geeks, container, false)!!
}

对应的布局， fragment_geeks.xml

第二个片段的代码，即CodeFragment.kt

科特林

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.ViewGroup
  
class CodeFragment : Fragment() {
    // inflate the layout
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ) =
        inflater.inflate(R.layout.fragment_code, container, false)!!
}

对应的布局， fragment_code.xml

第三个片段的代码，即LeetFragment.kt

科特林

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.ViewGroup
  
class LeetFragment : Fragment() {
    // inflate the layout
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ) =
        inflater.inflate(R.layout.fragment_leet, container, false)!!
}

对应的布局， fragment_leet.xml

第 6 步：创建一个 ViewPagerAdapter 类

要将我们所有的片段与 ViewPager 连接起来，我们需要一个适配器类。我们将传递片段类的实例列表及其标题以显示在选项卡上。下面是ViewPagerAdapter.kt的代码，在代码中添加了注释，以便更详细地了解代码。

科特林

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
  
class ViewPagerAdapter(supportFragmentManager: FragmentManager) :
    FragmentStatePagerAdapter(supportFragmentManager) {
  
    // declare arrayList to contain fragments and its title
    private val mFragmentList = ArrayList()
    private val mFragmentTitleList = ArrayList()
  
    override fun getItem(position: Int): Fragment {
        // return a particular fragment page
        return mFragmentList[position]
    }
  
    override fun getCount(): Int {
        // return the number of tabs
        return mFragmentList.size
    }
  
    override fun getPageTitle(position: Int): CharSequence{
        // return title of the tab
        return mFragmentTitleList[position]
    }
  
    fun addFragment(fragment: Fragment, title: String) {
        // add each fragment and its title to the array list
        mFragmentList.add(fragment)
        mFragmentTitleList.add(title)
    }
}

步骤 7：使用 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

科特林

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.widget.Toolbar
import androidx.viewpager.widget.ViewPager
import com.google.android.material.tabs.TabLayout
  
class MainActivity : AppCompatActivity() {
  
    private lateinit var pager: ViewPager // creating object of ViewPager
    private lateinit var tab: TabLayout  // creating object of TabLayout
    private lateinit var bar: Toolbar    // creating object of ToolBar
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // set the references of the declared objects above
        pager = findViewById(R.id.viewPager)
        tab = findViewById(R.id.tabs)
        bar = findViewById(R.id.toolbar)
  
        // To make our toolbar show the application 
          // we need to give it to the ActionBar
        setSupportActionBar(bar)
  
        // Initializing the ViewPagerAdapter
        val adapter = ViewPagerAdapter(supportFragmentManager)
  
        // add fragment to the list
        adapter.addFragment(GeeksFragment(), "GeeksForGeeks")
        adapter.addFragment(CodeFragment(), "Code Chef")
        adapter.addFragment(LeetFragment(), "Leet Code")
  
        // Adding the Adapter to the ViewPager
        pager.adapter = adapter
        
        // bind the viewPager with the TabLayout.
        tab.setupWithViewPager(pager)
    }
}

现在，运行应用程序

输出：

源代码：点击这里

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗？

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！