仿写聊天气泡界面
2015-10-13 20:41
274 查看
首先利用listview+EditText+Button构建一个主布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.liaotian.MainActivity" >
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#0000">
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="@+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxLines="2"/>
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发送"/>
</LinearLayout>
</LinearLayout>
然后进行list_item布局的编写,这里把左布局和右布局写在同一个界面里,将来再通过调用setVisible方法进行隐藏来形成一左一右对话效果
<?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:orientation="vertical" >
<LinearLayout
android:id="@+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="10dp"
android:background="@drawable/from" >
<TextView
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#080808" />
</LinearLayout>
<LinearLayout
android:id="@+id/right_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:background="@drawable/to" >
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#080808" />
</LinearLayout>
</LinearLayout>
布局书写完毕,然后进行java代码的书写,手写书写Msg.java
package com.example.liaotian;
public class Msg {
public static final int TYPE_SENT = 1;
public static final int TYPE_RECEIVED = 0;
private String content;
private int type;
public Msg(String content, int type) {
// TODO Auto-generated constructor stub
this.content = content;
this.type = type;
}
public String getContent() {
return this.content;
}
public int getType() {
return this.type;
}
}
继续是Adapter的编写
package com.example.liaotian;
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MsgAdapter extends ArrayAdapter<Msg> {
private int resourceId;
public MsgAdapter(Context context, int resource, List<Msg> objects) {
super(context, resource, objects);
// TODO Auto-generated constructor stub
this.resourceId = resource;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
// return super.getView(position, convertView, parent);
Msg msg = getItem(position);
ViewHolder holder;
View view;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
holder = new ViewHolder();
holder.leftLayout = (LinearLayout) view
.findViewById(R.id.left_layout);
holder.rightLayout = (LinearLayout) view
.findViewById(R.id.right_layout);
holder.leftMsg = (TextView) view.findViewById(R.id.left);
holder.rightMsg = (TextView) view.findViewById(R.id.right);
view.setTag(holder);
} else {
view = convertView;
holder = (ViewHolder) view.getTag();
}
// 判断是收到还是发送的消息
if (msg.getType() == Msg.TYPE_RECEIVED) {
holder.leftLayout.setVisibility(View.VISIBLE);
holder.rightLayout.setVisibility(View.GONE);
holder.leftMsg.setText(msg.getContent());
} else if (msg.getType() == Msg.TYPE_SENT) {
holder.rightLayout.setVisibility(View.VISIBLE);
holder.leftLayout.setVisibility(View.GONE);
holder.rightMsg.setText(msg.getContent());
}
return view;
}
class ViewHolder {
LinearLayout leftLayout;
LinearLayout rightLayout;
TextView leftMsg;
TextView rightMsg;
}
}
最后是MainActivity的编写
package com.example.liaotian;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends Activity {
private ListView listview;
private EditText text;
private Button send;
private MsgAdapter adapter;
private List<Msg> msgList = new ArrayList<Msg>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initMsgs();
adapter = new MsgAdapter(getApplicationContext(), R.layout.list_item,
msgList);
listview = (ListView) this.findViewById(R.id.listview);
listview.setAdapter(adapter);
text = (EditText) this.findViewById(R.id.text);
send = (Button) this.findViewById(R.id.send);
this.send.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
String content = text.getText().toString();
if (!"".equals(content)) {
Msg msg = new Msg(content, Msg.TYPE_SENT);
msgList.add(msg);
adapter.notifyDataSetChanged();
listview.setSelection(msgList.size());
text.setText("");
} else {
Toast.makeText(getApplicationContext(), "不准发送空消息",
Toast.LENGTH_SHORT).show();
}
}
});
}
private void initMsgs() {
Msg msg1 = new Msg("你好啊", Msg.TYPE_RECEIVED);
msgList.add(msg1);
Msg msg2 = new Msg("你好啊,逗比", Msg.TYPE_SENT);
msgList.add(msg2);
}
}
效果图(颜值略低。。。):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.liaotian.MainActivity" >
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#0000">
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="@+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxLines="2"/>
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发送"/>
</LinearLayout>
</LinearLayout>
然后进行list_item布局的编写,这里把左布局和右布局写在同一个界面里,将来再通过调用setVisible方法进行隐藏来形成一左一右对话效果
<?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:orientation="vertical" >
<LinearLayout
android:id="@+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="10dp"
android:background="@drawable/from" >
<TextView
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#080808" />
</LinearLayout>
<LinearLayout
android:id="@+id/right_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:background="@drawable/to" >
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#080808" />
</LinearLayout>
</LinearLayout>
布局书写完毕,然后进行java代码的书写,手写书写Msg.java
package com.example.liaotian;
public class Msg {
public static final int TYPE_SENT = 1;
public static final int TYPE_RECEIVED = 0;
private String content;
private int type;
public Msg(String content, int type) {
// TODO Auto-generated constructor stub
this.content = content;
this.type = type;
}
public String getContent() {
return this.content;
}
public int getType() {
return this.type;
}
}
继续是Adapter的编写
package com.example.liaotian;
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MsgAdapter extends ArrayAdapter<Msg> {
private int resourceId;
public MsgAdapter(Context context, int resource, List<Msg> objects) {
super(context, resource, objects);
// TODO Auto-generated constructor stub
this.resourceId = resource;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
// return super.getView(position, convertView, parent);
Msg msg = getItem(position);
ViewHolder holder;
View view;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
holder = new ViewHolder();
holder.leftLayout = (LinearLayout) view
.findViewById(R.id.left_layout);
holder.rightLayout = (LinearLayout) view
.findViewById(R.id.right_layout);
holder.leftMsg = (TextView) view.findViewById(R.id.left);
holder.rightMsg = (TextView) view.findViewById(R.id.right);
view.setTag(holder);
} else {
view = convertView;
holder = (ViewHolder) view.getTag();
}
// 判断是收到还是发送的消息
if (msg.getType() == Msg.TYPE_RECEIVED) {
holder.leftLayout.setVisibility(View.VISIBLE);
holder.rightLayout.setVisibility(View.GONE);
holder.leftMsg.setText(msg.getContent());
} else if (msg.getType() == Msg.TYPE_SENT) {
holder.rightLayout.setVisibility(View.VISIBLE);
holder.leftLayout.setVisibility(View.GONE);
holder.rightMsg.setText(msg.getContent());
}
return view;
}
class ViewHolder {
LinearLayout leftLayout;
LinearLayout rightLayout;
TextView leftMsg;
TextView rightMsg;
}
}
最后是MainActivity的编写
package com.example.liaotian;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends Activity {
private ListView listview;
private EditText text;
private Button send;
private MsgAdapter adapter;
private List<Msg> msgList = new ArrayList<Msg>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initMsgs();
adapter = new MsgAdapter(getApplicationContext(), R.layout.list_item,
msgList);
listview = (ListView) this.findViewById(R.id.listview);
listview.setAdapter(adapter);
text = (EditText) this.findViewById(R.id.text);
send = (Button) this.findViewById(R.id.send);
this.send.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
String content = text.getText().toString();
if (!"".equals(content)) {
Msg msg = new Msg(content, Msg.TYPE_SENT);
msgList.add(msg);
adapter.notifyDataSetChanged();
listview.setSelection(msgList.size());
text.setText("");
} else {
Toast.makeText(getApplicationContext(), "不准发送空消息",
Toast.LENGTH_SHORT).show();
}
}
});
}
private void initMsgs() {
Msg msg1 = new Msg("你好啊", Msg.TYPE_RECEIVED);
msgList.add(msg1);
Msg msg2 = new Msg("你好啊,逗比", Msg.TYPE_SENT);
msgList.add(msg2);
}
}
效果图(颜值略低。。。):
相关文章推荐
- Android 环信 自定义聊天气泡
- CSS 气泡
- 防微信聊天气泡图片实现
- Android工具draw9patch使用点.9.png图片制作
- 用两张图片实现类似于聊天气泡等的特殊轮廓图片的效果(已封装可以自定义修改)
- nyoj 南阳理工63小猴子下落
- javac和java -cp选项情景总结
- 数据结构 线性表
- 指针
- 堆排序
- PHP学习笔记(10)—— 浮点数与运算优先级
- SGI STL中的construct
- 神经网络&深度学习
- eclipse相关问题一:无法import项目,显示 select at list one project
- 杭电acm--1046
- 【曾经】图片快速分割
- WaitForSingleObject的用法
- 深入浅出Android App耗电量统计
- iframe父级与iframe子级间访问
- IK Analyzer demo