Question

我正在使用带有 ViewPager 的 TabLayout 来按要求显示数据。在选项卡布局中，我的要求是，我必须为所选项目设置不同的字体，为其他项目设置不同的字体。我为此编写了以下代码。

但我面临一个问题。假设我有 4 个项目“一”、“二”、“三”和“四”。最初“一”默认选择粗体，其他为普通字体。但是当我单击“两个”选项卡时，“一个”选项卡消失了。当我点击“三个”选项卡时，“两个”选项卡消失，“一个”选项卡以正常字体可见。

private void setupViewPager(CustomViewPager viewPager, TabLayout tabLayout, ArrayList<TipsInfo> mListTips) {
        adapter = new ViewPagerAdapter(getChildFragmentManager());

        for (int i = 0; i < mListTips.size(); i++) {
            if (!TextUtils.isEmpty(mListTips.get(i).getValue()))
                adapter.addFragment(TipsDetailFragment.newInstance(mListTips.get(i).getValue()), mListTips.get(i).getLabel());
        }
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);

        View tabContent = LayoutInflater.from(requireContext()).inflate(R.layout.item_tips_tablayout_selected, null);
        TextView selected = tabContent.findViewById(R.id.tv_tips_selected_tab);
        View tabContent1 = LayoutInflater.from(requireContext()).inflate(R.layout.item_tips_tablayout_unselected, null);
        TextView unselected = tabContent1.findViewById(R.id.tv_tips_unselected_tab);

        tabLayout.addOnTabSelectedListener(
                new TabLayout.OnTabSelectedListener() {
                    @Override
                    public void onTabSelected(TabLayout.Tab tab) {
                        selected.setText(tab.getText());
                        tab.setCustomView(selected);
                    }

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

                        unselected.setText(tab.getText());
                        tab.setCustomView(unselected);
//
//                        for(int i=0; i<tabLayout.getTabCount(); i++){
//                            if(i != tabLayout.getSelectedTabPosition()){
//                                unselected.setText(tabLayout.getTabAt(i).getText());
//                                tabLayout.getTabAt(i).setCustomView(unselected);
//                            }
//                        }
                    }

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

    }

我的 ViewPaerAdapter 是用 FragmentStatePagerAdapter 扩展的，它的对象是用 getChildFragmentManager 创建的。我的 XML 代码如下所示：

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tl_tips"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorWhite"
            android:elevation="@dimen/v1dp"
            android:visibility="invisible"
            app:tabGravity="fill"
            android:gravity="start"
            app:tabMinWidth="@dimen/v100dp"
            android:textAlignment="viewStart"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorColor="@color/colorBannerNewDotSelected"
            app:tabMode="scrollable"
            android:layout_gravity="start"
            app:tabIndicatorHeight="@dimen/v3dp"
            app:tabSelectedTextColor="@color/colorBlackDark"
            app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
            app:tabTextColor="@color/colorServiceCount"
            />

item_tips_tablayout_selected 和 item_tips_tablayout_unselected 仅包含应用了不同字体的 TextView。

截图：

初始

当点击“Benefits”时，字体应用到它，但“How to use”消失了。

当点击“产品使用”时，应用到它的字体，“如何使用”以普通字体出现，“好处”标签消失。

Answer 1

它基本上执行您在代码中编写的内容。

tabLayout.addOnTabSelectedListener(
                    new TabLayout.OnTabSelectedListener() {
                        @Override
                        //as tab 2 selected it set text to tab 2
                        public void onTabSelected(TabLayout.Tab tab) {
                            selected.setText(tab.getText());
                            tab.setCustomView(selected);
                        }
    
                        @Override
                        public void onTabUnselected(TabLayout.Tab tab) {
     //as tab 1 unselected it set NO text to tab 1 in it 
                            unselected.setText(tab.getText());
                            tab.setCustomView(unselected);

为什么每次只需要换字体的时候都要设置CustomView？

我有一个转换为 JAVA 代码的 Kotlin 代码，它在 JAVA 中看起来很糟糕，但它有效：

 private void setTypefaceToTab(Context context, TabLayout tabLayout, TabLayout.Tab tab, int stylem) {
            if (tab != null && context != null) {
                try {
                     View var10000 = ((ViewGroup)tabLayout.getChildAt(0)).getChildAt(tab.getPosition());
                    LinearLayout layout = (LinearLayout)var10000;
                    var10000 = layout.getChildAt(1);
                    TextView tabTextView = (TextView)var10000;
                    tabTextView.setTextSize (***Text Size***);
                    tabTextView.setTypeface(Typeface.create("sans-serif-condensed",stylem));
                } catch (Exception var7) {
                    Log.d ("EXC",var7.toString ());
                }
            }
        }

然后只需在 tabselectedlistener 和 onCreate 中使用它来为第一个选定的选项卡设置字体：

protected void onCreate(Bundle savedInstanceState) {
...
 setTypefaceToTab(context,tablayout, tablayout.getTabAt (tablayout.getSelectedTabPosition ()),Typeface.BOLD_ITALIC);
...
}

在 tabListener 中：

  private void tabListener(){
            tablayout.addOnTabSelectedListener (new TabLayout.OnTabSelectedListener () {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                            setTypefaceToTab(context,tablayout,tab,Typeface.BOLD_ITALIC);
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    setTypefaceToTab(context,tablayout,tab,Typeface.NORMAL);
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
            });
        }

希望这是你想要的

带有 ViewPager 的 TabLayout 在新选项卡上选择上一个选项卡文本消失

1 个答案: