首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在com.android.support中更改左上右下的设计图标。支持: TabLayout :23.1.0

在com.android.support中更改左上右下的设计图标。支持: TabLayout :23.1.0
EN

Stack Overflow用户
提问于 2015-11-17 13:27:46
回答 4查看 19.7K关注 0票数 29

我是android开发的新手。所以请耐心听我说。

我已经尝试在com.android.support:design:23.1.0中将图标和文本在同一行中对齐一天了。

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

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

所以这里有一个简单的方法来解决它(尽管它可能有缺点,idk tbh):

代码语言:javascript
复制
change the version in your app's build.gradle. ex: 23.1.0 to 23.0.1 and build.

还有一种更好的方法(这样你也可以在左,右,上,下对齐图标):

res/layout中创建custom_tab.xml

代码语言:javascript
复制
<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"/>

活动中的

  1. java

代码语言:javascript
复制
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个侧边图标,如下所示:

代码语言:javascript
复制
setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-01-14 04:29:07

谢谢你,Atu,这是一个好的提示!

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

custom_tab.xml:

代码语言:javascript
复制
<?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>

初始化代码:

代码语言:javascript
复制
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);
票数 8
EN

Stack Overflow用户

发布于 2019-03-08 18:17:23

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

代码语言:javascript
复制
<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“

票数 56
EN

Stack Overflow用户

发布于 2018-12-17 22:09:59

实际上,我已经找到了一种更优雅的方法(IMO)来实现这一点,甚至不使用自定义布局,而只是使用当前的默认布局。每个选项卡布局项目实际上都是一个垂直LinearLayout,第一个项目是ImageView,第二个项目是TextView。

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

因此,无需在LinearLayout的末尾重新添加ImageView,只需将可绘制对象作为复合可绘制对象添加到TextView中即可。在其中添加一些填充,然后就可以了。

代码语言:javascript
复制
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);

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33749792

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档