使用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
相关产品推荐
相关产品推荐

