Android Support 25中BottomNavigat

作者: M星空 | 来源:发表于2016-11-12 21:57 被阅读6002次

    先上图

    预览效果

    1.创建一个android studio工程并依赖最新的Design Support Library(25) 在app的build.gradle中:

    compile 'com.android.support:design:25.0.0'
    

    接下来就可以使用BottomNavigationView控件了。

    2.为MainActivity创建如下布局:

    <?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.xuejinwei.bottomnavigationview.MainActivity">
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            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"
            app:itemIconTint="@drawable/bottom_navigation_color_selector"
            app:itemTextColor="@drawable/bottom_navigation_color_selector"
            app:menu="@menu/menu_bottom_navigation"/>
    
        <!--阴影-->
        <View
            android:layout_width="match_parent"
            android:layout_height="8dp"
            android:layout_above="@id/bottom_navigation"
            android:background="@drawable/shadow"/>
    </RelativeLayout>
    
    • app:itemBackground:设置item的背景,对应setItemBackgroundResource(int resId)方法
    • app:itemIconTintUsed:设置icon的颜色,对应setItemIconTintList(ColorStateList tint)方法
    • app:itemTextColor:设置文字的颜色,对应setIteTextColor(ColorStateList textColor)方法

    3.创建Fragment和ViewPagerAdapter为ViewPager服务,代码略去。

    4.为ViewPager设置adapter ,添加fragment:

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    
        adapter.addFragment(DemoFragment.newInstance("拨号"));
        adapter.addFragment(DemoFragment.newInstance("信息"));
        adapter.addFragment(DemoFragment.newInstance("我的"));
        viewPager.setAdapter(adapter);
    }
    

    5.为BottomNavigationView添加OnNavigationItemSelectedListener,复写OnNavigationItemSelected方法,这里通过item的id判断选择不同的时候ViewPagerAdapter选中的位置。

    bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.item_call:
                                viewPager.setCurrentItem(0);
                                break;
                            case R.id.item_mail:
                                viewPager.setCurrentItem(1);
                                break;
                            case R.id.item_person:
                                viewPager.setCurrentItem(2);
                                break;
                        }
                        return false;
                    }
                });
    

    6.为ViewPagerAdapter设置OnPageChangeListener,本文重要代码在此,当ViewPagerAdapter滑动fragment的时候BottomNavigationView的选中状态也跟着变化

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
            }
    
            @Override
            public void onPageSelected(int position) {
                if (prevMenuItem != null) {
                    prevMenuItem.setChecked(false);
                } else {
                    bottomNavigationView.getMenu().getItem(0).setChecked(false);
                }
                bottomNavigationView.getMenu().getItem(position).setChecked(true);
                prevMenuItem = bottomNavigationView.getMenu().getItem(position);
    
            }
    
            @Override
            public void onPageScrollStateChanged(int state) {
    
            }
        });
    

    github BottomNavigationViewDemo

    相关文章

      网友评论

      • s酸菜:昨天用最新SDK测试 发现选中了tab颜色不变,位置也不变。最后发现OnNavigationItemSelectedListener这里面的返回值要return true;
      • SnapKit:4个以上的时候有问题啊你这 另外怎么设置4个以上的时候不隐藏非选中时候的文字 还是等分的
        喝绿茶的考拉:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/0428/7888.html
        喝绿茶的考拉:@zouzhenglu 网上找到了一条 http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/0428/7888.html
        zouzhenglu:有解决方案了没
      • 施斌:问下, 这个support25是才更新的, 你在哪里查的资料, 或者在哪里获取的
        M星空:@施斌 看官方文档呗

      本文标题:Android Support 25中BottomNavigat

      本文链接:https://www.haomeiwen.com/subject/gqwqpttx.html