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

 更新时间:2020年08月21日 16:40:45   作者:Listen丿  
这篇文章主要介绍了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.效果图:

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>

解决方法一:自己定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"时出来的效果图:

结果2:当Tablayout 的app:tabIndicatorFullWidth = "true"出来的效果图:

解决办法二(指示器长度"听话"(受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"时出来的效果图:

结果2:当Tablayout 的app:tabIndicatorFullWidth = "true"出来的效果图:

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标题文字不显示的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Android自定义控件之圆形/圆角的实现代码

    Android自定义控件之圆形/圆角的实现代码

    这篇文章主要为大家详细介绍了Android自定义控件之圆形/圆角的实现代码,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Android 混合动画详解及实现代码

    Android 混合动画详解及实现代码

    这篇文章主要介绍了Android 混合动画详解及实现代码的相关资料,简单的一种动画(如旋转、缩放、渐变、位移等)有时候并不能满足我们项目的要求,这时候就需要运用到混合动画,需要的朋友可以参考下
    2016-11-11
  • 详解Android应用开发中Intent的作用及使用方法

    详解Android应用开发中Intent的作用及使用方法

    这篇文章主要介绍了Android应用开发中Intent的作用与用法,包括如何激活Activity组件与Intent的投递等,需要的朋友可以参考下
    2016-03-03
  • Android文本框搜索和清空效果实现代码及简要概述

    Android文本框搜索和清空效果实现代码及简要概述

    在工作过程中可能会遇到这样一个效果:文本框输入为空时显示输入的图标;不为空时显示清空的图标,此时点击清空图标能清空文本框内输入文字,感兴趣的你可以了解下哦,或许对你学习android有所帮助
    2013-02-02
  • Android 基于Bitmap的四种图片压缩方式

    Android 基于Bitmap的四种图片压缩方式

    本文中探究的图片压缩方式主要是基于 Bitmap 的 api 实现。文中探究实现的压缩方式有四种:质量压缩、采样率压缩、Matrix 缩放压缩、图片编码格式压缩,感兴趣的朋友可以参考下
    2021-05-05
  • Android中播放在线音乐代码

    Android中播放在线音乐代码

    这篇文章主要介绍了Android中播放在线音乐代码,本文只给出了核心操作代码,需要的朋友可以参考下
    2015-04-04
  • MVVMLight项目之绑定在表单验证上的应用示例分析

    MVVMLight项目之绑定在表单验证上的应用示例分析

    这篇文章主要为大家介绍了MVVMLight项目中绑定在表单验证上的应用示例及源码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步除夕快乐,新年快乐
    2022-01-01
  • iOS开发中TableView类似QQ分组的折叠与展开效果

    iOS开发中TableView类似QQ分组的折叠与展开效果

    这篇文章主要介绍了iOS开发中TableView类似QQ分组的折叠与展开效果,其实要做这个效果我先想到的是在tableView中再嵌套多个tableView。下面通过本文给大家分享实现思路,需要的朋友可以参考下
    2016-12-12
  • Android 中的注解详细介绍

    Android 中的注解详细介绍

    本文主要介绍 Android 中的注解,这里整理详细的资料来说明Android注解是如何使用,提高编程效率,有兴趣的小伙伴可以参考下
    2016-08-08
  • Android开发之获取短信验证码后按钮背景变化并且出现倒计时

    Android开发之获取短信验证码后按钮背景变化并且出现倒计时

    在开发是经常会遇到获取短信验证码,然后获取验证码后需要等待n秒倒计时,这时是不能再次发送短信请求的,这是需要一个倒计时程序,本文给大家分享了实现此功能的代码,需要的朋友参考下
    2016-01-01

最新评论