如何在ActionBar下方创建示例图样式的菜单（"Movies"、"TV Shows"）

Alright, let's get that menu sorted right below your ActionBar—exactly like your example, with "Movies" and "TV Shows" options. Here's a step-by-step breakdown tailored for Android:

Step 1: Add Required Dependencies #

If you're using Material Design components (the standard for modern Android apps), make sure this dependency is in your app-level build.gradle file:

implementation 'com.google.android.material:material:1.9.0'

You can swap in the latest stable version if you prefer, but this one's reliable for most use cases.

Step 2: Build the Layout #

Create your activity's layout with a custom Toolbar (to replace the default ActionBar) and a TabLayout directly below it—this will act as your menu:

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

    <!-- Custom Toolbar (replaces default ActionBar) -->
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <!-- Menu below ActionBar (using TabLayout) -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabTextColor="@android:color/white"
        app:tabSelectedTextColor="@android:color/black"
        app:tabIndicatorColor="@android:color/black" />

    <!-- Content area (swap with ViewPager/FrameLayout based on your needs) -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Step 3: Wire Up Logic in Your Activity #

In your activity's onCreate method, set the Toolbar as your ActionBar and configure the TabLayout with your menu options:

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import com.google.android.material.tabs.TabLayout;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        // Set custom Toolbar as the ActionBar
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Configure the tab menu
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        tabLayout.addTab(tabLayout.newTab().setText("Movies"));
        tabLayout.addTab(tabLayout.newTab().setText("TV Shows"));

        // Handle tab selection (for content switching)
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                switch(tab.getPosition()){
                    case 0:
                        // Load Movies-related content here
                        break;
                    case 1:
                        // Load TV Shows-related content here
                        break;
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {}

            @Override
            public void onTabReselected(TabLayout.Tab tab) {}
        });
    }
}

Step 4: Tweak Styles to Match Your Example #

If your example has specific styling (like rounded corners, custom colors, or bold text), you can customize the TabLayout further:

1. Add a custom style in styles.xml:

<style name="CustomTabStyle" parent="Widget.MaterialComponents.TabLayout">
    <item name="tabTextAppearance">@style/CustomTabText</item>
    <item name="tabBackground">@drawable/tab_background_selector</item>
    <item name="tabIndicatorHeight">0dp</item> <!-- Remove default underline if needed -->
</style>

<style name="CustomTabText" parent="TextAppearance.MaterialComponents.Tab">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
</style>

2. Create a tab_background_selector.xml in your drawable folder for selected/unselected states:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_selected_bg" android:state_selected="true" />
    <item android:drawable="@color/tab_unselected_bg" />
</selector>

3. Apply the custom style to your TabLayout in the layout file:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/CustomTabStyle" />

Alternative: Custom Horizontal Menu (No TabLayout) #

If your example menu is more button-like instead of tabs, use a LinearLayout with two clickable TextViews:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="?attr/colorPrimary">

    <TextView
        android:id="@+id/tv_movies"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Movies"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:padding="16dp"
        android:background="@drawable/tab_background_selector" />

    <TextView
        android:id="@+id/tv_tv_shows"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="TV Shows"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:padding="16dp"
        android:background="@drawable/tab_background_selector" />

</LinearLayout>

Then add click listeners to the TextViews in your activity to handle selection states and content switching.

That should give you an exact match for the menu you're aiming for! Adjust colors, sizes, and spacing to match your example's details.

内容的提问来源于stack exchange，提问作者DJ. XYZ