安卓 BottomNavigationBar 實現

本文實現效果參考文獻：

http://blog.csdn.net/u010046908/article/details/50962081
http://blog.csdn.net/baidu_28534147/article/details/51713172
http://blog.csdn.net/qq_16131393/article/details/51419901

根據以上參考文獻自己實現了安卓BottomNavigationBar的效果。

BottomNavigationBar的下載地址:

https://github.com/Ashok-Varma/BottomNavigation

貼上網上效果圖及自己實現的截圖

網上效果圖：

all.gif

自己實現的截圖：

image.png
image.png

首先新建安卓工程（本人使用的是Android Studio），加入引用：

compile 'com.ashokvarma.android:bottom-navigation-bar:0.9.5'

image.png

整體思路是，先加載布局，然后設置每個Item，最后選中事件，設置監聽器

然后在MainActivity的布局中，引用組件

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="yanjianqi.top.miaomiao.MainActivity">

<LinearLayout
    android:id="@+id/tb"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" />
<com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:id="@+id/bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_height="wrap_content"/>

</RelativeLayout>

然后打開MainActivity，并新建四個Fragment

image.png

新建完成后，在MainActivity中：
1.添加接口

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener{  }

2.初始化變量

    int lastSelectedPosition = 0;//作為最后一次被選中的position

    private String TAG = MainActivity.class.getSimpleName();

    private MainFragment mMainFragment;//第一個頁面
    private ListFragment mListFragment;//第二個頁面
    private DataAnalyseFragment mDataAnalyseFragment;//第三個頁面
    private SetFragment mSetFragment;//第四個頁面

然后添加Fragment中的內容：
只以一個fragment為例子，demo中其他都差不多一樣

布局文件：(一眼就知道是什么好吧，做戲做全套，也把它給出來了)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="yanjianqi.top.miaomiao.Fragment.MainFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/tv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="主頁" />

</FrameLayout>

Fragment中的內容：

import android.app.Fragment;
import android.content.Context;
import android.net.Uri;
import android.os.Bundle;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import yanjianqi.top.miaomiao.R;


public class MainFragment extends Fragment {

    private static final String ARG_PARAM1 = "agrs1";

    private String mParam1;

    public MainFragment() {
    }

    public static MainFragment newInstance(String param1) {
        MainFragment fragment = new MainFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main, container, false);
        Bundle bundle = getArguments();
        String agrs1 = bundle.getString("agrs1");
        TextView tv = (TextView)view.findViewById(R.id.tv_main);
        tv.setText(agrs1);
        return view;
    }

}

首先生成構造函數，在被調用的時候，通過bundle去獲取從MainActivity傳過來的字符串，然后在OnCreateView方法中賦值給textView而已，其他操作還需要自己改。

以此類推，做出四個不同的fragment

在MainActivity中：（BOSS）
綁定控件，再通過它本身的addItem方法，初始化控件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNavigationBar = (BottomNavigationBar)findViewById(R.id.bottom_navigation_bar);

        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.ic_home_white_24dp,"主頁").setActiveColor(R.color.blue))
                .addItem(new BottomNavigationItem(R.mipmap.ic_favorite_white_24dp,"賬單").setActiveColor(R.color.main))
                .addItem(new BottomNavigationItem(R.mipmap.ic_find_replace_white_24dp,"分析").setActiveColor(R.color.brown))
                .addItem(new BottomNavigationItem(R.mipmap.ic_tv_white_24dp,"設置").setActiveColor(R.color.grey))
                .setFirstSelectedPosition(lastSelectedPosition)
                .initialise();

        bottomNavigationBar.setTabSelectedListener(this);
        setDefaultFragment();
    }

可以看到setDefaultFragment()還沒給出來，這個方法的作用是設置默認的fragment

    private void setDefaultFragment() {
        FragmentManager fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        mMainFragment = MainFragment.newInstance("主頁");
        transaction.replace(R.id.tb,mMainFragment);
        transaction.commit();
    }

通過FragmentManager 和 FragmentTransaction來設置
在這里不得不說一下這個transaction.replace()方法！！

transaction.replace(R.id.content, IndexFragment);

兩個參數如何使用，具體看看這篇博客

http://blog.csdn.net/baidu_28534147/article/details/51713172

然后到了最后一步，設置監聽事件

@Override
    public void onTabSelected(int position) {
        Log.d(TAG, "onTabSelected() called with: " + "position = [" + position + "]");
        FragmentManager fm = this.getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        switch (position){
            case 0:
                if (mMainFragment == null) {
                    mMainFragment = mMainFragment.newInstance("主頁");
                }
                transaction.replace(R.id.tb, mMainFragment);
                break;
            case 1:
                if (mListFragment == null) {
                    mListFragment = mListFragment.newInstance("賬單");
                }
                transaction.replace(R.id.tb, mListFragment);
                break;
            case 2:
                if (mDataAnalyseFragment == null) {
                    mDataAnalyseFragment = mDataAnalyseFragment.newInstance("分析");
                }
                transaction.replace(R.id.tb, mDataAnalyseFragment);
                break;
            case 3:
                if (mSetFragment == null) {
                    mSetFragment = mSetFragment.newInstance("設置");
                }
                transaction.replace(R.id.tb, mSetFragment);
                break;
            default:
                break;
        }
        transaction.commit();
    }

哎，這就完成了，不信你去試試看，資源之類的，也就四個小圖標

ic_favorite_white_24dp.png
ic_find_replace_white_24dp.png
ic_home_white_24dp.png
ic_tv_white_24dp.png

大概就是這樣子了

有什么錯誤的希望大家提出，此文章作為學習記錄的一個過程.

謝謝大家~

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,532評論 25贊 708
  • 在此特此聲明：一下所有鏈接均來自互聯網，在此記錄下我的查閱學習歷程，感謝各位原創作者的無私奉獻 ！ 技術一點一點積...
    遠航的移動開發歷程閱讀 11,239評論 12贊 197
  • 0參考代碼 藍牙(BLE)模塊及協議.pdf：在電腦內，有助于理解ble BLE藍牙在Android開發中的應用 ...
    kamin閱讀 3,492評論 0贊 20
  • 這一刻，他們是雪山牦牛，不辱使命，負重前行； 這一刻，他們是高原之舟，不知疲倦，往返奔波。 我們的人口雖多，但沒有...
    稅穎閱讀 784評論 1贊 8
  • Berry數的定義，是這樣的： 不能用少于18個漢字定義的最小整數 這個定義總共只有十七個漢字。 那么，為什么說這...
    LostAbaddon閱讀 1,925評論 19贊 5