Comment faire en sorte qu'un aperçu d'image ne chevauche pas un aperçu de texte dans un ConstraintLayout ?

Question

J'ai un problème pour faire en sorte que ces widgets ne se chevauchent pas les uns les autres, ce que j'ai trouvé comme ci-dessous

(aperçu lorsque l'imageview est invisible) (aperçu lorsque l'image est visible) Voici mon code xml snippet :

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraits"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="5dp">
        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/title_news"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/date_published"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4 Menit lalu"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textStyle="italic" />

        </LinearLayout>

        <ImageView
            android:id="@+id/image_news"
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:src="@drawable/sample_headline_img2"
            android:adjustViewBounds="true"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toEndOf="@+id/linearLayout"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

existe-t-il une meilleure solution ?

Answer 1

Essayez le code ci-dessous :

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraits"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="5dp">

            <TextView
                android:id="@+id/title_news"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/image_news"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/date_published"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4 Menit lalu"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textStyle="italic"
                app:layout_constraintStart_toStartOf="@+id/title_news"
                app:layout_constraintTop_toBottomOf="@+id/title_news"
                app:layout_constraintEnd_toStartOf="@+id/image_news" />

        <ImageView
            android:id="@+id/image_news"
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:src="@drawable/sample_headline_img2"
            android:adjustViewBounds="true"
            android:visibility="visible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

Note : Si vous utilisez ConstraintLayout puis essayez de gérer chaque vue en fixant des contraintes de vue. Ici, vous avez utilisé LinereLayout pour afficher deux TextView verticalement, ce qui peut être fait en fixant des contraintes comme je l'ai fait.

Answer 2

Dans le TextView :

<TextView
    android:id="@+id/textView_01"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="The text"
    app:layout_constraintEnd_toStartOf="@+id/imageView_01"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

Créez une contrainte de la fin de la TextView au début de l'ImageView. app:layout_constraintEnd_toStartOf="@+id/imageView_01"

Si vous souhaitez que le texte reste justifié à gauche, réglez le biais sur 0,0.

app:layout_constraintHorizontal_bias="0.0"

Et la clé est de s'assurer de mettre la largeur à 0dp :

android:layout_width="0dp"

Answer 3

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="5dp">

    <ImageView
        android:id="@+id/image_news"
        android:layout_width="45dp"
        android:layout_height="70dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:src="@drawable/sample_headline_img2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/title_news"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
        app:layout_constraintEnd_toStartOf="@+id/image_news"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/date_published"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:text="4 Menit lalu"
        app:layout_constraintEnd_toStartOf="@+id/image_news"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title_news" />

</android.support.constraint.ConstraintLayout>

Answer 4

La mise en œuvre complète est donnée comme suit, vous pouvez essayer

<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:context=".MainActivity">

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="150dp"
    android:layout_margin="10dp"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:textStyle="bold"
            android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4 Menit lalu"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" />
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:layout_weight="3"
        android:scaleType="center"
        app:srcCompat="@drawable/sample_headline_img2" />
</LinearLayout>