Использование TabLayout внутри фрагмента; tab text invisible

Question

В настоящее время я экспериментирую с различными новыми компонентами в новом Android Support Design library. Я реализовал NavigationView в моем MainActivity.java, который использует FragmentManager для перемещения между пунктами в навигационном ящике:

getSupportFragmentManager() 
    .beginTransaction() 
    .replace(R.id.content, mTabLayoutFragment) 
    .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN) 
    .commit(); 

Я использую TabLayout в одном из фрагментов. Вот макет фрагмента:

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:tabMode="fixed" 
     app:tabGravity="fill" 
     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/white"/> 

</android.support.design.widget.AppBarLayout> 

И код Java за ним:

import android.os.Bundle; 
import android.support.design.widget.*; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentStatePagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 

public class TabLayoutFragment extends Fragment { 


    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
          Bundle savedInstanceState) { 
     View inflatedView = inflater.inflate(R.layout.fragment_tablayout, container, false); 

     TabLayout tabLayout = (TabLayout) inflatedView.findViewById(R.id.tabLayout); 
     tabLayout.addTab(tabLayout.newTab().setText("Campusplan")); 
     tabLayout.addTab(tabLayout.newTab().setText("Raumplan")); 
     final ViewPager viewPager = (ViewPager) inflatedView.findViewById(R.id.viewpager); 

     viewPager.setAdapter(new PagerAdapter 
       (getFragmentManager(), tabLayout.getTabCount())); 
     viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); 
     tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       viewPager.setCurrentItem(tab.getPosition()); 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 

      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 

      } 
     }); 

     return inflatedView; 
    } 

    public class PagerAdapter extends FragmentStatePagerAdapter { 
     int mNumOfTabs; 

     public PagerAdapter(FragmentManager fm, int NumOfTabs) { 
      super(fm); 
      this.mNumOfTabs = NumOfTabs; 
     } 

     @Override 
     public Fragment getItem(int position) { 

      switch (position) { 
       case 0: 
        TabItem1 tab1 = new TabItem1(); 
        return tab1; 
       case 1: 
        TabItem1 tab2 = new TabItem1(); 
        return tab2; 
       default: 
        return null; 
      } 
     } 

     @Override 
     public int getCount() { 
      return mNumOfTabs; 
     } 
    } 
} 

Обратите внимание TabItem1 и TabItem1, которые представляют собой фрагменты, состоящие из ничего, кроме TextView. Эти два должны отображаться в TabLayout.

Теперь этот код работает, в некоторой степени. Вот как это выглядит:

Что странно это, после того, как я повернуть устройство, кажется, что все работает просто отлично:

Похоже, что-то получает вызвало изменение конфигурации. Это странно, особенно если учесть, что я следующий в моем AndroidManifest:

android:configChanges="orientation|screenSize" 

Answer 1

I сталкиваются с той же проблемой с новой версией поддержки android support Design Library v23.1.1. Но я просто понимаю, что происходит.

если ваш вид пейджер имеет 2-фрагмент, как ваше упоминание выше, то вы установите вид пейджер с этим утверждением:

tabLayout.setupWithViewPager(viewPager); 

автоматически вы будете иметь 2 вкладки с пустым текстом. Итак, вы больше не должны добавлять новую вкладку. Но что-то вам нужно сделать, чтобы установить текст в двух созданных вкладках.

tabLayout.getTabAt(0).setText("Campusplan"); 
tabLayout.getTabAt(1).setText("Raumplan"); 

Заключение.Для того, чтобы ушки работу, как вы хотите, главное, что вы должны сделать:

tabLayout.setupWithViewPager(viewPager); 
tabLayout.getTabAt(0).setText("Campusplan"); 
tabLayout.getTabAt(1).setText("Raumplan"); 

Я надеюсь, что это будет полезно для вас :)

Answer 2

Update: Design Library v23.0.0 решает эту проблему.

---

Нашли проблему здесь: https://code.google.com/p/android/issues/detail?id=180462

Простой обходной путь:

tabLayout.post(new Runnable() { 
    @Override 
    public void run() { 
     tabLayout.setupWithViewPager(viewPager); 
    } 
}); 

Answer 3

Разработчик работает над этой библиотекой рекомендует следующую работу круглая:

if (ViewCompat.isLaidOut(tabLayout)) { 
     tabLayout.setupWithViewPager(viewPager); 
    } else { 
     tabLayout.addOnLayoutChangeListener(new View.OnLayoutChangeListener() { 
      @Override 
      public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) { 
       tabLayout.setupWithViewPager(viewPager); 
       tabLayout.removeOnLayoutChangeListener(this); 
      } 
     }); 
    } 

Answer 4

Отсутствие репутации комментировать @arif ardiansyah ...

Проверьте исходный код:

`TabLayout#setupWithViewPager(...)` 

-->>`setPagerAdapter(adapter, true);` 

-->>`populateFromPagerAdapter();` 

Здесь TabLayout удаляет все вкладки и воссоздает некоторые новые вкладки, текст в устанавливаются с PagerAdapter#getPageTitle(...). Таким образом, вы можете переопределить этот метод, чтобы предоставить Tablayout с заголовком ваших вкладок.

Answer 5

просто попытался переопределить метод адаптера:

public CharSequence getPageTitle(int position) {}

и она работает.