自定义 TabLayout 就像在三星音乐应用中一样

问题描述 投票:0回答:0

模式设置为可滚动的默认 TabLayout 提供以下内容:

选中的选项卡指示器的位置不固定。如果选择了第一个选项卡,则选项卡指示器位于屏幕的最左侧。

但下面是三星音乐应用程序的视图:

所选选项卡始终位于屏幕中央,第一个/最后一个项目未绑定到屏幕的开始/结束。

此外,他们还有很酷的动画:

  1. 问题在于将所选选项卡保持在屏幕中央。
  2. 选项卡更改的动画文档也没有在任何地方可用。所选选项卡移开时的缩小动画和未选择的选项卡被选中时的放大动画。

我尝试过的事情: 1:我在没有任何知识的情况下尝试了一些事情,例如向最后一个/第一个选项卡项添加填充和边距。没有做任何改变。此外,选项卡指示器对我来说不是问题。我通过设置透明颜色删除了它,并且可以在选定和未选定回调的代码中更改选定选项卡的文本大小和字体。

  1. 对于动画,我在代码中的选项卡项上设置了 onTouch 侦听器,认为在提取运动方向后,我可以更改文本比例因子。但是即使我正在移动选项卡,运动事件也会在触发几次后停止。

此外,使用此逻辑,我更改了用于滚动的选项卡项的文本。它不会为通过中心的每个选项卡提供效果。 ** 有没有办法获得这种标签布局?**

下面是我的实验代码,没有逻辑,只有一个带有回调事件的起始代码:

        contentBinding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                if (tab != null) {
                    Log.d("TAB_LAYOUT", "onTabSelected: "+tab.text)
                    //tab.view. ...
                    // Set huge text size and font
                }
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                if (tab != null) {
                    Log.d("TAB_LAYOUT", "onTabUnselected: "+tab.text)
                    //tab.view. ...
                    // Set normal unselected text size and font
                }
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
                if (tab != null) {
                    Log.d("TAB_LAYOUT", "onTabReselected: "+tab.text)
                    //tab.view. ...
                    // Set huge text size and font
                }
            }
        })

        for (i in 0..4){
            val mytab = contentBinding.tabLayout.getTabAt(i)
            mytab?.view?.setOnTouchListener(object : View.OnTouchListener {
                override fun onTouch(v: View?, event: MotionEvent?): Boolean {
                    Log.d("TAB_ITEM_ALL"+i, "onTouch: "+event.toString())
                    if (event != null) {
                        if(event.action == ACTION_MOVE)
//                            if(event.x > prevX){
//                              moving away logic
//                            }
//                            else{
//                              moving towards
//                            }
                            return false
                    }
                    return false
                }
            })
        }

此代码完全有缺陷!我认为这甚至不是推荐的方法!!!

我应该使用动画还是翻译等?

任何形式的帮助将不胜感激。

android-tablayout material-components-android
© www.soinside.com 2019 - 2024. All rights reserved.