Чат в поле сообщения как текстовое содержимое

Так что я хочу, чтобы контейнер сообщений чата был таким же широким, как и сообщение. Я хочу, чтобы достичь чего-то действительно похоже на таком роде чат сообщения: http://img.creativemark.co.uk/uploads/images/805/15805/img3File.png Чат в поле сообщения как текстовое содержимое

Вот мой макет, с которым я борюсь:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:orientation="horizontal" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:id="@+id/single_message_view" 
android:layout_margin="5dp"> 

<LinearLayout 
    android:layout_marginEnd="15dp" 
    android:layout_marginStart="15dp" 
    android:layout_alignParentEnd="true" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:minWidth="100dp" 
    android:orientation="vertical"> 

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

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_weight="1" 
      android:layout_height="wrap_content" 
      android:text="author" 
      android:id="@+id/sender_data" 
      android:layout_marginEnd="5dp" 
      android:textColor="@color/colorWhite" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_weight="1" 
      android:textAlignment="textEnd" 
      android:layout_height="wrap_content" 
      android:text="date" 
      android:textColor="@color/colorWhite" 
      android:id="@+id/send_date" /> 

    </LinearLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:id="@+id/message_content" 
     android:background="@drawable/msg_haze" 
     > 

     <TextView 
      android:layout_margin="10dp" 
      android:layout_alignParentTop="true" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:textColor="@color/colorWhite" 
      android:id="@+id/message_text" 
      android:text="content" /> 

     <LinearLayout 
      android:layout_margin="10dp" 
      android:minWidth="100dp" 
      android:layout_below="@id/message_text" 
      android:id="@+id/tags_container" 
      android:orientation="horizontal" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"> 

      <android.support.v7.widget.RecyclerView 
       android:layout_marginTop="5dp" 
       android:layout_marginBottom="5dp" 
       android:id="@+id/message_tags" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layoutManager="LinearLayoutManager" 
       tools:listitem="@layout/item_tag" /> 
     </LinearLayout> 

     <ImageView 
      android:layout_marginBottom="10dp" 
      android:layout_marginEnd="10dp" 
      android:paddingBottom="10dp" 
      android:layout_alignParentEnd="true" 
      android:layout_alignParentBottom="true" 
      android:layout_width="15dp" 
      android:layout_height="15dp" 
      android:id="@+id/message_state" /> 

     <LinearLayout 
      android:id="@+id/attachment_holder" 
      android:layout_marginTop="10dp" 
      android:padding="5dp" 
      android:visibility="gone" 
      android:orientation="vertical" 
      android:layout_alignParentBottom="true" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@drawable/attachments_haze"> 

      <android.support.v7.widget.RecyclerView 
       android:id="@+id/attachments" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layoutManager="GridLayoutManager"/> 

      <ImageView 
       android:id="@+id/attachment" 
       android:visibility="gone" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 
     </LinearLayout> 

    </RelativeLayout> 
</LinearLayout>

источник

2017-02-02 wegtis

Для отображения чата сообщения, Вам необходимо для использования 9 патч-изображений, которые позволяют создавать растровые изображения, которые автоматически изменяются в размерах, чтобы соответствовать содержимому вида.

источник

2017-02-02 13:51:39 Basavannevva

Обычно для этого типа чата мы должны использование the nine patch image. Это девять изображений патча могут изменяться по содержимому внутри.

Ниже приведены девять изображений патча для отправки и получения сообщения.

Сохранить изображение .9.png расширения. Используйте это изображение, чтобы выделить фон.

источник

2017-02-02 14:00:30

я думаю, это обыкновение быть необходимо для этого конкретного вопроса, как если бы вы можете открыть ссылку изображения в этом вопросе, есть простой квадрат корпус с плоским цветом, который может быть получена с использованием самозагружаемого. Нет необходимости в 9 патч-изображениях. Просто установите макет логически, используя цвет, предназначенный для фоновой цели. Проводка всего макета через некоторое время. – Mit

Да, это также возможно. но это только ссылка. Большинство (не всех) чат-писем состоят из девяти патч-изображений. –

Да, вы абсолютно правы, то есть я упомянул «это не обязательно для этой конкретной проблемы» – Mit

согласен с @basavannevva .. 9 патч-изображения автоматически растягиваются .. вы должны предоставить свою область содержимого и область растяжения. существует множество онлайн-инструментов, которые могут создать 9 патч-изображений. и я думаю, что даже студия Android может редактировать 9 файлов исправлений.

источник

2017-02-02 14:02:03

temp_black.xml (Это будет использоваться в качестве фона в окне чата, вы можете изменить цвет в приведенном ниже файле для #FFFFFF, чтобы получить желаемый результат)

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" > 

    <solid android:color="#000000"/> 

    <padding 
     android:bottom="0dip" 
     android:left="0dip" 
     android:right="0dip" 
     android:top="0dip" /> 

</shape>

temp_white.xml (Это это черная точка между именем отправителя и временем, я знаю, что на изображении цвет черный, но для справки я сделал это, вы не можете просто изменить цвет ниже xml, чтобы получить результат по вашему выбору)

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" > 

    <solid android:color="#FFFFFF"/> 

    <corners android:radius="100dip" /> 

    <padding 
     android:bottom="0dip" 
     android:left="0dip" 
     android:right="0dip" 
     android:top="0dip" /> 

</shape>

temp.xml (файл макета)

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

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="left|center_vertical" 
     android:layout_margin="10dp" 
     android:background="@drawable/temp_black" 
     android:paddingRight="10dp" 
     android:orientation="horizontal"> 

     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:adjustViewBounds="true" 
      android:src="@mipmap/ic_launcher"/> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:layout_marginLeft="10dp" 
      android:orientation="vertical"> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="left|center_vertical" 
       android:text="Sample Text Sample Text" 
       android:textSize="16sp" 
       android:textColor="#FFFFFF"/> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="left|center_vertical" 
       android:layout_marginTop="5dp" 
       android:orientation="horizontal"> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="left|center_vertical" 
        android:text="Name" 
        android:textSize="11sp" 
        android:textColor="#FFFFFF"/> 

       <ImageView 
        android:layout_width="5dp" 
        android:layout_height="5dp" 
        android:layout_gravity="center" 
        android:layout_marginLeft="10dp" 
        android:layout_marginRight="10dp" 
        android:adjustViewBounds="true" 
        android:src="@drawable/temp_white"/> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="left|center_vertical" 
        android:text="Time" 
        android:textSize="11sp" 
        android:textColor="#FFFFFF"/> 

      </LinearLayout> 

     </LinearLayout> 

    </LinearLayout> 

</LinearLayout>

Наконец вывод изображения

источник

2017-02-02 14:42:47 Mit

просто измените масштаб гравитации вправо | center_vertical для отображения окна чата на другой стороне, если необходимо, дайте мне знать, я могу предоставить вам обе стороны – Mit

Чат в поле сообщения как текстовое содержимое

ответ

Смежные вопросы