1

Ситуация следующая. Делаю шаблон для текстового сообщения на экране сообщений мессенджера.

Для вёрстки использую RelativeLayout, внутри которого находится TextView с текстом сообщения и ещё 1 RelativeLayout с изображением прочитанного сообщения и TextView со временем.

Такое сообщение должно располагаться с правой стороны экрана. Для небольших сообщений всё хорошо:

введите сюда описание изображения

А вот для длинных сообщений, которые в 1 строку уже не помещаются, начинаются проблемы:

введите сюда описание изображения

Я не могу понять, почему текст выезжает за край родительского RelativeLayout? При этом свойства android:layout_alignParentLeft и android:layout_alignParentStart не оказывают вообще никакого влияния. Сдвиг убирается, если убрать привязку элемента с текстом к RelativeLayout с временем и статусом, однако они начинают наслаиваться друг на друга.

Полный код вёрстки привожу ниже:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="62dp">

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/talk_message_my"
    android:paddingTop="9dp"
    android:paddingLeft="11dp"
    android:paddingBottom="7dp"
    android:paddingRight="18dp"
    android:layout_alignParentEnd="true"
    android:gravity="right">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Денег нет, но вы держитесь. Всего вам хорошего, счастья, здоровья"
        android:id="@+id/message"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <RelativeLayout
        android:layout_width="48dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:id="@+id/relativeLayout4"
        android:layout_alignBottom="@+id/message"
        android:layout_toEndOf="@+id/message">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/status"
            android:src="@drawable/icon_message_read" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="15:21"
            android:id="@+id/time"
            android:textSize="@dimen/label_font_size"
            android:layout_toRightOf="@+id/status" />
    </RelativeLayout>

</RelativeLayout>
</RelativeLayout>
2
  • Сначала попробуйте запустить на девайсе/эмуляторе. Потом забудьте о preview - он плохой, не пользуйтесь им никогда. Потом объясните выбор RelativeLayout для составления вёрстки - почему не выбрали LinearLayout?
    – ЮрийСПб
    11 июл 2016 в 17:38
  • @ЮрийСПб LinearLayout пробовал тоже, однако эффект тот же, правда за границу родительского Layout'а улетает уже не сообщение, а время 11 июл 2016 в 17:43

1 ответ 1

1

Вам надо установить конкретную ширину для картинки и времени, а само сообщение должно занять всю оставшуюся ширину и сместить свой текст вправо.

Ваша разметка должна выглядеть как-то так:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="62dp">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/talk_message_my"
    android:paddingTop="9dp"
    android:paddingLeft="11dp"
    android:paddingBottom="7dp"
    android:paddingRight="18dp"
    android:orientation="horizontal"
    android:layout_gravity="right">
    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="Денег нет, но вы держитесь. Всего вам хорошего, счастья, здоровья"
        android:id="@+id/message" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/status"
        android:src="@drawable/icon_message_read"
        android:layout_gravity="bottom"
        android:layout_marginLeft="16dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="15:21"
        android:id="@+id/time"
        android:textSize="@dimen/label_font_size"
        android:layout_gravity="bottom" />
</LinearLayout>

Использование RelativeLayout в вашем случае ничем не оправдано. Тем более, что сообщения надо отображать через RecyclerView, а не добавляя их в один общий контейнер

Длиный текст

Короткий текст

9
  • К сожалению, такая вёрстка не подходит, т.к. в этом случае облачко сообщения растягивается на всю ширину родителя, даже в том случае, когда само сообщение может вообще состоять из 1 символа. Однако я изменил Ваш код под свои нужды и теперь шаблон выглядит так, как нужно, обновлю в вопросе и добавлю итоговый код. 12 июл 2016 в 10:29
  • @НикитаЛещёв, я свой код не проверял и он может содержать неточности/ошибки. Если у вас получилось его модифицировать так как нужно, то вы можете сами через правку изменить мой ответ. Лучше, если вы сделаете так, дабы не смущать будущий посетителей вопроса, кои будут видеть в ответе не правильный код)
    – ЮрийСПб
    12 июл 2016 в 10:31
  • Да, что-то сразу не подумал об этом, так и сделаю. 12 июл 2016 в 10:35
  • Касательно вывода сообщений, выводить я их собираюсь через ListView, а внешний RelativeLayout используется для того, чтобы сообщение отображалось всегда с правого края экрана + этот элемент всегда должен занимать максимум 100% - 62dp от ширины экрана. 12 июл 2016 в 10:41
  • 1
    @НикитаЛещёв, студия, бывает, ошибается и автодополнение не всегда стабильно работает, особенно в части xml. Превью вообще очень багованное - лучше им вообще не пользоваться. Совсем. И проверять только на девайсе/эмуляторе. Всегда пожалуйста)
    – ЮрийСПб
    12 июл 2016 в 11:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.