项目地址:
https://github.com/ogaclejapan/SmartTabLayout
介绍
自定义ViewPager标题栏,在滚动时向用户提供持续的反馈。
用法
将依赖关系添加到build.gradle。
dependencies {
compile 'com.ogaclejapan.smarttablayout:library:1.6.1@aar'
//Optional: see how to use the utility.
compile 'com.ogaclejapan.smarttablayout:utils-v4:1.6.1@aar'
//Optional: see how to use the utility.
compile 'com.ogaclejapan.smarttablayout:utils-v13:1.6.1@aar'
}
在布局中包含SmartTabLayout小部件。这通常应放在它所代表的ViewPager之上。
<com.ogaclejapan.smarttablayout.SmartTabLayout
android:id="@+id/viewpagertab"
android:layout_width="match_parent"
android:layout_height="48dp"
app:stl_indicatorAlwaysInCenter="false"
app:stl_indicatorWithoutPadding="false"
app:stl_indicatorInFront="false"
app:stl_indicatorInterpolation="smart"
app:stl_indicatorGravity="bottom"
app:stl_indicatorColor="#40C4FF"
app:stl_indicatorThickness="4dp"
app:stl_indicatorWidth="auto"
app:stl_indicatorCornerRadius="2dp"
app:stl_overlineColor="#4D000000"
app:stl_overlineThickness="0dp"
app:stl_underlineColor="#4D000000"
app:stl_underlineThickness="1dp"
app:stl_dividerColor="#4D000000"
app:stl_dividerThickness="1dp"
app:stl_defaultTabBackground="?attr/selectableItemBackground"
app:stl_defaultTabTextAllCaps="true"
app:stl_defaultTabTextColor="#FC000000"
app:stl_defaultTabTextSize="12sp"
app:stl_defaultTabTextHorizontalPadding="16dp"
app:stl_defaultTabTextMinWidth="0dp"
app:stl_distributeEvenly="false"
app:stl_clickable="true"
app:stl_titleOffset="24dp"
app:stl_drawDecorationAfterTab="false"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/viewpagertab"
/>
在onCreate方法(或片段的onCreateView)中,将小部件绑定到ViewPager。
例如 v4.Fragment的ViewPager
FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
getSupportFragmentManager(), FragmentPagerItems.with(this)
.add(R.string.titleA, PageFragment.class)
.add(R.string.titleB, PageFragment.class)
.create());
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(adapter);
SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
viewPagerTab.setViewPager(viewPager);
(可选)如果ViewPager使用OnPageChangeListener,则应将其设置在SmartTabLayout中,而不是直接在ViewPager上。
viewPagerTab.setOnPageChangeListener(mPageChangeListener);
(可选)使用FragmentPagerItemAdapter,position。
int position = FragmentPagerItem.getPosition(getArguments());
该位置将有助于实现包含ViewPager的视差滚动标题
属性
可以设置几个属性:
ATTR | 描述 |
---|---|
stl_indicatorAlwaysInCenter | 如果设置为true,活动选项卡始终显示在中心(与书报摊谷歌应用程序相似),默认为false |
stl_indicatorWithoutPadding | 如果设置为true,则绘制指示符,而不填充tab,默认为false |
stl_indicatorInFront | 在下划线前绘制指标,默认为false |
stl_indicatorInterpolation | 指标的行为:’线性’或’敏捷’ |
stl_indicatorGravity | 指示器的绘图位置:“底部”或“顶部”或“中心”,默认“底部” |
stl_indicatorColor | 指示灯的颜色 |
stl_indicatorColors | 指示器的多种颜色,可以为每个选项卡设置颜色 |
stl_indicatorThickness | 指示器的厚度 |
stl_indicatorWidth | 指示灯的宽度,默认为“自动” |
stl_indicatorCornerRadius | 圆角半径指示器 |
stl_overlineColor | 顶线颜色 |
stl_overlineThickness | 顶线的厚度 |
stl_underlineColor | 底线颜色 |
stl_underlineThickness | 底线厚度 |
stl_dividerColor | 标签之间的分隔线的颜色 |
stl_dividerColors | 选项卡之间的分隔线的多种颜色可以为每个选项卡设置颜色 |
stl_dividerThickness | 分隔线的厚度 |
stl_defaultTabBackground | 每个标签的背景画。一般来说,它设置StateListDrawable |
stl_defaultTabTextAllCaps | 如果设置为true,则所有选项卡标题都将大写,默认为true |
stl_defaultTabTextColor | 默认情况下包含的选项卡的文本颜色 |
stl_defaultTabTextSize | 默认情况下包含的选项卡的文本大小 |
stl_defaultTabTextHorizontalPadding | 默认情况下包含的选项卡的文本布局填充 |
stl_defaultTabTextMinWidth | 标签的最小宽度 |
stl_customTabTextLayoutId | 布局ID定义自定义选项卡。如果不指定布局,请使用默认选项卡 |
stl_customTabTextViewId | 自定义选项卡布局中的文本视图ID。如果没有使用customTabTextLayoutId定义,则不起作用 |
stl_distributeEvenly | 如果设置为true,则每个选项卡的权重相同,默认为false |
stl_clickable | 如果设置为false,则禁用选项卡单击的选择,默认为true |
stl_titleOffset | 如果设置为“auto_center”,则中间的选项卡的滑动位置将保持在中间。如果指定尺寸,它将从左边缘偏移,默认为24dp |
stl_drawDecorationAfterTab | 绘制标签后绘制装饰(指示和线),默认为false |
注意:如果设置为true,“stl_indicatorAlwaysInCenter”和“stl_distributeEvenly”都将抛出UnsupportedOperationException。
如何自定义选项卡
选项卡的定制有三种方式。
- 自定义属性
- SmartTabLayout#setCustomTabView(int layoutResId, int textViewId)
- SmartTabLayout#setCustomTabView(TabProvider provider)
如果设置TabProvider,可以为每个选项卡构建一个视图。
public class SmartTabLayout extends HorizontalScrollView {
//...
/**
* 在选项卡布局中创建自定义选项卡。
* {@link #setCustomTabView(com.ogaclejapan.smarttablayout.SmartTabLayout.TabProvider)}
*/
public interface TabProvider {
/**
* @return Return the View of {@code position} for the Tabs
*/
View createTabView(ViewGroup container, int position, PagerAdapter adapter);
}
//...
}
如何使用实用程序
实用程序有两种可用于适合Android支持库的类型。
- utils-v4库包含用于android.support.v4.app.Fragment的PagerAdapter实现类
- utils-v13库包含用于android.app.Fragment的PagerAdapter实现类
这两个库有不同的Android支持库依赖,但实现的功能是一样的。
PagerAdapter for View-based Page
ViewPagerItemAdapter adapter = new ViewPagerItemAdapter(ViewPagerItems.with(this)
.add(R.string.title, R.layout.page)
.add("title", R.layout.page)
.create());
viewPager.setAdapter(adapter);
//...
public void onPageSelected(int position) {
//.instantiateItem() from until .destroyItem() is called it will be able to get the View of page.
View page = adapter.getPage(position);
}
PagerAdapter for Fragment-based Page
基于Fragment的PagerAdapter有两个实现。请参见Android的库文档。
- FragmentPagerItemAdapter扩展了FragmentPagerAdapter
- FragmentStatePagerItemAdapter扩展了FragmentStatePagerAdapter
FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
getSupportFragmentManager(), FragmentPagerItems.with(this)
.add(R.string.title, PageFragment.class),
.add(R.string.title, WithArgumentsPageFragment.class, new Bundler().putString("key", "value").get()),
.add("title", PageFragment.class)
.create());
viewPager.setAdapter(adapter);
//...
public void onPageSelected(int position) {
//.instantiateItem() from until .destoryItem() is called it will be able to get the Fragment of page.
Fragment page = adapter.getPage(position);
}
注意:如果在ViewPager内部使用Fragment,必须使用Fragment#getChildFragmentManager ()。