RelativeLayout соответствует родителю, хотя это не должно - PullRequest
Новая
       46

RelativeLayout соответствует родителю, хотя это не должно

0 голосов
/ 07 октября 2018

Я пытаюсь создать макет сообщения в приложении чата.

Этот макет сообщения должен содержать:

  • Текстовое представление сообщения в скругленном прямоугольнике
  • Значок проверки состояния сообщения ImageView в этом же прямоугольнике
  • Время отправки сообщения TextView за пределами прямоугольника с закругленными углами и справа от него.

Когда текст короткий, весь макет долженвыровнять себя вправо.Когда текст длинный, сообщение TextView будет расширяться влево, а при касании левой стороны экрана оно расширяется до новой строки.

Проблема в : Прямоугольник со скругленными углами простирается на весь экран независимо от того, является ли сообщение коротким или длинным, хотя для базовой ширины FrameLayout установлено значение wrap_content.

Вот изображение проблемы:

enter image description here

Используемая мной схема: 

<RelativeLayout
    android:id="@+id/outer_rl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="8dp"
    android:paddingTop="8dp">

    <TextView
        android:id="@+id/text_message_time"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:textSize="10sp"
        app:showDate="@{message.postedAt}" />

    <RelativeLayout
        android:id="@+id/bubble_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/text_message_time"
        android:background="@drawable/rounded_rectangle_bubble_sent"
        android:padding="8dp">

        <ImageView
            android:id="@+id/iv_check"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_alignParentRight="true"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            app:setStatusPng="@{message.status}" />

        <TextView
            android:id="@+id/messagetext_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="6dp"
            android:layout_marginTop="2dp"
            android:layout_toLeftOf="@id/iv_check"
            android:singleLine="false"
            android:text="@{message.messageText}"
            android:textColor="#ffffff" />

    </RelativeLayout>
</RelativeLayout>

Внутренняя RelativeLayout с именем bubble_ll имеет ширину, равную wrap_content.

Я ожидаю, что:

  • text_message_time TextView должен быть присоединен к правой части экрана из-за его layout_alignParentEnd свойства, установленного в true.
  • bubble_ll стоит слева от представления text_message_time , из-за его набора свойств layout_toLeftOf.И его содержимое должно иметь ширину.

Я пробовал другие макеты, такие как Linear, ConstraintLayout и т. Д.

Подход LinearLayout не работал, так как шириназначение wrap_content для TextView всегда перекрывает проверки информации о состоянии, и время сообщения заставляет их исчезать, когда сообщение в TextView длинное.

При ConstraintLayout я не мог выровнять пузырь, чтобы оставаться на местеправо.Он остается в центре экрана по горизонтали, поскольку он ограничен обеими горизонтальными сторонами экрана.

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 07 октября 2018

Я придумал следующую раскладку, которая представляет собой комбинацию RelativeLayout и LinearLayout.Я надеюсь, что это служит вашей цели.Пожалуйста, измените Drawables и ID, если это необходимо.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/outer_rl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:padding="8dp">

    <TextView
        android:id="@+id/text_message_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/message_container"
        android:layout_alignParentRight="true"
        android:layout_margin="4dp"
        android:text="10:30 am"
        android:textSize="10sp" />

    <LinearLayout
        android:id="@+id/message_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"

        android:layout_toLeftOf="@+id/text_message_time"
        android:background="@android:color/holo_blue_dark"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/messagetext_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:padding="4dp"
            android:singleLine="false"
            android:text="You have a long message here. This is so long that it takes two lines inside the TextView. No wonder, now its taking three lines and now its four. How long this message can go? I now have that question!!!"
            android:textColor="@android:color/white" />

        <ImageView
            android:id="@+id/iv_check"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_centerVertical="true"
            android:layout_margin="8dp"
            android:src="@android:drawable/presence_online" />
    </LinearLayout>
</RelativeLayout>
...