Intereting Posts
Не удалось запустить android adv в терминале в Mac Отключение сна при определенной активности Gradle build не ищет Google Play Services в Android Studio – мой SDK правильный? ActionBarSherlock: открыть подменю с помощью кнопки меню Android GCM SENDER_ID, как его получить? Как предотвратить включение кнопки внутри объекта ListItem Android Реализация чата Bubble в ListView Использование языковых настроек для определения того, как использовать имперские единицы Как объявить фрагмент как скрытый в XML-макете Синхронизация базы данных SQL Lite на устройстве Android и базе данных SQL Server Проект Android Studio Gradle «Невозможно запустить процесс / инициализацию виртуальной машины» Не удается найти android sdk 2.3.4 в менеджере SDK Изменение дизайна материала AppCompat ActionBar Color Поиск местоположения пикселов элемента Listview, кажется, возвращает неправильное значение Не удается разрешить символ. KITKAT не может решить метод getAllocationByteCount ()

Создать макет chatView в android

Я создаю приложение чата, и я думаю о способах создания фактического просмотра чата.

У меня уже есть макет для самого окна чата, но я думал о том, как реализовать сообщения чата.

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

Кто-нибудь есть идея о том, как создавать и создавать эти строки?

Это то, что я сделал до сих пор:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/background_light" android:orientation="vertical" android:weightSum="10" > <ScrollView android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" > <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:stretchColumns="1" > <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <!-- insert chat message here !--> </TableRow> <View android:layout_height="2dip" android:background="#000" /> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" > <!-- next chat message --!> </TableRow> </TableLayout> </ScrollView> <LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_weight="9" android:orientation="horizontal" > <EditText android:id="@+id/chatLine" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="Say:" android:imeOptions="actionSend" android:singleLine="true" /> </LinearLayout> </LinearLayout> 


И я пытаюсь добиться этого взгляда Желаемый просмотр чата

Solutions Collecting From Web of "Создать макет chatView в android"

Как насчет ниже кода –

main.xml

 <LinearLayout android:id="@+id/list_layout" android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="@drawable/background" xmlns:android="http://schemas.android.com/apk/res/android"> <ListView android:id="@+id/myList" android:layout_height="fill_parent" android:layout_width="wrap_content"/> </LinearLayout> 

list_row_layout_even.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/even_container" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/user_img" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginTop="80dip" android:src="@drawable/sample_image"/> <ImageView android:id="@+id/even_bubble" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:layout_margin="5dip" android:src="@drawable/even"/> <TextView android:id="@+id/text" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:textColor="#000000" android:textSize="16dip" android:layout_marginRight="8dip" android:layout_marginLeft="120dip" android:layout_marginTop="10dip" /> </RelativeLayout> 

list_row_layout_odd.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/even_container" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/user_img" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginTop="80dip" android:layout_alignParentRight="true" android:src="@drawable/sample_image"/> <ImageView android:id="@+id/odd_bubble" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentLeft="true" android:layout_margin="5dip" android:src="@drawable/odd"/> <TextView android:id="@+id/text" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentLeft="true" android:textColor="#ffffff" android:textSize="16dip" android:layout_marginRight="120dip" android:layout_marginLeft="8dip" android:layout_marginTop="10dip" /> </RelativeLayout> 

Это мой результат –

Скриншот

Просто настройте этот пример с учетом ваших потребностей.

Вместо TableLayout я предлагаю вам создать пользовательский адаптер для ListView . Вам просто нужно проверить условие, чтобы изменить фон макета / представлений внутри getViews() .

Некоторые темы могут быть полезны для вас:

  1. Android: стиль ListView, например, текстовые сообщения
  2. Android Реализация чата Bubble в ListView

list_item_message_left.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="left" android:orientation="vertical" android:paddingBottom="5dp" android:paddingRight="10dp" android:paddingTop="5dp" > <TextView android:id="@+id/lblMsgFrom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" android:textColor="#777777" android:textSize="12dp" android:textStyle="italic" /> <RelativeLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/txtMsg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_msg_from" android:paddingBottom="5dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:paddingTop="5dp" android:textColor="#ff717171" android:textSize="16dp" android:layout_toRightOf="@+id/textView27" android:layout_marginRight="50dp" /> <TextView android:id="@+id/textView27" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/triangle_msg_from" android:paddingRight="10dp" android:textColor="#ffffff" android:textSize="16dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_alignParentLeft="true" android:layout_marginTop="3dp" /> </RelativeLayout> </LinearLayout> 

