Как создать TabLayout с FrameLayout в Kotlin Android - пример макета вкладок

Android TabLayout — это макет, который используется для создания горизонтальных вкладок. В руководстве Android TabLayout с ViewPager мы создали вкладки TabLayout с помощью метода newTab(), но вкладки также реализуются с помощью android.support.design.widget.TabItem в действии макета.

Заголовок и значок вкладок предоставляются путем реализации атрибутов text и icon соответственно.

Чтобы предоставить пространство для каждой вкладки TabLayout, мы можем использовать свойство FrameLayout и создать Kotlin Android TabLayout. FrameLayout предназначен для покрытия области экрана для отображения одного элемента.

Содержание

Пример Kotlin Android TabLayout с FrameLayout
build.gradle
Activity_main.xml
strings.xml
colors.xml
MainActivity.kt
fragment_java.xml
MainActivity.kt
fragment_android.xml
AndroidFragment.kt
fragment_kotlin.xml
KotlinFragment.kt
fragment_php.xml
PhpFragment.kt
fragment_python.xml
PythonFragment.kt

Пример Kotlin Android TabLayout с FrameLayout

В этом примере мы создадим TabLayout, используя TabItem с FrameLayout.

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

Добавьте TabLayout, TabItem и FrameLayout в файл макета activity_main.xml.

<?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.javatpoint.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

    Kotlin TabLayout with FrameLayout
    Java fragment
    Android fragment
    Kotlin fragment
    Php fragment
    Python fragment

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. Вызов прослушивателя addOnTabSelectedListener() TabLayout и переопределение его методов.

package example.javatpoint.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(R.id.tabLayout)
        frameLayout = findViewById(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

 <?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

package example.javatpoint.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.javatpoint.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.javatpoint.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.javatpoint.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.javatpoint.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.javatpoint.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.javatpoint.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.javatpoint.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.javatpoint.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

Выход:

Android TabLayout с FrameLayout
Вывод