Mises en page Android : Collez une disposition en haut de l'écran et placez une autre disposition centrée en dessous.

Question

Je travaille sur mon premier projet Android, un jeu de mémoire dans Android Studio. Le cadre de l'activité du jeu doit contenir des vues de texte, affichées sur une ligne (pour les statistiques) en haut de l'écran et les cartes mémoire en dessous. Il y a plusieurs versions du jeu de mémoire, donc le nombre de cartes de mémoire varie - et par conséquent la dimension de leur GridLayout.

Ma mise en page principale est une LinearLayout (verticale). J'y ai placé un autre LinearLayout (horizontal), où se trouvent les Textviews. Pour afficher les cartes, j'ai utilisé un GridLayout qui sera rempli de cartes une fois le jeu lancé. Le LinearLayout (avec les TextViews) doit toujours rester en haut de l'écran. Le GridLayout devrait être centré dans l'espace restant en dessous.

Ce que j'obtiens, c'est que les deux mises en page restent au milieu, ou que la LinearLayout est correcte, mais que la GridLayout se trouve soit en bas, soit en haut de l'espace restant.

J'ai essayé de trouver une solution ici sur SO, et je pense que j'ai essayé toutes les combinaisons possibles de la gravity - et layout_gravity - les paramètres des composants. Je peux imaginer que le problème est que je peux utiliser soit wrap_content ou match_parent dans la mise en page principale, mais pas les deux. Je suppose que j'aurais besoin de wrap_content pour coller le premier Layout au sommet et match_parent pour utiliser tout l'espace en dessous de cette mise en page.

Comment puis-je coller le premier Layout en haut et centrer le GridLayout dans l'espace restant ?

L'image montre ma mise en page actuelle (voir le code ci-dessous) et l'aspect que je veux lui donner. grille centrale

Modifier pour clarifier : Le LinearLayout doit coller au haut de l'écran, le GridLayout doit être centré sur l'écran. centré dans le restant espace sous le LinearLayout. RelativeLayout ne fera pas l'affaire correctement, car les mises en page pourraient se chevaucher, en fonction de la quantité de cartes mémoire et des dimensions de l'appareil de l'utilisateur. J'ai téléchargé une autre capture d'écran où l'on voit mieux ce que je veux réaliser :

Voici mon fichier .xml (j'ai supprimé quelques textViews sans importance) :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/MemoryLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="10dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textStatsPairs"
            android:layout_width="65dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/textStatsPairs" />

    </LinearLayout>

    <GridLayout
        android:id="@+id/gridLayoutMainActivityTEST"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:columnCount="4"
        android:foregroundGravity="center"
        android:orientation="horizontal"
        android:rowCount="4"
        android:textAlignment="center"
        android:useDefaultMargins="true"
        tools:context=".GameActivity" />
</LinearLayout>

Answer 1

Utiliser disposition relative ou disposition des contraintes .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/MemoryLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <LinearLayout
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="10dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textStatsPairs"
            android:layout_width="65dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/textStatsPairs" />

    </LinearLayout>

    <GridLayout
        android:layout_centerInParent="true"
        android:id="@+id/gridLayoutMainActivityTEST"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:columnCount="4"
        android:foregroundGravity="center"
        android:orientation="horizontal"
        android:rowCount="4"
        android:textAlignment="center"
        android:useDefaultMargins="true"
        tools:context=".GameActivity" />
</RelativeLayout >

Answer 2

Vous pouvez utiliser D'après votre question, j'ai compris que vous vouliez que la mise en page linéaire reste toujours en haut et que la mise en page de la grille reste toujours au centre. Si c'est le cas, je pense que l'extrait de code suivant vous aidera.

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

   </GridLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentTop="true">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Texts Here"
            android:layout_gravity="center"
            android:gravity="center"/>

    </LinearLayout>

</RelativeLayout>

Answer 3

C'est le ConstraintLayout qui a réglé mon problème... Voici la solution qui fonctionne enfin parfaitement :

<?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:id="@+id/memory_activity_4x4"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linearLayout_4x4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="10dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textStatsPairs"
            android:layout_width="65dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/textStatsPairs" />

    </LinearLayout>

    <GridLayout
        android:id="@+id/gridLayout4x4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:columnCount="4"
        android:foregroundGravity="center"
        android:orientation="horizontal"
        android:rowCount="4"
        android:textAlignment="center"
        android:useDefaultMargins="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout_4x4"
        tools:context=".GameActivity" />
</androidx.constraintlayout.widget.ConstraintLayout>