Android 底部导航栏的简单实现-BottomNavigationView

最新推荐文章于 2024-07-28 23:44:14 发布

一生中所爱

最新推荐文章于 2024-07-28 23:44:14 发布

阅读量689

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/tiandiwuya/article/details/71634284

版权

Android 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

在谷歌官方发布BottomNavigationView控件之前我们可以自己组合控件实现，比如LinearLayout + TextView(使用android:drawableTop属性+selector状态切换)、RadioGroup + RadioButton等等组合控件的方法自定义实现复杂效果。除了第三方外，现在我们多了一个选择。

开始

1.新建project然后导入以下support:design library，BottomNavigationView就在这个design库中。顺带导入这个V4包，因为待会要使用到ViewPager（这里其实不用记这么麻烦的库跟版本怎么写，直接在AS 的design面板把控件拖进来就会自动导入了。）

compile 'com.android.support:design:25.0.0'
compile'com.android.support:support-v4:25.0.1'

2.在res下新建menu文件夹，新建一个menu菜单，目前最多支持数量为5个（可以从 BottomNavigationView 源码中查看： public static final int MAX_ITEM_COUNT = 5; 当超出这个数量时，产生非法参数异常。）

<?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="wrap_content">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bottom_navigation" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        app:itemIconTint="@color/selector_icon"
        app:itemTextColor="@color/selector_icon"
        app:menu="@menu/menu_bottom_navigation" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_above="@id/bottom_navigation"
        android:background="@drawable/bottom_shadow" />
</RelativeLayout>

app:itemIconTint="@drawable/bottom_navigation_selector" 为icon着色，写个selector即可。

app:itemTextColor="@drawable/bottom_navigation_selector"该属性为文字着色，同样写个selector实现点击颜色切换的效果。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#757575" android:state_checked="false"/>
    <item android:color="@color/tab_checked" android:state_checked="true"/>
</selector>

4. 写完布局写代码，完整activity文件如下：

public class HomeActivity extends FragmentActivity {
    private ViewPager viewPager;
    private BottomNavigationView bottomNavigationView;
    private MenuItem menuItem;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home)

       BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);//默认 >3 的选中效果会影响ViewPager的滑动切换时的效果，故利用反射去
        bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

      // bottomNavigationView.enableShiftingMode(true);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.item_news:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.item_lib:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.item_find:
                        viewPager.setCurrentItem(2);
                        break;
                    case R.id.item_more:
                        viewPager.setCurrentItem(3);
                        break;
                }
                return true;
            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (menuItem != null) {
                    menuItem.setChecked(false);
                } else {
                    bottomNavigationView.getMenu().getItem(0).setChecked(false);
                }
                menuItem = bottomNavigationView.getMenu().getItem(position);
                menuItem.setChecked(true);

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        setupViewPager(viewPager);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(BaseFragment.newInstance("新闻"));
        adapter.addFragment(BaseFragment.newInstance("图书"));
        adapter.addFragment(BaseFragment.newInstance("发现"));
        adapter.addFragment(BaseFragment.newInstance("更多"));
        viewPager.setAdapter(adapter);
    }
}