3
votes

Comment faire en sorte que ImageView ne chevauche pas Textview dans ConstraintLayout

J'ai un problème pour que ce widget ne se chevauche pas, ce que j'ai trouvé ci-dessous

(aperçu lorsque l'image est invisible) (aperçu lorsque l'image vue est visible) Voici mon code d'extrait de code xml:

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

y a-t-il une meilleure solution?

android android-constraintlayout android-layout

0 commentaires

4 Réponses :

3
votes

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>

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

2 commentaires

Merci, donc dans la mise en page des contraintes, je dois aussi faire en sorte que tous les enfants à l'intérieur définissent des contraintes, je réalise juste

Oui, l'objectif principal de ConstraintLayout est que vous pouvez gérer toutes vos vues dans une seule mise en page. Pas besoin de prendre plusieurs LinearLayout et RelativeLayout. Vous pouvez voter pour ma réponse afin qu'elle soit utile aux autres développeurs. Bon codage !!

0
votes

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

0 commentaires

0
votes

Mise en œuvre complète 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>

0 commentaires

0
votes

Dans le TextView:

android:layout_width="0dp"

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

Si vous voulez que le texte reste justifié à gauche, définissez le biais sur 0,0.

app:layout_constraintHorizontal_bias="0.0"

0 commentaires