布局撰写
- 本课时讲解页面布局的实现，包含主界面，以及适配需要的界面效果。其中包含listview控件和adapter的使用。
在这个小程序中，我们只是需要一个聊天界面，所以设计的很简单，就是一个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" >
<ListView
android:id="@+id/lv"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="@null"
android:listSelector="@android:color/transparent"
android:transcriptMode="alwaysScroll" >
</ListView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/sendText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="@+id/send_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/send"
/>
</LinearLayout>
</LinearLayout>
当然，这里面的一些属性值，相信我们都可以很简单的去理解。
设计完我们需要的界面之后，我们就在MainActivity中进行相关的初始化：
private ListView lv;
private EditText sendtext;
private Button sendbtn;
private void initView(){
//修改的
lv = (ListView) findViewById(R.id.lv);
sendtext = (EditText) findViewById(R.id.sendText);
sendbtn = (Button) findViewById(R.id.send_btn);
lists = new ArrayList<ListData>();
}
当然，在我们写了listview后，那么我们必然需要响应的适配器：
我们写了一个TextAdapter，继承BaseAdapter，完成对应的四个函数：
我们在完成过程中，需要注意的是，因为这是一个对话的界面，所以我们要考虑到，对话分成左右。所以在对话时我们要区分是谁在说话，从而加载不同的对话布局。
这是一个leftitem.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/iv"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_below="@id/time"
android:padding="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/time"
android:layout_marginRight="50dp"
android:layout_toRightOf="@id/iv"
android:gravity="center" />
</RelativeLayout>
同理，右边对话的布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/iv"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentRight="true"
android:layout_below="@id/time"
android:padding="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/time"
android:layout_marginLeft="50dp"
android:layout_toLeftOf="@id/iv"
android:gravity="center" />
</RelativeLayout>
这两个只是左右不同，但是我们在设定好左右对话布局之后，我们还得先判断是我们发的消息还是小机器人发的消息，以此来区分使用左右。
所以我们在封装数据的listData中，添加了用来判断的辞令：
public static final int SEND = 1;
public static final int RECEIVER = 2;
如果我们的条件判断是1，则说明是用户发送的消息，用右边布局，否则则为左边布局。
然后我们就可以在getView中写好完整的文字加载了。
完整的适配器代码如下：
package com.ych.wechat;
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.RelativeLayout;
import android.widget.TextView;
public class TextAdapter extends BaseAdapter{
private List<ListData> lists;
private Context mContext;
private RelativeLayout layout;
public TextAdapter(List<ListData> lists,Context mContext) {
this.lists = lists;
this.mContext = mContext;
}
@Override
public int getCount() {
return lists.size();
}
@Override
public Object getItem(int position) {
return lists.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = LayoutInflater.from(mContext);
//两个if就是用来判断左布局还是右布局
if(lists.get(position).getFlag() == ListData.RECEIVER){
layout = (RelativeLayout) inflater.inflate(R.layout.leftitem, null);
}
if (lists.get(position).getFlag() == ListData.SEND) {
layout = (RelativeLayout) inflater.inflate(R.layout.rightitem, null);
}
TextView tv = (TextView) layout.findViewById(R.id.tv);
tv.setText(lists.get(position).getContent());
return layout;
}
}
嗯，还是附上完整的ListData代码（封装数据的哦）：
public class ListData {
public static final int SEND = 1;
public static final int RECEIVER = 2;
private String content;
private int flag;
public ListData(String content,int flag) {
setContent(content);
setFlag(flag);
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public int getFlag() {
return flag;
}
public void setFlag(int flag) {
this.flag = flag;
}
}
写完适配器之后，我们就要在MainActivity中进行修改了。
1、我们将函数实现按钮的监听事件，然后把获取内容的http请求放到click（）方法中，其中我们之前测试是直接把说的话放在了请求的内容中，现在当然是要把用户输入的话当成请求的内容。
2、在发送消息的时候我们需要一个ListData,来加载我们写的内容：
listData = new ListData(content_str, ListData.SEND);
lists.add(listData);
adapter.notifyDataSetChanged();
获取数据的时候也需要一个ListData来加载内容:
listData = new ListData(jb.getString("text"),listData.RECEIVER);
lists.add(listData);
adapter.notifyDataSetChanged();
3、初始化适配器、ListView加载适配器、用list来存储ListData的数据对象这些就不再具体的讲述了。
完整的MainActivity代码：
package com.ych.wechat;
import java.util.ArrayList;
import java.util.List;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.Activity;
import android.view.View.OnClickListener;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
public class MainActivity extends Activity implements HttpGetDataListener,
OnClickListener{
private HttpData httpdata;
private List<ListData> lists;
private ListView lv;
private EditText sendtext;
private Button sendbtn;
private String content_str;
private TextAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView(){
lv = (ListView) findViewById(R.id.lv);
sendtext = (EditText) findViewById(R.id.sendText);
sendbtn = (Button) findViewById(R.id.send_btn);
lists = new ArrayList<ListData>();
sendbtn.setOnClickListener(this);
adapter = new TextAdapter(lists, this);
lv.setAdapter(adapter);
}
@Override
public void getDataurl(String data) {
// TODO Auto-generated method stub
//System.out.println(data);
parseText(data);
}
public void parseText(String str){
try {
JSONObject jb = new JSONObject(str);
//System.out.println(jb.getString("code"));
//System.out.println(jb.getString("text"));
ListData listData = null;
listData = new ListData(jb.getString("text"),listData.RECEIVER);
lists.add(listData);
adapter.notifyDataSetChanged();
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
content_str = sendtext.getText().toString();
ListData listData;
listData = new ListData(content_str, ListData.SEND);
lists.add(listData);
adapter.notifyDataSetChanged();
httpdata = (HttpData) new HttpData("http://www.tuling123.com/openapi/api?key=06423f1d68f64588b487ddeb031c8795&info="+content_str,
this).execute();
}
}
说明
其实写到这里，我们就已经完成了聊天机器人。
效果如下：
wechat.png
后面的内容会有相关的添加内容，以及一些简单的优化。
谢谢你的阅读。
