آموزش 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>

فرگمنتی به نام 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
    }
}

در بالا صفحه اول فرگمنت ما ایجاد خواهد شد و یک متن نمایش داده خواهد شد.
همین کار را دوباره تکرار کرده و یک فرگمنت به نام 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
    }
}

فرگمنت بالا همانند فرگمنت قبلی است و تفاوت چندانی ندارد.
فرگمنتی به نام 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
    }
}

باید با استفاده از یک آداپتور از کلاس 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
    }
}

در لایه ی 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>

و در نهایت باید کدهای زیر را در 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 MainActivity : 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 ایجاد می شوند.
 
این آموزش هم به پایان رسید.
موفق و پیروز باشید.

مطالعه بیشتر