如何使用约束布局使卡片视图始终位于一个地方?

How to use constraint layout so the card views are always in one place?

我在其中使用约束布局和卡片视图,但在不同的屏幕尺寸上,卡片视图不在同一个位置。我认为约束的想法是你只需要安排一次卡片视图,它会自动对齐到不同的设备尺寸。第一张图片显示了我希望在每种设备尺寸上都有的屏幕,另一张图片显示了不同尺寸的结果,其中 CardViews 显然不在正确的位置。

我已经尝试使用指南,但没有帮助。还是使用像 RelativeLayout 这样的其他 Layout 更好?但是 ConstraintLayout 的意义何在?

Design as it should be

Result with different size

感谢您的帮助!

这是我的 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"
    tools:context=".spielen_uebersicht">

    <TextView
        android:id="@+id/spieler_suche"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="Spieler suchen:"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.484"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView3"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_margin="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/spieler_suche">

        <SearchView
            android:id="@+id/searchView_spieler_suchen"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:queryBackground="@android:color/transparent" />


    </androidx.cardview.widget.CardView>


    <androidx.cardview.widget.CardView
        android:id="@+id/zufälliger_spieler"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="36dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cardView3"
        app:layout_constraintVertical_bias="0.198">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="Zufälliger Spieler"
            android:textAlignment="center"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@mipmap/zufaelliger_spieler" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintBottom_toBottomOf="@+id/zufälliger_spieler"
        app:layout_constraintStart_toEndOf="@+id/zufälliger_spieler"
        app:layout_constraintTop_toBottomOf="@+id/cardView3"
        app:layout_constraintVertical_bias="1.0">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="Freunde einladen"
            android:textAlignment="center"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@mipmap/freunde_einladen" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardViewFreundesübersicht"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="36dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintStart_toEndOf="@+id/cardView2"
        app:layout_constraintTop_toBottomOf="@+id/cardView">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp"
            android:text="Freundes-\nübersicht"
            android:textAlignment="center"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@mipmap/freundes_uebersicht" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="36dp"
        android:layout_marginTop="36dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/zufälliger_spieler">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp"
            android:text="Anfragen"
            android:textAlignment="center"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@mipmap/freundes_anfragen" />

    </androidx.cardview.widget.CardView>


</androidx.constraintlayout.widget.ConstraintLayout>```

您在不同的 phone 上看不到相同的布局,因为您的卡片视图尺寸是固定大小,为什么不好?

不同的 phone 有不同的屏幕尺寸,在您的布局中,您在视图上使用固定尺寸(例如,固定尺寸为 50dp)结果是,在一个屏幕(您的 android 工作室预览屏幕)上可能看起来不错的内容在另一个屏幕(您的实际 phone)上可能看起来不太好。

如何修复:

您可以在您的卡片视图上使用 app:layout_constraintWidth_percentapp:layout_constraintHeight_percent 来根据屏幕给出以百分比表示的大小。

像这样:

<?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">


<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/button7" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="20dp"
    app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>

在此示例中,我有 4 个按钮代表您的 cardView。
它们的大小都相等,并且会响应所有屏幕尺寸。

此布局将如下所示(箭头指向指南,使其更易于理解):

对于 Future Visitors,在尝试模拟线性布局形式时,链是一个神奇的词。如 Tamir Abutbul 所述,使用水平链和垂直链以及使用动态视图大小应该是最佳实践。

<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">

<TextView
    android:id="@+id/textView24"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:gravity="center"
    android:text="Title"
    android:textColor="@android:color/black"
    android:textSize="?android:attr/actionBarSize"
    android:textStyle="bold"
    app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableBottom="@android:drawable/ic_media_play"
    android:text="text 4"
    android:textSize="24sp"
    android:padding="50dp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/btn3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/btn3"
    app:layout_constraintTop_toTopOf="@+id/btn3" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableBottom="@android:drawable/ic_media_play"
    android:text="text 2"
    android:textStyle="bold"
    android:textSize="24sp"
    android:padding="50dp"
    app:layout_constraintBottom_toBottomOf="@+id/btn4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/btn4"
    app:layout_constraintTop_toTopOf="@+id/btn4" />

<com.google.android.material.button.MaterialButton

    android:id="@+id/btn3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableBottom="@android:drawable/ic_media_play"
    android:text="text 3"
    android:textStyle="bold"
    android:textSize="24sp"
    android:padding="50dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/btn4"
    app:layout_constraintEnd_toStartOf="@+id/btn1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/btn4" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableBottom="@android:drawable/ic_media_play"
    android:text="text 1"
    android:textStyle="bold"
    android:textSize="24sp"
    android:padding="50dp"
    app:layout_constraintBottom_toTopOf="@+id/btn3"
    app:layout_constraintEnd_toStartOf="@+id/btn2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>

祝你好运;)