Android 项目必备（十二）--＞ APP 底部导航栏最佳实践

简介

当开始一个新项目的时候，有一个很重要的步骤就是确定我们的 APP 首页框架，也就是用户从桌面点击 APP 图标，进入 APP 首页的时候展示给用户的框架，比如微信，展示了有四个 Tab ，分别对应不同的板块（微信、通讯录、发现、我），现在市面出了少部分的 Material Design 风格的除外，大部分都是这样的一个框架，称之为底部导航栏。

TabLayout + Fragment 1. 效果图

2. 布局文件

3. 代码

public class TabLayoutActivity extends AppCompatActivity {
    @BindView(R.id.bottom_tab_layout)
    TabLayout mTabLayout;

    private Fragment[]mFragmensts;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        ButterKnife.bind(this);
        mFragmensts = DataGenerator.getFragments("TabLayout Tab");

        initView();
    }

    private void initView() {
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                onTabItemSelected(tab.getPosition());

                for (int i=0;i

    

    

3. main_bottom_navigation.xml

4. 代码

public class MainActivity extends BaseActivity {
    private HomeFragment mHomeFragment = HomeFragmentFactory.getInstance().getHomeFragment();
    private MineFragment mMineFragment = HomeFragmentFactory.getInstance().getMineFragment();

    private List mFragments = new ArrayList();

    @BindView(R.id.bottomNavigationView)
    BottomNavigationView mNavigationView;

    @Override
    public int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    public void initView() {
        mFragments.add(mHomeFragment);
        mFragments.add(mMineFragment);

        mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switchFragment(item.getItemId());
                return true;
            }
        });

        switchFragment(R.id.menu_message);
    }

    /**
     * 切换fragment
     *
     * @param id
     * @return
     */
    private void switchFragment(int id) {
        Fragment fragment = null;
        switch (id) {
            case R.id.menu_message:
                fragment = mFragments.get(0);
                break;

            case R.id.menu_contacts:
                fragment = mFragments.get(1);
                break;

            default:
                break;
        }
        if (fragment != null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.fl_content,fragment).commit();
        }
    }


}

推荐阅读：【Kevin Learn Android】–＞BottomNavigationView

RadioGroup + ViewPager2 + Fragment

1. 效果图 2. 布局文件 style.xml

	

    
        0dp
        1
        match_parent
        5dp
        center
        @null
        14sp
        @color/black
    

3. MyPagerAdapter.java

public class MyPagerAdapter extends FragmentStateAdapter {
    private List fragments;

    public MyPagerAdapter(FragmentActivity fragmentActivity) {
        super(fragmentActivity);
        if (fragments == null) {
            fragments = new ArrayList();
        }
    }

    public void addFragment(Fragment fragment) {
        if (fragments != null) {
            fragments.add(fragment.getClass());
        }
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        try {
            return (Fragment) fragments.get(position).newInstance();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InstantiationException e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    public int getItemCount() {
        return fragments == null ? 0 : fragments.size();
    }
}

4. TabLayoutActivity.java

public class TabLayoutActivity extends AppCompatActivity {
    @BindView(R.id.rg_tabs)
    RadioGroup mRadioGroup;

    @BindView(R.id.vp_container)
    ViewPager2 mViewPager2;

    @BindView(R.id.tab_home)
    RadioButton mRadioHome;

    @BindView(R.id.tab_discover)
    RadioButton mRadioDiscover;

    @BindView(R.id.tab_attention)
    RadioButton mRadioAttention;

    @BindView(R.id.tab_profile)
    RadioButton mRadioProfile;

    private MyPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        mViewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                switch (position) {
                    case 0:
                        mRadioHome.setChecked(true);
                        break;

                    case 1:
                        mRadioDiscover.setChecked(true);
                        break;

                    case 2:
                        mRadioAttention.setChecked(true);
                        break;

                    case 3:
                        mRadioProfile.setChecked(true);
                        break;

                    default:
                        break;
                }
            }
        });

        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkId) {
                switch (checkId) {
                    case R.id.tab_home:
                        mViewPager2.setCurrentItem(0);
                        break;

                    case R.id.tab_discover:
                        mViewPager2.setCurrentItem(1);
                        break;

                    case R.id.tab_attention:
                        mViewPager2.setCurrentItem(2);
                        break;

                    case R.id.tab_profile:
                        mViewPager2.setCurrentItem(3);
                        break;

                    default:
                        break;
                }
            }
        });
        mAdapter = new MyPagerAdapter(this);
        mViewPager2.setAdapter(mAdapter);
        mAdapter.addFragment(new HomeFragment());
        mAdapter.addFragment(new DiscoveryFragment());
        mAdapter.addFragment(new AttentionFragment());
        mAdapter.addFragment(new ProfileFragment());
        mViewPager2.setCurrentItem(0);
    }
}

带页面跳转功能的底部导航

1. 效果图

2. 布局文件

3. 代码

public class TabLayoutActivity extends AppCompatActivity {
    @BindView(R.id.rg_tabs)
    RadioGroup mRadioGroup;

    @BindView(R.id.tab_home)
    RadioButton mRadioHome;

    @BindView(R.id.tab_discover)
    RadioButton mRadioDiscover;

    @BindView(R.id.tab_attention)
    RadioButton mRadioAttention;

    @BindView(R.id.tab_profile)
    RadioButton mRadioProfile;

