FlycoTabLayoutZ
在 FlycoTabLayout 的基础上,扩展出 SlidingScaleTabLayout,实现滑动可以改变 tab 字体的大小的切换效果
首先感谢 FlycoTabLayout 原作者的开源精神,此文档仅描述 SlidingScaleTabLayout 的用法,关于 FlycoTabLayout 原本的具体用法请移步:
https://github.com/H07000223/FlycoTabLayout
新增 SlidingScaleTabLayout
SlidingScaleTabLayout 支持 SlidingTabLayout 的全部特性。
使用说明:
1、添加 gradle 配置:
compile 'com.lzp:FlycoTabLayoutZ:lastversion' // 请查看最新版本号
2、新增设置 tab 被选中以及未被选中的文字大小,大小的变化会在 ViewPager 滑动的时候自动变化:
<attr name="tl_textSelectSize" />
<attr name="tl_textUnSelectSize" />
3、标题默认默认是文字居中,可以修改 gravity 和 margin 属性,设置在 tab 中的位置:
<attr name="tl_tab_marginTop" />
<attr name="tl_tab_marginBottom" />
<attr name="tl_tab_gravity" />
4、如果你使用的是 1.2.1 之前的版本,请务必重写 PagerAdapter.getItemPosition()方法,根据 object 返回正确的位置信息,因为需要通过此方法找到对应位置的 SlidingTab,进行文字样式切换:
@Override
public int getItemPosition(@NonNull Object object) {
// PagerAdapter 的默认实现,请返回正确的位置信息
return PagerAdapter.POSITION_NONE;
}
强烈推荐升级到 1.2.1 及以上版本
v1.3.3 新增
新增 tl_tab_background 属性,设置 tab 标题文字的背景,建议使用 selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置被选中的标题的背景 -->
<item android:state_selected="true">
<shape>
<!-- 建议使用此方法设置 padding -->
<padding android:bottom="5dp" android:left="10dp" android:right="10dp" android:top="5dp" />
<solid android:color="#000000" />
<corners android:radius="999dp" />
</shape>
</item>
<!-- 设置未被选中的标题的背景 -->
<item>
<shape>
<!-- 建议使用此方法设置 padding -->
<padding android:bottom="5dp" android:left="10dp" android:right="10dp" android:top="5dp" />
<solid android:color="#666666" />
<corners android:radius="999dp" />
</shape>
</item>
</selector>
v1.3.1 新增
修改 SlidingTabLayout 和 SlidingScaleTabLayout 可以单独使用,新增:
setTitle(String[] titles) // 设置标题集合
具体使用请参考 Demo。
v1.2.3 新增
修复红点消息显示位置不正确的问题,新增自定义属性:
<!-- 未读消息的位置 -->
<attr name="tl_tab_msg_marginTop" />
<attr name="tl_tab_msg_marginRight" />
<!-- 红点的位置 -->
<attr name="tl_tab_dot_marginTop" />
<attr name="tl_tab_dot_marginRight" />
默认为标题文字的右上角。
1.2.x 版本优化方案请查看: https://blog.csdn.net/u011315960/article/details/107607134
v1.2.1 新增
删除自定义属性:
<attr name="tl_tab_gravity" />
新增自定义属性:
<!-- tab 的水平位置 -->
<attr name="tl_tab_horizontal_gravity" format="enum">
<enum name="Left" value="0" />
<enum name="Right" value="1" />
<enum name="Center" value="2" />
</attr>
设置 tab 内容的位置,可以改变缩放效果的锚点。默认都为 Center,居中显示。
v1.1.1 新增
新增自定义属性:是否开启文字的图片镜像 ,解决 SlidingScaleTabLayou 文字变化抖动的问题:
<attr name="tl_openTextDmg" format="boolean"/>
请注意:如果设置 tl_openTextDmg 为 true,但是 tl_textSelectSize 与 tl_textUnSelectSize 相等,同样不会开启图片副本;
具体原因以及解决方案请查看:https://blog.csdn.net/u011315960/article/details/103902279
示例
xml:
<com.flyco.tablayout.SlidingScaleTabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tl_indicator_color="@color/colorAccent"
app:tl_indicator_corner_radius="3dp"
app:tl_indicator_gravity="BOTTOM"
app:tl_indicator_height="2dp"
app:tl_indicator_width="7dp"
app:tl_textBold="SELECT"
app:tl_tab_gravity="Bottom"
app:tl_tab_marginBottom="8dp"
app:tl_tab_padding="15dp"
app:tl_textSelectColor="@color/colorPrimary"
app:tl_textSelectSize="20sp"
app:tl_textUnSelectColor="@color/colorPrimaryDark"
app:tl_textUnSelectSize="14sp" />
Java:
SlidingScaleTabLayout tabLayout = findViewById(R.id.tablayout);
ViewPager viewPager = findViewById(R.id.viewpager);
viewPager.setAdapter(new MyViewPagerAdapter());
viewPager.setOffscreenPageLimit(4);
tabLayout.setViewPager(viewPager);
// PagerAdapter 中的 getItemPosition 实现
// 1.2.1 版本后不再需要实现
//@Override
//public int getItemPosition(@NonNull Object object) {
// 取出设置的 tag,返回位置信息
//View view = (View) object;
//return (int) view.getTag();
//}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
TextView textView = new TextView(SlidingScaleTabLayoutActivity.this);
textView.setBackgroundColor(colors[position]);
textView.setText(getPageTitle(position));
// 设置 tag 为 position
// 1.2.1 版本后不再需要 setTag
//textView.setTag(position);
container.addView(textView);
return textView;
}
更多使用示例,请参考 demo。
如果您觉得不错,感谢打赏一个猪蹄:
如果在使用过程中遇到问题或者有更好的建议,欢迎发送邮件到:
lzp-541@163.com