在 Fragments Android 中使用 ConstraintLayout 時的空 UI

Question

我在 Fragment 中使用 ConstraintLayout，但是當我運行應用程序時，UI 是空的，下面是 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>

活動主

包含 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

不同的手機有不同的屏幕尺寸，在您的布局中，您在視圖上使用固定尺寸（例如，固定尺寸為 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"使您的視圖遍布整個屏幕或使用類似的東西使您的視圖具有響應性：

app:layout_constraintWidth_percent="0.8" app:layout_constraintHeight_percent="0.5"

這將告訴您的視圖寬度為屏幕尺寸的 80%，高度為屏幕尺寸的 50%：

您可以查看我的示例，因為圖像上的白色背景可能不太清晰。

通常，如果您使用ConstraintLayout我建議將其與指南和鏈一起使用以支持不同的屏幕尺寸。