FlycoTabLayoutZ

Introduction: 在 FlycoTabLayout 的基础上,扩展出 SlidingScaleTabLayout,实现滑动可以改变 tab 字体的大小的切换效果
More: Author   ReportBugs   
Tags:

在 FlycoTabLayout 的基础上,扩展出 SlidingScaleTabLayout,实现滑动可以改变 tab 字体的大小的切换效果

首先感谢 FlycoTabLayout 原作者的开源精神,关于 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、请务必重写 PagerAdapter.getItemPosition()方法,根据 object 返回正确的位置信息,因为需要通过此方法找到对应位置的 SlidingTab,进行文字样式切换:

 @Override
public int getItemPosition(@NonNull Object object) {
    // PagerAdapter 的默认实现,请返回正确的位置信息
    return PagerAdapter.POSITION_NONE;
}

1.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 实现
@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
    textView.setTag(position);
    container.addView(textView);
    return textView;
}

更多使用示例,请参考 demo。
如果您觉得不错,感谢打赏一个猪蹄:

如果在使用过程中遇到问题或者有更好的建议,欢迎发送邮件到:

lzp-541@163.com

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools