Kotlin使用Viewpager2+Fragment+BottomNavigationView实现底部菜单栏的切换模块的样式。
效果图:
实现步骤:
1.首先在app的builde文件中引用ViewPager2
implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'
2.添加首页的布局xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager2.widget.ViewPager2
android:id="@ id/mainViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@ id/navigationView" />
<com.谷歌.android.material.bottomnavigation.BottomNavigationView
android:id="@ id/navigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FFFFFF" />
</RelativeLayout>
3.创建home Activity页面
package com.example.tasklayoutdemo
import android.content.Context
import android.content.Intent
import androidx.fragment.app.Fragment
import androidx.viewpager2.widget.ViewPager2
import com.example.tasklayoutdemo.base.BaseAppActivity
import com.example.tasklayoutdemo.fragment.*
import com.谷歌.android.material.bottomnavigation.LabelVisibilityMode
import kotlinx.android.synthetic.main.home_activity.*
class Home : BaseAppActivity() {
companion object {
fun startHomeActivity(context: Context) {
context.startActivity(Intent(context, Home::class.java))
}
//传递参数
fun startHomeActivity2(
context: Context,
userid: String,
token: String
) {
context.startActivity(Intent(context, Home::class.java).apply {
putExtra("UserId", userid)
putExtra("Token", token)
})
}
}
override fun getLayout(): Int {
return R.layout.home_activity
}
override fun initView() {
}
override fun initDate() {
val fragmentArr = ArrayList<Fragment>()
fragmentArr.add(ShoeYeFragment.instance)
fragmentArr.add(InfoFragment.instance)
fragmentArr.add(FindFragment.instance)
fragmentArr.add(MineFragment.instance)
navigationView.menu.add(0, 0, 1, "首页").setIcon(R.drawable.tab_1)
navigationView.menu.add(0, 1, 1, "消息").setIcon(R.drawable.tab_2)
navigationView.menu.add(0, 2, 1, "园地").setIcon(R.drawable.tab_4)
navigationView.menu.add(0, 3, 1, "我的").setIcon(R.drawable.tab_3)
/**
* 否禁止用户滑动页面
* */
mainViewPager.isUserInputEnabled = false
/**
* 设置ViewPager2的滑动监听事件
* isUserInputEnabled = true 时
* */
mainViewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
//设置导航栏选中位置
navigationView.menu.getItem(position).setChecked(true)
}
})
mainViewPager.adapter = PagerAdapter(this, fragmentArr)
navigationView.labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_LABELED
/**
* 设置导航栏菜单项Item选中监听
* */
navigationView.setOnNavigationItemSelectedListener {
mainViewPager.currentItem = it.itemId
true
}
}
}
4.创建对应的Fragment页面(示例中需创建四个,我贴出来一个代码,其他的一样)
package com.example.tasklayoutdemo.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.tasklayoutdemo.R
import kotlinx.android.synthetic.main.shouye_fragment.*
class ShoeYeFragment : Fragment() {
companion object {
val instance: ShoeYeFragment by lazy(mode = LazyThreadSafetyMode.SYNCHRONIZED) {
ShoeYeFragment()
}
}
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.shouye_fragment, container, false)
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
tv_content.text = "我是Fragment,首页...."
}
}
Fragment对应布局文件
........
5.创建 PagerAdapter
package com.example.tasklayoutdemo.fragment
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
class PagerAdapter : FragmentStateAdapter {
private var fragments: List<Fragment>
constructor(fragmentActivity: FragmentActivity, fragments: List<Fragment>) : super(
fragmentActivity
) {
this.fragments = fragments
}
constructor(fragment: Fragment, fragments: List<Fragment>) : super(
fragment
) {
this.fragments = fragments
}
override fun getItemCount(): Int {
return fragments.size
}
override fun createFragment(position: Int): Fragment {
return fragments[position]
}
}
6.添加导航栏图标
完成,运行即可
7.进阶
其中app:itemTextColor="@drawable/main_bottom"为设置按钮选中与未选中时字体的颜色选择
app:itemIconTint="@drawable/main_bottom"为设置按钮选中与未选中时图标的颜色选择
main_bottom.xml文件为:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/holo_red_light" android:state_checked="true" />
<item android:color="@color/black" android:state_checked="false" />
</selector>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgccbgb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01