web-dev-qa-db-fra.com

ConstraintLayout - évite les chevauchements

Il y a une disposition ConstraintLayout:

<Android.support.constraint.ConstraintLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Button
        Android:id="@+id/button10"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:ellipsize="end"
        Android:singleLine="true"
        Android:text="small text"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        Android:ellipsize="end"
        Android:singleLine="true"
        Android:id="@+id/button11"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="small text"
        app:layout_constraintRight_toRightOf="parent"/>

</Android.support.constraint.ConstraintLayout>

Il s’affiche comme ceci:  введите сюда описание изображения Maintenant, ça va, mais si je change Android:text="small text" en Android:text="big teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext", les vues se chevaucheront ..

Je dois m'assurer qu'un petit texte contient un "contenu wrap", comme je l'ai fait pour la capture d'écran ci-dessus, mais avec un texte plus grand, les vues de texte doivent occuper un maximum d'environ 40% horizontalement par rapport au parent. . Eh bien aussi, le texte n'a pas été transféré - je fais Android: ellipsize =" end " et Android: singleLine =" true.

Voici comment cela devrait être (édité dans Photoshop pour démonstration):  введите сюда описание изображения Comment cela se passe-t-il avec ConstraintLayout ou s’il ne le peut pas - avec d’autres présentations?

7
ilw

vous pouvez également le faire en utilisant Guideline et layout_constraintWidth_default property comme dans l'exemple ci-dessous

<?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"
    tools:showIn="@layout/activity_home">


    <Button
        Android:id="@+id/button10"
        Android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        Android:layout_height="wrap_content"
        Android:ellipsize="end"
        Android:singleLine="true"
        Android:text="sdtessdsdsdsdsdsdsdsddsdsdxt"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        Android:layout_marginLeft="0dp"
        app:layout_constraintHorizontal_bias="0"
        Android:layout_marginTop="8dp"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        Android:layout_marginRight="8dp" />

    <Button
        Android:ellipsize="end"
        Android:singleLine="true"
        Android:id="@+id/button11"
        Android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        Android:layout_height="wrap_content"
        Android:text="ddddddsdssdsdsdsdsdsdddt"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        Android:layout_marginTop="8dp"
        Android:layout_marginRight="-1dp"
        Android:layout_marginLeft="8dp"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintLeft_toLeftOf="@+id/guideline" />

    <Android.support.constraint.Guideline
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:id="@+id/guideline"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

</Android.support.constraint.ConstraintLayout>
16
Pavan

Vous pouvez faire comme ça:

<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/button10"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="30dp"
    Android:ellipsize="end"
    Android:maxLines="1"
    Android:gravity="center_vertical"
    Android:text="small text"
    Android:layout_marginRight="20dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button11"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    Android:id="@+id/button11"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:ellipsize="end"
    Android:maxLines="1"
    Android:layout_marginLeft="20dp"
    Android:gravity="center_vertical"
    Android:text="small textsfdgdfjkghkdfhgjkdfhgkhgkhkjjkgfkgjkfgjkgjkjgfdkj"
    app:layout_constraintLeft_toRightOf="@+id/button10"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button10" />

3
Shweta Chauhan

L'attribut suivant fonctionne:

app:layout_constrainedWidth="true"

https://developer.Android.com/reference/Android/support/constraint/ConstraintLayout

WRAP_CONTENT: mise en application des contraintes (ajouté en 1.1) Si une dimension est définie sur WRAP_CONTENT, dans les versions antérieures à 1.1, elles seront traitées comme une dimension littérale. Autrement dit, les contraintes ne limiteront pas la dimension résultante. Bien qu'en général cela soit suffisant (et plus rapide), dans certaines situations, vous souhaiterez peut-être utiliser WRAP_CONTENT tout en continuant à appliquer des contraintes pour limiter la dimension résultante. Dans ce cas, vous pouvez ajouter l'un des attributs correspondants:

app: layout_constrainedWidth = ”true | false” app: layout_constrainedHeight = "true | false"

0
Tamal Kanti Nath