TabLayout 上的标签标题未显示

【问题标题】：Tabs titles on TabLayout not showingTabLayout 上的标签标题未显示
【发布时间】：2019-11-05 20:11:24
【问题描述】：

更新：我将适配器类修改为以下内容，现在可以正常工作：

public class SectionsPagerAdapter extends FragmentPagerAdapter {
R.string.tab_text_2, R.string.tab_text_3};
    //private final Context mContext;
    private static int tab_count;
    private Context mContext;

    public SectionsPagerAdapter(FragmentManager fm, int tab_count, Context context) {
        super(fm);
        mContext = context;
        this.tab_count = tab_count;
    }

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        // Return a PlaceholderFragment (defined as a static inner class below).
        //return PlaceholderFragment.newInstance(position + 1);
        switch (position)
        {
            case 0:
                Tab1Pagina_Inicial tab1 = new Tab1Pagina_Inicial();
                return tab1;

            case 1:
                Tab2Apartamentos tab2 = new Tab2Apartamentos();
                return tab2;

            case 2:
                Tab3ItensDeApartamentos tab3 = new Tab3ItensDeApartamentos();
                return tab3;

             default:
                 return null;
        }
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position)
        {
            case 0:
                return mContext.getString(R.string.tab_text_1);
            case 1:
                return mContext.getString(R.string.tab_text_2);
            case 2:
                return mContext.getString(R.string.tab_text_3);
            default:
                return null;
        }
    }

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

添加 getPageTitle 有效！ 感谢您的小费。 ^^

我正在创建一个带有标签菜单的应用，但标签的标题显示不正确。 我已经尝试重新阅读并再次查看到目前为止我看到的每个教程，以及将我的代码与其他在 stackoverflow 上存在类似问题的代码进行比较，但我似乎仍然无法确定我做错了什么以及在哪里做错了。谁能告诉我我的错误？

提前感谢您的澄清。

编辑：我认为不是颜色。我尝试过分别弄乱 TabLayout、AppBarLayout 和每个选项卡项的颜色和主题（以及完全删除主题），但标题仍然没有按应有的方式显示。但我会发布我的 colors.xml 和 styles.xml 文件的代码以防万一。

编辑 2：伙计们，我发现了一些奇怪的事情。现在我不确定我是否真的像我想的那样理解 TabLayout。 在我使用 setupWithViewPager 方法将我的 TabLayout 设置为 ViewPager 之前，一切都会按原样显示。我的意思是，标题出现了。但我实际上只能通过滑动来更改标签。单击每个选项卡不会执行任何操作。 我会附上一张图片来说明我的意思。

以下是我认为我理解的内容： 我知道我需要一个适配器来将每个片段呈现为每个选项卡的内容。 我知道 ViewPager 是负责在选项卡之间滑动的组件。 TabLayout 是一种布局，我可以在其中显示我的选项卡。 我需要将 TabLayout 连接到 ViewPager，以便在单击特定选项卡时显示正确的内容。

我错过了什么吗？

主活动：

package com.example.pousadaviladascores.Activities;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import com.example.pousadaviladascores.DAO.SqlAccess;
import com.example.pousadaviladascores.UI.SectionsPagerAdapter;
import com.example.pousadaviladascores.R;
import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {

    SqlAccess sqlAccess;

    //Declaring TabLayout and ViewPager
    TabLayout tabLayout;
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main);

        sqlAccess = new SqlAccess(this);

        //Initializing TabLayout
        tabLayout = findViewById(R.id.tabLayout);

        //Initializing viewPager
        viewPager = findViewById(R.id.view_pager);

        //Initializing page adapter
        //OBS: In Android, Adapter is a bridge between UI component and data source that helps us to fill data in UI component.
        SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());

        //Sets a PagerAdapter that will supply views for this pager as needed
        viewPager.setAdapter(sectionsPagerAdapter);

        tabLayout.setupWithViewPager(viewPager);

    }

    @Override
    protected void onDestroy() {
        sqlAccess.getDbHelper().close();
        super.onDestroy();
    }
}

片段类（我有三个类，每个片段一个，它们都有相同的代码，所以我只发布一个）：

package com.example.pousadaviladascores.Activities;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

import com.example.pousadaviladascores.R;

public class Tab1Pagina_Inicial extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab1_fragment_pagina_inicial, container, false);
    }
}

页面适配器类：

package com.example.pousadaviladascores.UI;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import com.example.pousadaviladascores.Activities.Tab1Pagina_Inicial;
import com.example.pousadaviladascores.Activities.Tab2Apartamentos;
import com.example.pousadaviladascores.Activities.Tab3ItensDeApartamentos;

/**
 * A [FragmentPagerAdapter] that returns a fragment corresponding to
 * one of the sections/tabs/pages.
 */
public class SectionsPagerAdapter extends FragmentPagerAdapter {

    private static int tab_count;

    public SectionsPagerAdapter(FragmentManager fm, int tab_count) {
        super(fm);
        //mContext = context;
        this.tab_count = tab_count;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position)
        {
            case 0:
                Tab1Pagina_Inicial tab1 = new Tab1Pagina_Inicial();
                return tab1;

            case 1:
                Tab2Apartamentos tab2 = new Tab2Apartamentos();
                return tab2;

            case 2:
                Tab3ItensDeApartamentos tab3 = new Tab3ItensDeApartamentos();
                return tab3;

             default:
                 return null;
        }
    }

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

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <TextView
            android:id="@+id/textViewAppName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingTop="5dp"
            android:paddingRight="20dp"
            android:text="@string/pousada_name"
            android:textSize="24sp" />

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="34dp"
            android:theme="?attr/actionBarTheme"
            app:layout_scrollFlags="scroll|enterAlways" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed">

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tab1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/tab_text_1" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tab2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/tab_text_2" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tab3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/tab_text_3" />
        </com.google.android.material.tabs.TabLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

