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)
  }
}

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

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