效果这样的:
在以前使用顶部滚动的标题栏都是使用的ViewPagerIndicator,https://github.com/JakeWharton/ViewPagerIndicator但是现在谷歌自己退出了TabLayout控件,使用起来很简单。以前自己也用了但是没有进行总结,这次就做个总结。
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/title_main"
app:tabSelectedTextColor="@color/title_main"
app:tabTextColor="@color/black3" app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
/>
这里主要就是四个自定义的属性
- app:tabIndicatorColor代表的是Tab下面指示器的颜色
- app:tabSelectedTextColor代表当前选择Tab字体的颜色
- app:tabTextColor代表没有选中Tab字体的颜色
- app:tabTextAppearance代表自定义的属性主要写的是字体的大小
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
<item name="android:textSize">16sp</item>
</style>
还有的情况是Tab下面的指示器高度太低可以通过
tabs.setSelectedTabIndicatorHeight(14);
进行设置
设置TabLayout的显示模式
tabs.setTabMode(TabLayout.MODE_SCROLLABLE);
总共有两种模式:
- public static final int MODE_SCROLLABLE = 0; 可以滚动
public static final int MODE_FIXED = 1; 默认
添加Tab
tabs.addTab(tabs.newTab().setText(" "+r.getName()+" "));
和ViewPage进行关联
tabs.setupWithViewPager(vpDevice);
总共的代码就这几行:
@Override
protected void initView() {
setContentView(R.layout.ui_all_device);
initTitle("全部设备",R.drawable.select_return);
ButterKnife.inject(this);
accessKey=getIntent().getExtras().getString("accessKey");
}
@Override
protected void initData(Bundle bundle) {
tabs.setTabMode(TabLayout.MODE_SCROLLABLE);
allRoom = DBHelpter.getInstance().getAllRoom(accessKey);
for (Room r : allRoom) {
tabs.addTab(tabs.newTab().setText(" "+r.getName()+" "));
}
setViewPage(vpDevice);
tabs.setSelectedTabIndicatorHeight(14);
tabs.setupWithViewPager(vpDevice);
}
private void setViewPage(ViewPager vpDevice) {
adapter = new DeviceClassifyAdapter(getSupportFragmentManager());
adapter.setRooms(allRoom);
vpDevice.setAdapter(adapter);
}
最后还要篇比较好的写的
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html