简单粗暴的MaterialDesign风格的底部导航Bottom

请注明出处http://blog.csdn.net/qq_23179075/article/details/64905520

MaterialDesign风格效果:

导航1.gif

常规效果:

导航2.gif

使用方法请见Github:https://github.com/armcha/LuseenBottomNavigation

这里贴上面效果的代码:

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bottomnavigationview.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_above="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:bnv_colored_background="false"
        app:bnv_with_text="true"
        app:bnv_shadow="true"
        app:bnv_tablet="false"
        app:bnv_viewpager_slide="true"
        app:bnv_active_color="@color/colorPrimary"
        app:bnv_active_text_size="@dimen/bottom_navigation_text_size_active"
        app:bnv_inactive_text_size="@dimen/bottom_navigation_text_size_inactive"
        />
</RelativeLayout>

fragment_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_meinv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

</RelativeLayout>

MainActivity.java:

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.pager)
    ViewPager pager;
    @BindView(R.id.bottomNavigation)
    BottomNavigationView bottomNavigation;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /**
         * 让状态了成半透明状态
         */
        this.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = this.getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);//设置状态栏颜色透明
//            window.setNavigationBarColor(Color.TRANSPARENT);//设置导航栏颜色透明
        }
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initViews();
        initListener();
    }
    private void initListener() {
        //pager切换监听
        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            @Override
            public void onPageSelected(int position) {
                bottomNavigation.selectTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        //导航选择监听
        bottomNavigation.setOnBottomNavigationItemClickListener(new OnBottomNavigationItemClickListener() {
            @Override
            public void onNavigationItemClick(int index) {
                pager.setCurrentItem(index);
            }
        });
    }
    private void initViews() {
        BottomNavigationItem bottomNavigationItem1 = new BottomNavigationItem
                ("主页", ContextCompat.getColor(this, R.color.color02), R.drawable.ic_home);
        BottomNavigationItem bottomNavigationItem2 = new BottomNavigationItem
                ("关注", ContextCompat.getColor(this, R.color.color03), R.drawable.ic_guanzhu);
        BottomNavigationItem bottomNavigationItem3 = new BottomNavigationItem
                ("消息", ContextCompat.getColor(this, R.color.color09), R.drawable.ic_msg);
        BottomNavigationItem bottomNavigationItem4 = new BottomNavigationItem
                ("我的", ContextCompat.getColor(this, R.color.color05), R.drawable.ic_my);
        bottomNavigation.addTab(bottomNavigationItem1);
        bottomNavigation.addTab(bottomNavigationItem2);
        bottomNavigation.addTab(bottomNavigationItem3);
        bottomNavigation.addTab(bottomNavigationItem4);
        bottomNavigation.willNotRecreate(true);
        bottomNavigation.setOnBottomNavigationItemClickListener(new OnBottomNavigationItemClickListener() {
            @Override
            public void onNavigationItemClick(int index) {
                System.out.println("Item " + index + " clicked");
            }
        });
        pager.setAdapter(new BaseFragmentAdapter(getSupportFragmentManager()));
    }
}

BaseFragment.java

public class BaseFragment extends Fragment {

    public static BaseFragment newInstance(int s) {
        BaseFragment fragment = new BaseFragment();
        Bundle bundle = new Bundle();
        bundle.putInt("s", s);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.main_fragment,container,false);
        ImageView imageView = (ImageView) view.findViewById(R.id.iv_meinv);
        imageView.setImageResource(getArguments().getInt("s"));
        return view;
    }
}

BaseFragmentAdapter.java

public class BaseFragmentAdapter extends FragmentPagerAdapter {
    private List<String> fragments;
    private int [] Imgs= {
        R.mipmap.mn1,
        R.mipmap.mn2,
        R.mipmap.mn3,
        R.mipmap.mn4,
    };

    public BaseFragmentAdapter(FragmentManager fm) {
        super(fm);
        this.fragments= new ArrayList<>();
        fragments.add("首页");
        fragments.add("关注");
        fragments.add("消息");
        fragments.add("我的");
    }

    @Override
    public Fragment getItem(int position) {
        return BaseFragment.newInstance(Imgs[position]);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return fragments.get(position);
    }
}

不知到为什么我通过下面这种方式与ViewPager联动的时候,导航的图标颜色总是不对,如果有使用过这个的童鞋还希望指点!见笑了

ContextCompat.getColor(context, R.color.firstColor)
 bottomNavigationView.setUpWithViewPager(yourPager , colorResources , imageResources);