Android 材料 TabLayout TabItem 不显示文本

Question

我想设置一个TabLayout。当我在XML中或以编程方式添加TabItems时，它们占用空间，可以单击，但不显示它们的文本。当我通过tab.getText()在OnTabSelectedListener中以编程方式访问它们的文本时，它就在那里。
当我想使用寻呼机时，同样的情况也发生了。
我知道，

TabItem实际上并没有添加到TabLayout中，它只是一个dummy允许设置TAB项的文本、图标和自定义布局

但是我不知道如何在屏幕上显示它的文本。
AndroidStudio的设计显示了预期的布局。
我用Java写我的应用程序。

. xml:

<com.google.android.material.tabs.TabLayout
android:id="@+id/exercise_menu_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorSurfaceElevation1dp"
app:tabMode="fixed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.tabs.TabItem
android:id="@+id/exercise_menu_dayTabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Day"/>
<com.google.android.material.tabs.TabItem
android:id="@+id/exercise_menu_myExercisesTabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Exercises"/>
<com.google.android.material.tabs.TabItem
android:id="@+id/exercise_menu_exerciseTabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercises"/>
</com.google.android.material.tabs.TabLayout>

在AndroidStudio中的样子:
在AndroidStudio中的样子
在应用中的样子:
在应用中的样子

请帮忙的材料快把我逼疯了

Answer 1

这可以通过编程解决

步骤1创建FragmentStateAdapter适配器类

public class TabAdapter extends FragmentStateAdapter {
public TabAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
@NonNull
@Override
public Fragment createFragment(int position) {
switch (position) {
case 0:
return new DayFragment();
case 1:
return new MyExerciseFragment();
default:
return new ExerciseFragment();
}
}
@Override
public int getItemCount() {
return 3;
}
}

步骤2在activity或fragment类中创建一个方法来使用TabLayoutMediator设置制表符，并在onCreate方法

中调用该方法

void setupTabLayout() {
ViewPager2 viewPager = binding.exerciseMenuViewPager;

viewPager.setAdapter(tabAdapter);
TabLayout tabLayout = binding.exerciseMenuTabLayout;
new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
switch (position) {
case 0:
tab.setText("Day");
break;
case 1:
tab.setText("My Exercise");
break;
default:
tab.setText("Exercise");
}
}).attach();
}

这就是你的activity类的样子

public class MainActivity extends AppCompatActivity {

private ActivityMainBinding binding;
private TabAdapter tabAdapter;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
tabAdapter = new TabAdapter(this);
setupTabLayout();
}
void setupTabLayout() {}
}

注意:要使用ViewBinding，请将此代码添加到应用级build.gradle文件中。

android{

...
buildFeatures {
viewBinding true
}
...
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/exercise_menu_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/exercise_menu_viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/exercise_menu_tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

最终结果

PS:您需要创建这些片段类DayFragment.java,MyExerciseFragment.java和ExerciseFragment。

Answer 2

因为我不想使用片段页，我不能得到TabLayout工作，我做了我自己的TabLayout。
我在TextViews中使用了LinearLayout，并在底部添加了一条线和适当的背景色。它的工作完美无瑕，唯一缺少的是线条运动的动画。
每次单击后，恢复先前选择的textView的外观，并更改新textView。

<TextView
android:id="@+id/exercise_menu_dayTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Day"
android:textAlignment="center"
android:layout_weight="1"
android:textSize="18sp"
android:textStyle="bold|italic"
android:textColor="@color/textColor"
android:background="@color/colorSurfaceElevation1dp"
android:paddingVertical="8dp"/>
<TextView
android:id="@+id/exercise_menu_myExercisesTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="My Exercises"
android:textAlignment="center"
android:layout_weight="1"
android:textSize="18sp"
android:textStyle="bold|italic"
android:textColor="?attr/colorPrimary"
android:maxLines="1"
android:background="@drawable/back_line_bottom"
android:paddingVertical="8dp"/>
<TextView
android:id="@+id/exercise_menu_exerciseTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Exercises"
android:textAlignment="center"
android:layout_weight="1"
android:textSize="18sp"
android:textStyle="bold|italic"
android:textColor="@color/textColor"
android:background="@color/colorSurfaceElevation1dp"
android:paddingVertical="8dp"/>

back_line_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimary"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="@color/colorSurfaceElevation1dp"/>
</shape>
</item>
</layer-list>

背景变化:

public void changeTypeVisually(int tabId) {
//  Resets the background
switch(currentTabId) {
case 0:
myExercisesTextView.setBackgroundColor(getResources().getColor(R.color.colorSurfaceElevation1dp));
myExercisesTextView.setTextColor(getResources().getColor(R.color.textColor));
break;
case 1:
dayTextView.setBackgroundColor(getResources().getColor(R.color.colorSurfaceElevation1dp));
dayTextView.setTextColor(getResources().getColor(R.color.textColor));
break;
case 2:
exerciseTextView.setBackgroundColor(getResources().getColor(R.color.colorSurfaceElevation1dp));
exerciseTextView.setTextColor(getResources().getColor(R.color.textColor));
break;
}
//  Adds the underline
switch(tabId) {
case 0:
myExercisesTextView.setBackground(getResources().getDrawable(R.drawable.back_line_bottom));
myExercisesTextView.setTextColor(getResources().getColor(R.color.colorPrimary));
break;
case 1:
dayTextView.setBackground(getResources().getDrawable(R.drawable.back_line_bottom));
dayTextView.setTextColor(getResources().getColor(R.color.colorPrimary));
break;
case 2:
exerciseTextView.setBackground(getResources().getDrawable(R.drawable.back_line_bottom));
exerciseTextView.setTextColor(getResources().getColor(R.color.colorPrimary));
break;
}
currentTabId = tabId;
}