即時通訊

項目雜談–即時通訊（BottomNavigationBar）

先給大家上一張圖吧

想必這個挺實用的就是仿了qq，有menu菜單的使用，還有底部導航欄的使用，
一般底部導航欄我們是自己寫的，今天藉助了第三方開源項目
https://github.com/Ashok-Varma/BottomNavigation
這個確實挺好用的。
在使用這個開源項目之前，請大家好好的閱讀一下里面的內容。大牛寫的東西果然很實用的。

現在來介紹一下這個項目吧，使用之前，先在你的android studio中添加一行依賴，添加完成就可以進行使用了，將佈局拷貝到你的佈局當中，讓其處於底部即可。

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

接下來，按照文檔下來進行操作即可，

    BottomNavigationItem conversationItem =new BottomNavigationItem(R.mipmap.conversation_selected_2,"消息");
    BottomNavigationItem contactItem=new BottomNavigationItem(R.mipmap.contact_selected_2,"聯繫人");
    BottomNavigationItem pluginItem =new BottomNavigationItem(R.mipmap.plugin_selected_2,"動態");
    mBottomNavigationBar.addItem(conversationItem);
    mBottomNavigationBar.addItem(contactItem);
    mBottomNavigationBar.addItem(pluginItem);

通過創建不同的BottomNavigationItem ，分別指定文字和圖片，這樣就創建好了底部的導航欄，然後將這些item添加到BottomNavigationBar中去。

最重要的一步: 初始化BottomNavigation

      mBottomNavigationBar.initialise();

看到上圖，是不是覺得當點擊的時候，圖片會變顏色，一開始還以爲是一個選擇器，其實不是的，其實是我們指定的兩個顏色，一個是選中，一個是默認。通過源碼分析，還是去拿了res目錄下的color，這個color可以由我們自己去設置，一般設置的話都是參考應用的主色調。所以在設計應用的時候。

            /**
     * @param activeColor res code for the default active color
     * @return this, to allow builder pattern
     */
    public BottomNavigationBar setActiveColor(@ColorRes int activeColor) {
        this.mActiveColor = ContextCompat.getColor(getContext(), activeColor);
        return this;
    }



           /**
             * @param inActiveColor res code for the default in-active color
             * @return this, to allow builder pattern
             */
            public BottomNavigationBar setInActiveColor(@ColorRes int inActiveColor) {
                this.mInActiveColor = ContextCompat.getColor(getContext(), inActiveColor);
                return this;
            }

接下來，就是點擊事件了，當然這個控件同樣也有它自己的點擊事件監聽

 mBottomNavigationBar.setTabSelectedListener(this);

相應的會去實現三個方法,在咱這個項目中，就是在選中的時候，進行fragment的顯示。條目未被選中的時候，進行fragment的隱藏了。

  //條目被選中
    @Override
    public void onTabSelected(int position) {


    }
    //條目未被選中
    @Override
    public void onTabUnselected(int position) {

    }
    //條目被再次選中
    @Override
    public void onTabReselected(int position) {

    }

接下來說一說：menu菜單，本來是actionbar中可以指定menu，由於actionbar的侷限性，位置不能改變，所以引入一個toolbar。。那麼toolbar，作爲不同控件不需要去設置主題，如果需要，代替actionbar去使用，就需要去配置要給noactionbar的主題了。

順帶着講了一下menu菜單，其實這個也挺簡單的，無非創建一個menu文件夾。指定一些我們需要的菜單，例如上圖所示》添加好友，分享好友，關於我們這三個菜單，在res/menu/main.xml中指定我們所要的菜單

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/add_friend"
            android:title="添加好友"
            android:icon="@mipmap/add_friend_pressed"
        />

    <item android:title="分享好友"
          android:icon="@mipmap/scan_pressed"
              android:id="@+id/share_friend"/>
    <item
        android:title="關於我們"
        android:icon="@mipmap/about"
        android:id="@+id/aboutme"
        />
</menu>

上一步做完之後，可以來到我們的activity中複寫相應的方法

@Override
    public boolean onCreateOptionsMenu(Menu menu) {

//            return super.onCreateOptionsMenu(menu); //return 
//  將我們定義好的main.xml通過菜單佈局管理填充成一個view視圖
        getMenuInflater().inflate(R.menu.main,menu);
        return true;

    }

當然上訴還是不夠的，因爲onCreateOptionsMenu只會創建一次，意味着我們再次點擊可能就不會在創建菜單佈局視圖了，因此我們需要去重寫另外一個方法.,一併解決了圖標不顯示的問題。

  //menu是默認不顯示圖標的，這個方法調用，是在點擊這個menu建，然後展示menu
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        MenuBuilder builder = (MenuBuilder) menu;
        builder.setOptionalIconsVisible(true);
        return true;
    }

當然還需要對這個菜單進行點擊操作，那麼就需要去複寫另外一個方法了

//true :代表這個點擊事件被相應item消費，攔截下來自己處理了，false，代表沒有被消費，按照正常的順序向下走
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.aboutme:
                Toast.makeText(this, "關於我們", Toast.LENGTH_SHORT)
                     .show();

                break;
            case R.id.share_friend:
                Toast.makeText(this, "分享好友", Toast.LENGTH_SHORT)
                     .show();
                 break;
            case R.id.add_friend:
//                TODO
                break;
        }

        return true;
    }

注意一點就是，沒有給出toolbar的佈局，其實toolbar中的彈出主題是會影響我們的菜單的背景的，如果不指定 app:popupTheme=”@style/ThemeOverlay.AppCompat.Light”，那麼就會使用默認的樣式