TabLayout :ViewPager上方放置一个标签指示器与其进行联动,此标签指示器就是TabLayout ,其中的Tab标签可以自定义view的样式。
示例如下:
1.导入依赖包 implementation ‘com.android.support:design:25.4.0’
2.activity_main.xml布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_tab_layout"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ff0000" //下划线滚动的颜色
app:tabSelectedTextColor="#ff00ff" //tab被选中后,文字的颜色
app:tabTextColor="#000000" > //tab默认的文字颜色
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
3.MainActivity.java文件
其中item布局文件非常简单,为了观察明显,因此只定义了背景颜色,具体代码省略,也可以自定义布局练习。
public class MainActivity extends AppCompatActivity {
List <View> viewList;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
LayoutInflater lf = LayoutInflater.from(this);
View view1 = lf.inflate(R.layout.item,null);
View view2 = lf.inflate(R.layout.item1,null);
View view3 = lf.inflate(R.layout.item2,null);
viewList = new ArrayList<>();
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
ViewPager viewPager = (ViewPager)findViewById(R.id.viewPager);
MyPagerAdapter adapter = new MyPagerAdapter();
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager); //关联viewpager
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //设置模式
for (int i =0;i<adapter.getCount();i++){
View view = lf.inflate(R.layout.custom_table,null);
TextView tv = (TextView) view.findViewById(R.id.tv_tab);
tv.setText(adapter.getPageTitle(i));
tabLayout.getTabAt(i).setCustomView(view); //设置自定义条目
}
}
private class MyPagerAdapter extends PagerAdapter{
//返回条目的数量
@Override
public int getCount() {
return viewList.size();
}
//object和view之间的关系
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//条目的初始化
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = viewList.get(position);
container.addView(view);
return view;
}
//销毁一个条目
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
Log.i("MyPagerAdapter","回收了哪一个位置"+position);
container.removeView(viewList.get(position));
}
//指定每个页面的标题
@Override
public CharSequence getPageTitle(int position) {
return "条目"+position;
}
}
}
4.custom_tab.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_tab"
android:textSize="14sp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:gravity="center"
android:textColor="#000000"
android:layout_gravity="center"
android:text="条目"/>
</LinearLayout>