溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

TabLayout標(biāo)題文字不顯示的解決操作

發(fā)布時間：2020-10-15 02:30:14 來源：腳本之家 閱讀：603 作者：Listen丿 欄目：開發(fā)技術(shù)

問題描述：

使用Design包的TabLayout實(shí)現(xiàn)類似網(wǎng)易選項(xiàng)卡動態(tài)滑動效果的時候，使用addTab()方法給TabLayout動態(tài)添加標(biāo)題的時候，標(biāo)題可能會出現(xiàn)不顯示文字的情況。

分析：

真實(shí)情況并不是不顯示文字，二而是ViewPager又給TabLayout添加了許多的標(biāo)題，導(dǎo)致之前手動添加的標(biāo)題又被擠到了后面。不信你多往后翻一翻就出來了。

解決辦法：

不要為ViewPager手動使用addTab()方法添加標(biāo)題，而應(yīng)該先創(chuàng)建一個List集合，將其設(shè)置在PagerAdapter的getPageTitle方法中，代碼如下：

 @Override
 public CharSequence getPageTitle(int position) {
  return mList_title.get(position);
 }

補(bǔ)充知識：Android中 TabLayout的TabItem文字和圖片莫名不顯示問題處理

Tablayout在沒有設(shè)置適配器的時候，TabItem的文字和icon是正常顯示的，可一旦設(shè)置上適配器文字和icon就直接消失，這個時候有兩個解決辦法（本人暫時只有兩個）

1.效果圖：

TabLayout標(biāo)題文字不顯示的解決操作

2. 正常寫法設(shè)置適配器后的實(shí)圖：

<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="熱點(diǎn)"
  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="熱點(diǎn)"
  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標(biāo)題文字不顯示的解決操作

解決方法一：自己定TabItem的樣式（比較萬能，但是指示器的長度不太 “聽話”,就是不受app:tabIndicatorFullWidth = "false"的控制，(自己去設(shè)置指示器的長度也沒用，想試請看最后的"設(shè)置指示器長度代碼")） ：

1.創(chuàng)建一個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("熱點(diǎn)", 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;
}

結(jié)果1：當(dāng)Tablayout 的app:tabIndicatorFullWidth = "false"時出來的效果圖：

TabLayout標(biāo)題文字不顯示的解決操作

結(jié)果2：當(dāng)Tablayout 的app:tabIndicatorFullWidth = "true"出來的效果圖：

TabLayout標(biāo)題文字不顯示的解決操作

解決辦法二（指示器長度"聽話"(受app:tabIndicatorFullWidth = "false"的控制)，但是icon的大小就只能由系統(tǒng)來定）：

fhPager.setAdapter(adapter);
fhPager.setCurrentItem(0);
fhPager.setOffscreenPageLimit(1);
fhTab.setSelectedTabIndicator(R.drawable.bg_submit);
fhTab.setupWithViewPager(fhPager);
 
//設(shè)置tabItem的文字和icon
fhTab.getTabAt(0).setText("熱點(diǎn)").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);

結(jié)果1：當(dāng)Tablayout 的app:tabIndicatorFullWidth = "false"時出來的效果圖：

TabLayout標(biāo)題文字不顯示的解決操作

結(jié)果2：當(dāng)Tablayout 的app:tabIndicatorFullWidth = "true"出來的效果圖：

TabLayout標(biāo)題文字不顯示的解決操作

end...

設(shè)置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標(biāo)題文字不顯示的解決操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手