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
输出:
评论前必须登录!
注册