如何在 Android 中添加自定义选项卡？

在本文中，在 android.xml 中添加了自定义选项卡。 TabLayout提供了一个水平布局来显示选项卡。 TabLayouts 也可以使用 viewPager 添加，请在此处查看，但不能自定义。每当用户单击选项卡时，都会导致一个片段与另一个片段的交易。可以创建自定义选项卡来完成同样的任务。根据我们的需要，可以使用标签添加图标、动画、文本等。下图显示了自定义选项卡的示例：

方法：

步骤 1：通过右键单击Java包创建AlgorithmFragment ，选择 new ?片段（空白） 。

第 2 步：针对CourseFragment和LoginFragment执行上述步骤。

第 3 步：现在在fragment_algorithm.xml文件中添加以下代码。这里在布局中添加了一个 TextView。

第 4 步：现在在fragment_course.xml文件中添加以下代码。这里在布局中添加了一个 textView。

第 5 步：现在在fragment_profile.xml文件中添加以下代码。这里在布局中添加了一个 textView。

第 6 步：现在在tab_bar.xml文件中添加以下代码。在此文件中，设计自定义选项卡的布局。这里为每个片段添加了一个 TextView 和一个图标（ImageView）。

第 7 步：现在在activity_main.xml文件中添加以下代码。在此文件中，添加自定义选项卡的布局和片段的容器。

第 8 步：现在在MainActivity 中添加以下代码。 Java文件。在此文件中，添加有助于在片段之间导航的OnNavigationItemSelectedListener 。当用户点击图标时，它将切换片段。

主要活动。Java

package org.geeksforgeeks.customtabs;
  
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        getSupportFragmentManager().beginTransaction()
                .add(R.id.layout,new AlgorithmFragment()).commit();
    }
  
    public void onClick(View v){
        switch (v.getId()){
            case R.id.algo_lay:
                getSupportFragmentManager().beginTransaction()
                        .replace(R.id.layout,
                         new AlgorithmFragment()).commit();
                break;
            case R.id.course_lay:
                getSupportFragmentManager().beginTransaction()
                        .replace(R.id.layout,
                         new CourseFragment()).commit();
                break;
            case R.id.profile_lay:
                getSupportFragmentManager().beginTransaction()
                        .replace(R.id.layout,
                         new ProfileFragment()).commit();
                break;
        }
    }
}

输出：