TabLayout图标显示在文字左边

最新推荐文章于 2023-12-26 14:54:21 发布

Coyamo

最新推荐文章于 2023-12-26 14:54:21 发布

阅读量1.2k

点赞数 4

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/qq_37348364/article/details/120061068

版权

Android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

相关依赖

        implementation 'com.google.android.material:material:+'

这里主要记录一下TabLayout使用默认图标和文字的情况.

new TabLayoutMediator(binding.tabLayout, binding.pager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText(fragments.get(position).getName());
                tab.setIcon(R.drawable.ic_error);
            }
        }).attach();

比如这里,给tab设置文字和图标.默认显示是图标在文字上方.如何让图标显示在文字左边呢?
我百度了一下,大部分是用tab.setCustomView(view),自定义一个图标在文字左边的view然后设置图标和文字…这太不优雅了.而且网络上大部分帖子都是复制粘贴这种方法. 当然不排除以前版本这能这样实现的可能.如果太复杂的还是用自定义的layout吧.图标id是android.R.id.icon,文字id是android.R.id.text1.
在自定义的layout里面图标或文字设置内置的id,android:id="@android:id/text1" 这样就可以继续使用tab.setText(...)等方法设置图标和文字.

tab.setCustomView(id)
tab.setText(...);
tab.setIcon(...);

正文

我查看了一下源码,发现官方提供了一个属性去设置app:tabInlineLabel="true" 为true 则会横向显示.

 <com.google.android.material.tabs.TabLayout
        app:tabInlineLabel="true"
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"/>

无关紧要的

源码

  public TabView(@NonNull Context context) {
      super(context);
      updateBackgroundDrawable(context);
      ViewCompat.setPaddingRelative(
          this, tabPaddingStart, tabPaddingTop, tabPaddingEnd, tabPaddingBottom);
      setGravity(Gravity.CENTER);
      setOrientation(inlineLabel ? HORIZONTAL : VERTICAL);
      setClickable(true);
      ViewCompat.setPointerIcon(
          this, PointerIconCompat.getSystemIcon(getContext(), PointerIconCompat.TYPE_HAND));
    }

重点 setOrientation(inlineLabel ? HORIZONTAL : VERTICAL);

在TabLayout源码中我们可以看到如果iconView存在就根据inlineLabel来控制icon的显示.而app:tabInlineLabel="true"控制inlineLabel的值.


    private void updateTextAndIcon(
        @Nullable final TextView textView, @Nullable final ImageView iconView) {
     //....
      if (iconView != null) {
        MarginLayoutParams lp = ((MarginLayoutParams) iconView.getLayoutParams());
        int iconMargin = 0;
        if (hasText && iconView.getVisibility() == VISIBLE) {
          // If we're showing both text and icon, add some margin bottom to the icon
          iconMargin = (int) ViewUtils.dpToPx(getContext(), DEFAULT_GAP_TEXT_ICON);
        }
        if (inlineLabel) {
          if (iconMargin != MarginLayoutParamsCompat.getMarginEnd(lp)) {
            MarginLayoutParamsCompat.setMarginEnd(lp, iconMargin);
            lp.bottomMargin = 0;
            // Calls resolveLayoutParams(), necessary for layout direction
            iconView.setLayoutParams(lp);
            iconView.requestLayout();
          }
        } else {
          if (iconMargin != lp.bottomMargin) {
            lp.bottomMargin = iconMargin;
            MarginLayoutParamsCompat.setMarginEnd(lp, 0);
            // Calls resolveLayoutParams(), necessary for layout direction
            iconView.setLayoutParams(lp);
            iconView.requestLayout();
          }
        }
      }
//...
    }

但是系统默认存在一个DEFAULT_GAP_TEXT_ICON静态字段控制图标和文字的间隙.默认8dp 系统似乎没有提供优雅的方法去修改. (没有深究,不知道有没有),可以通过在Java中手动设置iconView的margin来解决.注意:iconView的id是android.R.id.icon