选项卡布局（同样，除了文本之外都一样）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textTab"
        android:layout_width="369dp"
        android:layout_height="54dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="27dp"
        android:layout_marginLeft="27dp"
        android:layout_marginTop="0dp"
        android:layout_marginEnd="15dp"
        android:text="@string/tab_text_1"
        android:textSize="30sp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="15dp" />

</RelativeLayout>

colors.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
</resources>

styles.xml：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

为了更好地说明我的意思，下面是 activity_main 的设计以及它的外观：

以下是实际发生的情况：

每个页面的文本都显示得很好，但标题却没有。 ：/

【问题讨论】：

  • 尝试从您的所有com.google.android.material.tabs.TabItem 中删除android:layout_width 和android:layout_height
  • 尝试用下面的替换标签布局
  • colorOnSurface 和 colorPrimary 使用哪些颜色？
  • @VinayakBevinakatti 我不能。如果我将这些字段留空/注释掉这些行，Android Studio 不允许我构建项目。
  • @kam1234 对不起，我不明白你的意思。低于一个？你能澄清一下吗？ ://

标签： java android android-tablayout material-components material-components-android


【解决方案1】：

有 2 个问题。

tabLayout.setupWithViewPager() 方法删除所有选项卡，然后从改编的选项卡中添加选项卡：addTab(newTab().setText(pagerAdapter.getPageTitle(i)), false);

您必须在您的适配器中覆盖方法getPageTitle 以获取标题字符串。默认值为null。比如：

@Override
public CharSequence getPageTitle(int position) {
    switch (position) {
        case 0:
            return "....";
        case 1:
            return "....";
        ....   
    }
    return null;
}

还要使用com.google.android.material.tabs.TabLayout您必须在您的应用中使用Material Components Theme。您正在使用 AppCompat 主题。

你可以：

  • 切换到 Material Components 主题（在下一版本中建议和要求）
  • 添加app:tabTextColor属性：
  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/mySelector"
      .../>
  • 定义样式：
  <com.google.android.material.tabs.TabLayout
      style="@style/Widget.MaterialComponents.TabLayout"

TabLayout 在 Material Component 主题中使用的默认样式是 Widget.MaterialComponents.TabLayout，而在 AppCompat 中是 Widget.Design.TabLayout

有一些区别，在你的情况下是问题：

<style name="Widget.Design.TabLayout" >
  <item name="tabIndicatorColor">?attr/colorAccent</item>
  <item name="tabTextColor">@null</item>

【讨论】：

  • 我不确定我是否正在关注所有内容，但这是我根据您的回答尝试做的事情： - 从
  • 我已经尝试了这些步骤的组合以及所有这些步骤的组合。到目前为止，唯一改变的是 TabLayout 现在是白色的。标题仍未显示。我是否错过了什么或做错了什么？
  • @LailaCampos 更新了答案。您必须覆盖适配器中的 getPageTitle 方法。在任何情况下，您都应该使用答案中描述的 Material 主题。
【解决方案2】：

活动主要

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <TextView
            android:id="@+id/textViewAppName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingTop="5dp"
            android:paddingRight="20dp"
            android:text="@string/pousada_name"
            android:textSize="24sp" />

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="34dp"
            android:theme="?attr/actionBarTheme"
            app:layout_scrollFlags="scroll|enterAlways" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

你的主要活动

public class MainActivity extends AppCompatActivity {

    SqlAccess sqlAccess;

    //Declaring TabLayout and ViewPager
    TabLayout tabLayout;
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main);

        sqlAccess = new SqlAccess(this);

        viewPager = (ViewPager) findViewById(R.id.view_pager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.setupWithViewPager(viewPager);

    }
 private void setupViewPager(ViewPager viewPager) {
        SectionsPagerAdapter adapter = new SectionsPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new Tab1Pagina_Inicial(), "ONE");
        adapter.addFragment(new Tab2Apartamentos(), "TWO");
        adapter.addFragment(new Tab3ItensDeApartamentos(), "THREE");
        viewPager.setAdapter(adapter);
    }

    @Override
    protected void onDestroy() {
        sqlAccess.getDbHelper().close();
        super.onDestroy();
    }
}

并用这个替换您的部分寻呼机适配器

class SectionPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public SectionPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

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

【讨论】：

  • Android Studio 无法识别这些颜色变量，因为我没有先定义它们。你能分享你的 colors.xml 文件的代码吗？
  • 标题仍然没有显示，只是现在 tabLayout 是红色的（粉红色？），：/ 这是图片链接：imgur.com/5UA0LLQ
  • 对不起，女士，希望对您有帮助
  • 这是getPageTitle 方法！我没有在 MainActivity 类中添加选项卡，而是将它们保存在布局文件中，但将其添加到适配器中：
  • @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return mContext.getString(R.string.tab_text_1);案例1：返回mContext.getString(R.string.tab_text_2);案例 2：返回 mContext.getString(R.string.tab_text_3);默认值：返回空； } }
【解决方案3】：

在activity_main.xml 中，从appbarlayout() 中删除android:theme="@style/AppTheme.AppBarOverlay。我认为文字颜色问题。它与appbar 的颜色相同。所以它没有显示。如果你改变你的主题，你的文字可能会出现。

【讨论】：

  • 我试过这样做，但仍然没有显示。 ：/我不认为这是颜色。我试过分别弄乱 TabLayout、AppBarLayout 和每个选项卡项的颜色和主题，但标题仍然没有按应有的方式显示。但我会更新问题并发布我的 colors.xml 文件的代码以防万一。
猜你喜欢
  • 1970-01-01
  • 2023-03-16
  • 2016-11-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode