Giter VIP home page Giter VIP logo

angcyo / dsltablayout Goto Github PK

View Code? Open in Web Editor NEW
1.5K 16.0 139.0 31.3 MB

:hearts: Android界最万能的TabLayout(不仅仅是TabLayout), 支持任意类型的item, 支持Drawable类型的指示器,智能开启滚动,支持横竖向布局等

Home Page: https://github.com/angcyo/DslAdapter

License: MIT License

Kotlin 100.00%
android kotlin dsl tablayout light viewpager viewpager2 badge auto-scroll auto-item-width

dsltablayout's Introduction

DslTabLayout

API GitHub branch checks state GitHub AndroidX GitHub top language JitPack

GitHub code size in bytes GitHub repo size GitHub last commit GitHub issues GitHub Repo stars GitHub forks

♥️ Android界最万能的TabLayout(不仅仅是TabLayout). 高能自绘控件, 继承自ViewGroup, 非组合控件.

Gitee仓库地址

文档地址

特性

  1. 支持任意类型的child视图.
  2. 支持任意类型Drawable指示器.
  3. 支持智能开启横向滚动.
  4. 支持智能开启平分item宽度(1.5.4后).
  5. 支持高凸模式, 允许某个child高出一节显示.
  6. 支持滑动选择模式, 滑动的时候智能选择上一个下一个.
  7. 支持角标配置.
  8. 支持ViewPagerViewPager2
  9. 支持竖向(2.0.0后)
  10. 支持指示器居中 靠左 靠右展示(2.1.0后)
  11. 支持选中后突出异形效果(2.2.0后)
  12. 支持RTL(3.0.0后, minSdk>=17)
  13. 支持指示器颜色滑动渐变效果(3.0.1后)
  14. 支持指示器闪现效果(3.1.0后)

直接当做横向/竖向LinearLayout使用方式即可, 无特殊要求.

入门使用

点击查看全部属性

点击查看事件回调

点击查看角标使用

关联ViewPager使用(兼容ViewPager2)

效果

一个DSLTabLayout可实现以下3中效果

高能自绘控件, 继承自ViewGroup, 非组合控件.

无需选择, xml配置即可, 还不赶紧收下?

带滚动效果和角标
带滚动效果和角标
普通和高凸效果
普通和高凸效果
带边框,分割线和滑动选择效果
分割线和滑动选择效果

竖向效果

竖向效果

竖向效果

竖向效果

突出效果

突出效果

突出效果

闪现效果

闪现效果

使用JitPack的方式, 引入库.

AGP 8.+ 根目录中的 settings.gradle

dependencyResolutionManagement {
    ...
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

AGP 8.- 根目录中的 build.gradle

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

APP目录中的 build.gradle

dependencies {
    implementation 'com.github.angcyo.DslTablayout:TabLayout:3.5.5'

    //可选
    implementation 'com.github.angcyo.DslTablayout:ViewPager1Delegate:3.5.5'
    //可选
    implementation 'com.github.angcyo.DslTablayout:ViewPager2Delegate:3.5.5'
}

如果无法从jitpack获取库可以尝试使用group:com.github.angcyo.DslTabLayout:xxx

更新日志

下载体验

扫码安装

扫码安装

License

FOSSA Status


群内有各(pian)种(ni)各(jin)样(qun)的大佬,等你来撩.

联系作者

点此QQ对话 该死的空格 点此快速加群

开源地址

扫码进群

给点鼓励

趋势

Stargazers over time

👏 感谢

angcyo/DslTabLayout

dsltablayout's People

Contributors

angcyo 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dsltablayout's Issues

只能在 xml 中初始化标题吗?

请问使用的时候是每次需要我在 xml 创建 TextView 吗?没有和 viewPager1 的标题关联吗?我在示例中没有找到相关的配置呢

角标,指示器不显示

<com.angcyo.tablayout.DslTabLayout
android:id="@+id/dslTabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#00000000"
app:tab_draw_badge="true"
app:tab_badge_gravity="center"
app:tab_badge_offset_x="50dp"
app:tab_badge_offset_y="-10dp"
app:tab_badge_solid_color="@color/color_EF393B"
app:tab_badge_text="99"
app:tab_badge_text_color="@color/white"
app:tab_badge_text_size="15sp"
app:tab_deselect_color="@color/color_333333"
app:tab_draw_indicator="true"
app:tab_indicator_color="@color/color_4975EC"
app:tab_indicator_height="1dp"
app:tab_indicator_style="STYLE_BOTTOM"
app:tab_indicator_width="MATCH_PARENT"
app:tab_orientation="HORIZONTAL"
app:tab_select_color="@color/color_4975EC">
</com.angcyo.tablayout.DslTabLayout>

通过addView添加,角标、指示器不显示
titles!!.add("地下埋设管道")
titles!!.add("地下穿越管道")
titles!!.add("架空管(桥管)")
titles!!.add("立管")
titles!!.add("法兰阀门")
titles!!.add("PE阀门")
titles!!.add("直埋焊接阀门")
titles!!.add("调压柜")
titles!!.add("调压箱")
titles!!.add("调压室")
titles!!.add("牺牲阳极")

                for (s in titles) {
                   
                    binding.dslTabLayout.addView(TextView(this).apply {
                        text = s
                        textSize = 14f
                        gravity = Gravity.CENTER_VERTICAL
                        layoutParams = DslTabLayout.LayoutParams(-2, -2).apply {
                            leftMargin = 20
                            rightMargin = 20
                        }
                    })


                }

角标属性

角标可以加个边框颜色和粗细的属性吗

设置itemAutoEquWidth为true时,智能等宽判断存在异常场景

场景如下:

设置3个tab item,3个item宽度长短不一,当3个item宽相加的时候并没有超过屏幕宽度,此时进行3等分,等分之后其中一个item的宽度超过了等分后的宽度,造成了布局异常。

所以应该通过最大的item宽度乘以item总数来判断是否超过屏幕宽度。

这个问题已经提了个pr,麻烦作者有空合并一下。

🙏感谢作者的开源

动态变更颜色

请问在切换的过程中,是否支持动态更新字体和下划线的颜色呢?

DslDrawable

源码中这个类貌似没用到,版主可否给个示例。

item组合的时候,是不是无法改颜色?

  <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/click_bg">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="21dp"
                android:adjustViewBounds="true"
                android:src="@mipmap/module_msg"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="消息"
                android:textSize="11dp"
                android:layout_marginTop="4dp"
                android:textColor="@color/gray_33"/>

        </LinearLayout>

像这种,linearLayout里一个imageView和一个textView,tab_select_color和tab_deselect_color设置无效是吗?

我这边选中和未选中的颜色属性失效

app:tab_select_color="#F42834"
app:tab_deselect_color="@color/c6"
用下面的代码设置也是没效果的
onSelectIndexChange = { fromIndex, selectIndexList, reselect,_ ->
val toIndex = selectIndexList.first()
tabSelectColor = Color.parseColor("#F42834")
tabDeselectColor = Color.parseColor("#666666")
_viewPagerDelegate?.onSetCurrentItem(fromIndex, selectIndexList.last())
}
能帮我看一下什么问题?

如何实现首页tab场景

要求:1. 只有打开对应tab的时候才加载fragment 2.加载后不回收。
不太喜欢官方提供的;�Tab+ViewPager要么会回收,要么会预加载,要么一次全部加载。

动态添加TAB样式问题

动态添加tab好像是通过 tabLayout.addView()
配置属性好像有点麻烦。
demo里面的add item能做到跟demo主页的效果吗

关于初始化配置(代码配置)

首先库是好库,根据属性大全用xml配置也没问题。
现在我用一个类继承DslTabLayout,然后在init里面初始化一些配置。
1、角标配置失败。(onTabBadgeConfig配置也不生效,wiki里面好像是单一配置,统一配置不行,希望像xml配置一次就行了)

    drawBadge = true
    tabBadge = DslTabBadge().apply {
      updateBadgeConfig(
        TabBadgeConfig(
          badgeTextSize = 10 * dp,
          badgeTextColor = Color.WHITE,
          badgeSolidColor = context.getCompatColor(color.user_badge_color),
          badgeGravity = Gravity.RIGHT or Gravity.TOP,
          badgeCircleOffsetX = 6 * dpi,
          badgeCircleOffsetY = 8 * dpi,
          badgeOffsetX = 8 * dpi,
          badgeOffsetY = 18 * dpi
        )
      )
    }

2、Indicator需要配置两次才能生效。(比如高宽和Offset,是因为他们的默认值不是本身?)

    drawIndicator = true
    tabIndicator = DslTabIndicator(this).apply {
      indicatorHeight = 2 * dpi
      indicatorWidth = 40 * dpi
      indicatorHeightOffset = 1 * dpi
      indicatorYOffset = -1 * dpi
      indicatorStyle = DslTabIndicator.INDICATOR_STYLE_BOTTOM
      indicatorEnableFlow = true
      gradientShape = GradientDrawable.RECTANGLE
      gradientSolidColor = context.getCompatColor(color.user_red_important)
    }
    tabIndicator.apply {
      indicatorHeight = 2 * dpi
      indicatorWidth = 40 * dpi
      indicatorHeightOffset = 1 * dpi
      indicatorYOffset = -1 * dpi
      indicatorStyle = DslTabIndicator.INDICATOR_STYLE_BOTTOM
      indicatorEnableFlow = true
      gradientShape = GradientDrawable.RECTANGLE
      gradientSolidColor = context.getCompatColor(color.user_red_important)
    }
    invalidate()

XML配置属性无效

通过XML配置
app:tab_text_min_size="20sp"
app:tab_text_max_size="25sp"
app:tab_select_color="@color/themeTextColor"
app:tab_deselect_color="@color/textColorGray"
这些属性都无效,但是我通过代码配置config滑动事件改变颜色有效

关于文档的问题

库是好库,只是这个文档看得我一脸懵逼,希望可以规范完善一下,可以省了很多接入的时间。

动态改变tab的选中颜色

app:tab_deselect_color="@color/text_gray"
app:tab_select_color="@color/TextColorBlack"
这两个xml属性在Java代码是哪个方法可以设置?

遇到了一个非常奇怪的问题

当我的item没有铺满整个屏幕时,dsltablayout是不可滑动的 ,而这是我点击最后一个tab后切换成小窗状态,这时item数量超出了屏幕,是可以滑动的,这时再从小窗切换回全屏状态,dsltablayout不可滑动且把前几个item顶出了屏幕,滑不回来了,具体情况可以看链接里的录屏
https://dl.muge.info/WeChat_20211105214806.mp4

在配置TabLayout不等宽的时候, 滑动Tab会出现文字抖动的现象

我这里的是在TabLayout里动态添加了3个TextView, 同时这是了tab_selected_text_size和tab_unSelected_text_size, 还有text_seleced_bold, 发现在屏幕等宽模式下, 切换一切正常, 但是在不等宽的时候, 切换Tab会出现文字抖动的情况, TextView的左右内边距我设置的是15dp. 我有2出地方是这么写的, 其中一处用的是ViewPager 这个没发现有这个问题, 但是另外一处用的是viewPager2, 就出现这个问题,

setCurrentItem死循环

场景模拟:首页四个tab:A、B、C、D;在B中又有三个Tab:E、F、G。现在点击A中的一个按钮,同时发出事件a,b。a定位首页的tab到B;b事件定位到B中的G。由于事件a、b是同时发出的,会存在B页面还没可见的时候就会触发b事件。这个时候setCurrentItem就会出现死循环,并且B中的定位回调失效。延时500ms执行setCurrentItem就没事。

/**设置tab的位置*/
    fun setCurrentItem(index: Int, notify: Boolean = true, fromUser: Boolean = false) {
        if (currentItemIndex == index) {
            _scrollToCenter(index, tabIndicator.indicatorAnim)
            return
        }
        val targetView = dslSelector.visibleViewList.getOrNull(index)
        if (targetView == null || ViewCompat.isLaidOut(targetView)) {
            dslSelector.selector(index, true, notify, fromUser)
        } else {
            post {
              //逻辑一直执行这里
                setCurrentItem(index, notify, fromUser)
            }
        }
    }

激活文本渐变下,点击切换时文本颜色不能正常恢复

首先感谢作者,目前看来这个库很强大,有望成为下一个热点。
library版本:V1.5.2,用的viewpager2。
使用时所有属性都在layout里面设置,开启 tab_enable_gradient_color = true 之后,viewpager滑动切换tab无问题;但是当点击切换tab时,被点击tab未能达到预设颜色,会比预设颜色暗一些(个人猜测:可能是点击未处理好颜色的切换问题)。然后再滑动viewpager2就正常,或者说稍微动一下viewpager2就又正常。

onSelectViewChange中的fromView为什么没有跟随点击事件发生变化

onSelectViewChange = { fromView, selectViewList, _, _ ->
    // 改变字体粗细
    fromView.apply {
        findViewById<TextView>(R.id.classify_tag).typeface = Typeface.DEFAULT
    }
    selectViewList.first().apply {
        findViewById<TextView>(R.id.classify_tag).typeface = Typeface.DEFAULT_BOLD
    }
}

为什么fromView始终是第一项item,并没有跟随点击事件发生变化

configTabLayoutConfig#onSelectItemView 获取索引不对

麻烦有时间看一下。在回调里面通过DslTabLayout 获取索引获取的是不对的,但是回调的值 index是对的。
代码如下,获取索引不对:

`
desLayout.configTabLayoutConfig {
onSelectItemView = { _, index, select, _ ->
Log.d("desLayout", "titles2DslTabLayoutChildren: " + select + "," + index)
if (select) {
//这里获取索引不对。
val currentItemIndex =dslLayout .currentItemIndex
}
false
}
}

`

自动着色无效

这几个属性对imageview不生效,只对文字有效,指示器也没有显示
这是我的xml
<com.angcyo.tablayout.DslTabLayout
android:id="@+id/dslTabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:tab_draw_indicator="true"
app:tab_indicator_color="@color/colorPrimary"
app:tab_item_is_equ_width="true"
app:tab_select_color="@color/colorPrimary"
app:tab_deselect_color="#626262">

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.