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()
    }

  
}