Fragment+BottomNavigationViewEx底部导航栏切换页面的实现

在项目中很多时候需要用到底部导航栏(顶部导航栏)来切换页面,其中的具体实现步骤如下。

1.创建MainActivity

class MainActivity : BaseActivity() {
    private val helper = OrderMainHelper(this)

    private val items by lazy {
        helper.items
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initToolbar(true)

        // init bottom menu
        //不展示动画效果
        bnv_navigation.enableAnimation(false)
        bnv_navigation.enableShiftingMode(false)
        bnv_navigation.enableItemShiftingMode(false)
        bnv_navigation.onNavigationItemSelectedListener = oNNavigationItemSelectedListener
        // 主页
        bnv_navigation.selectedItemId = bnv_navigation.menu.getItem(0).itemId
    }

    private val oNNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        return@OnNavigationItemSelectedListener navigateItem(item.itemId)
    }

    private fun navigateItem(@IdRes menuId: Int): Boolean {
        val item = items.find { model ->
            menuId == model.resId
        }
        if (item != null) {
            navigateReplace(item.fragment, item.title)
            return true
        }
        return false
    }

    override fun onSupportNavigateUp(): Boolean {
        onBackPressed()
        return true
    }
}

2. 写OrderMainHelper,里面包含切换的三个Fragment

class OrderMainHelper (val activity: Activity){

    val items by lazy {
        listOf(
                OrderMainItemModel(R.id.mine_orders_my_all, AllPaidFragment(), activity.getString(R.string.mine_goods_my_all)),
                OrderMainItemModel(R.id.mine_goods_my_no_paid, NoPaidFragment(), activity.getString(R.string.mine_goods_my_no_paid)),
                OrderMainItemModel(R.id.mine_goods_my_paid, PaidFragment(), activity.getString(R.string.mine_goods_my_paid))
        )
    }
}

3.写OrderMainItemModel

data class OrderMainItemModel (@IdRes val resId: Int,
                          val fragment: Fragment,
                          val title: String): Serializable

4.写menu文件,里面包含底部导航栏的三个按钮信息

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/mine_orders_my_all"
        android:checked="true"
        android:icon="@mipmap/ic_news_gray"
        android:title="@string/mine_goods_my_all" />


    <item
        android:id="@+id/mine_goods_my_no_paid"
        android:icon="@mipmap/ic_more_gray"
        android:title="@string/mine_goods_my_no_paid" />

    <item
        android:id="@+id/mine_goods_my_paid"
        android:icon="@mipmap/ic_discovery_gray"
        android:title="@string/mine_goods_my_paid" />

</menu>

4.写MainActivity的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include layout="@layout/toolbar_main" />
    </android.support.design.widget.AppBarLayout>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/container_mine"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
            android:id="@+id/bnv_navigation_mine_orders"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            app:itemIconTint="@drawable/bottom_navigation_selector"
            app:itemTextColor="@drawable/bottom_navigation_selector"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/main_orders"
            />

        <FrameLayout
            android:id="@+id/fl_fragment_container"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/bnv_navigation_mine_orders"
            app:layout_constraintBottom_toBottomOf="parent"
            />
    </android.support.constraint.ConstraintLayout>

</LinearLayout>

特别注意,FragLayout的名字fl_fragment_container不能改动,否则就会无法成功显示。很惭愧,我目前没有找出问题在哪里,我认为这个名字是应该能修改的,希望哪位大神知道问题在哪里,能够指导一下,谢谢。 

5. 下一步就是写需要的Fragment

class AllPaidFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View?{
        return inflater.inflate(R.layout.fragment_all_orders, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

    }
}

6.设置Fragment的切换

fun navigateReplace(dst: Fragment, title: CharSequence? = null, isAddStack: Boolean = false) {
    if (!TextUtils.isEmpty(title)) {
        setTitle(title)
    }
    FragmentUtils.replace(supportFragmentManager, dst, R.id.fl_fragment_container, isAddStack)
}


open fun onNextAction(fragmentId: FragmentID, extra: String?) {}

到这里,我们就完成来Fragment+BottomNavigationViewEx底部导航栏切换页面的实现。

猜你喜欢

转载自blog.csdn.net/mlsnatalie/article/details/81181021