0
votes

Taille de la vue de mise en page responsive

J'essaie de créer une mise en page en utilisant un ConstraintLayout comme parent qui a trois boutons comme dans l'image ci-dessous.

Le fichier de mise en page xml ressemble à ceci:

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

<Button
    android:id="@+id/splash_facebook_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_margin="15dp"/>

<Button
    android:id="@+id/splash_sign_in_btn"
    android:layout_width="180dp"
    android:layout_height="45dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="12dp"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/splash_facebook_btn" />

<Button
    android:id="@+id/splash_sign_up_btn"
    android:layout_width="180dp"
    android:layout_height="45dp"
    android:layout_marginEnd="15dp"
    app:layout_constraintBottom_toBottomOf="@id/splash_sign_in_btn"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.995"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@id/splash_sign_in_btn"
    app:layout_constraintTop_toTopOf="@id/splash_sign_in_btn"
    app:layout_constraintVertical_bias="0.0" />

I voulez faire cela sans définir de valeurs fixes pour les deux boutons en bas.

Je sais que je peux y parvenir en passant à LinearLayout et en utilisant layout_weight mais je veux le faire tout en ayant un code ConstraintLayout > en tant que parent.

Y a-t-il un moyen de faire cela?

android xml android-constraintlayout user-interface layout

0 commentaires

3 Réponses :

1
votes

Pour le bouton gauche, définissez android: layout_marginEnd = "8dp" pour le bouton droit android: layout_marginStart = "8dp" puis définissez par programme leur largeur:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/splash_facebook_btn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_margin="15dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal"
        android:weightSum="2"
        android:layout_marginTop="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintTop_toBottomOf="@+id/splash_facebook_btn"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        >

        <Button
            android:id="@+id/splash_sign_in_btn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginEnd="8dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/splash_sign_up_btn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="8dp"
            android:layout_weight="1" />

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

4 commentaires

Cela peut fonctionner mais je recherche quelque chose de plus simple qui n'implique que du xml. Merci d'avoir répondu.

J'ai fait des modifications avec la version XML uniquement. Il inclut LinearLayout dans votre ConstraintLayout

Je sais que vous pouvez le faire avec LinearLayout et layout_weight , mentionné dans la question

Vérifiez ensuite la réponse de @Frank D. avec guide

1
votes

Utilisez une Guideline comme :

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

<Button
    android:id="@+id/splash_facebook_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_margin="15dp"/>

<Button
    android:id="@+id/splash_sign_in_btn"
    android:layout_width="0dp"
    android:layout_height="45dp"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="15dp"
    android:layout_marginTop="12dp"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/guideline_vertical"
    app:layout_constraintTop_toBottomOf="@id/splash_facebook_btn" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_vertical"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5"/>

<Button
    android:id="@+id/splash_sign_up_btn"
    android:layout_height="0dp"
    android:layout_width="0dp"
    android:layout_marginEnd="15dp"
    android:layout_marginStart="15dp"
    app:layout_constraintBottom_toBottomOf="@id/splash_sign_in_btn"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/guideline_vertical"
    app:layout_constraintTop_toTopOf="@id/splash_sign_in_btn"
    app:layout_constraintVertical_bias="0.0"/>

</androidx.constraintlayout.widget.ConstraintLayout>

0 commentaires

1
votes

Supprimez les valeurs fixes, ajoutez des contraintes à ces boutons: gauche et droite et définissez leur largeur sur 0dp. voici l'image voici le résultat:

<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/splash_facebook_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="continua cu cancer frate" />

<Button
    android:id="@+id/splash_sign_in_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintEnd_toStartOf="@id/splash_sign_up_btn"
    app:layout_constraintStart_toStartOf="@id/splash_facebook_btn"
    app:layout_constraintTop_toBottomOf="@id/splash_facebook_btn"
    tools:text="intra aici frate" />

<Button
    android:id="@+id/splash_sign_up_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="12dp"
    app:layout_constraintEnd_toEndOf="@id/splash_facebook_btn"
    app:layout_constraintStart_toEndOf="@id/splash_sign_in_btn"
    app:layout_constraintTop_toBottomOf="@id/splash_facebook_btn"
    tools:text="Creeaza cont frate" />

PS: J'ai ajouté tools: text pour qu'il y ait du texte dans l'aperçu d'Android Studio. PSS: Bonne chance frate

1 commentaires

Mersi omule :))