如何在TabLayout中设置图标大小？

Question

这是我的代码：

private TabLayout tabLayout;
private int[] tabIcons = {
        R.mipmap.ic_compass,
        R.mipmap.ic_place,
        R.mipmap.ic_passport,
        R.mipmap.ic_setting
};


...
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);

图标大小根据图片大小而定。我怎样才能调整它的大小？

Answer 1

设置图标填充

    for (int i = 0; i < tablayout.getTabWidget().getChildCount(); i++)
    {
        tablayout.getTabWidget().getChildAt(i).setPadding(10,10,10,10);
    }

Answer 2

如果您不想使用 xml 作为自定义视图。只需在运行时创建 imageview 并将其添加到特定选项卡的 tablayout 中即可。

  ImageView imgView= new ImageView(MainActivity.this);
  imgView.setImageResource(drawableImage);
  imgView.setPadding(10,10,10,10)
  tabLayout.getTabAt(1).setCustomView(imgView);

它看起来像这样。

Answer 3

更改图标大小

android.support.design.widget.TabLayout

for (int i = 0; i < view_bottom_tabLayout.getTabCount(); i++)
            {
                FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(60, 60); //set new width & Height
                params.gravity = Gravity.CENTER; //set gravity back to center
                view_bottom_tabLayout.getChildAt(i).setLayoutParams(params);//set ur new params 

            }

Answer 4

为了完全控制大小，我建议使用自定义视图来呈现选项卡。

首先创建一个新布局 - 在此示例中命名为“my_custom_tab”

<?xml version="1.0" encoding="utf-8"?>

<!--Change the width, height, scaleType to whatever you like-->
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitCenter"
    android:id="@+id/icon"
    android:layout_gravity="center_horizontal"
    android:src="@mipmap/ic_launcher"/>

现在在您的代码中设置自定义图像

private void setUpTabs (ViewPager viewPager) {
  TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
        if (tabs != null) {
            tabs.setupWithViewPager(viewPager);

   int tabCount = tabAdapter.getCount(); //Assuming you have already somewhere set the adapter for the ViewPager

            for (int i = 0; i < tabCount; i++) {
                TabLayout.Tab tab = tabs.getTabAt(i);
                if (tab != null){
                    ImageView myCustomIcon = (ImageView) LayoutInflater.from(tabs.getContext()).inflate(R.layout.my_custom_tab, null);

                    /*Here is where to set image if doing it dynamically
                    myCustomIcon.setImageBitmap(bitmap);
                    */

                    tab.setCustomView(myCustomIcon);
                }
            }
        }
}

Answer 5

你可以这样做：

LinearLayout ll = (LinearLayout) tabLayout.getChildAt(0);
    for (int i = 0; i < ll.getChildCount(); i++) {
        LinearLayout tabView = (LinearLayout) ll.getChildAt(i);
        for (int j = 0; j < tabView.getChildCount(); j++) {
            if (tabView.getChildAt(j) instanceof TextView) {
                TextView textView = (TextView) tabView.getChildAt(j);
                LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) textView.getLayoutParams();
                layoutParams.topMargin = 0;
                textView.setLayoutParams(layoutParams);
            } else if (tabView.getChildAt(j) instanceof ImageView) {
                ImageView imageView = (ImageView) tabView.getChildAt(j);
                LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) imageView.getLayoutParams();
                layoutParams.bottomMargin = 0;
                imageView.setLayoutParams(layoutParams);
            }
        }
    }

Answer 6

我决定结束这个问题。因为我们实际上无法在 TabLayout 中设置图标的具体大小，而是对其进行填充。 参考： https://developer.android.com/guide/practices/ui_guidelines/icon_design_tab

Answer 7

有一个代码对我有用，上面是 Deepak Sachdeva 的答案 只是我稍微编辑了一下，尝试一下 100% 有效 从一开始我就添加带有自定义图像的选项卡

    ImageView imgView= new ImageView(getApplicationContext());
      imgView.setImageResource(R.drawable.icon);
      imgView.setScaleType(ImageView.ScaleType.FIT_CENTER);
    
    imgView.setLayoutParams(new LinearLayout.LayoutParams(100, 100));

tablayout1.addTab(tablayout1.newTab().setCustomView(imgView));

并对所有选项卡执行此操作，通过这种方式添加它们。

Answer 8

您应该使用 TabItem 的

android:layout

属性。这是达到您想要的结果的最正确方法：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout="@layout/custom_tab_item"
        android:icon="@drawable/ic_..." />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout="@layout/custom_tab_item"
        android:icon="@drawable/ic_..." />

</com.google.android.material.tabs.TabLayout>

在布局文件夹中添加custom_tab_item：

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/icon"
    android:layout_width="40dp"
    android:layout_height="40dp">
</ImageView>