آموزش Tablayout به زبان کاتلین در اندروید

سلام دوستان همشگی در این سری از آموزش برنامه نویسی اندروید به آموزش Tablayout به زبان کاتلین در اندروید می پردازیم در این آموزش با استفاده از Fragment فرزند های خود را تعیین خواهیم کرد از Tablayout به منظور بخش بندی صفحه اصلی به چند بخش می توان استفاده کرد در ادامه با ما همراه باشید تا نحوه پیاده سازی Tablayout به زبان کاتلین در اندروید را یاد بگیرید.
بخش هایی که در ادامه ساخته خواهند شد و با آنها کار خواهیم داشت عبارتند از :

fragment_layout.xml
FragmentOne
FragmentTwo
FragmentThree
ViewPager Adapter
activity_main.xml
MainActivity
AndroidManifest.xml

در ادامه کد هر بخش را قرار خواهیم داد.

fragment_layout.xml در این بخش تمامی فرگمنت های دیگر قرار خواهند گرفت در واقع صفحه مربوط به هر فرگمنت از این بخش استفاده خواهد کرد کد های زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rel_main"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_name"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/rel_main"

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv_name"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

</RelativeLayout>

فرگمنتی به نام FragmentOne.kt ایجاد کرده و کدهای زیر را در آن قرار دهید.

package com.programchi.tabexample
import android.graphics.Color
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.RelativeLayout
import android.widget.TextView
class FragmentOne : Fragment() {
    var tv_name: TextView? = null
    var rel_main: RelativeLayout? = null
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view: View? = inflater!!.inflate(R.layout.fragment_layout, container, false)
        rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout
        rel_main?.setBackgroundColor(Color.CYAN)
        tv_name = view?.findViewById<TextView>(R.id.tv_name) as TextView
        tv_name?.text = "Programchi First Tab"
        return view
    }
}

package com.programchi.tabexample

import android.graphics.Color

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

import android.widget.TextView

class FragmentOne : Fragment() {

var tv_name: TextView? = null

var rel_main: RelativeLayout? = null

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {

var view: View? = inflater!!.inflate(R.layout.fragment_layout, container, false)

rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout

rel_main?.setBackgroundColor(Color.CYAN)

tv_name = view?.findViewById<TextView>(R.id.tv_name) as TextView

tv_name?.text = "Programchi First Tab"

return view

}

در بالا صفحه اول فرگمنت ما ایجاد خواهد شد و یک متن نمایش داده خواهد شد.
همین کار را دوباره تکرار کرده و یک فرگمنت به نام FragmentTwo.kt ایجاد می کنید و کدهای زیر را قرار دهید.

package com.programchi.tabexample
import android.annotation.SuppressLint
import android.graphics.Color
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.RelativeLayout
import android.widget.TextView
class FragmentTwo : Fragment() {
    var tv_name: TextView? = null
    var rel_main: RelativeLayout? = null
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view:View?=inflater!!.inflate(R.layout.fragment_layout,container,false)
        rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout
        rel_main?.setBackgroundColor(Color.LTGRAY)
        tv_name=view?.findViewById<TextView>(R.id.tv_name) as TextView
        tv_name?.text="Programchi Second Tab"
        return view
    }
}

package com.programchi.tabexample

import android.annotation.SuppressLint

import android.graphics.Color

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

import android.widget.TextView

class FragmentTwo : Fragment() {

var tv_name: TextView? = null

var rel_main: RelativeLayout? = null

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {

var view:View?=inflater!!.inflate(R.layout.fragment_layout,container,false)

rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout

rel_main?.setBackgroundColor(Color.LTGRAY)

tv_name=view?.findViewById<TextView>(R.id.tv_name) as TextView

tv_name?.text="Programchi Second Tab"

return view

}

فرگمنت بالا همانند فرگمنت قبلی است و تفاوت چندانی ندارد.
فرگمنتی به نام FragmentThree.Kt ایجاد کرده و کدهای زیر را در آن قرار دهید.

package com.programchi.tabexample
import android.annotation.SuppressLint
import android.graphics.Color
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.RelativeLayout
import android.widget.TextView
class FragmentThree : Fragment() {
    var tv_name: TextView? = null
    var rel_main: RelativeLayout? = null
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view:View?=inflater!!.inflate(R.layout.fragment_layout,container,false)
        rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout
        rel_main?.setBackgroundColor(Color.YELLOW)
        tv_name=view?.findViewById<TextView>(R.id.tv_name) as TextView
        tv_name?.text="Programchi Third Tab"
        return view
    }
}

