UI界面编写实战
这里我们模拟QQ聊天的主界面,编写一个简单的聊天界面。
项目描述
首先搭建我们的主界面,在最上边放一个标题栏,然后是一个ListView,用于展示发送的消息,最下边是选择要发送的表情,内容类型,一个发送框和一个发送按钮。
先写一个颜色的资源
<?xml version="1.0" encoding="utf-8"?>
<resources><color name="light_blue">#18B4ED</color><color name="gray">#EBECEE</color><color name="white">#ffffff</color>
</resources>
然后就是主界面
<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=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:background="@color/light_blue"android:padding="15dp"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:src="@mipmap/jzw"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="20sp"android:textColor="@color/white"android:text="消息"/><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:textSize="25sp"android:textColor="@color/white"android:gravity="center"android:text="模拟聊天"/><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:src="@mipmap/login_icon01"/><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:src="@mipmap/personal_normal"android:layout_marginLeft="10dp"/></LinearLayout><ListViewandroid:id="@+id/listview"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:background="@drawable/chat_background"android:divider="#0000"></ListView><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:background="@color/gray"android:layout_margin="10dp"android:gravity="center"><ImageViewandroid:id="@+id/biaoqing"android:layout_width="30dp"android:layout_height="30dp"android:src="@mipmap/eol"/><ImageViewandroid:id="@+id/choose"android:layout_width="30dp"android:layout_height="30dp"android:src="@mipmap/addcommodity"android:layout_marginLeft="10dp"/><EditTextandroid:id="@+id/edittext"android:layout_width="0dp"android:layout_height="30dp"android:layout_weight="1"android:background="@color/white"android:layout_marginLeft="10dp"/><Buttonandroid:id="@+id/send"android:layout_width="wrap_content"android:layout_height="30dp"android:text="发送"android:background="@drawable/button"android:layout_marginLeft="10dp"/></LinearLayout>
</LinearLayout>
然后是我们的drawable文件的内容:
为发送按钮写了一个shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><corners android:radius="5dp"/><solid android:color="@color/light_blue"/>
</shape>
为展示消息的ListVeiw设置一个背景,也是用一个渐变色。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><gradientandroid:startColor="#ACE7EF"android:centerColor="#CAE0D9"android:endColor="#E7D9C5"android:angle="270"></gradient>
</shape>
为昵称前边的标签设置一个背景
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><corners android:radius="15dp"/><solid android:color="#86D070"/><padding android:left="20dp" android:right="20dp"/>
</shape>
接着,因为我们要发送和接收消息,让接收的消息呈现在左边,发送的消息呈现在右边,所以要为两边各写一个消息的布局。
左边的布局:
<?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"><TextViewandroid:id="@+id/time"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:padding="10dp"android:text="星期五 14:29" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><ImageViewandroid:id="@+id/touxiang"android:layout_width="60dp"android:layout_height="60dp"android:src="@mipmap/weheartit" /><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:id="@+id/title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/textbackground"android:text="营长"android:textColor="@color/white"android:textSize="15sp" /><TextViewandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="16sp"android:text="美女"android:layout_marginLeft="10dp"/></LinearLayout><TextViewandroid:id="@+id/message"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="60sp"android:layout_marginTop="10sp"android:background="@mipmap/eng"/></LinearLayout></LinearLayout>
</LinearLayout>
右边的布局:
<?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"><TextViewandroid:id="@+id/time"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:padding="10dp"android:text="星期五 14:29" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="right"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="right"android:orientation="horizontal"><TextViewandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="16sp"android:text="美女"android:layout_marginLeft="10dp"/><TextViewandroid:id="@+id/title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/textbackground"android:text="营长"android:textColor="@color/white"android:textSize="15sp" /></LinearLayout><TextViewandroid:id="@+id/message"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="60sp"android:layout_marginTop="10sp"android:background="@mipmap/qqright"/></LinearLayout><ImageViewandroid:id="@+id/touxiang"android:layout_width="60dp"android:layout_height="60dp"android:src="@mipmap/weheartit" /></LinearLayout>
</LinearLayout>
接着定义我们消息内容的实体类ChatMessage.java
/*** Created by Administrator on 2015/8/31.*/
public class ChatMessage {private int touxiang;//头像private String title;//标签private String name;//昵称private String message;//消息内容private long time;//发送时间private int type;//消息类型,即左边或者右边public ChatMessage(int touxiang, String title, String name, String message, long time) {this.touxiang = touxiang;this.title = title;this.name = name;this.message = message;this.time = time;}public int getType() {return type;}public void setType(int type) {this.type = type;}public int getTouxiang() {return touxiang;}public void setTouxiang(int touxiang) {this.touxiang = touxiang;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public long getTime() {return time;}public void setTime(long time) {this.time = time;}
}
定义我们消息内容的适配器MessageAdapter
import android.text.Html;
import android.text.Spanned;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;/*** Created by Administrator on 2015/8/31.*/
public class MessageAdapter extends BaseAdapter{private LayoutInflater inflater;private ArrayList<ChatMessage> data;private Html.ImageGetter getter;private static final int TYPE=2;public static final int MESSAGE_LEFT=0;public static final int MESSAGE_RIGHT=1;public MessageAdapter(LayoutInflater inflater, ArrayList<ChatMessage> data,Html.ImageGetter getter) {this.inflater = inflater;this.data = data;this.getter=getter;}@Overridepublic int getViewTypeCount() {//得到当前缓存布局类型的数量return TYPE;//因为有左右两种布局,返回常量2}@Overridepublic int getItemViewType(int position) {return data.get(position).getType();//返回当前布局的类型}@Overridepublic int getCount() {return data.size();}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ChatMessage chatMessage=data.get(position);View view=null;ViewHolder viewHolder;int type=getItemViewType(position);if(convertView==null){switch (type){case MESSAGE_LEFT:view=inflater.inflate(R.layout.message,null);break;case MESSAGE_RIGHT:view=inflater.inflate(R.layout.message_right,null);break;default:break;}viewHolder=new ViewHolder();viewHolder.touxiang= (ImageView) view.findViewById(R.id.touxiang);viewHolder.title= (TextView) view.findViewById(R.id.title);viewHolder.name= (TextView) view.findViewById(R.id.name);viewHolder.message= (TextView) view.findViewById(R.id.message);viewHolder.time= (TextView) view.findViewById(R.id.time);view.setTag(viewHolder);}else {view=convertView;viewHolder= (ViewHolder) view.getTag();}viewHolder.touxiang.setImageResource(chatMessage.getTouxiang());viewHolder.title.setText(chatMessage.getTitle());viewHolder.name.setText(chatMessage.getName());Spanned spanned=Html.fromHtml(chatMessage.getMessage(),getter,null);viewHolder.message.setText(spanned);//因为内容可能添加表情,所以传入富文本SimpleDateFormat format= new SimpleDateFormat("EEE HH:mm");String time=format.format(new Date(chatMessage.getTime()));viewHolder.time.setText(time);//设置显示时间的格式return view;}class ViewHolder{ImageView touxiang;TextView title;TextView name;TextView message;TextView time;}
}
下面就要设置表情了,我们点击表情图片时,弹出一个PopupWindow,然后在里边设置一个GridView来显示我们的全部表情。
新建一个Gridview布局
<?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"><GridViewandroid:id="@+id/expression"android:layout_width="match_parent"android:layout_height="match_parent"android:numColumns="4"></GridView>
</LinearLayout>
然后是表情的布局,就是一个ImageView:
<?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="center"android:orientation="vertical"><ImageViewandroid:id="@+id/image_expression"android:layout_width="wrap_content"android:layout_height="wrap_content" />
</LinearLayout>
然后我们定义表情的实体类Expression
/*** Created by Administrator on 2015/8/31.*/
public class Expression {private int image;//设置一张表情的图片public int getImage() {return image;}public void setImage(int image) {this.image = image;}
}
接着我们写一个表情的适配器ExpressionAdapter
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import java.util.ArrayList;/*** Created by Administrator on 2015/8/31.*/
public class ExpressionAdapter extends BaseAdapter {private LayoutInflater inflater;private ArrayList<Expression> expressions;public ExpressionAdapter(LayoutInflater inflater, ArrayList<Expression> expressions) {this.inflater = inflater;this.expressions = expressions;}@Overridepublic int getCount() {return expressions.size();}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {Expression expression=expressions.get(position);View view =inflater.inflate(R.layout.biaoqing,null);ImageView image= (ImageView) view.findViewById(R.id.image_expression);image.setImageResource(expression.getImage());return view;}
}
接下来呢,为了美观,当我们点击加号图片时,弹出一个PopupWindow,里边放置两个RadioButton,让我们选择发送信息的类型。
定义这个布局:
<?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="center"android:orientation="horizontal"><RadioGroupandroid:id="@+id/radiogroup"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RadioButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="receive"/><RadioButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="send"/></RadioGroup>
</LinearLayout>
最后就是我们主活动的代码了!
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.util.ArrayList;public class MainActivity extends Activity {private EditText editText;private ArrayList<ChatMessage> data;private MessageAdapter adapter;private Html.ImageGetter getter;private ListView listView;private LayoutInflater inflater;private GridView gridView;private ArrayList<Expression> expressions;private ExpressionAdapter expressionAdapter;private View view;private View chooseView;private ImageView imageView;private ImageView choose;private String name;private ChatMessage chatMessage;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);editText = (EditText) findViewById(R.id.edittext);imageView = (ImageView) findViewById(R.id.biaoqing);choose = (ImageView) findViewById(R.id.choose);Button send = (Button) findViewById(R.id.send);listView = (ListView) findViewById(R.id.listview);inflater = getLayoutInflater();view = inflater.inflate(R.layout.expression, null);chooseView = inflater.inflate(R.layout.sendreceive, null);data = new ArrayList<>();imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {PopupWindow popupWindow = new PopupWindow(MainActivity.this);popupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);popupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);popupWindow.setContentView(view);popupWindow.setFocusable(true);popupWindow.setOutsideTouchable(true);popupWindow.update();popupWindow.showAtLocation(view, Gravity.CENTER, 0, 400);}});gridView = (GridView) view.findViewById(R.id.expression);expressions = new ArrayList<>();initExpression();expressionAdapter = new ExpressionAdapter(inflater, expressions);getter = new Html.ImageGetter() {@Overridepublic Drawable getDrawable(String source) {Drawable drawable = getResources().getDrawable(Integer.parseInt(source));drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());return drawable;}};gridView.setAdapter(expressionAdapter);gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {Spanned spanned = Html.fromHtml("<img src='" + expressions.get(position).getImage() + "'/>", getter, null);//将表情插入到光标所在位置editText.getText().insert(editText.getSelectionStart(), spanned);}});choose.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {PopupWindow popupWindow = new PopupWindow(MainActivity.this);popupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);popupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);popupWindow.setContentView(chooseView);popupWindow.setFocusable(true);popupWindow.setOutsideTouchable(true);popupWindow.update();popupWindow.showAtLocation(view, Gravity.CENTER, 0, 450);}});RadioGroup radioGroup = (RadioGroup) chooseView.findViewById(R.id.radiogroup);radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {RadioButton radioButton = (RadioButton) chooseView.findViewById(checkedId);name = (String) radioButton.getText();}});send.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (name.equals("send")) {String message = filterHtml(Html.toHtml(editText.getText()));chatMessage = new ChatMessage(R.mipmap.weheartit, "老大", "巴黎铁塔前的黎明", message, System.currentTimeMillis());chatMessage.setType(MessageAdapter.MESSAGE_RIGHT);} else if (name.equals("receive")) {String message = filterHtml(Html.toHtml(editText.getText()));chatMessage = new ChatMessage(R.mipmap.weheartit, "老二", "东京樱花后的黄昏", message, System.currentTimeMillis());chatMessage.setType(MessageAdapter.MESSAGE_LEFT);}data.add(chatMessage);adapter.notifyDataSetChanged();listView.setSelection(data.size());//将ListView定位到最后一行editText.setText("");//清空输入框的内容}});adapter = new MessageAdapter(inflater, data, getter);listView.setAdapter(adapter);}/*** 将文本转化为HTML格式后,发送的时候去掉除富文本以外的内容** @param str 转化为HTML格式的字符串* @return 富文本*/public String filterHtml(String str) {str = str.replaceAll("<(?!br|img)[^>]+>", "").trim();return str;}/***初始化表情*/private void initExpression() {Expression expression1 = new Expression();expression1.setImage(R.mipmap.ebg);expressions.add(expression1);Expression expression2 = new Expression();expression2.setImage(R.mipmap.ebh);expressions.add(expression2);Expression expression3 = new Expression();expression3.setImage(R.mipmap.ebl);expressions.add(expression3);Expression expression4 = new Expression();expression4.setImage(R.mipmap.ebo);expressions.add(expression4);Expression expression5 = new Expression();expression5.setImage(R.mipmap.ebw);expressions.add(expression5);Expression expression6 = new Expression();expression6.setImage(R.mipmap.eca);expressions.add(expression6);Expression expression7 = new Expression();expression7.setImage(R.mipmap.ecb);expressions.add(expression7);Expression expression8 = new Expression();expression8.setImage(R.mipmap.ecc);expressions.add(expression8);Expression expression9 = new Expression();expression9.setImage(R.mipmap.eew);expressions.add(expression9);}
}
好了,至此大功告成!让我们测试一下结果吧!
##运行结果:
首先是我们的界面
然后点击加号,选择我们要发送的类型,选择send
输入发送内容,点击表情,选择要发送的表情
点击发送
最后的效果: