在 Fragment 中使用 TabLayout;选项卡文本不可见
Using TabLayout inside a Fragment; tab text invisible
我目前正在试验新 Android Support Design library 中的各种新组件。我在 MainActivity.java
中实现了 NavigationView
,它使用 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"
更新:设计库 v23.0.0 解决了这个问题。
在这里发现问题:https://code.google.com/p/android/issues/detail?id=180462
简单的解决方法:
tabLayout.post(new Runnable() {
@Override
public void run() {
tabLayout.setupWithViewPager(viewPager);
}
});
开发此库的开发人员推荐以下工作:
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);
}
});
}
我在新版本 android 支持 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");
希望对您有所帮助:)
缺乏评论@arif ardiansyah 的声誉...
查看源代码:
`TabLayout#setupWithViewPager(...)`
-->>`setPagerAdapter(adapter, true);`
-->>`populateFromPagerAdapter();`
此处,TabLayout
删除所有选项卡并重新创建一些文本设置为 PagerAdapter#getPageTitle(...)
的新选项卡。因此,您可以重写此方法以向 Tablayout
提供选项卡的标题。
刚刚尝试覆盖适配器中的方法:
public CharSequence getPageTitle(int position) {}
而且有效。
我目前正在试验新 Android Support Design library 中的各种新组件。我在 MainActivity.java
中实现了 NavigationView
,它使用 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"
更新:设计库 v23.0.0 解决了这个问题。
在这里发现问题:https://code.google.com/p/android/issues/detail?id=180462
简单的解决方法:
tabLayout.post(new Runnable() {
@Override
public void run() {
tabLayout.setupWithViewPager(viewPager);
}
});
开发此库的开发人员推荐以下工作:
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);
}
});
}
我在新版本 android 支持 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");
希望对您有所帮助:)
缺乏评论@arif ardiansyah 的声誉...
查看源代码:
`TabLayout#setupWithViewPager(...)`
-->>`setPagerAdapter(adapter, true);`
-->>`populateFromPagerAdapter();`
此处,TabLayout
删除所有选项卡并重新创建一些文本设置为 PagerAdapter#getPageTitle(...)
的新选项卡。因此,您可以重写此方法以向 Tablayout
提供选项卡的标题。
刚刚尝试覆盖适配器中的方法:
public CharSequence getPageTitle(int position) {}
而且有效。