android 实现qq聊天对话界面效果

简介: 效果图: chatting_item_from.xml               chatting_item_to.xml:                                            chatting_title_bar.

 效果图:



chatting_item_from.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
 android:orientation="vertical"
 android:paddingLeft="6.0dip"
 android:paddingRight="6.0dip"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
   xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
     android:id="@+id/chatting_time_tv"
     style="@style/ChattingUISplit" />
   
      <TextView
     android:id="@+id/chatting_content_itv"
     android:
     android:background="@drawable/chatfrom_bg"
     style="@style/ChattingUIText" />
</LinearLayout>

chatting_item_to.xml:

 

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical" android:paddingLeft="6.0dip" android:paddingRight="6.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
     android:id="@+id/chatting_time_tv"
     style="@style/ChattingUISplit" />
    <LinearLayout
     android:orientation="horizontal"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content">
        <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1.0" />
        <ImageView
         android:id="@+id/chatting_state_iv"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" />
          <TextView
         android:
         android:id="@+id/chatting_content_itv"
         android:background="@drawable/chatto_bg"
         style="@style/ChattingUIText" />
    </LinearLayout>
</LinearLayout>

 

chatting_title_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="40dip" 
    android:orientation="horizontal"
    android:gravity="center_vertical"
 android:background="@drawable/mmtitle_bg">
 <TextView
  android:id="@+id/chatting_contact_name"
  android:layout_height="wrap_content"
  android:layout_width="180dip"
  android:textSize="18sp"
  android:ellipsize="end"
  android:background="@null"
  android:textColor="@color/white"
  android:gravity="left|center"
  android:paddingLeft="10dip"  
  android:text="测试用户"
 />
 <TextView
  android:id="@+id/chatting_contact_status"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:background="@null"
  android:text="正在输入..."
  android:textSize="16sp"
  android:textColor="@color/white"
  android:layout_alignParentRight="true"
  android:layout_alignParentBottom="true"
  android:padding="3dip"
  android:layout_toRightOf="@id/chatting_contact_name"
  android:visibility="gone"
 />
 
</RelativeLayout>

chatting.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
 android:id="@+id/chat_root"
 android:focusable="false"
 android:focusableInTouchMode="false"
 android:background="@drawable/nav_page"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:gravity="center_horizontal"
 android:orientation="vertical"
   xmlns:android="http://schemas.android.com/apk/res/android">
    <ListView
     android:id="@+id/chatting_history_lv"
     android:background="@null"
     android:scrollbars="vertical"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:listSelector="@drawable/mm_chat_listitem"
     android:transcriptMode="alwaysScroll"
     android:cacheColorHint="#00000000"
     android:divider="@null"
     android:layout_weight="1.0" />
   <LinearLayout
     android:orientation="horizontal"
     android:background="@drawable/txt_msg_bg"
     android:paddingRight="7.0dip"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content">
        <ImageView
         android:layout_gravity="center_vertical"
         android:id="@+id/sms_button_insert"
         android:paddingLeft="15.0dip"
         android:paddingTop="5.0dip"
         android:paddingRight="7.0dip"
         android:paddingBottom="5.0dip"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/sms_insert" />
        <EditText
         android:textColorHint="@color/search_hint"
         android:layout_gravity="center_vertical"
         android:id="@+id/text_editor"
         android:background="@drawable/sms_embeded_text_editor_bg"
         android:focusable="true"
         android:nextFocusRight="@+id/send_button"
         android:layout_width="0.0dip"
         android:layout_height="wrap_content"
         android:layout_marginLeft="7.0dip"
         android:layout_marginTop="5.0dip"
         android:layout_marginRight="7.0dip"
         android:layout_marginBottom="5.0dip"
         android:minHeight="34.0dip"
         android:hint="输入消息"
         android:maxLines="8"
         android:maxLength="2000"
         android:capitalize="sentences"
         android:
         android:layout_weight="1.0"
         android:inputType="textCapSentences|textAutoCorrect|textMultiLine|textShortMessage"
         android:imeOptions="actionSend|flagNoEnterAction" />
        <Button
         android:gravity="center"
         android:layout_gravity="center_vertical"
         android:id="@+id/send_button"
         android:background="@drawable/sms_send_button_bg"
         android:paddingLeft="11.0dip"
         android:paddingRight="11.0dip"
         android:nextFocusLeft="@id/text_editor"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         />
     </LinearLayout>
</LinearLayout>

 

实体类:

public class ChatMessage {

 public static final int MESSAGE_FROM = 0;
 public static final int MESSAGE_TO = 1;

 private int direction;
 private String content;

 public ChatMessage(int direction, String content) {
  super();
  this.direction = direction;
  this.content = content;
 }

 public int getDirection() {
  return direction;
 }

 public void setDirection(int direction) {
  this.direction = direction;
 }

 public void setContent(String content) {
  this.content = content;
 }

 public CharSequence getContent() {
  return content;
 }

}

 

adapter类:

import java.util.List;

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 ChattingAdapter extends BaseAdapter {
 protected static final String TAG = "ChattingAdapter";
 private Context context;

 private List<ChatMessage> chatMessages;

 public ChattingAdapter(Context context, List<ChatMessage> messages) {
  super();
  this.context = context;
  this.chatMessages = messages;

 }

 public int getCount() {
  return chatMessages.size();
 }

 public Object getItem(int position) {
  return chatMessages.get(position);
 }

 public long getItemId(int position) {
  return position;
 }

 public View getView(int position, View convertView, ViewGroup parent) {
  ViewHolder holder = null;
  ChatMessage message = chatMessages.get(position);
  if (convertView == null || (holder = (ViewHolder) convertView.getTag()).flag != message.getDirection()) {

   holder = new ViewHolder();
   if (message.getDirection() == ChatMessage.MESSAGE_FROM) {
    holder.flag = ChatMessage.MESSAGE_FROM;

    convertView = LayoutInflater.from(context).inflate(R.layout.chatting_item_from, null);
   } else {
    holder.flag = ChatMessage.MESSAGE_TO;
    convertView = LayoutInflater.from(context).inflate(R.layout.chatting_item_to, null);
   }

   holder.text = (TextView) convertView.findViewById(R.id.chatting_content_itv);
   convertView.setTag(holder);
  }
  holder.text.setText(message.getContent());

  return convertView;
 }
//优化listview的Adapter
 static class ViewHolder {
  TextView text;
  int flag;
 }

}

 

