程式設計是一種美德，是促使一個人不斷向上發展的一種原動力

—————–以下是正文———————
最近好多app的底部標籤導航使用以下形式了，所以我們就來學習一下它是如何實現的。

先看效果：

中間的“+”我給了一個旋轉動畫，看起來還是不錯的，有興趣的同學可以下載Demo看一下。

最近準備開發一款新App， 產品也給出了這麼一個底部標籤導航。於是就開始研究這個樣式怎麼實現的。常規的做法是貼上複製…,我就在想可以簡單點不。於是就開始了網上海選工作，在gitHub上找到了MainNavigateTabBar，他是一個普通的底部標籤導航。不太符合我的需求，於是就對其原始碼進行了一些修改，把訊息提示加進去了。
，先看一下這個功能的實現吧，有了圖之後，分分鐘搞定
MainActivity 程式碼：

public class MainActivity extends AppCompatActivity {

    private static final String TAG_PAGE_HOME = "首頁";
    private static final String TAG_PAGE_CITY = "同城";
    private static final String TAG_PAGE_PUBLISH = "釋出";
    private static final String TAG_PAGE_MESSAGE = "訊息";
    private static final
 
 String TAG_PAGE_PERSON = "我的";

    private MainNavigateTabBar mNavigateTabBar;

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

        mNavigateTabBar = (MainNavigateTabBar) findViewById(R.id.mainTabBar);
        mNavigateTabBar.onRestoreInstanceState(savedInstanceState);
        mNavigateTabBar.setTabTextColor(getResources().getColor(R.color.blue_btn_disabled));
        //對應xml中的navigateTabSelectedTextColor
 

        mNavigateTabBar.setSelectedTabTextColor(getResources().getColor(R.color.blue_btn_normal));
        mNavigateTabBar.addTab(HomeFragment.class, new MainNavigateTabBar.TabParam(R.mipmap.tab_home_n, R.mipmap.tab_home_p, TAG_PAGE_HOME));
        mNavigateTabBar.addTab(CityFragment.class, new MainNavigateTabBar.TabParam(R.mipmap.tab_class_n, R.mipmap.tab_class_p, TAG_PAGE_CITY));
        mNavigateTabBar.addTab(null, new MainNavigateTabBar.TabParam(0, 0, TAG_PAGE_PUBLISH));
        mNavigateTabBar.addTab(MessageFragment.class, new MainNavigateTabBar.TabParam(R.mipmap.tab_user_n, R.mipmap.tab_user_p, TAG_PAGE_MESSAGE));
        mNavigateTabBar.addTab(PersonFragment.class, new MainNavigateTabBar.TabParam(R.mipmap.tab_more_n, R.mipmap.tab_more_p, TAG_PAGE_PERSON));

        //訊息提醒 顯示
        mNavigateTabBar.disPlayBadgeCount(0, 2);
        mNavigateTabBar.disPlayBadgeCount(1, 2);
        mNavigateTabBar.disPlayBadgeCount(2, 2);
        mNavigateTabBar.disPlayBadgeCount(3, 2);
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mNavigateTabBar.onSaveInstanceState(outState);
    }

    public void onClickPublish(View v) {
        //訊息提醒 消失
        mNavigateTabBar.disMissBadgeCount(0, 0);
        mNavigateTabBar.disMissBadgeCount(1, 0);
        mNavigateTabBar.disMissBadgeCount(2, 0);
        mNavigateTabBar.disMissBadgeCount(3, 0);
        //中間圖片動畫
        RotateAnimation myAnimation_Rotate = new RotateAnimation(0.0f, 90.0f,
                Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
        v.startAnimation(myAnimation_Rotate);
        myAnimation_Rotate.setDuration(300);
        Toast.makeText(this, "釋出", Toast.LENGTH_LONG).show();
    }
}

activity_main.xml:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/mainTabBar"/>

    <com.startsmake.mainnavigatetabbar.widget.MainNavigateTabBar
        android:id="@+id/mainTabBar"
        android:layout_width="match_parent"
        android:layout_height="50.0dip"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        app:containerId="@+id/main_container"
        app:navigateTabSelectedTextColor="@color/blue_btn_disabled"
        app:navigateTabTextColor="@color/blue_btn_normal"/>


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/mainTabBar"
        android:background="@mipmap/comui_bar_top_shadow"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80.0dip"
        android:layout_alignParentBottom="true"
        android:background="@android:color/transparent"
        android:gravity="center|top"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab_post_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickPublish"
            android:src="@mipmap/comui_tab_post"/>
    </LinearLayout>
</RelativeLayout>

這就把主頁搞定了，簡單吧，當然還有幾個Fragment。具體內容根據專案需求來開發了

來說說怎麼修改的MainNavigateTabBar吧，其實也很簡單，就是找了個BadgeView 把它加到MainNavigateTabBar裡就OK了，

 /**
     * 隱藏訊息數量提示
     * @param index 底部導航的位置
     * @param count 訊息數量 count >0 顯示
     */

    public void disPlayBadgeCount(int index,int count){
        if (index >= 0 && index < mViewHolderList.size()) {
            ViewHolder holder = mViewHolderList.get(index);

            holder.badgeView.setTargetView(holder.view);
            holder.badgeView.setBadgeMargin(0,0,10,0);
            holder.badgeView.setBadgeCount(count);
        }
    }
    /**
     * 隱藏訊息數量提示
     * @param index 底部導航的位置
     * @param count 訊息數量 count = 0 消失
     */

    public void disMissBadgeCount(int index,int count){
        if (index >= 0 && index < mViewHolderList.size()) {
            ViewHolder holder = mViewHolderList.get(index);
            holder.badgeView.setBadgeCount(count);
        }
    }

加一句話： 除了訊息提示是我加上去的，其他的是其他人的勞動成果。遺憾的他的連結找不到了….
我的京東旗艦店有喜歡的可以購買嚐嚐Android兒 郎 享用零食

原始碼下載