效果图镇楼
tablayout.gif
来，小伙伴们。今天为大家带来的是android 5.0之后新推出的Material Design包中的TabLayout效果。
一，首先我们一起来配置环境
compile 'com.android.support:design:26.0.0-alpha1'
这里要注意了，design包是属于support包中的所以要和项目里所有“com.android.support:”开头的包名保持版本一致。可以将其他support版本改成26.0.0也可以将design包的版本降低成和其他support包版本一样的包。support包主要包括v7包和v4包。
二，1.0紧接着我们来填写布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<--Tab栏-->
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_height="60dp"
android:layout_width="match_parent"
android:background="#00ffff"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="#000000"
>
</android.support.design.widget.TabLayout>
<--放碎片的滑动页-->
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<--演示删除Tab页所用到的按钮-->
<Button
android:text="删除第5项"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onClick"/>
</LinearLayout>
颜色什么的自己随便写吧，高兴就好。
2.0在Java代码中将Tab和滑动页关联起来，我会以注释的方式为大家讲解各个属性方法的用途。
public class TabLayoutActivity extends AppCompatActivity {
//Tab栏
private TabLayout mTabLayout;
//滑动页
private ViewPager mVp;
//滑动页中所添加碎片的集合
private List<Fragment>fragments;
//tab栏标题的集合
private List<String>titleList;
//将Tab栏和滑动页关联在一起的适配器，下面我会给出
private MyPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
//简单的初始化工作
mTabLayout = (TabLayout) findViewById(R.id.tablayout);
mVp = (ViewPager) findViewById(R.id.vp);
//填充数据的方法
initPager();
//设置tab栏的方法
setTab();
}
private void initPager(){
//创建放入滑动页中碎片的集合
fragments = new ArrayList<>();
//创建tab栏标题的集合
titleList = new ArrayList<>();
//这里我们先简单的创建十个碎片放入滑动栏中
for (int i = 0; i < 10; i++) {
//创建碎片，创建的碎片我下面会给出
TabFragment tabFragment =new TabFragment();
//像碎片里传递数据，因为tab栏大多数时候存放的碎片内容布局都是一样的，只不过是数据不同而已，所以无需写多个碎片，重要写好一个碎片重复创建并传入不同数据加以区分就好
Bundle bundle = new Bundle();
bundle.putString("key","第"+i+"页");
tabFragment.setArguments(bundle);
//将创建好的碎片加入存放碎片的集合
fragments.add(tabFragment);
//给tab栏赋值
titleList.add("第"+i+"页");
}
//将tab栏和滑动页关联起来
adapter = new MyPagerAdapter(getSupportFragmentManager(),fragments,titleList);
mVp.setAdapter(adapter);
}
private void setTab(){
mTabLayout.setupWithViewPager(mVp); //设置tablayout和viewpager可联动
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //设置tablayout可以滑动
}
public void onClick(View view) {
//删除tab栏的第三
mTabLayout.removeTabAt(3);
//在适配器中删除赋给滑动页第三数据
adapter.removePos(3);
}
}
3.0上面用到的适配器
public class MyPagerAdapter extends FragmentStatePagerAdapter {
private List<Fragment>list;
private List<String>titleList;
public MyPagerAdapter(FragmentManager fm,List<Fragment>list,List<String>titleList) {
super(fm);
this.list = list;
this.titleList = titleList;
}
@Override
public int getItemPosition(Object object) {
return PagerAdapter.POSITION_NONE;
}
//删除个别项数据的方法
public void removePos(int pos){
this.list.remove(pos);
this.titleList.remove(pos);
notifyDataSetChanged(); //提醒更新
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
}
4.0TabFragment碎片随便建一个碎片就好了。下面是获取从上文中传入的数据
String key = getArguments().getString("key");
将其写在onCreate里然后把数据展示在TextView即可。
有不明白的地方可以在博客下留言。
全明白了，就点个赞吧。
