BottomBar之Android底部菜單

BottomBar之Android底部菜單

 

前言：開源項目BottomBar,實現Android底部菜單(常用菜單，BottomBar實現動畫(上下式)+消息菜單，BottomBar+ViewPager+Fragment實現炫酷的底部導航效果)

 

效果：

 

開發環境：AndroidStudio2.2.1+gradle-2.14.1

 

引入依賴:

  compile 'com.android.support:appcompat-v7:23.0.0'  
  compile 'com.android.support:design:23.+'  
  compile 'com.roughike:bottom-bar:1.3.+'

 

部分代碼：

 

public class Menu1Activity extends AppCompatActivity {

    private BottomBar mBottomBar;
    private MainFragment mMainFragment;
    private TwoFragment twoFragment;
    private ThreeFragment threeFragment;
    private FourFragment fourFragment;
    private FragmentTransaction transaction;
    private BottomBarBadge unreadMessages;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);
        mBottomBar = BottomBar.attach(this, savedInstanceState);
        // 千萬注意：這個方法要用在 setItemsFromMenu 之前，也就是tab還沒有設置之前要先調用，不然會報錯。
        mBottomBar.noTabletGoodness();

        //添加初始Fragment
        defaultFragment(null == mMainFragment ? mMainFragment = MainFragment.newInstance() : mMainFragment);
        mBottomBar.setItems(R.menu.bottombar_menu);
        mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener() {
            @Override
            public void onMenuTabSelected(@IdRes int menuItemId) {
                //單擊事件 menuItemId 是 R.menu.bottombar_menu 中 item 的 id
                switch (menuItemId) {
                    case R.id.bb_menu_main:
                        if (null == mMainFragment) {
                            mMainFragment = MainFragment.newInstance();
                        }
                        replaceFragment(mMainFragment);
                        break;
                    case R.id.bb_menu_chart:
                        if (null == twoFragment) {
                            twoFragment = TwoFragment.newInstance();
                        }
                        replaceFragment(twoFragment);
                        unreadMessages.setVisibility(View.GONE);
                        break;
                    case R.id.bb_menu_timeline:
                        if (null == threeFragment) {
                            threeFragment = ThreeFragment.newInstance();
                        }
                        replaceFragment(threeFragment);
                        break;
                    case R.id.bb_menu_about:
                        if (null == fourFragment) {
                            fourFragment = FourFragment.newInstance();
                        }
                        replaceFragment(fourFragment);
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onMenuTabReSelected(@IdRes int menuItemId) {
                //重選事件，當前已經選擇了這個，又點了這個tab。微博點擊首頁刷新頁面
            }
        });
        // 當點擊不同按鈕的時候，設置不同的顏色
        // 可以用以下三種方式來設置顏色.
        mBottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorPrimary));
        mBottomBar.mapColorForTab(1, ContextCompat.getColor(this, R.color.colorAccent));
        mBottomBar.mapColorForTab(2, ContextCompat.getColor(this, R.color.green));
        mBottomBar.mapColorForTab(3, ContextCompat.getColor(this, R.color.orange));
        setMsg();
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        //保存BottomBar的狀態
        mBottomBar.onSaveInstanceState(outState);
    }

    private void replaceFragment(Fragment fragment) {
        FragmentManager fm = getSupportFragmentManager();
        transaction = fm.beginTransaction();
        transaction.replace(R.id.main_fragment_layout, fragment);
//        transaction.hide();
        transaction.commit();

    }

    private void defaultFragment(Fragment fragment) {
        FragmentManager fm = getSupportFragmentManager();
        transaction = fm.beginTransaction();
        transaction.add(R.id.main_fragment_layout, fragment);
        transaction.commit();
    }

    private void setMsg() {
        // 為tab設置一個標簽，“信息”提示的數字
        // 參數分別是：第幾個tab；小圓圈的顏色；顯示的數字
        unreadMessages = mBottomBar.makeBadgeForTabAt(1, "#FF0000", 13);

        // 設置顯示或隱藏
        unreadMessages.show();
//        unreadMessages.hide();
        // 設置顯示的數字
        unreadMessages.setCount(4);

        // 設置顯示/消失動畫的延遲時間
        unreadMessages.setAnimationDuration(200);

        // 如果不點它，它一直顯示
        unreadMessages.setAutoShowAfterUnSelection(true);
    }

 

源碼下載...