在com.android.support:design:23.1.0

时间:2015-11-17 05:27:46

标签: android android-support-library android-tablayout android-support-design

我对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
  2. 中创建 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);
    

    到目前为止,我已经实现了让图标出现在这样的任何一面:

    TabLayout icons

    PS: setCompoundDrawablesWithIntrinsicBounds 函数参数是4个侧面图标,如下所示:

    setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)
    

4 个答案:

答案 0 :(得分:7)

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

<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”

答案 1 :(得分:6)

感谢Atu提供了这个好消息!

在我的情况下,我必须添加线性布局到中心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);

答案 2 :(得分:1)

使用@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);}

答案 3 :(得分:1)

实际上,我找到了一种更优雅的方法(IMO),甚至不使用自定义布局,而仅使用当前默认布局作为TabLayouts。每个选项卡布局项目实际上都是一个Vertical LinearLayout,第一个项目是ImageView,第二个项目是TextView。

因此,该方法包括将选项卡的LinearLayout方向更改为Horizo​​ntal。之后,该图标将位于左侧。现在,如果要将其放置在右侧,则可以删除ImageView(这是第一项)并将其添加到LinearLayout,它将作为最后一个元素添加到TextView的末尾,但是必须调整布局参数才能正确显示其对齐和大小。

因此,您无需在LinearLayout的末尾重新添加ImageView,只需将drawable作为复合可绘制对象添加到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);

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