    private List mFragmensts;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        ButterKnife.bind(this);
        mFragmensts = DataGenerator.getFragments("TabLayout Tab");
        initView();
    }

    private void initView() {
        onTabItemSelected(0);
        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkId) {
                switch (checkId) {
                    case R.id.tab_home:
                        onTabItemSelected(0);
                        break;

                    case R.id.tab_discover:
                        onTabItemSelected(1);
                        break;

                    case R.id.tab_attention:
                        onTabItemSelected(2);
                        break;

                    case R.id.tab_profile:
                        onTabItemSelected(3);
                        break;

                    default:
                        break;
                }
            }
        });
    }

    private void onTabItemSelected(int position){
        Fragment fragment = null;
        switch (position){
            case 0:
                fragment = mFragmensts.get(0);
                break;
            case 1:
                fragment = mFragmensts.get(1);
                break;

            case 2:
                fragment = mFragmensts.get(2);
                break;
            case 3:
                fragment = mFragmensts.get(3);
                break;
        }
        if(fragment!=null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,fragment).commit();
        }
    }


}

PagerBottomTabStrip

BottomNavigation + Fragment

1. 效果图

2. 在 app/build.gradle 中添加： implementation 'com.ashokvarma.android:bottom-navigation-bar:2.1.0'

3. 布局文件

4. 代码

public class BottomNavigationActivity extends BaseActivity implements BottomNavigationBar.OnTabSelectedListener {
    @BindView(R.id.bottom_navigation_bar)
    BottomNavigationBar mNavigationBar;

    private InviteFragment mInviteFragment = HomeFragmentFactory.getInstance().getInviteFragment();
    private ActivityFragment mActivityFragment = HomeFragmentFactory.getInstance().getActivityFragment();
    private FoundFragment mFoundFragment = HomeFragmentFactory.getInstance().getFoundFragment();
    private MineFragment mMineFragment = HomeFragmentFactory.getInstance().getMineFragment();

    private Fragment currentFragment = new Fragment();
//    private TextBadgeItem mBadgeItem;
    private FragmentManager fm;


    @Override
    protected int getLayoutId() {
        return R.layout.activity_bottom_navigation;
    }

    @Override
    protected void setToolbar() {

    }

    @Override
    protected void initView() {
        setNavTitle(R.string.bottom_navigation);

        fm = getSupportFragmentManager();

        initBottomBar();

    }

    private void initBottomBar() {

        /**
         * 导航基础设置 包括按钮选中效果 导航栏背景色等
         */
        mNavigationBar.setTabSelectedListener(this)
                .setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)
                .setActiveColor("#F5DF3E")//选中颜色
                .setInActiveColor("#000000")//未选中颜色
                .setBarBackgroundColor("#ffffff");//导航栏背景色
//        mBadgeItem = new TextBadgeItem()
//                .setBorderWidth(2)//Badge的Border(边界)宽度
//                .setBorderColor(Color.BLUE)//Badge的Border颜色
//                .setBackgroundColor(Color.RED)
//                .setTextColor(Color.BLACK)//文本颜色
//                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默认右上角
//                .setAnimationDuration(2000)
//                .setHideOnSelect(true)//当选中状态时消失，非选中状态显示
//                .setText("9");

        setInvite();


    }

    /**
     * 切换fragment
     *
     * @param targetFragment
     * @return
     */
    private FragmentTransaction switchFragment(Fragment targetFragment) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if (!targetFragment.isAdded()) {
            // 第一次使用switchFragment()时currentFragment为null，所以要判断一下
            if (currentFragment != null) {
                transaction.hide(currentFragment);
            }
            transaction.add(R.id.fl_content, targetFragment, targetFragment.getClass().getName());
        } else {
            transaction.hide(currentFragment).show(targetFragment);
        }
        currentFragment = targetFragment;
        return transaction;
    }


    /**
     * 邀请
     */
    private void setInvite() {
        mNavigationBar.clearAll();
        switchFragment(mInviteFragment).commitNowAllowingStateLoss();
        mNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_invite_nor,"邀约"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_activity_nor,"活动"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_find_nor,"发现"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_my_nor,"我的"))
                .setFirstSelectedPosition(0)
                .initialise();

    }

    /**
     * 活动
     */
    private void setActivity() {
        mNavigationBar.clearAll();
        switchFragment(mActivityFragment).commitNowAllowingStateLoss();
        mNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_invite_nor,"邀约"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_activity_nor,"活动"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_find_nor,"发现"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_my_nor,"我的"))
                .setFirstSelectedPosition(1)
                .initialise();

    }

    /**
     * 发现
     */
    private void setFound() {
        mNavigationBar.clearAll();
        switchFragment(mFoundFragment).commitNowAllowingStateLoss();
        mNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_invite_nor,"邀约"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_activity_nor,"活动"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_find_nor,"发现"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_my_nor,"我的"))
                .setFirstSelectedPosition(2)
                .initialise();

    }

    /**
     * 我的
     */
    private void setMine() {
        mNavigationBar.clearAll();
        switchFragment(mMineFragment).commitNowAllowingStateLoss();
        mNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_invite_nor,"邀约"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_activity_nor,"活动"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_find_nor,"发现"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_my_nor,"我的"))
                .setFirstSelectedPosition(3)
                .initialise();

    }

    @Override
    public void onTabSelected(int position) {
        FragmentTransaction ft = fm.beginTransaction();
        switch (position) {
            case 0:
                setInvite();
                break;

            case 1:
                setActivity();
                break;

            case 2:
                setFound();
                break;

            case 3:
                setMine();
                break;
        }

    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
}

推荐阅读：【第三方开源库】–＞ BottomNavigation 底部导航栏