Android开发学习之路--UI之简单聊天界面
学了很多的ui的知识,这里就来实现个聊天的界面,首先来实现个layout的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:orientation="vertical"> <ListView
android:id="@+id/msg_list_view"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:divider="#0000"/> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/input_text"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:hint="输入你想说的话"
android:maxLines="2"/>
<Button
android:id="@+id/send"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="发送"/> </LinearLayout> </LinearLayout>
这里主要是listview来实现聊天的记录显示,edittext用于输入信息,button用于按钮发送。效果如下:
然后实现个listView的界面,这里用到了两张准备好的图片,是*.9.png,也就是9宫格的图片,主要的作用就是为了防止不该拉伸的地方拉伸,这里的界面用到了气泡,所以只要拉伸中间的背景就好了,两边的就不要拉伸了,新建msg_item.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:orientation="vertical"
android:padding="10dp"> <LinearLayout
android:id="@+id/left_layout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left"
android:background="@drawable/left_messages"> <TextView
android:id="@+id/left_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:textColor="#fff"/> </LinearLayout> <LinearLayout
android:id="@+id/right_layout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right"
android:background="@drawable/right_messages"> <TextView
android:id="@+id/right_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"/> </LinearLayout> </LinearLayout>
效果如下图所示:
这里的图片是网上找的png,然后ps改变大小,最后在android studio中,右击选择新建9-patch图片,然后选择拉伸的位置,如下图所示:
这样,绿色显示的是整个背景图片,然后中间的红色就是可以拉伸的地方。其中相对于png图片,*.9.png图片主要多了四周的黑线条。这里不再详细讲解*.9.png图片的制作了。
接着新建Msg类,代码如下:
package com.example.jared.uitest; /**
* Created by jared on 16/2/10.
*/
public class Msg {
public static final int TYPE_RECEIVED = 0;
public static final int TYPE_SEND = 1; private String content;
private int type; public Msg(String content, int type) {
this.content = content;
this.type = type;
} public String getContent() {
return content;
} public int getType() {
return type;
}
}
然后就是Adapter了,MsgAdapter代码如下:
package com.example.jared.uitest; 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; import java.util.List; /**
* Created by jared on 16/2/10.
*/
public class MsgAdapter extends ArrayAdapter<Msg> {
private int resourceId; public MsgAdapter(Context context, int textViewResourceId, List<Msg> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
} public View getView(int position, View convertView, ViewGroup parent) {
Msg msg = getItem(position);
View view;
ViewHolder viewHolder;
if(convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
viewHolder = new ViewHolder();
viewHolder.leftLayout = (LinearLayout)view.findViewById(R.id.left_layout);
viewHolder.rightLayout = (LinearLayout)view.findViewById(R.id.right_layout);
viewHolder.leftMsg = (TextView)view.findViewById(R.id.left_msg);
viewHolder.rightMsg = (TextView)view.findViewById(R.id.right_msg);
view.setTag(viewHolder);
} else {
view = convertView;
viewHolder = (ViewHolder) view.getTag();
}
if(msg.getType() == Msg.TYPE_RECEIVED) {
viewHolder.leftLayout.setVisibility(View.VISIBLE);
viewHolder.rightLayout.setVisibility(View.GONE);
viewHolder.leftMsg.setText(msg.getContent());
} else if(msg.getType() == Msg.TYPE_SEND) {
viewHolder.rightLayout.setVisibility(View.VISIBLE);
viewHolder.leftLayout.setVisibility(View.GONE);
viewHolder.rightMsg.setText(msg.getContent());
}
return view;
} class ViewHolder {
LinearLayout leftLayout;
LinearLayout rightLayout;
TextView leftMsg;
TextView rightMsg;
}
}
最后我们来实现MainActivity的代码:
package com.example.jared.uitest; import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView; import java.util.ArrayList;
import java.util.List; public class MainActivity extends AppCompatActivity { private ListView msgListView;
private EditText inputText;
private Button send;
private MsgAdapter adapter; private List<Msg> msgList = new ArrayList<Msg>(); @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); ActionBar actionBar = getSupportActionBar();
actionBar.hide(); setContentView(R.layout.activity_main); initMsgs();
adapter = new MsgAdapter(MainActivity.this, R.layout.msg_item, msgList);
inputText = (EditText)findViewById(R.id.input_text);
send = (Button)findViewById(R.id.send);
msgListView = (ListView)findViewById(R.id.msg_list_view);
msgListView.setAdapter(adapter);
send.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String content = inputText.getText().toString();
if(!"".equals(content)) {
Msg msg = new Msg(content, Msg.TYPE_SEND);
msgList.add(msg);
adapter.notifyDataSetChanged();
msgListView.setSelection(msgList.size());
inputText.setText("");
}
}
});
} private void initMsgs() {
Msg msg1 = new Msg("Hello, how are you?", Msg.TYPE_RECEIVED);
msgList.add(msg1);
Msg msg2 = new Msg("Fine, thank you, and you?", Msg.TYPE_SEND);
msgList.add(msg2);
Msg msg3 = new Msg("I am fine, too!", Msg.TYPE_RECEIVED);
msgList.add(msg3);
}
}
运行看下效果,输入一些文字,然后发送:
上面这个界面已经和微信的也有点类似了,那么下面再加上个头像,那么会不会更好呢?我们来试试。首先准备两张头像的图片,简单命名为head1,head2,这里的头像最好喝聊天背景的height像素相同,本例子是45。然后修改msg_item.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:orientation="vertical"
android:padding="10dp"> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"> <ImageView
android:id="@+id/head_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:src="@drawable/head1"/> <LinearLayout
android:id="@+id/left_layout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left"
android:background="@drawable/left_messages"> <TextView
android:id="@+id/left_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:textColor="#fff"/>
</LinearLayout>
</LinearLayout> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:orientation="horizontal"> <LinearLayout
android:id="@+id/right_layout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right"
android:background="@drawable/right_messages"> <TextView
android:id="@+id/right_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"/> </LinearLayout>
<ImageView
android:id="@+id/head_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/head2"/>
</LinearLayout> </LinearLayout>
这里主要是头像的ImageView和聊天记录的TextView需要在同一行,所以这里LinearLayout里面又一次嵌套了LinearLayout。
然后修改MsgAdapter代码如下:
package com.example.jared.uitest; import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView; import java.util.List; /**
* Created by jared on 16/2/10.
*/
public class MsgAdapter extends ArrayAdapter<Msg> {
private int resourceId; public MsgAdapter(Context context, int textViewResourceId, List<Msg> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
} public View getView(int position, View convertView, ViewGroup parent) {
Msg msg = getItem(position);
View view;
ViewHolder viewHolder;
if(convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
viewHolder = new ViewHolder();
viewHolder.leftLayout = (LinearLayout)view.findViewById(R.id.left_layout);
viewHolder.rightLayout = (LinearLayout)view.findViewById(R.id.right_layout);
viewHolder.leftMsg = (TextView)view.findViewById(R.id.left_msg);
viewHolder.rightMsg = (TextView)view.findViewById(R.id.right_msg);
viewHolder.head1 = (ImageView)view.findViewById(R.id.head_left);
viewHolder.head2 = (ImageView)view.findViewById(R.id.head_right);
view.setTag(viewHolder);
} else {
view = convertView;
viewHolder = (ViewHolder) view.getTag();
}
if(msg.getType() == Msg.TYPE_RECEIVED) {
viewHolder.leftLayout.setVisibility(View.VISIBLE);
viewHolder.head1.setVisibility(View.VISIBLE);
viewHolder.rightLayout.setVisibility(View.GONE);
viewHolder.head2.setVisibility(View.GONE);
viewHolder.leftMsg.setText(msg.getContent());
} else if(msg.getType() == Msg.TYPE_SEND) {
viewHolder.rightLayout.setVisibility(View.VISIBLE);
viewHolder.head2.setVisibility(View.VISIBLE);
viewHolder.leftLayout.setVisibility(View.GONE);
viewHolder.head1.setVisibility(View.GONE);
viewHolder.rightMsg.setText(msg.getContent());
}
return view;
} class ViewHolder {
LinearLayout leftLayout;
LinearLayout rightLayout;
TextView leftMsg;
TextView rightMsg;
ImageView head1;
ImageView head2;
}
}
这里viewHolder中添加了head1和head2,然后获取资源中也添加了,并且添加了显示和隐藏的代码。
图片,代码都准备好了,那就运行看看效果了:
基本上和微信的聊天界面也有几分相似了。学习了这么多ui的知识,总算可以简单地开发一个界面了。ui就先学到这里,接下去继续学习别的知识吧。
附:源代码下载:https://github.com/imchenjianneng/emChatStudy
附:参考《第一行代码》
Android开发学习之路--UI之简单聊天界面的更多相关文章
- Android开发学习之路--UI之基本布局
上一篇文章中主要介绍了ui的控件,这里就学习下布局吧.android的基本布局在layout下主要如图: 从上图可以看出有FrameLayout(单帧布局),LinearLayout(线性布局),Ta ...
- Android开发学习之路--UI之初体验
之前都是学习Activity,对于布局都没有做过学习,这里就简单学习下吧.下面看下Android Studio下有哪些控件: 这里分为Widgets,Text Fields,Containers,Da ...
- Android开发学习之路--RxAndroid之简单原理
学习了RxAndroid,其实也就是RxJava了,但是还是不是非常清楚到底RxAndroid有什么用呢?为什么要使用RxAndroid呢?这篇文章讲得不错,RxJava的原理.但是这里还是把整个 ...
- Android开发学习之路--MediaPlayer之简单音乐播放器初体验
很多时候我们都会用手机来播放音乐,播放视频,那么具体地要怎么实现呢,其实主要是MediaPlayer类来完成的.下面通过简单的例子来实现一首歌曲的播放吧.新建工程MediaPlayerStudy,这里 ...
- Android开发学习之路--UI之ListView
这里再学习写android的ListView,其实我们都使用过ListView,就像手机的联系人,就是用的ListView了.下面就实现下简单的ListView吧,首先是xml文件中添加相关的代码: ...
- Android开发学习之路--UI之自定义布局和控件
新的一年已经开始了,今天已经是初二了,两天没有学习了,还是要来继续学习下.一般手机的title都是actionbar,就像iphone一样可以后退,可以编辑.这里自定义布局就来实现下这个功能,首先准备 ...
- Android开发学习之路--基于vitamio的视频播放器(二)
终于把该忙的事情都忙得差不多了,接下来又可以开始good good study,day day up了.在Android开发学习之路–基于vitamio的视频播放器(一)中,主要讲了播放器的界面的 ...
- Android开发学习之路-RecyclerView滑动删除和拖动排序
Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...
- Android开发学习之路--Android Studio cmake编译ffmpeg
最新的android studio2.2引入了cmake可以很好地实现ndk的编写.这里使用最新的方式,对于以前的android下的ndk编译什么的可以参考之前的文章:Android开发学习之路– ...
随机推荐
- [NOI2011]
来自FallDream的博客,未经允许,请勿转载,谢谢. 省选完挂.但是善良的教练今天丢了一套NOI2011给我们训练 6道题233(虽然一道题做过了,一道题普及组的都会,就算是4道吧) 熬了一天,总 ...
- quartzJob 例子
KpiOfPoorQualityJob.javapackage com.eastcom_sw.inas.workorder.quartzJob.kpi; import net.sf.json.JSON ...
- Java Servlet 笔记4
Servlet 客户端 HTTP 请求 当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的一部分进行传输的. 读取 HTTP 头的 ...
- JavaScript数据结构和算法----队列
前言 队列和栈很像,只是用了不同的原则.队列是遵循先进先出(FIFO)原则的一组有序的的项,队列在尾部添加新元素,从顶部移除元素.最新添加的元素必须必须排队在队列的,末尾.可以想象食堂排队买饭的样子. ...
- 使用 OpenCV 与 Face++ 人脸识别
今天看到一篇文章<使用 OpenCV 与 Face++ 实现人脸解锁>,感觉挺好玩,就照着作者的讲解,写了一下.详细内容还请看原作者文章. # *^_^* coding:utf-8 *^_ ...
- Http多线程版本
上一篇文章讲了HTTP是如何通过TCP协议传输到服务器上,以及服务器接收到的报文信息请参考[HTTP与TCP的关系] 这篇文章主要讲述的多线程处理Http请求,关于多线程的好处我就不再叙述了.由于我们 ...
- CRM客户关系管理系统(六)
第六章.排序和搜索功能开发 6.1.排序功能开发 (1)kingadmin_tags.py @register.simple_tag def get_sorted_column(column,sor ...
- JS基础速成(一)
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS的变量 1.变量的声明 var num=1;//使用var生命的变 ...
- Oracle数据库常用命令记录
1.Sql建表 CREATE TABLE AAABBBCCCDDD( ID ) primary key, AAAAAAAA ) not NULL, BBBBBBBB ), CCCCCCCC ), DD ...
- 自定义view实现阻尼效果的加载动画
效果: > 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减 ...