Android 和微信小程序的底部导航栏

微信小程序的底部导航栏的实现：

1、我们在app.json 中使用tabBar 这个控件

里面的属性基本就是你能看懂这个英文就知道这个是干啥的，

ex： pagePath ，很容易就理解位当前导航对应的 页面

text ,就是文字嘛，不是清清楚楚

iconPath ，图标路径，感觉上不清楚但是可以看到下一个selectedIconPath ，那就很容易推断出这个是默认图标路径

selectedIconPath ，不用说了，被选中的图标路径；

selectedColor ， 被选中时后的颜色(文字的)

"color": " 未选中时候的颜色

还有一些属性就不一一列举了，试一试就知道了。

2、注意事项

    1.tabBar的第一个页面必须要是你主页的第一个页面，否则是不会显示在页面上的像图中，我就是index；

    2. 如果要跳转到有tabBar 的页面的话需要使用 wx.switchTab

这个和Android原生不一样，可以理解为不需要依赖一个主页面

 "tabBar": {
      "selectedColor": "#9ACCFF",
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/index/img/tab_icon_fangyuan_n2x.png",
        "selectedIconPath": "pages/index/img/tab_icon_fangyuan_h2x.png"
      },
      {
        "pagePath": "pages/page2/page2",
        "text": "房源",
        "iconPath": "pages/index/img/tab_icon_home_n2x.png",
        "selectedIconPath": "pages/index/img/tab_icon_home_h2x.png"

      },
        {
          "pagePath": "pages/page3/page3",
          "text": "服务",
          "iconPath": "pages/index/img/tab_icon_fuwu_n.png",
          "selectedIconPath": "pages/index/img/tab_icon_fuwu_h.png"
        },
          {
            "pagePath": "pages/page4/page4",
            "text": "我的",
            "iconPath": "pages/index/img/tab_icon_me_n.png",
            "selectedIconPath": "pages/index/img/tab_icon_me_n.png"
          }]
    }

Android 底部导航栏的实现

 

使用BottomNavigationView + ViewPage 实现 ，就实现实现监听，绑定绑定页面 ，唯一要注意的就是，BottomNavigationView会有默认的变色，可以通过  mBottomNavigationView!!.itemIconTintList = null 来进行去除操作 ，效果图和微信小程序的差不多，我就不贴了

package com.sfy.androidktproject.ui.activity

import android.support.design.widget.BottomNavigationView
import android.support.v4.view.ViewPager
import android.view.MenuItem

import com.sfy.androidktproject.R
import com.sfy.androidktproject.base.Base2Activity
import com.sfy.androidktproject.base.MyLazyFragment
import com.sfy.androidktproject.helper.ClickHelper
import com.sfy.androidktproject.ui.fragment.m2.FourthFragment
import com.sfy.androidktproject.ui.fragment.m2.FristFragment
import com.sfy.androidktproject.ui.fragment.m2.SecondFragment
import com.sfy.androidktproject.ui.fragment.m2.ThridFragment
import com.sfy.androidktproject.utils.ActivityStackManager
import com.sfy.base.BaseFragmentAdapter
import com.sfy.widget.NoScrollViewPager

class MainActivity : Base2Activity(), ViewPager.OnPageChangeListener, BottomNavigationView.OnNavigationItemSelectedListener {


    private var mBottomNavigationView: BottomNavigationView? = null

    private var mPagerAdapter: BaseFragmentAdapter<MyLazyFragment>? = null

    private var mViewPager: NoScrollViewPager? = null


    protected override fun getLayoutId(): Int {
        return R.layout.activity_main
    }

   
    protected override fun initView() {
        mViewPager = findViewById(R.id.nvp_home_pager)
        mBottomNavigationView = findViewById(R.id.bv_home_navigation)
        // 不使用图标默认变色
        mBottomNavigationView!!.itemIconTintList = null
        mBottomNavigationView!!.setOnNavigationItemSelectedListener(this)
    }

    protected override fun initData() {
        mPagerAdapter = BaseFragmentAdapter(this)
        mPagerAdapter!!.addFragment(FristFragment.newInstance())
        mPagerAdapter!!.addFragment(SecondFragment.newInstance())
        mPagerAdapter!!.addFragment(ThridFragment.newInstance())
        mPagerAdapter!!.addFragment(FourthFragment.newInstance())
        // 限制页面数量
        mViewPager!!.offscreenPageLimit = mPagerAdapter!!.count
        mViewPager!!.adapter = mPagerAdapter
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.menu_home -> {
               
                // 如果切换的是相邻之间的 Item 就显示切换动画，如果不是则不要动画
                mViewPager!!.setCurrentItem(0, mViewPager!!.currentItem == 1)
                return true
            }
            R.id.home_found -> {
                
                mViewPager!!.setCurrentItem(1, mViewPager!!.currentItem == 0 || mViewPager!!.currentItem == 2)
                return true
            }
            R.id.home_message -> {
              
                mViewPager!!.setCurrentItem(2, mViewPager!!.currentItem == 1 || mViewPager!!.currentItem == 3)
                return true
            }
            R.id.home_me -> {
                
                mViewPager!!.setCurrentItem(3, mViewPager!!.currentItem == 2)
                return true
            }
        }
        return false
    }


    override fun onPageScrolled(i: Int, v: Float, i1: Int) {

    }

    override fun onPageSelected(position: Int) {
        when (position) {
            0 -> mBottomNavigationView!!.selectedItemId = R.id.menu_home
            1 -> mBottomNavigationView!!.selectedItemId = R.id.home_found
            2 -> mBottomNavigationView!!.selectedItemId = R.id.home_message
            3 -> mBottomNavigationView!!.selectedItemId = R.id.home_me
        }
    }

    override fun onPageScrollStateChanged(i: Int) {

    }

    override fun onDestroy() {
        mViewPager!!.removeOnPageChangeListener(this)
        mViewPager!!.adapter = null
        mBottomNavigationView!!.setOnNavigationItemSelectedListener(null)
        super.onDestroy()
    }

  
}