java - 在 Fragments Android 中使用 ConstraintLayout 时的空 UI

Question

我在 Fragment 中使用 ConstraintLayout，但是当我运行应用程序时，UI 是空的，下面是 Fragment 和显示 fragment 的 Activity。

fragment 布局

<?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"
             tools:context=".FirstFragment">

    <!-- TODO: Update blank fragment layout -->


    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/firstFragButton"
            tools:text="Go"
            android:layout_marginBottom="384dp"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"/>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/first_fragment"
            android:id="@+id/textView" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="parent" android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/firstFragButton" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main

包含 NavHostFragment

<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@null"
        tools:context=".MainActivity">

    <fragment
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="395dp"
            android:layout_height="340dp" app:navGraph="@navigation/nav_graph" app:defaultNavHost="true"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/fragment"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

不同的手机有不同的屏幕尺寸，在您的布局中，您在 View 上使用固定尺寸(例如，固定尺寸为 50dp)，结果是在一个屏幕上看起来不错(你的 android studio 预览屏幕)在另一个屏幕(你的实际手机)上看起来不太好。

你可能想做这样的事情:

<?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"
  tools:context=".FirstFragment">

<!-- TODO: Update blank fragment layout -->


<Button
    android:id="@+id/firstFragButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Go" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="first_fragment"
    app:layout_constraintBottom_toTopOf="@+id/firstFragButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

要在所有设备上实现响应式外观:

同样适用于您的 NavHostFragment，要么使用:

android:layout_width="0dp" 和android:layout_height="0dp" 让你的 View 遍布整个屏幕或使用类似的东西让你的 View 响应:

应用程序:layout_constraintWidth_percent="0.8"
app:layout_constraintHeight_percent="0.5"

这将告诉您的 View 宽度占屏幕尺寸的 80%，高度占屏幕尺寸的 50%:

您可以查看我的示例，因为图像上的白色背景可能不是很清楚。

一般来说，如果您正在使用 ConstraintLayout，我建议您将它与 guidelines 一起使用和 Chains以支持不同的屏幕尺寸。