【问题标题】:Change size of text in TabLayout android在 TabLayout android 中更改文本的大小
【发布时间】:2020-10-24 12:49:50
【问题描述】:

所以我有 TabLayout,里面有两个 TabItem。我希望 TabLayout 内的文本增加,当我从第一个选项卡滑动到另一个选项卡时,我希望它像 第一个选项卡内的文本变小而另一个选项卡内的文本大小增加一样对其进行动画处理。强>

我的 TabLayout 监听器:

        final TabLayout tablayout=(TabLayout)rootview.findViewById(R.id.TabLayout);
        final ViewPager viewPager=rootview.findViewById(R.id.MainActivityPager);
        final TabLayoutAdapter tabLayoutAdapter=new TabLayoutAdapter(getContext(),getChildFragmentManager(),2);
        viewPager.setAdapter(tabLayoutAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
        tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
                tabLayoutAdapter.notifyDataSetChanged();
            
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

一个例子:https://imgur.com/gallery/OYz2Z1h

【问题讨论】:

标签: android android-layout android-tablayout


【解决方案1】:

虽然您可以在代码中设置选项卡的字体(例如字体和样式),但我发现设置文本大小的唯一方法是定义自定义选项卡视图,如下所示。

信用:https://stackoverflow.com/a/46972634/6400636

创建名为 custom_tab.xml

的 XML 布局
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/text1"
    android:textColor="?android:attr/textColorPrimary"/>

代码:

// Set a custom view for your tab(s)
TextView customTabView = (TextView) this.getLayoutInflater().inflate(R.layout.custom_tab, null);
tab.setCustomView(customTabView);

tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
        tabLayoutAdapter.notifyDataSetChanged();
            
        // Larger font size on select
        TextView customTabView = (TextView) tab.getCustomView();
        customTabView.setTextSize(24f);

        // or animate
        customTabView.setPivotX(0f);
        customTabView.animate()
          .scaleX(1.5f)
          .setInterpolator(LinearInterpolator())
          .setDuration(500)
          .start();
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        // Smaller font size on unselect
        TextView customTabView = (TextView) tab.getCustomView();
        customTabView.setTextSize(18f);
           
        customTabView.setPivotX(0f);
        customTabView.animate()
          .scaleX(1f)
          .setInterpolator(LinearInterpolator())
          .setDuration(500)
          .start();
    }

    ...

});

【讨论】:

  • 它的工作,但我如何动画从第一个选项卡切换到第二个选项卡?就像上面给出的gif一样@ThomasLee
  • 抱歉 GIF 太快了,除了文字大小,我真的无法分辨出动画的内容。
  • 基本上,当我滑动到下一个选项卡时,gif 的第一个选项卡中的文本“视频”会变小,并且第二个选项卡中的“文件夹”文本大小会增加。我想在我的 tablayout 中实现类似的东西。
  • 我明白了。添加了一些关于如何为比例设置动画的代码,但这仅在选择/取消选择选项卡时触发。我不确定如何在整个滑动过程中实现一致的动画。可能有图书馆。
  • 你能告诉我任何一个图书馆吗?那会很有帮助。 @ThomasLee
猜你喜欢
  • 1970-01-01
  • 2017-02-22
  • 2014-06-04
  • 1970-01-01
  • 1970-01-01
  • 2015-05-20
  • 2015-02-01
  • 1970-01-01
  • 2013-10-26
相关资源
最近更新 更多