Android Studio“底部导航活动”模板在顶部留下空白区域

如何解决Android Studio“底部导航活动”模板在顶部留下空白区域

我通过选择“底部导航活动”创建了新的 Android 项目。没有其他变化。只修改 “fragment_notifications.xml”通过添加背景属性将背景设置为黑色。

Screenshot

我的问题是：

a) 为什么黑色片段没有在蓝色片段旁边开始标题区域，但在顶部留出 1~2 厘米的空白？目的是什么模板中的这个区域？我不认为我这么“幸运”找到像这样明显的错误。
b) 如何消除空白区域。我尝试修改 “activity_main.xml”和“fragment_notifications.xml”调整宽度/高度和约束属性，但它们都不起作用。

提前感谢您的时间。

我使用的是 Android Studio 4.1.1 并在 AVD Nexus 6 API 26 上运行代码，以下是相关文件的源代码。除通知片段背景外，均由 Android Studio 生成。

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu" />

<fragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toTopOf="@id/nav_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

mobile_navigation.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mobile_navigation"
    app:startDestination="@+id/navigation_home">

<fragment
    android:id="@+id/navigation_home"
    android:name="com.guo.butnavtest.ui.home.HomeFragment"
    android:label="@string/title_home"
    tools:layout="@layout/fragment_home" />

<fragment
    android:id="@+id/navigation_dashboard"
    android:name="com.guo.butnavtest.ui.dashboard.DashboardFragment"
    android:label="@string/title_dashboard"
    tools:layout="@layout/fragment_dashboard" />

<fragment
    android:id="@+id/navigation_notifications"
    android:name="com.guo.butnavtest.ui.notifications.NotificationsFragment"
    android:label="@string/title_notifications"
    tools:layout="@layout/fragment_notifications" />

fragment_notifications.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    tools:context=".ui.notifications.NotificationsFragment">

<TextView
    android:id="@+id/text_notifications"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:textAlignment="center"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java 如下：

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    BottomNavigationView navView = findViewById(R.id.nav_view);
    // Passing each menu ID as a set of Ids because each
    // menu should be considered as top level destinations.
    AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
            R.id.navigation_home,R.id.navigation_dashboard,R.id.navigation_notifications)
            .build();
    NavController navController = Navigation.findNavController(this,R.id.nav_host_fragment);
    NavigationUI.setupActionBarWithNavController(this,navController,appBarConfiguration);
    NavigationUI.setupWithNavController(navView,navController);
}

}

解决方法

为什么黑色片段不在蓝色标题区域旁边开始

原因：activity_main.xml 根布局 (ConstraintLayout) 有一个 paddingTop 属性，它添加了与 ActionBar 大小相等的顶部空白空间

android:paddingTop="?attr/actionBarSize"

ActionBar 大小的高度等于 56dp

<dimen name="abc_action_bar_default_height_material">56dp</dimen>

如何消除空白区域。

摆脱它。

更新：

a) 这个 padding 的潜在用途是什么，为什么模板会留下这个 padding？永远不要在标题栏下看到带有操作栏的应用

根据您的设计，这可能有基于意见的答案，但一般来说，您可以将其视为子标题的空间.. 或者可能是因为 ActionBar 可以容纳有限宽度的标题.. here 您可以找到一些设计指南及其用途。

b) 约束布局是这个 UI 的根节点。但是为什么 paddingTop 不在标题区域之上？

那是因为根布局大小从使用 ActionBar 中的应用主题设置的默认 styles.xml 的底部开始...在根布局的最顶部添加一个 View，.. 该视图将直接布置在 ActionBar 下方，而不是在其后面。

尝试更改 textview 颜色

<TextView
android:id="@+id/text_notifications"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
android:background="@color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

如果你想得到actionBar的面积而不是写

getActivity().getSupportActionBar().hide();

Android Studio“底部导航活动”模板在顶部留下空白区域

如何解决Android Studio“底部导航活动”模板在顶部留下空白区域

解决方法

相关推荐