先看效果
未命名.gif
左右两边分别为两个button，当然你可以替换成其他的你想要的东西。
这是fragment+viewpage+tablayout的效果。
如果是ragment+viewpage 的话就没养上面的tablayout了
fragment+viewpage
界面
activity_main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/main_linear"
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:orientation="vertical"
tools:context=".MainActivity"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>
layout2.xml
依葫芦画瓢画三个
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是第二个页面"/>
</LinearLayout>
BaseFragment
package com.gala.gala
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
abstract class BaseFragment: Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(getLayoutResId(), null)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
init()
}
open fun init() {
}
abstract fun getLayoutResId(): Int
}
Fragment1、2、3
依葫芦画瓢画四个
package com.gala.gala.fragment
import com.gala.gala.BaseFragment
import com.gala.gala.R
import kotlinx.android.synthetic.main.layout2.*
class Fragment2: BaseFragment() {
override fun getLayoutResId(): Int {
return R.layout.layout2
}
override fun init() {
super.init()
text_view2.text = "呵呵"
}
}
FragmentAdapter适配器
package com.gala.gala.adapter
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentStatePagerAdapter
import android.view.ViewGroup
class FragmentAdapter(fm: FragmentManager, private val fragmentList: List<Fragment>//数据源
, private val titles: List<String>//标题
) : FragmentStatePagerAdapter(fm) {
//相应页卡设定相应的Fragment
override fun getItem(arg0: Int): Fragment {
return fragmentList[arg0]
}
//数据源的数目
override fun getCount(): Int {
return fragmentList.size
}
/*
* 对于FragmentStatePagerAdapter，它的销毁和实例方法，即
* destroyItem和instantiateItem方法保持默认即可
*/
override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
super.destroyItem(container, position, `object`)
}
override fun instantiateItem(arg0: ViewGroup, arg1: Int): Any {
return super.instantiateItem(arg0, arg1)
}
//设定标题
override fun getPageTitle(position: Int): CharSequence? {
return titles[position]
}
}
mainActivity
package com.gala.gala
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.view.PagerTabStrip
import android.support.v4.view.ViewPager
import android.widget.Toast
import com.gala.gala.adapter.FragmentAdapter
import com.gala.gala.adapter.TabLayoutAdapter
import com.gala.gala.fragment.Fragment1
import com.gala.gala.fragment.Fragment2
import com.gala.gala.fragment.Fragment3
import android.support.design.widget.TabLayout
class MainActivity : AppCompatActivity(), ViewPager.OnPageChangeListener {
private val fragmentList = ArrayList<android.support.v4.app.Fragment>()
lateinit var fragmentAdapter: FragmentAdapter
var titles = ArrayList<String>()
lateinit var pagerTitle: PagerTabStrip
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val pager: ViewPager = findViewById(R.id.view_pager)
val tabLayout: TabLayout = findViewById(R.id.tab_layout)
pager.addOnPageChangeListener(this)
val fragment1 by lazy { Fragment1() }
val fragment2 by lazy { Fragment2() }
val fragment3 by lazy { Fragment3() }
fragmentList.add(fragment1)
fragmentList.add(fragment2)
fragmentList.add(fragment3)
titles.add("第一个页面")
titles.add("第二个页面")
titles.add("第三个页面")
//这里title不会显示，其实可以不加
fragmentAdapter = FragmentAdapter(supportFragmentManager, fragmentList, titles)
pager.adapter = fragmentAdapter
}
override fun onPageScrollStateChanged(p0: Int) {
}
override fun onPageScrolled(p0: Int, p1: Float, p2: Int) {
Toast.makeText(this, "这是第${p0+1}个界面", Toast.LENGTH_SHORT).show()
}
override fun onPageSelected(p0: Int) {
Toast.makeText(this, "这是第${p0+1}个界面", Toast.LENGTH_SHORT).show()
}
}
fragment+viewpage+tablayout
和上面三个地方不同。剩下的依葫芦画瓢
安装MaterialUI Design
根据自己的sdk版本来
implementation 'com.android.support:design:26.2.0'
activity_main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/main_linear"
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:orientation="vertical"
tools:context=".MainActivity"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:orientation="horizontal">
<Button
android:layout_marginStart="8dp"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:text="Bu" />
<LinearLayout
android:layout_width="220dp"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp" />
</LinearLayout>
<Button
android:id="@+id/button"
android:layout_width="50dp"
android:layout_marginStart="8dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_gravity="right"
android:text="Bu" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>
TabLayoutAdapter
package com.gala.gala.adapter
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter
class TabLayoutAdapter(fm: FragmentManager, private val fragmentList: List<Fragment>, private val listTitle: List<String>): FragmentPagerAdapter(fm) {
override fun getItem(position: Int): Fragment {
return fragmentList[position]
}
override fun getCount(): Int = listTitle.size
override fun getPageTitle(position: Int): CharSequence? {
return listTitle[position]
}
}
MainActivity
package com.gala.gala
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.view.PagerTabStrip
import android.support.v4.view.ViewPager
import android.widget.Toast
import com.gala.gala.adapter.FragmentAdapter
import com.gala.gala.adapter.TabLayoutAdapter
import com.gala.gala.fragment.Fragment1
import com.gala.gala.fragment.Fragment2
import com.gala.gala.fragment.Fragment3
import android.support.design.widget.TabLayout
class MainActivity : AppCompatActivity(), ViewPager.OnPageChangeListener {
private val fragmentList = ArrayList<android.support.v4.app.Fragment>()
lateinit var fragmentAdapter: FragmentAdapter
var titles = ArrayList<String>()
lateinit var pagerTitle: PagerTabStrip
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val pager: ViewPager = findViewById(R.id.view_pager)
val tabLayout: TabLayout = findViewById(R.id.tab_layout)
pager.addOnPageChangeListener(this)
val fragment1 by lazy { Fragment1() }
val fragment2 by lazy { Fragment2() }
val fragment3 by lazy { Fragment3() }
fragmentList.add(fragment1)
fragmentList.add(fragment2)
fragmentList.add(fragment3)
titles.add("第一个页面")
titles.add("第二个页面")
titles.add("第三个页面")
// fragmentAdapter = FragmentAdapter(supportFragmentManager, fragmentList, titles)
// pager.adapter = fragmentAdapter
pager.adapter = TabLayoutAdapter(supportFragmentManager, fragmentList, titles)
tabLayout.setupWithViewPager(pager)
}
override fun onPageScrollStateChanged(p0: Int) {
}
override fun onPageScrolled(p0: Int, p1: Float, p2: Int) {
Toast.makeText(this, "这是第${p0+1}个界面", Toast.LENGTH_SHORT).show()
}
override fun onPageSelected(p0: Int) {
Toast.makeText(this, "这是第${p0+1}个界面", Toast.LENGTH_SHORT).show()
}
}
ok 这样我们就能得到了
