Android Sliding Tab Example 示例

选项卡是一种常见的交互方式，我们可以使用 Design Support Library 来实现。

首先加入依赖：

compile "com.android.support:design:26.1.0"

项目中会使用 Toolbar，具体请参考 Android Toolbar Example 示例。

1. Create 3 Simple Fragment

我们打算使用 fragment 显示 tabs，三个 fragment 只有 TextView 显示的内容有区别，下面是其中一个 fragment 的定义和布局：

package me.xandeer.examples.slidingtab

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

import me.xandeer.examples.R

class TabFragment1 : Fragment() {

  override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                            savedInstanceState: Bundle?): View? {
    // Inflate the layout for this fragment
    return inflater!!.inflate(R.layout.fragment_tab_fragment1, container, false)
  }
}

<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="me.xandeer.examples.slidingtab.TabFragment1">

  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:theme="@style/slidingTab"
      android:text="@string/tab_1" />

</FrameLayout>

2. Define a View Pager Adapter

package me.xandeer.examples.slidingtab

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

class PagerAdapter(fm: FragmentManager, private var numOfTabs: Int): FragmentPagerAdapter(fm) {
  override fun getItem(position: Int): Fragment {
    return when (position) {
      0 -> TabFragment1()
      1 -> TabFragment2()
      2 -> TabFragment3()
      else -> TabFragment1()
    }
  }

  override fun getCount(): Int {
    return numOfTabs
  }
}

3. Add TabLayout and ViewPager

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:background="@color/white"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="me.xandeer.examples.slidingtab.SlidingTabActivity">

  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      app:title="@string/sliding_tab"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      app:navigationIcon="@drawable/ic_toolbar_back" />

  <LinearLayout
      android:id="@+id/container"
      android:orientation="vertical"
      android:visibility="invisible"
      android:background="@color/colorPrimaryDark"
      app:layout_constraintBottom_toBottomOf="parent"
      android:layout_marginBottom="0dp"
      android:layout_width="match_parent"
      android:layout_height="240dp">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:background="@color/colorPrimary"
        android:id="@+id/pager"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

  </LinearLayout>

</android.support.constraint.ConstraintLayout>

4. Initialize Tab and Pager

package me.xandeer.examples.slidingtab

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.design.widget.TabLayout
import android.util.Log
import android.view.Menu
import android.view.MenuItem
import android.view.View
import kotlinx.android.synthetic.main.activity_sliding_tab.*
import me.xandeer.examples.BaseActivity
import me.xandeer.examples.R

class SlidingTabActivity : AppCompatActivity(), BaseActivity {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_sliding_tab)
    Log.d(javaClass.simpleName, "Activity ${javaClass.simpleName} created.")

    initToolbar()
    initTab()
    initPager()
  }

  private fun initToolbar() {
    setSupportActionBar(toolbar)

    toolbar.setNavigationOnClickListener {
      this.finish()
    }
  }

  private fun initTab() {
    tab_layout.addTab(tab_layout.newTab().setText(getString(R.string.tab_1)))
    tab_layout.addTab(tab_layout.newTab().setText(getString(R.string.tab_2)))
    tab_layout.addTab(tab_layout.newTab().setText(getString(R.string.tab_3)))

    tab_layout.addOnTabSelectedListener(OnTabSelectedListener())
  }

  inner class OnTabSelectedListener: TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab) {
      pager.currentItem = tab.position
    }

    override fun onTabReselected(tab: TabLayout.Tab) {
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
    }
  }

  private fun initPager() {
    pager.adapter = PagerAdapter(supportFragmentManager, tab_layout.tabCount)
    pager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tab_layout))
  }

  override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    toolbar.inflateMenu(R.menu.mainmenu)
    return super.onCreateOptionsMenu(menu)
  }

  override fun onOptionsItemSelected(item: MenuItem): Boolean {
    if (item.itemId == R.id.action_format) {
      container.visibility = when (container.visibility) {
        View.VISIBLE -> View.INVISIBLE
        else -> View.VISIBLE
      }
    }
    return super.onOptionsItemSelected(item)
  }
}

5. Build, compile and run

sliding-tab.gif

6. Code Repository

Github: Android Example