Android – Kotlin – TabLayout & AppBarLayout

14 Temmuz 202012 Temmuz 2020 umiitkose

Merhaba Arkadaşlar,

Bugünki dersimizde Tablayout ve AppBarLayout birleşimine değineceğiz. içerisinde basit bir title içeren bir toolbar ‘da ekleyeceğiz. Ve sonrasında bir viewpager ekleyerek sayfalar arası geçisi sağlayacağız.

Şimdi neler olacak ?

1 -> Toolbar title atama

2 -> Tablayout ekleme ve Adapter yazma

3 -> Viewpager ‘a adapteri verme

TabLayout -> Sizin üst başlıktan rahatça gezebilmenize imkan veren yapıdır Örnek olarak Milliyet ‘in yapısı gibi olabilir.

Şimdi biz neler yapıcaz ?

Bizde buna benzer bir yapı kuracağız ve paylaşacağız. Şimdi ilk olarak yeni bir proje oluşturalım.

öncelikle xml layoutumuz aşağıdaki gibi olacak.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="//schemas.android.com/apk/res/android"
    xmlns:app="//schemas.android.com/apk/res-auto"
    xmlns:tools="//schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayNewCategory"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="auto"
            app:tabTextColor="@color/colorAccent">

    </com.google.android.material.appbar.AppBarLayout>


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vpNewCategory"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

</LinearLayout>

Burada bir tane AppBarlayout ‘un içerisine Toolbar ve TabLayout ekledik.

AppBarLayout -> Toolbar ‘dan gelişmiş özellikleri olan özel bir araç çubuğudur.

Detaylı Bilgi ve Farkı : //www.it-swarm.asia/tr/android/toolbar-vs-appbarlayout-arasindaki-fark-nedir/1054980279/

Şimdi Biz tasarımımızı yaptık. Sıra geldi Kodlamaya..

MainActivity :

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.umiitkose.milliyetappclone.R
import com.umiitkose.milliyetappclone.adapter.CategoryNewsAdapter
import com.umiitkose.milliyetappclone.mock.MockData
import com.umiitkose.milliyetappclone.util.extGetDrawable
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        init()
    }


    private fun init() {
        vpNewCategory.adapter =
            CategoryNewsAdapter(
                supportFragmentManager,
                MockData.getNewsCategoryFragment()
            )
        tabLayNewCategory.setupWithViewPager(vpNewCategory)

      //  toolbar.logo = extGetDrawable(R.drawable.milliyet_logo_white) --> Logo Gelmesini isterseniz.
//toolbar.title = "Title"

    }
}

Logo eklemek için utils class ‘ına aşağıdaki kodu ekleyip alabilirsiniz.


infix fun Context.extGetDrawable(@DrawableRes drawableId: Int): Drawable =
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        resources.getDrawable(drawableId, theme)
    } else {
        resources.getDrawable(drawableId)
    }

init metodunda syntetic olarak viewPager ‘ı implemente ettik. sonrasında buna adapter ataması yaptık. CategoryNewsAdapter diye içerisine FragmentManager ve Fragment List Model parametrelerini alan adapter ‘ü atadık. Sonrasında bu viewPager ‘ı tablayout ‘a atadık. BottomAppBar ‘da bu özellik yoktur. Uygulama geliştirirken ona göe karar verin. Artık anasayfa bu kadar.

Şimdi Adapterimize bakalım..

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
import com.umiitkose.milliyetappclone.model.FragmentModel

class CategoryNewsAdapter(
    fm: FragmentManager,
    private val newFragmentList: List<FragmentModel>
) : FragmentStatePagerAdapter(
    fm,
    BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT
) {

    override fun getItem(position: Int): Fragment = newFragmentList[position].fragment

    override fun getCount(): Int = newFragmentList.size

    override fun getPageTitle(position: Int): CharSequence? =
        newFragmentList[position].fragmentTitle

}

İçerisine FragmentManager ve List olarak FragmentModel alan bir class yazdık. Burada size göstermek istediğim bir app yapıyorsunuz ve 10 tane fragment atamamıza gerek yok. Çünkü app ‘in içeriği aynı. Bu yüzden böyle bir geliştirme yaptık. FragmentModel class ‘ımız içerisinde fragment, title ve icon bulunduran bir data class ‘tır.

data class FragmentModel(
    val icon: Int,
    val fragmentTitle: String,
    val fragment: Fragment
)

Misal elimizde birden fazla fragment olsaydı yalnız FragmentManager alan ve içerisine ilgili fragment ‘i çağıran bir yapı kurabilirsiniz.

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter

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

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> {
                FirstFragment()
            }
            1 -> SecondFragment()
            else -> {
                return ThirdFragment()
            }
        }
    }

    override fun getCount(): Int {
        return 3
    }

    override fun getPageTitle(position: Int): CharSequence {
        return when (position) {
            0 -> "First Tab"
            1 -> "Second Tab"
            else -> {
                return "Third Tab"
            }
        }
    }
}

Şimdi Adapter Yazdık. Şimdi sıra Fragment Class ‘ını da yazmakta. Tek bir fragment var fakat yukarıdaki gibi birden fazla içinde yapabilirsiniz. Fragment ‘in içerisi boş bir layout ‘unu oluşturmayı unutmayın.

import androidx.fragment.app.Fragment
import com.umiitkose.milliyetappclone.R

/**
 * A simple [Fragment] subclass.
 */class NewsFragment : Fragment(R.layout.fragment_news) {

 
}

Oluşturduğumuz bu fragment ‘i MockData class ‘ı ile MainActivity ‘de TabLayout içerisine veriyoruz.


object MockData {

    fun getNewsCategoryFragment(): List<FragmentModel> {
        val fragmentList = ArrayList<FragmentModel>()

        repeat(getTitleList().size) { position ->
            val newsFragment = NewsFragment()

            val fragmentModel = FragmentModel(
                position,
                getTitleList()[position],
                newsFragment
            )

            fragmentList.add(fragmentModel)
        }

        return fragmentList
    }

    private fun getTitleList(): List<String> {
        val titleList = ArrayList<String>()
        titleList.add("ANASAYFA")
        titleList.add("YAZARLAR")
        titleList.add("GÜNDEM")
        titleList.add("EKONOMİ")
        titleList.add("SPOR")
        titleList.add("CADDE")
        titleList.add("EĞİTİM")
        titleList.add("TEKNOLOJİ")
        return titleList
    }