首先先看效果图:
具体实现:
首先导入依赖包:
compile 'com.android.support:design:27.+'
布局文件:
<?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"
android:orientation="vertical"
tools:context="com.lsc.yumo.demo_1.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/main_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:tabBackground="@drawable/sp_bg"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="#02d"
app:tabTextColor="#ccc">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/main_vp_content"
android:isScrollContainer="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/main_tabLayout">
</android.support.v4.view.ViewPager>
</RelativeLayout>
其中Tablayout标签中的属性
app:tabBackground="@drawable/sp_bg"//每一个item的背景
app:tabIndicatorHeight="0dp"//下滑线设置为0 即隐藏下划线
app:tabSelectedTextColor="#02d"//选中状态的item的字体颜色
app:tabTextColor="#ccc"//默认状态下的item的字体颜色
java代码的实现:
public class MainActivity extends AppCompatActivity{
TabLayout mainTabLayout;
ViewPager mainViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mainViewPager = findViewById(R.id.main_vp_content);
mainTabLayout = findViewById(R.id.main_tabLayout);
initViewPager();
}
public void initViewPager(){
mainViewPager.setAdapter(new VpAdapter(getSupportFragmentManager()));
//注释掉的代码可以实现滑动 但是不能实现点击的自动跳转的效果
// mainViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
// @Override
// public void onPageSelected(int position) {
// mainTabLayout.getTabAt(position).select();
// }
// });
//Tablayout 与 viewPager 进行绑定
mainTabLayout.setupWithViewPager(mainViewPager);
//由于绑定后 标签的标题和图片都会消失 所以在绑定玩完成后需要对标签进行赋值
//设置title
mainTabLayout.getTabAt(0).setText("商品");
mainTabLayout.getTabAt(1).setText("分类");
mainTabLayout.getTabAt(2).setText("购物");
mainTabLayout.getTabAt(3).setText("我的");
//设置图片 由于图片的选中和未选中状态不一致 所以需要为每张图片在drawable目录下新建一个xml文件
//用于区分选中和默认的显示状态 然后把xml文件赋值给每一个item
mainTabLayout.getTabAt(0).setIcon(R.drawable.goods);
mainTabLayout.getTabAt(1).setIcon(R.drawable.classification);
mainTabLayout.getTabAt(2).setIcon(R.drawable.shopping_cart);
mainTabLayout.getTabAt(3).setIcon(R.drawable.mine);
}
}
ViewPager的适配器VpAdapter
public class VpAdapter extends FragmentPagerAdapter {
public VpAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 0){
return new GoodsFragment();
}else if (position == 1){
return new ClassificationFragment();
}else if (position == 2){
return new ShoppingCartFragment();
}else if (position == 3){
return new MineFragment();
}
return new GoodsFragment();
}
@Override
public int getCount() {
return 4;
}
}
示例中fragment的代码很简单 在实际项目中按需求填写即可.