如何在 Android 中实现带图标的 TabLayout?

带图标的 TabLayout 已成为 Android 开发中流行的 UI 组件。它通过提供水平的选项卡布局简化了应用程序内的导航。每个选项卡代表一个不同的类别或功能，可以通过合并图标来增强视觉效果。图标和标签的这种组合使用户更容易掌握每个选项卡的用途。

通过选择选项卡，将显示相应的内容。这通常在 ViewPager 中完成。要实现带图标的 TabLayout，需要创建必要的布局并管理每个选项卡内容的片段或活动。它还涉及自定义外观以适应应用程序的设计。这种导航解决方案不仅增强了用户体验，而且还通过提供用户友好且视觉上吸引人的界面提高了应用程序的可用性。

TabLayout

TabLayout 是 Android 框架中的 UI 组件，它为用户提供了一种用户友好的方式来合并水平选项卡布局。此多功能功能通常用于高效组织和无缝导航应用程序内的多个屏幕或部分。每个选项卡代表一个不同的类别或功能，用户只需点击相应的选项卡即可轻松在它们之间切换。

TabLayout 是与 ViewPager 一起使用的常用组件。ViewPager 负责管理与每个选项卡相关的内容。此组合允许根据所选选项卡在不同的片段或活动之间无缝导航。此外，TabLayout 还提供各种自定义选项，例如添加图标、设置文本标签和应用样式。这些功能使其具有适应性和多功能性，可满足各种应用设计和要求。

方法

在 Android 中实现 TabLayout 有不同的方法，我们将介绍一些常用方法:

• 方法1:对选项卡项使用自定义视图

• 方法2:使用带有图标的默认 TabLayout 设置

方法 1:对选项卡项使用自定义视图

在 Android 中将 TabLayout 与图标结合起来的一种方法涉及为每个选项卡项使用自定义视图。此方法需要为选项卡项设计一个独特的 XML 布局文件，其中包括用于图标的 ImageView 和用于标题的 TextView。然后，您可以在活动或片段中设置 TabLayout 和 ViewPager，然后为每个单独的选项卡创建自定义选项卡视图。

每个选项卡的自定义视图都易于检索。在此视图中，可以找到 ImageView 和 TextView 组件，从而可以根据需要自定义图标和标题。通过合并自定义视图，用户可以更好地控制 TabLayout 中选项卡项的外观和布局，从而能够无缝显示图标和相应标题。

算法

• 应创建主活动或片段的 XML 布局文件，其中包括 TabLayout 和 ViewPager。

• 此外，还应为自定义选项卡项创建单独的 XML 布局文件，该文件分别由用于图标和标题的 ImageView 和 TextView 组成。

• 要获取活动或片段中对 TabLayout 和 ViewPager 的引用，应使用它们各自的 ID。

• ViewPager 需要设置适当的适配器来处理选项卡的内容。

• 为了将 TabLayout 与 ViewPager 链接起来，请使用 setupWithViewPager() 方法。

• 使用循环反复遍历 TabLayout 中的每个选项卡。对于每个选项卡，检索其 Tab 对象并通过使用 setCustomView() 方法自定义其视图。

• 在此自定义视图中，使用各自的 ID 找到 ImageView 和 TextView。

• 通过相应地调用 ImageView 和 TextView 上的 setImageResource() 和 setText() 等方法为每个选项卡设置相关的图标和标题信息。

• 对所有选项卡重复上述步骤，以便根据需要使用所需的图标和标题配置其自定义视图。自定义选项可用于根据特定要求调整 TabLayout 的外观和行为。

• 此外，还可以集成其他功能，例如响应选项卡选择事件或根据选项卡更改更新 ViewPager 中的内容。

示例

// activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      app:tabGravity="fill"
      app:tabMode="fixed"
      app:tabIndicatorHeight="0dp" />

   <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_above="@id/tab_layout" />

</RelativeLayout>

//MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {

   private static final String[] tabTitles = {"Tab 1", "Tab 2", "Tab 3"};
   private static final int[] tabIcons = {R.drawable.ic_tab1, R.drawable.ic_tab2, R.drawable.ic_tab3};

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

      TabLayout tabLayout = findViewById(R.id.tab_layout);
      ViewPager2 viewPager = findViewById(R.id.view_pager);
      viewPager.setAdapter(new ViewPagerAdapter(this));

      new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
         tab.setIcon(tabIcons[position]);
         tab.setText(tabTitles[position]);
      }).attach();
   }
}

// ViewPagerAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewHolder> {

   private final Context context;

   public ViewPagerAdapter(Context context) {
      this.context = context;
   }

   @NonNull
   @Override
   public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
      View view = LayoutInflater.from(context).inflate(R.layout.item_view_pager, parent, false);
      return new ViewHolder(view);
   }

   @Override
   public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
      holder.textView.setText("Page " + (position + 1));
   }

   @Override
   public int getItemCount() {
      return 3; // Change this value based on the number of tabs
   }

   public static class ViewHolder extends RecyclerView.ViewHolder {
      TextView textView;

      public ViewHolder(View itemView) {
         super(itemView);
         textView = itemView.findViewById(R.id.textView);
      }
   }
}
ic_tab1.png, ic_tab2.png, ic_tab3.png in res/drawable

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

   <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textAppearance="?android:textAppearanceLarge" />

</LinearLayout>

输出

方法 2:使用带图标的默认 TabLayout 设置

在 Android 中实现带图标的 TabLayout 的另一种方法是利用支持包含图标的默认 TabLayout 设置。此方法无需创建自定义视图，因为它允许直接为每个选项卡分配图标。

使用 ViewPager 配置 TabLayout 后，您可以轻松浏览每个选项卡并利用 setIcon() 方法指定所需的图标资源。

通过利用此方法，您可以利用 TabLayout 的内置功能来管理选项卡选择和样式，同时简化实现。这种简单的方法简化了将图标与 TabLayout 中的选项卡相关联的过程，有助于实现您想要的视觉表示，而无需进行额外的修改。

算法

• 需要为主活动或片段创建 XML 布局文件。这包括整合 TabLayout 和 ViewPager 组件。

• 首先，获取 Activity 或 Fragment 中对 TabLayout 和 ViewPager 的引用。

• 接下来，使用适当的适配器设置 ViewPager 以处理选项卡的内容。使用 setupWithViewPager() 方法将 TabLayout 与 ViewPager 链接起来。

• 之后，遍历 TabLayout 中的每个选项卡并使用 getTabAt() 方法检索其各自的 Tab 对象。

• 如果 Tab 对象不为空，则可以通过 setIcon() 设置图标来自定义其外观。

• 此外，进行任何必要的调整以适合您所需的 TabLayout 外观和行为。

• 最后，处理可能需要的任何附加功能，例如响应选项卡选择事件或根据选项卡更改更新 ViewPager 中的内容。

程序

// activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      app:tabGravity="fill"
      app:tabMode="fixed"
      app:tabIndicatorHeight="0dp" />

   <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_above="@id/tab_layout" />

</RelativeLayout>

// MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {

   private static final int[] tabIcons = {
         R.drawable.ic_tab1,
         R.drawable.ic_tab2,
         R.drawable.ic_tab3
   };

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

      TabLayout tabLayout = findViewById(R.id.tab_layout);
      ViewPager2 viewPager = findViewById(R.id.view_pager);
      viewPager.setAdapter(new ViewPagerAdapter(this));

      TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager,
            (tab, position) -> tab.setIcon(tabIcons[position])
      );
      mediator.attach();
   }
}

// ViewPagerAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class ViewPagerAdapter extends RecyclerView.Adapter<
ViewPagerAdapter.ViewHolder> {

   private final Context context;

   public ViewPagerAdapter(Context context) {
      this.context = context;
   }

   @NonNull
   @Override
   public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
      View view = LayoutInflater.from(context).inflate(R.layout.item_view_pager, parent, false);
      return new ViewHolder(view);
   }

   @Override
   public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
      holder.textView.setText("Page " + (position + 1));
   }

   @Override
   public int getItemCount() {
      return 3; // Change this value based on the number of tabs
   }

   public static class ViewHolder extends RecyclerView.ViewHolder {
      TextView textView;

      public ViewHolder(View itemView) {
         super(itemView);
         textView = itemView.findViewById(R.id.textView);
      }
   }
}

ic_tab1.png, ic_tab2.png, ic_tab3.png in res/drawable

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

   <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textAppearance="?android:textAppearanceLarge" />

</LinearLayout>

输出

结论

总之，TabLayout 与图标的结合可以通过两种主要方法实现:利用选项卡项的自定义视图或采用默认的 TabLayout 设置。自定义视图方法通过为每个选项卡项创建不同的 XML 布局文件，提供了更大的灵活性和个性化。相反，默认设置通过直接将图标分配给各个选项卡简化了流程。

相关文章

• Java 中 IdentityHashMap、WeakHashMap 和 EnumMap 之间的区别
• Java 中继承和接口的区别
• Java 中 InputStream 和 OutputStream 之间的区别
• Java 中 HashSet 、LinkedHashSet 和 TreeSet 之间的区别和相似之处
• Java 中 HashMap 和 IdentityHashMap 之间的区别
• Java 中 Hashtable 和同步映射之间的区别
• 如何在 Java 中迭代 LinkedHashMap?
• 如何使用反射动态地通过名称调用 Java 中的方法?
• 如何在 Java 中以相反的顺序迭代向量元素?
• 如何在 Java 中以反向顺序迭代 LinkedHashMap?