Как использовать макет ограничения, чтобы представления карт всегда были в одном месте?

Я использую макет ограничения и представления карточек в нем, но на разных размерах экрана представления карточек не находятся в одном и том же месте. Я думал, что идея ограничения заключается в том, что вам нужно настроить представление карты только один раз, и оно автоматически выравнивается с различными размерами устройств. На первом рисунке показан экран, который я хочу иметь для каждого размера устройства, а на другом рисунке показан результат другого размера, где CardViews явно не в нужном месте.

Я уже пробовал использовать рекомендации, но это не помогает. Или лучше использовать другой макет, например RelativeLayout? Но в чем тогда смысл ConstraintLayout?

Дизайн таким, каким он должен быть

Результат другого размера

Спасибо за помощь!

Вот мой 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>```

android android-constraintlayout cardview
person Daniel Spatz    schedule 06.08.2019    source источник
comment
Я предполагаю, что вам нужно также определить ограничения на конце/правой стороне карт на краевом экране.   -  person waqaslam    schedule 06.08.2019
comment
Поделитесь файлом макета, пожалуйста   -  person Tamir Abutbul    schedule 06.08.2019
comment
проблема, если вы нажимаете его слева, но не справа. поделитесь своим xml-кодом   -  person letsCode    schedule 06.08.2019
comment
Также я думал, что CardViews адаптируют свой размер к меньшим устройствам, но они остаются прежними.   -  person Daniel Spatz    schedule 06.08.2019

Ответы (2)


arrow_upward
0
arrow_downward

Вы не видите свой макет одинаково на разных телефонах, потому что размеры ваших карт имеют фиксированный размер, почему это плохо?

Разные телефоны имеют разный размер экрана, в вашем макете вы используете фиксированный размер в вашем представлении (например, фиксированный размер 50dp), и в результате то, что может хорошо выглядеть на одном экране (предварительный просмотр вашей студии Android экран) не будет хорошо смотреться на другом экране (на вашем реальном телефоне).

Как это исправить:

Вы можете просто использовать app:layout_constraintWidth_percent и app: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 кнопки, представляющие ваши карты.
Все они имеют одинаковый размер и будут реагировать на все размеры экрана.

Этот макет будет выглядеть следующим образом (стрелка указывает на руководство, чтобы сделать его более понятным):

введите здесь описание изображения

person Tamir Abutbul    schedule 06.08.2019

arrow_upward
0
arrow_downward

Для будущих посетителей Цепочки — это волшебное слово при попытке смоделировать линейную форму макета. использование горизонтальных цепочек с вертикальными вместе с использованием динамических размеров просмотра, как упомянул Тамир Абутбул, должно быть наилучшей практикой.

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

введите здесь описание изображения

Удачи ;)

person Mohamed G. Yaseen    schedule 24.02.2021