Android 中基于TabLayout+ViewPager實(shí)現(xiàn)標(biāo)簽卡效果

更新時(shí)間：2017年12月22日 08:51:27 作者：程小白

這篇文章主要介紹了Android 中基于TabLayout+ViewPager實(shí)現(xiàn)標(biāo)簽卡效果,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下

代碼已經(jīng)上傳至Github：https://github.com/YanYoJun/ViewPagerDemo

先看效果

1、布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context="com.plbear.yyj.myapplication.MainActivity">
  <android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    app:tabGravity="fill"
    app:tabIndicatorColor="#4978ef"
    app:tabIndicatorHeight="2dp"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="#4978ef"
    app:tabTextColor="#222222"></android.support.design.widget.TabLayout>
  <android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
</LinearLayout>

2、代碼實(shí)現(xiàn)

package com.plbear.yyj.myapplication
import android.os.Bundle
import android.support.design.widget.Snackbar
import android.support.design.widget.TabLayout
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentPagerAdapter
import android.support.v7.app.AppCompatActivity
import android.view.Menu
import android.view.MenuItem
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
  var mFragList = ArrayList<Fragment>()
  var adapter = object:FragmentPagerAdapter(supportFragmentManager){
    override fun getItem(position: Int): Fragment {
      return mFragList[position]
    }
    override fun getCount(): Int {
      return 2
    }
  }
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    initViewPager() //先將各個(gè)fragment加入到viewpager中
    initTabLayout(); //初始化tablayout
  }
  fun initTabLayout(){
    tab.setupWithViewPager(view_pager)
    tab.setTabsFromPagerAdapter(adapter)
    tab.tabMode = TabLayout.MODE_FIXED
    tab.getTabAt(0)?.setText("第一頁(yè)")
    tab.getTabAt(1)?.setText("第二頁(yè)")
  }
  fun initViewPager(){
    mFragList.add(Fragment1())
    mFragList.add(Fragment2())
    view_pager.adapter = adapter
  }
}

這里需要注意點(diǎn)，需要先將setupWithViewPager和tablayout綁定起來(lái)，然后再初始化tab的標(biāo)簽頁(yè)，這個(gè)非常重要，否則會(huì)造成tablayout中的文字顯示不出來(lái)。

總結(jié)

以上所述是小編給大家介紹的Android 中基于TabLayout+ViewPager實(shí)現(xiàn)標(biāo)簽卡效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: