在 com.android.support:design:23.1.0 中更改左侧、顶部、右侧或底部的 TabLayout 图标

Question

我对 Android 开发还很陌生。所以请耐心等待。

一天以来，我一直在尝试将 com.android.support:design:23.1.0 中的图标和文本对齐在同一行。

显然在 com.android.support:design:23.1.0 他们已将默认图标位置更改为顶部，文本在底部。

以前在 com.android.support:design:23.0.1 默认是左侧的图标和与图标在同一行的文本

所以这里有一个简单的方法来解决它（虽然它可能有缺点，idk tbh）：

change the version in your app's build.gradle. ex: 23.1.0 to 23.0.1 and build.

还有一个更好的方法来做到这一点（这样你也可以在左、右、上、下对齐图标）：

1. 在 res/layout 中创建 custom_tab.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAlignment="center"/>

2。在你的活动java中

TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); //tab label txt
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);

到目前为止，我已经实现了让图标出现在这样的任何一侧：

PS：setCompoundDrawablesWithIntrinsicBounds 函数参数是这样的 4 个侧面图标：

setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)

Answer 1

我有你们想要的确切解决方案。

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:tabInlineLabel="true"
    app:tabPaddingStart="@dimen/default_10dp">

使用以下属性，您可以获得想要的结果。

app:tabInlineLabel="true"

Answer 2

感谢阿图的这个好建议！

在我的例子中，我必须添加一个线性布局来居中 tablayout 标题。我还添加了一些空格字符来获得图标和文本之间的空白。

custom_tab.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/tabContent"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:gravity="center"/>
</LinearLayout>

初始化代码：

LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText("  "+getApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);
mTabLayout.getTabAt(i).setCustomView(tabContent);

Answer 3

实际上，我找到了一种更优雅的方式 (IMO) 来执行此操作，甚至无需使用自定义布局，而只需使用当前默认布局进行选项卡布局。每个选项卡布局项实际上是一个 Vertical LinearLayout，第一项是 ImageView，第二项是 TextView。

因此，该方法包括将选项卡的 LinearLayout 方向更改为水平。之后，图标将位于左侧。现在，如果你想把它放在右边，你可以删除 ImageView（这是第一个项目）并将它添加到 LinearLayout，它将作为最后一个元素添加到 TextView 的末尾，但是你必须使用布局参数才能正确对齐和调整大小。

因此，无需在 LinearLayout 的末尾重新添加 ImageView，您只需将可绘制对象作为复合可绘制对象添加到 TextView。给它添加一点填充，瞧。

LinearLayout tabItemLayout = (LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(tabIndex);
tabItemLayout.setOrientation(LinearLayout.HORIZONTAL);
ImageView iconView = (ImageView) tabItemLayout.getChildAt(0);
TextView textView = (TextView) tabItemLayout.getChildAt(1);
// remove the icon view
tabItemLayout.removeView(iconView);
// add the icon as compound drawable
textView.setCompoundDrawablesWithIntrinsicBounds(null, null, iconView.getDrawable(), null);
// set some padding
float DP = Resources.getSystem().getDisplayMetrics().density;
int padding = (int)(10 * DP);
textView.setCompoundDrawablePadding(padding);

使用这种方法，我们不需要自定义布局，也不需要膨胀任何东西，我们只需重用现有视图。

Answer 4

使用@juzamn 提供的相同xml 代码，只需添加一些小调整即可循环整个选项卡

for (int i = 0; i < tabLayout.getTabCount(); i++ ) {
 yourlinearlayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.title_text, null);
 tab_text = (TextView) yourlinearlayout.findViewById(R.id.tabContent);
        tab_text.setText("  " + tab_titles[i]);
 tab_text.setCompoundDrawablesWithIntrinsicBounds(tabicons[i], 0, 0, 0);
    tabLayout.getTabAt(i).setCustomView(tab_text);}