android:fitsSystemWindows="boolean"&android:windowTranslucentStatus="boolean"

本文详细探讨了在Android中`android:fitsSystemWindows="true"`和`android:windowTranslucentStatus="true"`属性的作用。当设置`windowTranslucentStatus`为`true`时,状态栏(StatusBar)和动作栏(ActionBar)会悬浮且透明,但占据空间。文章通过不同的组合使用方式展示了它们的效果,并讨论了如何在API级别19以下兼容此类效果,包括创建针对不同API级别版本的styles.xml文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

了解几个概念:

 <item name="android:windowTranslucentStatus">true</item> 最低要求的api是level19

statusbar或者actionBar维持显示,但是不占位,悬浮于布局上;

android:fitsSystemWindows="true"  的作用是,如果activity的主题是android: windowsTranslucentStatus = " true",则statusBar和actionBar悬浮于布局之上,但是占位,和普通的根布局的子view很相似;同时statusBar是透明的。

请看下面几种组合:

  一: 只改变actionBar

以下都是基于普通布局:

<RelativeLayout 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=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00a381"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="haha"
            android:textAlignment="center"
            android:textColor="@color/colorAccent"
            android:textSize="38sp"
            android:textStyle="bold" />

    </LinearLayout>

</RelativeLayout>

① normal

主题:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

效果图



② noActionBar

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>


效果图


二 : 只改变android:windowTranslucentStatus属性  要求api level最小是19。

               作用: 只要statusBar或者ActionBar存在就会被悬浮起来,并且不占位。

① 修改style

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>

</resources>
布局:

<RelativeLayout 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=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#00a381"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="haha"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        android:textSize="38sp"
        android:textStyle="bold" />

</LinearLayout>

</RelativeLayout>

效果图:


② 在①的style主题基础上再布局文件的跟节点下添加 android:fitsSystemWindows="true" ; 则statusBar和actionBar悬浮但是占位,类似于作为根元素的字元素;

布局:

<RelativeLayout 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"
    android:background="#ad7d4c"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00a381"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="haha"
            android:textAlignment="center"
            android:textColor="@color/colorAccent"
            android:textSize="38sp"
            android:textStyle="bold" />

    </LinearLayout>

</RelativeLayout>

效果图:



啥是NavigationBar呢?

    下图中的1为:StatusBar

    下图中的2为:NavigationBar


   


可能有同学要问了?andorid:windowTranslucentStatus = “true” 要求api level最低是19,那么如何兼容低版本呢?


对于低于api level19 的版本,很抱歉你无法实现statusBar和actionBar的悬浮效果;

为了在api level大于等于19的版本上实现statusBar和actionBar的悬浮效果;你

你必须定义2套styles.xml文件:

在res目录下新建values-v19目录,在该目录下新建styles.xml文件







