本文采用最新控件BottomNavigationView +viewpager +fragment来实现类似于淘宝的低栏效果,先上效果图
要实现实现这个效果首先有两个要求,在app的build.gradle里
compileSdkVersion 25 //编译SDK必须是25
compile 'com.android.support:design:25.0.0'//design包必须是25以上的版本
有了这两个以后,我们就能够直接在layout布局里使用这个控件了
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.wenxi.bottomnavigationview2.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottomNavigationView"/> <android.support.design.widget.BottomNavigationView android:id="@+id/bottomNavigationView" 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/main"> </android.support.design.widget.BottomNavigationView> <!--阴影--> <View android:layout_width="match_parent" android:layout_height="8dp" android:layout_above="@id/bottomNavigationView" android:background="@drawable/shadow"/> </RelativeLayout>
介绍一下BottomNavigationView的三个重要属性:
- app:itemBackground:设置item的背景,对应setItemBackgroundResource(int resId)方法
- app:itemIconTintUsed:设置icon的颜色,对应setItemIconTintList(ColorStateList tint)方法
- app:itemTextColor:设置文字的颜色,对应setIteTextColor(ColorStateList textColor)方法
在java代码中初始化viewpager
viewPager = (ViewPager) findViewById(R.id.viewpager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(MainFragment.newInstance("拨号"));
adapter.addFragment(MainFragment.newInstance("信息"));
adapter.addFragment(MainFragment.newInstance("搜索"));
viewPager.setAdapter(adapter);
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) {
}
});
}
bottomNavigationView=(BottomNavigationView) findViewById(R.id.bottomNavigationView);
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_search:{
viewPager.setCurrentItem(2);
break;
}
}
return false;
}
});
本文源代码下载地址