Android Tab

PagerTitleStrip：這個元件不能與使用者互動，只能指出目前的 page。

TabLayout：這個元件是要客製化時，可以使用。

PagerTitleStrip

要使用這個元件很簡單，在ViewPager設定adapter即可使用。

首先，先在View宣告ViewPager，接著把TitleStrip包在裡面。

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.v4.view.PagerTitleStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>

接著Create一個Adapter，注意到getPageTitle，它是用來顯示在Tab上面元件的名稱。

class CollectionPagerAdapter(fm: FragmentManager, var context: Context) : FragmentStatePagerAdapter(fm) {
    companion object {
        const val ARG_OBJECT = "object"
    }

    override fun getItem(position: Int): Fragment {
        var fragmentDemo = DemoFragmentTab()
        fragmentDemo.arguments = Bundle().apply {
            putInt(ARG_OBJECT, position + 1)
        }
        return fragmentDemo
    }

    override fun getPageTitle(position: Int): CharSequence? {
        return "OBJECT " + (position + 1)
    }

    override fun getCount(): Int = 4
}

PagerTitleActivity，不需要設定Strip。

private lateinit var cta:CollectionTitlePagerAdapter
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_pager_title)
    cta= CollectionTitlePagerAdapter(supportFragmentManager)
    viewPager.adapter=cta
}

TabLayout

客製化Tab可以用。

先看到layout檔，如果把TabLayout設定在ViewPager底下，那麼Tab就會顯示在ViewPager底下。

app:tabPaddingEnd=”0dp”
app:tabPaddingStart=”0dp”

這樣的話Tab與Tab之間就會沒間距。

看起來就像這樣：

<android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:background="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/pager"
    app:layout_constraintVertical_bias="1.0"
    app:tabIndicatorHeight="0dp"
    app:tabPaddingEnd="0dp"
    app:tabPaddingStart="0dp"
    app:tabSelectedTextColor="@color/colorPrimaryDark">
</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/tab"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"></android.support.v4.view.ViewPager>

Tab Activity，藉由把TabLayout的Tab拿出來設定自己的View，就是這裡讓你可以客製化Tab的View。

private lateinit var mCollectionPagerAdapter: CollectionPagerAdapter
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_tab)
    mCollectionPagerAdapter = CollectionPagerAdapter(supportFragmentManager, this)
    pager.adapter = mCollectionPagerAdapter
    tab.setupWithViewPager(pager)
    for (i in 0..(tab as TabLayout).tabCount - 1) {
        var tabItem = (tab as TabLayout).getTabAt(i)
        tabItem?.let {
            it.setCustomView(R.layout.tab_layout_item)
            if (i == 0) {
                it.customView?.setBackgroundColor(resources.getColor(android.R.color.holo_green_light))
            }
            it.customView?.let {
                var textView = it.findViewById<TextView>(R.id.textView)
                textView.text = i.toString()
            }
        }
    }
    tab.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
        override fun onTabReselected(tab: TabLayout.Tab?) {
        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
            tab?.customView?.setBackgroundColor(resources.getColor(android.R.color.white))
        }

        override fun onTabSelected(tab: TabLayout.Tab?) {
            tab?.customView?.setBackgroundColor(resources.getColor(android.R.color.holo_green_light))
        }
    })
}

GitHub