主activity类
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;

public class MainActivity extends Activity {
 protected static final String TAG = "MainActivity";
 private ChattingAdapter chatHistoryAdapter;
 private List<ChatMessage> messages = new ArrayList<ChatMessage>();

 private ListView chatHistoryLv;
 private Button sendBtn;
 private EditText textEditor;
 //private ImageView sendImageIv;
 //private ImageView captureImageIv;
 //private View recording;
 //private PopupWindow menuWindow = null;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
  super.onCreate(savedInstanceState);
  setContentView(R.layout.chatting);
  getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.chatting_title_bar);
  chatHistoryLv = (ListView) findViewById(R.id.chatting_history_lv);
  setAdapterForThis();
  sendBtn = (Button) findViewById(R.id.send_button);
  textEditor = (EditText) findViewById(R.id.text_editor);
  
  sendBtn.setOnClickListener(l);
  
  
  

 }

 // 设置adapter
 private void setAdapterForThis() {
  initMessages();
  chatHistoryAdapter = new ChattingAdapter(this, messages);
  chatHistoryLv.setAdapter(chatHistoryAdapter);
 }

 // 为listView添加数据
 private void initMessages() {
  messages.add(new ChatMessage(ChatMessage.MESSAGE_FROM, "hello"));
  messages.add(new ChatMessage(ChatMessage.MESSAGE_TO, "hello"));
  messages.add(new ChatMessage(ChatMessage.MESSAGE_FROM, "你好吗?"));
  messages.add(new ChatMessage(ChatMessage.MESSAGE_TO, "非常好!"));
  messages.add(new ChatMessage(ChatMessage.MESSAGE_FROM, "欢迎光临我的博客,http://hi.csdn.net/lyfi01"));
  messages.add(new ChatMessage(ChatMessage.MESSAGE_TO, "恩,好的,谢谢"));
 }

 
 private View.OnClickListener l = new View.OnClickListener() {

  public void onClick(View v) {

   if (v.getId() == sendBtn.getId()) {
    String str = textEditor.getText().toString();
    String sendStr;
    if (str != null
      && (sendStr = str.trim().replaceAll("\r", "").replaceAll("\t", "").replaceAll("\n", "")
        .replaceAll("\f", "")) != "") {
     sendMessage(sendStr);

    }
    textEditor.setText("");

   }
  }

  // 模拟发送消息
  private void sendMessage(String sendStr) {
   messages.add(new ChatMessage(ChatMessage.MESSAGE_TO, sendStr));
   chatHistoryAdapter.notifyDataSetChanged();
  }

 };
}

 

转自:http://blog.sina.com.cn/s/blog_80723de80100vnxg.html

目录
相关文章
|
1月前
|
XML 数据可视化 Android开发
Android应用界面
Android应用界面中的布局和控件使用,包括相对布局、线性布局、表格布局、帧布局、扁平化布局等,以及AdapterView及其子类如ListView的使用方法和Adapter接口的应用。
23 0
Android应用界面
|
2月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
65 1
|
3月前
|
Android开发 iOS开发 C#
Xamarin.Forms:从零开始的快速入门指南——打造你的首个跨平台移动应用,轻松学会用C#和XAML构建iOS与Android通用界面的每一个步骤
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程并保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用演示了 Xamarin.Forms 的基本功能和工作原理。
81 0
|
4月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
【7月更文挑战第28天】随着移动应用市场的发展,用户对界面设计的要求不断提高。Material Design是由Google推出的设计语言,强调真实感、统一性和创新性,通过模拟纸张和墨水的物理属性创造沉浸式体验。它注重色彩、排版、图标和布局的一致性,确保跨设备的统一视觉风格。Android Studio提供了丰富的Material Design组件库,如按钮、卡片等,易于使用且美观。
150 1
|
4月前
|
XML Android开发 数据安全/隐私保护
使用RelativeLayout布局Android界面
使用RelativeLayout布局Android界面
|
5月前
|
编解码 安全 Android开发
探索iOS与Android开发的差异:从界面到性能
【6月更文挑战第10天】在移动应用开发的广阔天地中,iOS和Android两大平台各占山头,它们在设计理念、用户体验、性能优化等方面展现出独特的魅力。本文将深入探讨这两大系统在开发过程中的主要差异,从用户界面设计到性能调优,揭示各自背后的技术逻辑与创新策略,为开发者提供全面的视角和实用的开发指南。
|
4月前
|
Android开发 索引
Android流布局实现筛选界面
Android流布局实现筛选界面
64 0
|
XML 数据可视化 Java
Android常见界面布局(详细介绍)
Android常见界面布局(详细介绍)
471 0
Android常见界面布局(详细介绍)
|
Android开发
Android笔记:软键盘弹出遮盖原来界面的布局控件
Android笔记:软键盘弹出遮盖原来界面的布局控件
178 0
|
Web App开发 Java Android开发
android界面开发小结——android笔记---控件和布局
控件简介 ============================================================== 控件的设置主要依靠layout文件夹中的activity_main.
736 0