如何增加TabLayout选项卡中图标的大小

Question

我正在尝试增加应用中选项卡图标的大小。图标大小是固定的，尝试了许多方法但都没有效果，最后尝试了以下方法，但大小没有改变。如果有人能告诉我正确的方法，我将不胜感激。谢谢提前。

这是我的代码，

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.my1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.feed_s));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.add_ds1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.history_ds));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

style.xml

<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
    <item name="android:layout_width">50dp</item>
    <item name="android:layout_height">50dp</item>
</style>

tablayout.xml

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:theme="@style/AppTheme.ActionBar"/>

- Veena

Answer 1

嗨，我之前也遇到了同样的问题，这是我能找到的最好解决方案：

你应该使用(setCustomView)，首先创建一个新的布局文件，我们称之为(customtab.xml)：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:id="@+id/icon"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

然后对于每个选项卡都要执行此操作：（使用相同的布局.xml文件）

View view1 = getLayoutInflater().inflate(R.layout.customtab, null);
view1.findViewById(R.id.icon).setBackgroundResource(R.drawable.my1);
tabLayout.addTab(tabLayout.newTab().setCustomView(view1));


View view2 = getLayoutInflater().inflate(R.layout.customtab, null);
view2.findViewById(R.id.icon).setBackgroundResource(R.drawable.my2);
tabLayout.addTab(tabLayout.newTab().setCustomView(view2));


View view3 = getLayoutInflater().inflate(R.layout.customtab, null);
view3.findViewById(R.id.icon).setBackgroundResource(R.drawable.my3);
tabLayout.addTab(tabLayout.newTab().setCustomView(view3));

...

或者以类似的方式

public static final int[] tabIcon = {R.drawable.icon_one, R.drawable.icon_two, R.drawable.icon_three};

private void setCustomTabs() {

    for (int i = 0; i < tabIcon.length; i++) {
        View view = getLayoutInflater().inflate(R.layout.customtab,null);
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        view.findViewById(R.id.icon).setBackgroundResource(tabIcon[i]);
        if(tab!=null) tab.setCustomView(view);
     }
 }

- Galeb Nassri

---

非常感谢。这是最好的解决方案 :) - Veena

但是我需要为每个选项卡图标创建不同的视图吗？ - Veena

@NeonWarge 如果你添加一个文本视图，就可以了。 - Galeb Nassri

在我的情况下，直到我指定ID如下所示：android:id="@android:id/icon"，框架才能获取图标ImageView。可能是因为我正在处理一个相当大的代码库，它有自己的id/icon定义。请考虑相应地更新您的解决方案。 - Slion

天啊，这怎么是正确答案！ImageView的id必须为android:id="@android:id/icon"才能使其正常工作。 - b005t3r

Answer 2

根据文档，您可以创建一个带有android:id="@android:id/icon"的ImageView并将其设置为选项卡的自定义视图。 TabLayout会自动将图标放置在具有android:id/icon的内部ImageView中。

然后在您的代码中，在创建选项卡时调用setIcon(R.drawable.yourIcon)。

接下来，您可以在for循环中应用您的自定义布局:

mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.searchpin));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.discussionpin));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.userpin));

for (int i = 0; i < mTabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = mTabLayout.getTabAt(i);
    if (tab != null) tab.setCustomView(R.layout.view_home_tab);
}

这里是 XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@android:id/icon"
        android:layout_width="@dimen/tab_icon_size"
        android:layout_height="@dimen/tab_icon_size"
        android:layout_centerInParent="true"/>

</RelativeLayout>

- Vadim Caen

---

对我很有效。此外，如果您想使用选择器表示不同的状态，您需要设置自定义视图的初始选定状态。tab.getCustomView().setSelected(tab.isSelected()); - lilienberg

什么是tab_icon_size？ - Kannan_SJD

这只是在values/dimens.xml文件中创建的尺寸资源。 - Vadim Caen

但是你可以使用任何你想要的值。 - Vadim Caen

这将占用整个选项卡。如果我们有一个带有文本的图标，而我们不希望文本消失怎么办？ - Mehrdad Salimi

Answer 3

不需要使用任何xml视图。在运行时创建ImageView并将图像添加为视图 :)

    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        ImageView imageView = new ImageView(context);
        imageView.setImageResource(drawableImage);
        tabLayout.getTabAt(i).setCustomView(imageView);
    }

愉快的编程

- Anand Savjani

Answer 4

如果你想要改变整个应用程序内所有屏幕的布局，可以尝试以下方法： 在layout文件夹内创建一个名为design_layout_tab_icon.xml的文件，并复制以下代码：

<?xml version="1.0" encoding="utf-8"?>
<ImageView
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@android:id/icon"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="center_horizontal"
       android:scaleType="fitCenter"
       tools:src="@mipmap/ic_launcher"/>

不要更改id，只需在屏幕上设置选项卡栏的高度即可，就可以应用于所有位置。

- Parth Dave

Answer 5

这是一个自定义的TabLayout，它可以帮助很多！

public class TabView extends TabLayout {

public TabView(Context context) {
    super(context);
    init();
}

public TabView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    int padding = 10;

    int[] icons = new int[]{R.drawable.ic_tel, R.drawable.ic_speaker, R.drawable.ic_camera, R.drawable.ic_home};

    for (int i = 0; i < icons.length; i++) {
        ImageView imageView = new ImageView(getContext());
        imageView.setBackgroundColor(Color.TRANSPARENT);
        imageView.setImageResource(icons[i]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setPadding(padding, padding, padding, padding);
        if (i==3){
            addTab(newTab().setCustomView(imageView), i , true);
        } else {
            addTab(newTab().setCustomView(imageView), i);
        }
    }

}

}

- Hadi Note

Answer 6

    View view5 = getLayoutInflater().inflate(R.layout.custom_icon, null);
    view5.findViewById(R.id.iconImg).setBackgroundResource(R.drawable.ambulance);
    icon_text=(TextView)view5.findViewById(R.id.icon_text);
    icon_text.setText("Blood Bank");
    tabLayout.addTab(tabLayout.newTab().setCustomView(view5));

    tabLayout.getTabAt(0).setIcon(tabIcons[0]).setCustomView(view1);

- Amar