8
votes

Placez deux TextViews multilignes avec une largeur wrap_content des deux côtés de la vue parent

Aidez-moi s'il vous plaît à réaliser la disposition suivante de deux TextViews:

Sur la gauche se trouve un simple TextView avec titre, et à droite un autre TextView avec un Drawable sur le côté gauche (c'est important à cause de cela que je ne peux pas utiliser match_parent ). Les deux TextViews doivent être wrap_content et pressés de leur côté.
Si l'un des TextViews est trop long, il doit reposer sur un autre TextView et envelopper son propre texte.
Si les deux TextViews sont longs, ils doivent occuper le même espace. Aucun d'entre eux ne doit être poussé en dehors de la vue parent.

android android-constraintlayout layout textview

2 commentaires

Utilisez une disposition linéaire avec un poids pour y parvenir.

@ShailendraMadda Malheureusement, je ne peux pas utiliser de poids car alors le bon TextView occupera toujours 50% de l'espace, malgré la longueur de son texte

5 Réponses :

4
votes

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

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:gravity="left" />

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/left"
        android:gravity="right" />

</RelativeLayout>
note that left TextView may occupy whole available space if got very long text, so you may add some maxWidth param - if its not supported by TextView itself then you may wrap first one into LinearLayout (which supports maxWidth for shure). another way may be to use TableLayout and TableRow views or ConstraintLayout

2 commentaires

Merci d'avoir répondu. J'apprécie ton effort.

envisagez de voter / accepter la réponse si cela est utile :) bonne chance!

1
votes

Essayez ceci -

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/text2"
    android:text="TextView1" />

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:layout_alignParentRight="true"
    android:drawableLeft="@drawable/basket"
    android:text="TextView2" />
</RelativeLayout>

0 commentaires

6
votes

Vous pouvez utiliser à la fois LinearLayout ou ConstraintLayout , et le principal ici est android:maxWidth nous devons donner une vue et l'autre vue sera ajustée en fonction de cela.

Exemple de ConstraintLayout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Loooooooooong Texxxxxxxt!!!!!!!!!!!!!!!!!!!!!!" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="250dp"
        android:text="May be this is short with maxwidth"/>

</LinearLayout>

Exemple de LinearLayout :

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/start"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/end"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Loooooooooong Texxxxxxxt!!!!!!!!!!!!" />

    <TextView
        android:id="@+id/end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="250dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="May be this is short"/>

</androidx.constraintlayout.widget.ConstraintLayout>

1 commentaires

C'est une solution solide et j'aime ça. S'il n'y a pas d'option plus flexible, je la vérifierai comme bonne réponse.

2
votes

Regarde ça

activity_main.xml

 private TextView startTV, endTV;
    private ConstraintLayout constraintLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        constraintLayout = findViewById(R.id.constraintLayout);
        startTV = findViewById(R.id.startTextView);
        endTV = findViewById(R.id.endTextView);


        constraintLayout.postDelayed(new Runnable() {
            @Override
            public void run() {
                int systemWidth = Resources.getSystem().getDisplayMetrics().widthPixels;

                int startTVWidth = startTV.getMeasuredWidth();
                int endTVWidth = endTV.getMeasuredWidth();

                if ((startTVWidth + endTVWidth) >= systemWidth) {

                    if (startTVWidth > endTVWidth) {

                        startTV.setMaxWidth(systemWidth - endTVWidth - 24);

                        startTV.setPadding(12, 12, 12, 12);
                        endTV.setPadding(12, 12, 12, 12);

                    } else if (endTVWidth > startTVWidth) {

                        endTV.setMaxWidth(systemWidth - startTVWidth - 24);

                        startTV.setPadding(12, 12, 12, 12);
                        endTV.setPadding(12, 12, 12, 12);
                    }
                }
            }
        }, 1);
    }

MainActivity.java

<?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:id="@+id/constraintLayout"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/startTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="On"
        android:gravity="center"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/endTextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/endTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_margin="8dp"
        android:text="If one of the TextViews is too long"
        android:textSize="20sp"
        app:drawableStartCompat="@android:drawable/ic_btn_speak_now"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/startTextView"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Un peu long. Mais ça marche.

2 commentaires

Merci d'avoir répondu! J'apprécie vraiment vos efforts. Mais je pense que cette solution est trop compliquée pour une telle tâche.

@Nikolay C'est la seule solution que je puisse trouver pour utiliser wrap_content sur les deux TextView sans découpage et aussi pour que le gros TextView repose sur un autre TextView . Je n'ai pas trouvé de solutions moins compliquées ... Merci. Bon codage :)

5
votes

Avez-vous essayé la mise en page Flexbox ? On dirait qu'il couvre votre cas.

1 commentaires

Merci! Cela semble être la manière la plus correcte de procéder. Je n'ai jamais essayé d'utiliser FlexLayout auparavant.