android来回切换layoit,Android中使用ViewPage2+TabLayout的实现底部导航切换
ViewPager2，一看名称就知道是我们Android中常用的ViewPager功能相似的控件，算是ViewPager的升级版。目前已经到稳定的2.1.0.0版，我们可以直接引入来使用了：
我们先来看看有哪些功能和使用上的变化：
1.Api的变动:
FragmentStateAdapter替换了原来的 FragmentStatePagerAdapter
RecyclerView.Adapter替换了原来的 PagerAdapter
registerOnPageChangeCallback替换了原来的 addPageChangeListener
2.新功能：
支持RTL布局
支持竖向滚动
完整支持notifyDataSetChanged
3.集成方式:本文用的是androidx
在App的build.gradle目录下导入:
implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'com.google.android.material:material:1.1.0'
4.使用，本文使用的kotlin方式，java方式很简单，这里就不写实例代码了.
MainActivity代码:
class MainActivity : AppCompatActivity() {
//标题
private val titles = arrayOf("首页", "知识", "导航", "项目")
private val fragmentList : MutableList= ArrayList()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initViews();
}
/**
* 初始化控件
*/
private fun initViews() {
//初始化fragment
fragmentList.add(HomeFragment())
fragmentList.add(KnowledgeFragment())
fragmentList.add(NavigationFragment())
fragmentList.add(ProjectFragment())
//初始化viewPage
viewPager!!.adapter = object:FragmentStateAdapter(this){
override fun getItemCount(): Int {
return fragmentList.size
}
override fun createFragment(position: Int): Fragment {
return fragmentList[position]
}
}
viewPager.offscreenPageLimit = 3
val tabLayoutMediator = TabLayoutMediator(
tab_layout,viewPager, TabLayoutMediator.TabConfigurationStrategy { tab: TabLayout.Tab, position: Int ->
tab.text = titles[position]
})
tabLayoutMediator.attach()
}
}
activity_main布局代码：
5.Fragment代码：
首页HomeFragment
/**
*@author: njb
*@date: 2020/3/4 0004 20:00
*@desc: 首页
*/
class HomeFragment : Fragment(){
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = LayoutInflater.from(context).inflate(R.layout.fm_home, null)
return view
}
}
知识 KnowledgeFragment
/**
*@author: njb
*@date: 2020/3/4 0004 20:01
*@desc: 知识
*/
class KnowledgeFragment :Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = LayoutInflater.from(context).inflate(R.layout.fm_knowledge, null)
return view
}
}
导航 NavicationFragment
/**
*@author: njb
*@date: 2020/3/4 0004 20:01
*@desc: 导航
*/
public class NavigationFragment :Fragment(){
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = LayoutInflater.from(context).inflate(R.layout.fm_navigation, null)
return view
}
}
项目 ProjectFragment
/**
*@author: njb
*@date: 2020/3/4 0004 20:01
*@desc: 项目
*/
public class ProjectFragment :Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = LayoutInflater.from(context).inflate(R.layout.fm_project, null)
return view
}
}
这里四个界面都一样，写的是入门级的小例子，所以没有具体布局，写一个就可以了
布局fm_home代码:
toolbar布局代码:
colors.xml代码:
#6200EE
#3700B3
#03DAC5
#FFFFFF
#e8e8e8
style代码：
6.完成的效果图如下:
最后给出例子的完整源码地址:https://gitee.com/jackning_admin/ViewPager2Demo，欢迎大家进行讨论，如有问题，及时更改.后面会逐步尝试各种新的api和用法.