【移动应用开发技术】Android中基于TabLayout+ViewPager如何实现标签卡效果

【移动应用开发技术】Android中基于TabLayout+ViewPager如何实现标签卡效果

/upload/information/20200623/125/124751.png1、布局文件<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

xmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/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、代码实现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()

//先将各个fragment加入到viewpager中

initTabLayout();

//初始化tablayout

}

fun

initTabLayout(){

tab.setupWithViewPager(view_pager)

tab.setTabsFromPagerAdapter(adapter)

tab.tabMode

=

TabLayout.MODE_FIXED

tab.getTabAt(0)?.setText("第一页")

tab.getTabAt(1)?.setText("第二页")

}

fun

init