欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

TabLayout标题文字不显示的解决操作

程序员文章站 2022-03-16 13:16:57
问题描述:使用design包的tablayout实现类似网易选项卡动态滑动效果的时候,使用addtab()方法给tablayout动态添加标题的时候,标题可能会出现不显示文字的情况。分析:真实情况并不...

问题描述:

使用design包的tablayout实现类似网易选项卡动态滑动效果的时候,使用addtab()方法给tablayout动态添加标题的时候,标题可能会出现不显示文字的情况。

分析:

真实情况并不是不显示文字,二而是viewpager又给tablayout添加了许多的标题,导致之前手动添加的标题又被挤到了后面。不信你多往后翻一翻就出来了。

解决办法:

不要为viewpager手动使用addtab()方法添加标题,而应该先创建一个list集合,将其设置在pageradapter的getpagetitle方法中,代码如下:

 @override
 public charsequence getpagetitle(int position) {
  return mlist_title.get(position);
 }

补充知识:android中 tablayout的tabitem文字和图片莫名不显示问题处理

tablayout在没有设置适配器的时候,tabitem的文字和icon是正常显示的,可一旦设置上适配器文字和icon就直接消失,这个时候有两个解决办法(本人暂时只有两个)

1.效果图:

TabLayout标题文字不显示的解决操作

2. 正常写法设置适配器后的实图:

<android.support.design.widget.tablayout
 android:id="@+id/fh_tab"
 app:tabindicatorcolor="@android:color/white"
 android:layout_margintop="20dp"
 android:layout_below="@id/fh_title"
 android:layout_alignbottom="@+id/fh_iv"
 app:tabindicatorheight="4dp"
 app:tabtextcolor="@color/tab_un_select"
 app:tabselectedtextcolor="@android:color/white"
 app:tabindicatorfullwidth="false"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <android.support.design.widget.tabitem
  android:text="热点"
  android:icon="@drawable/ic_fire_gray"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
 <android.support.design.widget.tabitem
  android:text="要闻"
  android:icon="@drawable/ic_news_state"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
 <android.support.design.widget.tabitem
  android:text="时政"
  android:icon="@drawable/ic_politics_state"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
 <android.support.design.widget.tabitem
  android:text="热点"
  android:icon="@drawable/ic_fire_gray"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
 <android.support.design.widget.tabitem
  android:text="粤头条"
  android:icon="@drawable/ic_first_state"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
 <android.support.design.widget.tabitem
  android:text="分类"
  android:icon="@drawable/ic_classify_state"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
</android.support.design.widget.tablayout>

TabLayout标题文字不显示的解决操作

解决方法一:自己定tabitem的样式(比较万能,但是指示器的长度不太 “听话”,就是不受app:tabindicatorfullwidth = "false"的控制,(自己去设置指示器的长度也没用,想试请看最后的"设置指示器长度代码")) :

1.创建一个item_home_tab:

<linearlayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:gravity="center"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content">
 
 <imageview
  android:id="@+id/iv"
  android:src="@drawable/ic_relative_true"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
 <textview
  android:layout_margintop="3dp"
  android:textcolor="@color/font2"
  android:id="@+id/tv"
  android:textsize="13sp"
  android:text="title"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
</linearlayout>

2.java中:

protected void init(){
 fhpager.setadapter(adapter);
 fhpager.setcurrentitem(0);
 fhpager.setoffscreenpagelimit(1);
 fhtab.setselectedtabindicator(r.drawable.bg_submit);
 fhtab.setupwithviewpager(fhpager);

 objects.requirenonnull(fhtab.gettabat(0)).setcustomview(getview("热点", r.drawable.ic_fire_state));
 objects.requirenonnull(fhtab.gettabat(1)).setcustomview(getview("要闻", r.drawable.ic_news_state));
 objects.requirenonnull(fhtab.gettabat(2)).setcustomview(getview("时政", r.drawable.ic_politics_state));
 objects.requirenonnull(fhtab.gettabat(3)).setcustomview(getview("粤头条", r.drawable.ic_fire_state));
 objects.requirenonnull(fhtab.gettabat(4)).setcustomview(getview("分类", r.drawable.ic_classify_state));
}

private view getview(string title, int icon) {
 view view = layoutinflater.from(getactivity()).inflate(r.layout.item_home_tab, null);
 textview tv = view.findviewbyid(r.id.tv);
 imageview iv = view.findviewbyid(r.id.iv);
 tv.settext(title);
 iv.setimageresource(icon);
 return view;
}

结果1:当tablayout 的app:tabindicatorfullwidth = "false"时出来的效果图:

TabLayout标题文字不显示的解决操作

结果2:当tablayout 的app:tabindicatorfullwidth = "true"出来的效果图:

TabLayout标题文字不显示的解决操作

解决办法二(指示器长度"听话"(受app:tabindicatorfullwidth = "false"的控制),但是icon的大小就只能由系统来定):

fhpager.setadapter(adapter);
fhpager.setcurrentitem(0);
fhpager.setoffscreenpagelimit(1);
fhtab.setselectedtabindicator(r.drawable.bg_submit);
fhtab.setupwithviewpager(fhpager);
 
//设置tabitem的文字和icon
fhtab.gettabat(0).settext("热点").seticon(r.drawable.ic_fire_state);
fhtab.gettabat(1).settext("要闻").seticon(r.drawable.ic_news_state);
fhtab.gettabat(2).settext("时政").seticon(r.drawable.ic_politics_state);
fhtab.gettabat(3).settext("粤头条").seticon(r.drawable.ic_first_state);
fhtab.gettabat(4).settext("分类").seticon(r.drawable.ic_classify_state);

结果1:当tablayout 的app:tabindicatorfullwidth = "false"时出来的效果图:

TabLayout标题文字不显示的解决操作

结果2:当tablayout 的app:tabindicatorfullwidth = "true"出来的效果图:

TabLayout标题文字不显示的解决操作

end...

设置tablayout指示器的长度:

//指示器长度
public static void setindicator(tablayout tabs, int leftdip, int rightdip, int bottomdip) {
 if (tabs == null) {
  return;
 }
 class<? extends tablayout> tablayout = tabs.getclass();
 
 field tabstrip = null;
 try {
  tabstrip = tablayout.getdeclaredfield("mtabstrip");
 } catch (nosuchfieldexception e) {
  e.printstacktrace();
  return;
 }
 tabstrip.setaccessible(true);
 linearlayout lltab = null;
 try {
  lltab = (linearlayout) tabstrip.get(tabs);
 } catch (illegalaccessexception e) {
  e.printstacktrace();
  return;
 }
 int left = (int) typedvalue.applydimension(typedvalue.complex_unit_dip, leftdip, resources.getsystem().getdisplaymetrics());
 int right = (int) typedvalue.applydimension(typedvalue.complex_unit_dip, rightdip, resources.getsystem().getdisplaymetrics());
 int bottom = (int) typedvalue.applydimension(typedvalue.complex_unit_dip, bottomdip, resources.getsystem().getdisplaymetrics());
 for (int i = 0; i < lltab.getchildcount(); i++) {
  view child = lltab.getchildat(i);
  child.setpadding(0, 0, 0, 0);
  linearlayout.layoutparams params = new linearlayout.layoutparams(0, linearlayout.layoutparams.match_parent, 1);
  params.leftmargin = left;
  params.rightmargin = right;
  params.bottommargin = bottom;
  child.setlayoutparams(params);
  child.invalidate();
 }
}

以上这篇tablayout标题文字不显示的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。