如何在Android中实现仅含左右图标的透明Toolbar并解决上滑问题？

嘿，我完全懂你想要实现的效果——一个背景透明、只在左右两侧显示图标的Toolbar，想用CoordinatorLayout来配合滚动逻辑，但卡在了AppBarLayout的上滑问题上。我来给你一步步拆解解决方案！

你要的是悬浮在内容上方的透明Toolbar，同时不希望AppBarLayout跟着内容上滑时出现不必要的隐藏/滚动行为对吧？那我们从布局到代码一步步调整：

1. 构建透明Toolbar的布局 #

首先先把Toolbar本身的样式搞定，去掉默认背景、阴影，只保留左右图标：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/transparent"
    app:elevation="0dp"
    <!-- 去掉默认的左右内边距，让图标贴边 -->
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetEnd="0dp">

    <!-- 左侧图标 -->
    <ImageView
        android:id="@+id/left_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_back_arrow"
        android:layout_gravity="start|center_vertical"
        android:paddingHorizontal="16dp"/>

    <!-- 右侧图标 -->
    <ImageView
        android:id="@+id/right_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_menu"
        android:layout_gravity="end|center_vertical"
        android:paddingHorizontal="16dp"/>

</androidx.appcompat.widget.Toolbar>

2. 解决AppBarLayout的上滑问题 #

如果你的问题是AppBarLayout跟着内容上滑时会自动隐藏，那核心是调整它的滚动行为。我们只需要给Toolbar设置noScroll的滚动标记，让它固定在顶部：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

    <!-- 透明的AppBarLayout，去掉阴影和背景 -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:elevation="0dp">

        <!-- 这里引用上面的Toolbar -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/custom_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"
            <!-- 关键：禁止Toolbar随滚动隐藏 -->
            app:layout_scrollFlags="noScroll"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp">

            <!-- 左右图标布局同上 -->

        </androidx.appcompat.widget.Toolbar>

    </com.google.android.material.appbar.AppBarLayout>

    <!-- 可滚动的内容容器（比如RecyclerView/ScrollView） -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/content_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        <!-- 让内容在AppBarLayout下方滚动 -->
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 配套的主题&代码设置 #

第一步：设置Activity为无ActionBar主题 #

在styles.xml里定义一个无ActionBar的主题：

<style name="AppTheme.TransparentToolbar" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <!-- 可选：让状态栏透明，Toolbar延伸到状态栏下方 -->
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

然后在AndroidManifest.xml里给目标Activity绑定这个主题：

<activity
    android:name=".MainActivity"
    android:theme="@style/AppTheme.TransparentToolbar"/>

第二步：代码中初始化Toolbar #

在Activity里隐藏默认的标题（因为你只需要图标）：

// Kotlin代码
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    
    val toolbar = findViewById<Toolbar>(R.id.custom_toolbar)
    setSupportActionBar(toolbar)
    // 隐藏Toolbar的默认标题文字
    supportActionBar?.setDisplayShowTitleEnabled(false)
    
    // 给左右图标设置点击事件
    findViewById<ImageView>(R.id.left_icon).setOnClickListener {
        // 左侧图标逻辑，比如返回
        onBackPressed()
    }
    findViewById<ImageView>(R.id.right_icon).setOnClickListener {
        // 右侧图标逻辑，比如打开菜单
    }
}

// Java代码
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    Toolbar toolbar = findViewById(R.id.custom_toolbar);
    setSupportActionBar(toolbar);
    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    }
    
    findViewById(R.id.left_icon).setOnClickListener(v -> onBackPressed());
    findViewById(R.id.right_icon).setOnClickListener(v -> {
        // 右侧图标逻辑
    });
}

额外注意点 #

如果你的AppBarLayout上滑时还是出现奇怪的阴影或背景，检查这两个属性：

• AppBarLayout的android:background必须设为透明
• AppBarLayout和Toolbar的app:elevation都要设为0dp，去掉默认阴影

这样调整后，就能得到一个完全透明、仅显示左右图标，且不会随内容上滑消失的Toolbar啦！

内容的提问来源于stack exchange，提问作者techDigi