Coder Social home page Coder Social logo

flycotablayoutz's Introduction

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" />

新增自定义属性:

<attr name="tl_tab_vertical_gravity" format="enum">
    <enum name="Top" value="0" />
    <enum name="Bottom" value="1" />
    <enum name="Center" value="2" />
</attr>

<!-- 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。
如果您觉得不错,感谢打赏一个猪蹄:

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

[email protected]

flycotablayoutz's People

Contributors

li504799868 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

flycotablayoutz's Issues

加入dependency后编译出现Link Error

新建一个项目,然后在gradle dependencies 里加入 implementation 'com.lzp:FlycoTabLayoutZ:1.2.2' 。编译就出错。这个时候代码里还没有开始用 FlycoTabLayoutZ,仅仅是加入了dependencies。

Screen Shot 2020-07-19 at 10 21 17 AM
Screen Shot 2020-07-19 at 10 21 14 AM

SlidingTabLayout

    app:tl_indicator_bounce_enable="true"
                app:tl_indicator_color="#FFD6D2"
                app:tl_indicator_height="@dimen/dp_2"
                app:tl_indicator_corner_radius="@dimen/dp_2"

之前的作者说,SlidingTabLayout 不支持上面的指示器样式,请问是为什么呀

红点默认位置不在右上角

middle_img_9b99c888-4f4c-449f-8655-7e0109fd829g

只调用了,没有改任何东西。能把红点的默认位置设为右上角吗?谢谢老铁提供这么好用的组件,且回复及时,已经决定在项目里正式用了。
tabLayout.showDot(2);

WARNING: API 'variantOutput.getPackageLibrary()' is obsolete and has been replaced with 'variant.getPackageLibraryProvider()'.

demo运行时报错

WARNING: API 'variantOutput.getPackageLibrary()' is obsolete and has been replaced with 'variant.getPackageLibraryProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variantOutput.getPackageLibrary(), use -Pandroid.debug.obsoleteApi=true on the command line to display a stack trace.
Affected Modules: FlycoTabLayout_Lib

grdle版本:
com.android.tools.build:gradle:3.3.1
distributionUrl=https://services.gradle.org/distributions/gradle-4.10.1-all.zip

空指针

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewGroup$LayoutParams android.widget.TextView.getLayoutParams()' on a null object reference
        at com.flyco.tablayout.SlidingScaleTabLayout.setTabLayoutParams(SlidingScaleTabLayout.java:304)
        at com.flyco.tablayout.SlidingScaleTabLayout.notifyDataSetChanged(SlidingScaleTabLayout.java:295)
        at com.flyco.tablayout.SlidingScaleTabLayout.initViewPagerListener(SlidingScaleTabLayout.java:273)
        at com.flyco.tablayout.SlidingScaleTabLayout.setViewPager(SlidingScaleTabLayout.java:249)

如果 title为空字符串"",会crash

同样的设置 1.1.2不会crash

Screen Shot 2020-07-21 at 5 38 18 PM

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference at android.graphics.Bitmap.createBitmap(Bitmap.java:816) at com.flyco.tablayout.utils.ViewUtils.generateViewCacheBitmap(ViewUtils.java:19) at com.flyco.tablayout.SlidingScaleTabLayout.generateTitleDmg(SlidingScaleTabLayout.java:473) at com.flyco.tablayout.SlidingScaleTabLayout.updateTabStyles(SlidingScaleTabLayout.java:462) at com.flyco.tablayout.SlidingScaleTabLayout.notifyDataSetChanged(SlidingScaleTabLayout.java:329) at com.flyco.tablayout.SlidingScaleTabLayout.initViewPagerListener(SlidingScaleTabLayout.java:302) at com.flyco.tablayout.SlidingScaleTabLayout.setViewPager(SlidingScaleTabLayout.java:255) at com.lzp.tablayout.demo.ui.SlidingScaleTabLayoutFragmentActivity.onCreate(SlidingScaleTabLayoutFragmentActivity.java:36) at android.app.Activity.performCreate(Activity.java:7825) at android.app.Activity.performCreate(Activity.java:7814) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1306) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3245) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3409)  at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83)  at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)  at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2016)  at android.os.Handler.dispatchMessage(Handler.java:107)  at android.os.Looper.loop(Looper.java:214)  at android.app.ActivityThread.main(ActivityThread.java:7356)  at java.lang.reflect.Method.invoke(Native Method)  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930) 

SlidingScaleTabLayout

SlidingScaleTabLayout 使用
public void setViewPager(ViewPager vp, String[] titles, FragmentActivity fa, ArrayList fragments) {
//*****
}
字体缩放效果失效,求支援

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.