package com.programchi.tabexample

import android.annotation.SuppressLint

import android.graphics.Color

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

import android.widget.TextView

class FragmentThree : Fragment() {

var tv_name: TextView? = null

var rel_main: RelativeLayout? = null

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {

var view:View?=inflater!!.inflate(R.layout.fragment_layout,container,false)

rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout

rel_main?.setBackgroundColor(Color.YELLOW)

tv_name=view?.findViewById<TextView>(R.id.tv_name) as TextView

tv_name?.text="Programchi Third Tab"

return view

}

باید با استفاده از یک آداپتور از کلاس FragmentPagerAdapter فرگمنت های خود را برای مدیریت و قرار دادن در Viewpager اماده کنیم برای اینکار یک کلاس به نام ViewPagerAdapter.kt ایجاد کرده و کدهای زیر را در آن قرار دهید.

package com.progrmchi.tabexample
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter
class ViewPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
    override fun getItem(position: Int): Fragment? {
        var fragment: Fragment? = null
        if (position == 0) {
            fragment = FragmentOne()
        } else if (position == 1) {
            fragment = FragmentTwo()
        } else if (position == 2) {
            fragment = FragmentThree()
        }
        return fragment
    }
    override fun getCount(): Int {
        return 3
    }
    override fun getPageTitle(position: Int): CharSequence? {
        var title: String? = null
        if (position == 0) {
            title = "First"
        } else if (position == 1) {
            title = "Second"
        } else if (position == 2) {
            title = "Third"
        }
        return title
    }
}

package com.progrmchi.tabexample

import android.support.v4.app.Fragment

import android.support.v4.app.FragmentManager

import android.support.v4.app.FragmentPagerAdapter

class ViewPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

override fun getItem(position: Int): Fragment? {

var fragment: Fragment? = null

if (position == 0) {

fragment = FragmentOne()

} else if (position == 1) {

fragment = FragmentTwo()

} else if (position == 2) {

fragment = FragmentThree()

}

return fragment

}

override fun getCount(): Int {

return 3

}

override fun getPageTitle(position: Int): CharSequence? {

var title: String? = null

if (position == 0) {

title = "First"

} else if (position == 1) {

title = "Second"

} else if (position == 2) {

title = "Third"

}

return title

}

در لایه ی activity_main.xml یا صحفه اصلی باید یک viewpager همانند زیر قرار گیرد.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabIndicatorColor="#1c1c1d"
    />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_below="@+id/tab_layout"/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="40dp"

app:tabGravity="fill"

app:tabMode="fixed"

app:tabSelectedTextColor="@color/colorAccent"

app:tabIndicatorColor="#1c1c1d"

<android.support.v4.view.ViewPager

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:layout_below="@+id/tab_layout"/>

</RelativeLayout>

و در نهایت باید کدهای زیر را در MainActivity.kt قرار دهید.

package com.w3adda.tabexample
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_tab_layout.*
class <strong>MainActivity </strong>: AppCompatActivity(){
  internal lateinit var viewpageradapter:ViewPagerAdapter //Declare PagerAdapter
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        viewpageradapter= ViewPagerAdapter(supportFragmentManager)
 this.viewPager.adapter=viewpageradapter  //Binding PagerAdapter with ViewPager
 this.tab_layout.setupWithViewPager(this.viewPager) //Binding ViewPager with TabLayout
    }
}

package com.w3adda.tabexample

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import kotlinx.android.synthetic.main.activity_tab_layout.*

class <strong>MainActivity </strong>: AppCompatActivity(){

internal lateinit var viewpageradapter:ViewPagerAdapter //Declare PagerAdapter

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

viewpageradapter= ViewPagerAdapter(supportFragmentManager)

this.viewPager.adapter=viewpageradapter //Binding PagerAdapter with ViewPager

this.tab_layout.setupWithViewPager(this.viewPager) //Binding ViewPager with TabLayout

}

در واقع در بالا آداپتوری که ساختیم را به viewpager معرفی می کنیم و تب های مربوط به Tablayout ایجاد می شوند.

این آموزش هم به پایان رسید.
موفق و پیروز باشید.

مطالعه بیشتر