0
votes

ContrainteLayout: Pourquoi la hauteur d'une vue affecte-t-elle ses enfants?

Je construis une application dans Android Studio et j'ai un problème et je ne sais pas pourquoi cela se produit et comment le résoudre. Ceci est mon code: xxx

Cependant, si vous exécutez le code comme celui-ci, le titre sera coupé en deux. Mais les 2 boutons auront une taille normale. Si j'utilise Wrap_Content sur le TextView, le TextView sera affiché normalement, mais la hauteur des boutons ne sera également aussi grande que le texte à l'intérieur (comme hériter de la teneur en papier), même si je n'écris pas wrap_content dans le champ Boutons. La mise en forme me dit que tout va bien, mais quand je gère l'application, ces "erreurs" design se produisent.


0 commentaires

3 Réponses :


-1
votes

Essayez ce code dans votre XML. De cette façon, les boutons et le texte seront normaux.

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

    android:background="#f4f4f4"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:shadowColor="#000000"
        android:text="@string/title"
        android:textColor="#eadca6"
        android:textSize="60sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/button"
        android:layout_width="342dp"
        android:layout_height="120dp"
        android:background="#eadca6"
        android:text="@string/all_quotes"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/group" />

    <Button
        android:id="@+id/button2"
        android:layout_width="342dp"
        android:layout_height="120dp"
        android:layout_marginTop="20dp"
        android:background="#eadca6"
        android:text="@string/favorite_quotes"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="button,button2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />
</androidx.constraintlayout.widget.ConstraintLayout>


3 commentaires

Bonjour, merci pour votre réponse. Mais j'ai besoin de pourquoi mon code ne fonctionne pas et pourquoi votre solution fonctionne.


Votre code ne fonctionne pas car layout_margintop et layout_marginbottom de TextView et des boutons sont trop grands. Par conséquent, le contenu ne correspond pas à l'écran et le contenu de TextView et des boutons est recadré. Par exemple, si vous utilisez Android: Layout_margintop = "120DP" pour le contenu TextView - Le contenu ne sera pas recadré.


Habituellement, lorsque vous créez une mise en page, vous définissez la taille des éléments que vous connaissez (pour la largeur et la hauteur de TextView et de la hauteur de TextView, pour le bouton - Hauteur et largeur statiques), toutes les autres choses doivent être aussi flexibles que possible (régler autant de marges statiques est une mauvaise pratique).



1
votes

J'ai ajouté une modification de votre code et j'ai ajouté une capture d'écran pour ce code xxx

 Entrez la description de l'image ici

Comme vous pouvez le voir, je change ce qui suit:

  1. Android: Layout_height Change Valeur dans Wrap_Content ;
  2. Android: Layout_width Changement Valeur dans Match_Parent ;
  3. ajouté android: paddingtop = "10dp" et android: paddingbottom = "10DP" dans les boutons;
  4. Modifier Layout_marginleft et Layout_marginRight ;

    Supprimez certains codes redondants et évitez également d'ajouter un nombre statique que possible. J'espère que je vous aide de manière petite ^^


1 commentaires

+1 pour moi, mais Votre réponse ne fait pas la mise en page réactive. Vous pouvez vérifier ma réponse pour savoir comment.



0
votes

Vous voulez savoir ce qui ne va pas avec votre code, je vais donc commencer par une explication avant d'écrire un code:

TL; DR: P>

N'utilisez pas Taille sur vos vues, vous pouvez utiliser app: layout_constraintaintheight_percent = "0.xx" code> avec App: Layout_constraintAINTWIDTH_PERCENT = "0.YY" code> et Lignes directrices .


réponse complète h2>

différents téléphones ont une taille d'écran différente forte>, dans votre présentation, vous utilisez une taille fixe sur vos vues (taille fixe est android: layout_margintop = "144dp" code> par exemple) Et le résultat est que ce qui peut être bon sur un écran (votre écran de prévisualisation de studio Android) ne sera pas beau sur un autre écran (votre téléphone actuel), et c'est pourquoi vous obtenez des "erreurs" de conception. P> blockQuote>

Vous ne pouvez pas garantir la responsabilité complète de la mise en page lors de l'utilisation de Wrap_Content CODE>, par exemple, si vous allez prendre une très grande image et la mettre sur vos points de vue, il n'y aura pas la même chose sur différents Dispositifs. P>


Si vous utilisez déjà contraintlayout code> Voici quelques outils pouvant vous aider à obtenir une disposition réactive qui s'adapte à toutes les tailles d'écran. P>

Par exemple, Regardez cette mise en page: strong> p> xxx pré>

Cette mise en page ressemblera à ceci: strong> p >

 Entrez la description de l'image ici p>


ce que j'ai fait dans cette mise en page: H2>

Je me suis débarrassé de chaque taille fixe sur mon Vues et leur a donné une taille fixe comme, quelque chose comme celui-ci à la vue: p> xxx pré>

Cette vue sera égale à 15% de la hauteur de l'écran et de 90% de sa largeur de taille. , il sera réactif pour différentes mises en page. P>

i géré la position des vues en utilisant Lignes directrices , par exemple: P>

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.2" />


2 commentaires

Merci beaucoup! Puis-je demander comment apprendre cela comme un débutant? Comme, des conseils que vous avez pour moi?


Commencez par créer une mise en page, suivez PAGE CONTRAINTLAYOUT , et demandez plus de questions sur le débordement de la pile