list_item_message_right.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="right" android:orientation="vertical" android:paddingBottom="5dp" android:paddingRight="10dp" android:paddingTop="5dp" > <TextView android:id="@+id/lblMsgFrom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" android:textColor="#777777" android:textSize="12dp" android:textStyle="italic" /> <RelativeLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/txtMsg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_msg_you" android:paddingBottom="5dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:paddingTop="5dp" android:textColor="#ffffff" android:textSize="16dp" android:layout_toLeftOf="@+id/textView27" android:layout_marginLeft="50dp" /> <TextView android:id="@+id/textView27" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/triangle_msg_you" android:paddingRight="10dp" android:textColor="#ffffff" android:textSize="16dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_marginTop="3dp" /> </RelativeLayout> </LinearLayout> 

bg_msg_from.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape android:shape="rectangle" > <solid android:color="#C0C0C0" > </solid> <corners android:radius="5dp" > </corners> </shape> </item> <item> <shape android:shape="rectangle" > <solid android:color="#D8D8D8"> </solid> <corners android:radius="5dp" > </corners> </shape> </item> </selector> 

bg_msg_you.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape android:shape="rectangle" > <solid android:color="#007AE5" > </solid> <corners android:radius="5dp" > </corners> </shape> </item> <item> <shape android:shape="rectangle" > <solid android:color="#0084FF" > </solid> <corners android:radius="5dp" > </corners> </shape> </item> </selector> 

triangle_msg_from.xml

  <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" > <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="87%" android:pivotY="140%" > <shape android:shape="rectangle" > <stroke android:color="#C0C0C0" android:width="10dp"/> </shape> </rotate> </item> <item> <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="87%" android:pivotY="140%" > <shape android:shape="rectangle" > <stroke android:color="#D8D8D8" android:width="10dp"/> </shape> </rotate> </item> </layer-list> 

triangle_msg_you.xml

  <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" > <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="13%" android:pivotY="-40%" > <shape android:shape="rectangle" > <stroke android:color="#007AE5" android:width="10dp"/> </shape> </rotate> </item> <item> <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="13%" android:pivotY="-40%" > <shape android:shape="rectangle" > <stroke android:color="#0084FF" android:width="10dp"/> </shape> </rotate> </item> </layer-list> 

messageListAdapter.java

  package eddine.charef.mechalikh....; import java.util.List; import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; public class MessagesListAdapter extends BaseAdapter { private Context context; private List<Msg> messagesItems; public MessagesListAdapter(Context context, List<Msg> navDrawerItems) { this.context = context; this.messagesItems = navDrawerItems; } @Override public int getCount() { return messagesItems.size(); } @Override public Msg getItem(int position) { return messagesItems.get(position); } @Override public long getItemId(int position) { return position; } @SuppressLint("InflateParams") @Override public View getView(int position, View convertView, ViewGroup parent) { Msg m = messagesItems.get(position); LayoutInflater mInflater = (LayoutInflater) context .getSystemService(Activity.LAYOUT_INFLATER_SERVICE); if (messagesItems.get(position).getleMien()) { convertView = mInflater.inflate(R.layout.list_item_message_right, null); } else { convertView = mInflater.inflate(R.layout.list_item_message_left, null); } TextView lblFrom = (TextView) convertView.findViewById(R.id.lblMsgFrom); TextView txtMsg = (TextView) convertView.findViewById(R.id.txtMsg); txtMsg.setText(m.getMessage()+"\n"+m.getAttach()); lblFrom.setText(m.getDate()+" - "+m.getHeure()); return convertView; } } 

Msg.java

 package eddine.charef.mechalikh....; public class Msg { private String email, message; private boolean leMien; private String attach; private String cle; private String teleAttach; private String heure; private String date; public Msg(String cle,String email, String message,String attach,boolean leMien,String teleAttach,String heure,String date) { this.email = email; this.message = message; this.leMien = leMien; this.attach = attach; this.cle=cle; this.teleAttach = teleAttach; this.heure = heure; this.date=date; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public boolean getleMien() { return leMien; } public void setleMien(boolean leMien) { this.leMien = leMien; } public String getAttach() { return attach ; } public void setAttach(String attach) { this.attach = attach; } public String getCle() { return cle ; } public void setCle(String cle) { this.cle = cle; } public void setTeleAttach(String teleAttach) { this.teleAttach = teleAttach; } public String getTeleAttach() { return teleAttach ; } public void setHeure(String heure) { this.heure = heure; } public String getHeure() { return heure ; } public String getDate() { return date ; } public void setDate(String date) { this.date = date; } } 

Используйте его так, в своей деятельности

  ListView listMsg; ArrayList<Msg> listMessages; MessagesListAdapter adapter; listMessages = new ArrayList<Msg>(); listMessages.add(new Msg(cle,email,message,attach....)); adapter = new MessagesListAdapter(this, listMessages); listMsg.setAdapter(adapter); 

Основываясь на этом http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-1/

Скриншот http://s10.postimg.org/4f24pmp6h/Screenshot_2015_04_01_20_34_56.png

Я создал библиотеку для создания списка чатов, это может помочь

https://github.com/himanshu-soni/ChatMessageView