美文网首页安卓开发
BottomNavigationView + Fragment

BottomNavigationView + Fragment

作者: 蓝不蓝编程 | 来源:发表于2020-11-03 13:53 被阅读0次

    目标

    实现底部导航栏

    效果图

    主要代码

    1. 添加依赖:
        implementation 'com.google.android.material:material:1.2.1'
    
    
    1. 布局文件: activity_main.xml
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <FrameLayout
            android:id="@+id/ll_frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/bottomNavigationView" />
    
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:itemIconTint="@drawable/bottom_navigation_item_selector"
            app:itemTextColor="@drawable/bottom_navigation_item_selector"
            app:menu="@menu/main_bottom_navigation" />
    </RelativeLayout>
    
    1. 主界面代码:MainActivity
    class MainActivity : AppCompatActivity() {
        private var lastIndex = 0
        private var mFragments = mutableListOf<Fragment>()
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            initBottomNavigation()
            initData()
        }
    
        private fun initData() {
            mFragments = ArrayList()
            mFragments.add(Fragment1())
            mFragments.add(Fragment2())
            // 初始化展示MessageFragment
            setFragmentPosition(0)
        }
    
        private fun initBottomNavigation() {
            bottomNavigationView.setOnNavigationItemSelectedListener(BottomNavigationView.OnNavigationItemSelectedListener { item ->
                when (item.itemId) {
                    R.id.menu_message -> setFragmentPosition(0)
                    R.id.menu_contacts -> setFragmentPosition(1)
                    else -> { }
                }
                true
            })
        }
    
        private fun setFragmentPosition(position: Int) {
            val ft = supportFragmentManager.beginTransaction()
            val currentFragment = mFragments[position]
            val lastFragment = mFragments[lastIndex]
            lastIndex = position
            ft.hide(lastFragment)
            if (!currentFragment.isAdded) {
                supportFragmentManager.beginTransaction().remove(currentFragment).commit()
                ft.add(R.id.ll_frameLayout, currentFragment)
            }
            ft.show(currentFragment)
            ft.commitAllowingStateLoss()
        }
    }
    
    1. Fragment
    class Fragment1 : Fragment() {
        override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
            val tv = TextView(context)
            tv.text = "第一页"
            tv.gravity = Gravity.CENTER
            return tv
        }
    }
    class Fragment2 : Fragment() {
        override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
            val tv = TextView(context)
            tv.text = "第二页"
            tv.gravity = Gravity.CENTER
            return tv
        }
    }
    
    1. 菜单:main_bottom_navigation.xml
    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/menu_message"
            android:enabled="true"
            android:icon="@mipmap/ic_message"
            android:title="第一页"
            app:showAsAction="ifRoom" />
        <item
            android:id="@+id/menu_contacts"
            android:enabled="true"
            android:icon="@mipmap/ic_contacts"
            android:title="第二页"
            app:showAsAction="ifRoom" />
    
    </menu>
    

    完整源代码

    https://gitee.com/cxyzy1/navigationDemo/tree/master/bottomNavigationView

    相关文章

      网友评论

        本文标题:BottomNavigationView + Fragment

        本文链接:https://www.haomeiwen.com/subject/pqndvktx.html