### 实现带顶部导航栏、底部导航栏和侧滑菜单的Android布局 #### 实现方案(使用DrawerLayout和ViewPager2) ##### 1. 添加依赖(build.gradle) ```groovy dependencies { implementation 'androidx.appcompat:appcompat:1.6.1' implementation 'com.google.android.material:material:1.9.0' implementation 'androidx.constraintlayout:constraintlayout:2.1.4' implementation "androidx.viewpager2:viewpager2:1.0.0" implementation "androidx.drawerlayout:drawerlayout:1.2.0" } ``` ##### 2. 主布局文件(activity_main.xml) ```xml <?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- 主内容区域 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- 顶部导航栏 --> <com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:title="应用标题" app:menu="@menu/top_menu"> <!-- 左侧按钮 --> <ImageView android:id="@+id/btnLeft" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_menu" android:layout_gravity="start" android:padding="16dp"/> <!-- 中间标题 --> <TextView android:id="@+id/tvTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="主标题" android:textSize="18sp" android:textColor="@android:color/white" android:layout_gravity="center"/> <!-- 右侧按钮 --> <ImageView android:id="@+id/btnRight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_more" android:layout_gravity="end" android:padding="16dp"/> </com.google.android.material.appbar.MaterialToolbar> <!-- 内容区域 --> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <!-- 底部导航栏 --> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottomNav" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/bottom_menu"/> </LinearLayout> <!-- 左侧侧滑菜单 --> <com.google.android.material.navigation.NavigationView android:id="@+id/navViewLeft" android:layout_width="280dp" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/nav_left_menu"/> <!-- 右侧侧滑菜单 --> <com.google.android.material.navigation.NavigationView android:id="@+id/navViewRight" android:layout_width="280dp" android:layout_height="match_parent" android:layout_gravity="end" app:menu="@menu/nav_right_menu"/> </androidx.drawerlayout.widget.DrawerLayout> ``` ##### 3. Java代码实现(MainActivity.java) ```java public class MainActivity extends AppCompatActivity { private DrawerLayout drawerLayout; private ViewPager2 viewPager; private NavigationView navViewLeft, navViewRight; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 初始化视图 drawerLayout = findViewById(R.id.drawerLayout); viewPager = findViewById(R.id.viewPager); navViewLeft = findViewById(R.id.navViewLeft); navViewRight = findViewById(R.id.navViewRight); ImageView btnLeft = findViewById(R.id.btnLeft); ImageView btnRight = findViewById(R.id.btnRight); BottomNavigationView bottomNav = findViewById(R.id.bottomNav); // 设置ViewPager适配器 ViewPagerAdapter adapter = new ViewPagerAdapter(this); viewPager.setAdapter(adapter); // 顶部左侧按钮点击打开左侧菜单 btnLeft.setOnClickListener(v -> drawerLayout.openDrawer(GravityCompat.START)); // 顶部右侧按钮点击打开右侧菜单 btnRight.setOnClickListener(v -> drawerLayout.openDrawer(GravityCompat.END)); // 底部导航与ViewPager联动 bottomNav.setOnItemSelectedListener(item -> { int itemId = item.getItemId(); if (itemId == R.id.nav_home) { viewPager.setCurrentItem(0); } else if (itemId == R.id.nav_dashboard) { viewPager.setCurrentItem(1); } else if (itemId == R.id.nav_notifications) { viewPager.setCurrentItem(2); } return true; }); // ViewPager页面切换时更新底部导航 viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() { @Override public void onPageSelected(int position) { super.onPageSelected(position); bottomNav.getMenu().getItem(position).setChecked(true); } }); // 侧滑菜单项点击事件 navViewLeft.setNavigationItemSelectedListener(item -> { // 处理左侧菜单点击 drawerLayout.closeDrawer(GravityCompat.START); return true; }); navViewRight.setNavigationItemSelectedListener(item -> { // 处理右侧菜单点击 drawerLayout.closeDrawer(GravityCompat.END); return true; }); } // ViewPager2适配器 private static class ViewPagerAdapter extends FragmentStateAdapter { public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) { super(fragmentActivity); } @NonNull @Override public Fragment createFragment(int position) { switch (position) { case 0: return new HomeFragment(); case 1: return new DashboardFragment(); case 2: return new NotificationsFragment(); default: return new HomeFragment(); } } @Override public int getItemCount() { return 3; } } } ``` #### 关键实现点说明 1. **布局结构**: - 使用 `DrawerLayout` 作为根布局实现侧滑菜单 - 主内容区域包含顶部工具栏、ViewPager2 和底部导航栏 - 两个 `NavigationView` 分别作为左右侧滑菜单 2. **功能联动**: - 顶部左右按钮控制对应侧滑菜单的开关 - 底部导航与 ViewPager2 页面联动 - 侧滑菜单项点击后自动关闭菜单 3. **适配器实现**: - 使用 `FragmentStateAdapter` 管理 ViewPager2 的页面 - 每个页面对应一个 Fragment 实现内容分离 4. **资源文件**: - 创建 `res/menu` 目录下的菜单文件: - `top_menu.xml`:顶部工具栏菜单 - `bottom_menu.xml`:底部导航菜单 - `nav_left_menu.xml` 和 `nav_right_menu.xml`:左右侧滑菜单 #### 优化建议 1. **手势控制**: ```java // 添加边缘滑动手势 drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); ``` 2. **状态栏沉浸**: ```java // 在styles.xml中设置 <item name="android:windowTranslucentStatus">true</item> ``` 3. **菜单动画**: ```xml <!-- 在res/anim中创建动画 --> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:fromXScale="0.8" android:toXScale="1.0"/> ``` 使用 Jetpack Navigation实现类似布局
最新发布
06-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值