You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用NavigationDrawer为部分Fragment设置全屏背景图及透明Toolbar

实现带透明Toolbar的全屏Fragment背景效果

我来帮你搞定这个需求,其实只需要调整布局配置加一点动态逻辑就能实现,一步步来:

第一步:调整Toolbar和主布局的基础配置

首先要让Fragment的内容能延伸到Toolbar下方,同时修改Toolbar的默认背景属性:

修改toolbar.xml

把Toolbar的固定背景改成透明,并且移除android:fitsSystemWindows="true"(这个属性会限制Toolbar的布局范围,我们要让背景图全屏覆盖状态栏区域,所以统一在Activity的根布局处理适配):

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="@android:color/transparent" />

修改activity_main.xml

移除Fragment容器flContent的app:layout_behavior="@string/appbar_scrolling_view_behavior"(这个属性会强制内容区域避开Toolbar),然后给最外层LinearLayout添加android:fitsSystemWindows="true",让整个布局适配系统状态栏:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:fitsSystemWindows="true">

        <include
            layout="@layout/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        app:menu="@menu/menu_drawer"
        app:headerLayout="@layout/nav_header"/>
</android.support.v4.widget.DrawerLayout>

第二步:给HomeFragment添加全屏背景图

修改fragment_home.xml,添加一个铺满全屏的ImageView作为背景,把原有TextView放在背景图上方(可以给文字改个浅色,方便在背景上看清):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hlsapps.unroutine.HomeFragment">

    <!-- 全屏背景图,替换成你的资源文件 -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/home_background" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Holla home fragment"
        android:textColor="@android:color/white" />
</FrameLayout>

第三步:动态控制Toolbar的状态

因为你只需要在HomeFragment中显示透明Toolbar,其他Fragment要恢复正常,所以需要在Fragment切换时做动态调整:

方式一:在MainActivity中监听Fragment切换

如果用FragmentManager管理切换,可以添加BackStack监听来判断当前Fragment:

public class MainActivity extends AppCompatActivity {
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

        // 初始加载HomeFragment
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.flContent, new HomeFragment())
                .commit();

        // 监听Fragment栈变化
        getSupportFragmentManager().addOnBackStackChangedListener(() -> {
            Fragment currentFragment = getSupportFragmentManager().findFragmentById(R.id.flContent);
            if (currentFragment instanceof HomeFragment) {
                // 切换到HomeFragment时,设置Toolbar透明,状态栏文字改为浅色(适配深色背景)
                mToolbar.setBackgroundColor(Color.TRANSPARENT);
                getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
            } else {
                // 其他Fragment时,恢复Toolbar默认背景和状态栏样式
                mToolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
                getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
            }
        });
    }
}

方式二:在HomeFragment生命周期中控制

如果Fragment切换不依赖BackStack,可以直接在HomeFragment的生命周期方法里设置:

public class HomeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }

    @Override
    public void onResume() {
        super.onResume();
        if (getActivity() != null) {
            Toolbar toolbar = getActivity().findViewById(R.id.toolbar);
            toolbar.setBackgroundColor(Color.TRANSPARENT);
            // 设置状态栏文字为浅色
            getActivity().getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        }
    }

    @Override
    public void onPause() {
        super.onPause();
        if (getActivity() != null) {
            Toolbar toolbar = getActivity().findViewById(R.id.toolbar);
            toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
            getActivity().getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
        }
    }
}

内容的提问来源于stack exchange,提问作者Haim127

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 07:09:35