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.srcmini02.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.srcmini02.com.kotlintablayoutwithframelayout
import 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.FrameLayout
class 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.srcmini02.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.srcmini02.com.kotlintablayoutwithframelayout
import 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.srcmini02.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.srcmini02.com.kotlintablayoutwithframelayout
import 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.srcmini02.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.srcmini02.com.kotlintablayoutwithframelayout
import 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.srcmini02.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.srcmini02.com.kotlintablayoutwithframelayout
import 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.srcmini02.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.srcmini02.com.kotlintablayoutwithframelayout
import 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
输出:
评论前必须登录!
注册