选项卡文本随 viewpager 消失
Tab text disappeared with viewpager
一个非常简单的例子。我认为大多数人都是以这种方式实现选项卡的。但是标签文本只是丢失了。
设计支持库版本为最新的24.2.0。
这是我的布局代码:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabTextColor="@android:color/darker_gray"
app:tabSelectedTextColor="@android:color/white"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:text="@string/tab_domain"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:text="@string/tab_upload"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:text="@string/tab_download"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
我正在使用 ButterKnife 8.2.1 绑定视图对象。这是我在 onCreate() 中的 activity 代码:
final DiagnosePagerAdapter adapter = new DiagnosePagerAdapter(getSupportFragmentManager(),
tabs.getTabCount());
tabs.setupWithViewPager(pager);
pager.setAdapter(adapter);
pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));
这是我的适配器:
class DiagnosePagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
List<Fragment> fragments = new ArrayList<>();
public DiagnosePagerAdapter(FragmentManager fm, int numberOfTabs) {
super(fm);
this.mNumOfTabs = numberOfTabs;
fragments.add(new DomainFragment());
fragments.add(new UploadFragment());
fragments.add(new DownloadFragment());
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return mNumOfTabs;
}
}
我在这里看到过类似的问题:
该问题的答案说这个问题已在 23.0.0 中修复,none 解决方法适用于我的手机,包括小米 HM 2A 和华为设备。
您必须如下覆盖 getPageTitle()
(我认为这会解决您的问题):
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Domain";
case 1:
return "Upload";
case 2:
return "Download";
}
return null;
}
此外,由于您有固定数量的选项卡,因此您应该使用 FragmentPagerAdapter
而不是 FragmentStatePagerAdapter
。然后如下更改 xml 布局:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabTextColor="@android:color/darker_gray"
app:tabSelectedTextColor="@android:color/white"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
如下更改您的适配器:
class DiagnosePagerAdapter extends FragmentPagerAdapter {
public DiagnosePagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = null;
switch (position) {
case 0:
fragment = new DomainFragment();
break;
case 1:
fragment = new UploadFragment();
break;
case 2:
fragment = new DownloadFragment();
break;
}
return fragment;
}
@Override
public int getCount() {
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Domain";
case 1:
return "Upload";
case 2:
return "Download";
}
return null;
}
}
并如下更改您的 onCreate()
:
final DiagnosePagerAdapter adapter = new DiagnosePagerAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);//call setAdapter() before setupWithViewPager()
tabs.setupWithViewPager(pager);
Tabs 的文本被覆盖,因为 Android 没有使用您在布局 xml 中定义的 Tabs。相反,它会创建全新的选项卡。
其他答案已经解释了如何使用适配器添加文本。
但是如果你想添加一个图标,或者用你的标签做一些其他的事情,那么你将不得不在第一个创建的片段中执行以下操作。
public void onCreateView(...) {
...
TabLayout tabLayout = getActivity().findViewById(R.id.tabLayout);
PagerAdapter.setTitle(tabLayout);
然后在您的 PagerAdapter 中...
public static void setTitle(TabLayout tabLayout) {
TabLayout.Tab tab;
tab = tabLayout.getTabAt(0);
tab.setIcon(R.drawable.home_icon);
tab.setText(R.string.my);
tab = tabLayout.getTabAt(1);
tab.setIcon(R.drawable.icon_search);
tab.setText(R.string.search);
tab = tabLayout.getTabAt(2);
tab.setIcon(R.drawable.icon_settings);
tab.setText(R.string.settings);
}
我觉得这有点乱,但我没有找到其他方法。
使tablayout 可滚动为真,以便它可以显示文本的完整名称。
作为参考,您可以使用以下代码。
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@+id/tb_socialMedia_fragment">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabInlineLabel="true"
app:tabMode="scrollable"
/>
</androidx.viewpager.widget.ViewPager>
如果您想将名称添加到 tablayout 并添加 class
,您可以使用以下代码
class SocialMediaVpAdapter(
var fragmentManager: FragmentManager, var context :Context) : FragmentPagerAdapter(fragmentManager) {
override fun getCount(): Int {
return 4
}
override fun getPageTitle(position: Int): CharSequence? {
return when (position) {
0 -> {
context.getString(R.string.social_all)
}
1 -> {
context.getString(R.string.social_facebook)
}
2 -> {
context.getString(R.string.social_Instagram)
}
3 ->{
context.getString(R.string.social_tiktok)
}
else ->context.getString(R.string.social_all)
}
}
override fun getItem(position: Int): Fragment {
return when (position) {
0 -> {
AllSocialMedia()
}
1 -> {
FbSocialMediaActivity()
}
2 -> {
InstagramSocialMedia()
}
3 ->{
TikTokSocialMedia()
}
else -> AllSocialMedia()
}
}
}
一个非常简单的例子。我认为大多数人都是以这种方式实现选项卡的。但是标签文本只是丢失了。
设计支持库版本为最新的24.2.0。
这是我的布局代码:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabTextColor="@android:color/darker_gray"
app:tabSelectedTextColor="@android:color/white"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:text="@string/tab_domain"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:text="@string/tab_upload"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:text="@string/tab_download"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
我正在使用 ButterKnife 8.2.1 绑定视图对象。这是我在 onCreate() 中的 activity 代码:
final DiagnosePagerAdapter adapter = new DiagnosePagerAdapter(getSupportFragmentManager(),
tabs.getTabCount());
tabs.setupWithViewPager(pager);
pager.setAdapter(adapter);
pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));
这是我的适配器:
class DiagnosePagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
List<Fragment> fragments = new ArrayList<>();
public DiagnosePagerAdapter(FragmentManager fm, int numberOfTabs) {
super(fm);
this.mNumOfTabs = numberOfTabs;
fragments.add(new DomainFragment());
fragments.add(new UploadFragment());
fragments.add(new DownloadFragment());
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return mNumOfTabs;
}
}
我在这里看到过类似的问题:
该问题的答案说这个问题已在 23.0.0 中修复,none 解决方法适用于我的手机,包括小米 HM 2A 和华为设备。
您必须如下覆盖 getPageTitle()
(我认为这会解决您的问题):
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Domain";
case 1:
return "Upload";
case 2:
return "Download";
}
return null;
}
此外,由于您有固定数量的选项卡,因此您应该使用 FragmentPagerAdapter
而不是 FragmentStatePagerAdapter
。然后如下更改 xml 布局:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabTextColor="@android:color/darker_gray"
app:tabSelectedTextColor="@android:color/white"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
如下更改您的适配器:
class DiagnosePagerAdapter extends FragmentPagerAdapter {
public DiagnosePagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = null;
switch (position) {
case 0:
fragment = new DomainFragment();
break;
case 1:
fragment = new UploadFragment();
break;
case 2:
fragment = new DownloadFragment();
break;
}
return fragment;
}
@Override
public int getCount() {
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Domain";
case 1:
return "Upload";
case 2:
return "Download";
}
return null;
}
}
并如下更改您的 onCreate()
:
final DiagnosePagerAdapter adapter = new DiagnosePagerAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);//call setAdapter() before setupWithViewPager()
tabs.setupWithViewPager(pager);
Tabs 的文本被覆盖,因为 Android 没有使用您在布局 xml 中定义的 Tabs。相反,它会创建全新的选项卡。
其他答案已经解释了如何使用适配器添加文本。
但是如果你想添加一个图标,或者用你的标签做一些其他的事情,那么你将不得不在第一个创建的片段中执行以下操作。
public void onCreateView(...) {
...
TabLayout tabLayout = getActivity().findViewById(R.id.tabLayout);
PagerAdapter.setTitle(tabLayout);
然后在您的 PagerAdapter 中...
public static void setTitle(TabLayout tabLayout) {
TabLayout.Tab tab;
tab = tabLayout.getTabAt(0);
tab.setIcon(R.drawable.home_icon);
tab.setText(R.string.my);
tab = tabLayout.getTabAt(1);
tab.setIcon(R.drawable.icon_search);
tab.setText(R.string.search);
tab = tabLayout.getTabAt(2);
tab.setIcon(R.drawable.icon_settings);
tab.setText(R.string.settings);
}
我觉得这有点乱,但我没有找到其他方法。
使tablayout 可滚动为真,以便它可以显示文本的完整名称。 作为参考,您可以使用以下代码。
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@+id/tb_socialMedia_fragment">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabInlineLabel="true"
app:tabMode="scrollable"
/>
</androidx.viewpager.widget.ViewPager>
如果您想将名称添加到 tablayout 并添加 class
,您可以使用以下代码class SocialMediaVpAdapter(
var fragmentManager: FragmentManager, var context :Context) : FragmentPagerAdapter(fragmentManager) {
override fun getCount(): Int {
return 4
}
override fun getPageTitle(position: Int): CharSequence? {
return when (position) {
0 -> {
context.getString(R.string.social_all)
}
1 -> {
context.getString(R.string.social_facebook)
}
2 -> {
context.getString(R.string.social_Instagram)
}
3 ->{
context.getString(R.string.social_tiktok)
}
else ->context.getString(R.string.social_all)
}
}
override fun getItem(position: Int): Fragment {
return when (position) {
0 -> {
AllSocialMedia()
}
1 -> {
FbSocialMediaActivity()
}
2 -> {
InstagramSocialMedia()
}
3 ->{
TikTokSocialMedia()
}
else -> AllSocialMedia()
}
}
}