3.7 界面实践
日常生活中，我们都要用到短信的发送与接收功能，效果图如下：
我们可以看到不仅消息能够“发送”和“接收”，而且最大的特点就是：通过不同颜色，就可以”发送”与”接收“！
这种功能在android中是很好实现的！其中的功能本质，就目前而言，就是在不同颜色的框中插入文字！
为了实现这种功能，我们的设计如下：
将在底部设计编辑文本的”短信内容“，在旁边分别设置”send”与”receive“功能键
通过点击”send”，”短信内容“在”白色“框中，”左边“显示；
通过点击“receive”，”短信内容“在”蓝色“框中，”右边“显示。
好了，下面我们就进入正题了！
一.项目框架：
大概如下：
效果如下，显示界面：
其中包括提前准备好的测试用例
渲染布局，用到的”短信“布局界面如下：
左边的背景：
右边边的背景：
二.项目布局：
为了实现这种界面，首先看看布局：
activity_main.xml:
<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" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="消息界面" /> <ListView android:id="@+id/msg_list_view" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:divider="#000fff" > </ListView> <LinearLayout android:id="@+id/message" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <EditText android:id="@+id/message_content" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:textColor="#ff0000" android:hint="Type something " /> <Button android:id="@+id/bt_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="messageput" android:text="Send" /> <Button android:id="@+id/bt_receive" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="messageput" android:text="Receive" /> </LinearLayout> </LinearLayout>
message_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/layout_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:background="@drawable/message_left" > <TextView android:id="@+id/message_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_margin="10dp" android:textColor="#fff" /> </LinearLayout> <LinearLayout android:id="@+id/layout_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:background="@drawable/message_right" > <TextView android:id="@+id/message_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_margin="10dp" android:textColor="#fff" /> </LinearLayout> </LinearLayout>
三.项目源代码：
以上都是布局，下面是源代码部分：
包名统一为：com.test ;
vo：
Message.java:
package com.test.vo; public class Message { public static final int TYPE_RECEIVE = 1; public static final int TYPE_SEND = 2 ; private String content ; private int type ; public Message(String content, int type) { super(); this.content = content; this.type = type; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public int getType() { return type; } public void setType(int type) { this.type = type; } }
util：
MessageAdapter.java:
package com.test.util; 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; import com.test.activity.R; import com.test.vo.Message; public class MessageAdapter extends ArrayAdapter<Message> { private int resourceid ; public MessageAdapter(Context context, int textViewResourceId,List<Message> objects) { super(context, textViewResourceId, objects); // resourceid = textViewResourceId ; } class ViewHolder{ LinearLayout layoutleft ; LinearLayout layoutright ; TextView contentleft ; TextView contentright ; } @Override public View getView(int position, View convertView, ViewGroup parent) { // Message message = getItem(position); View view ; ViewHolder viewholder ; if(convertView == null){ view = LayoutInflater.from(getContext()).inflate(resourceid, null); viewholder = new ViewHolder(); viewholder.layoutleft = (LinearLayout) view.findViewById(R.id.layout_left); viewholder.layoutright = (LinearLayout) view.findViewById(R.id.layout_right); viewholder.contentleft = (TextView) view.findViewById(R.id.message_left); viewholder.contentright = (TextView) view.findViewById(R.id.message_right); view.setTag(viewholder); }else{ view = convertView ; viewholder = (ViewHolder) view.getTag(); } //消息的判断输出 if(message.getType() == message.TYPE_RECEIVE){ //收到消息时 viewholder.layoutright.setVisibility(View.GONE); viewholder.layoutleft.setVisibility(View.VISIBLE); viewholder.contentleft.setText(message.getContent()); }else if(message.getType() == message.TYPE_SEND){ viewholder.layoutleft.setVisibility(View.GONE); viewholder.layoutright.setVisibility(View.VISIBLE); viewholder.contentright.setText(message.getContent()); } return view; } }
activity:
MainActivity.java:
package com.test.activity; 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.view.Window; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; import com.test.util.MessageAdapter; import com.test.vo.Message; public class MainActivity extends Activity { private ListView msglistview ; private EditText messagecontent ; private Button btsend ; private Button btreceive ; private MessageAdapter msgadapter ; private List<Message> msglist = new ArrayList<Message>() ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); //整体布局 initmessages(); msglistview = (ListView) this.findViewById(R.id.msg_list_view); msgadapter = new MessageAdapter(MainActivity.this,R.layout.message_item,msglist); msglistview.setAdapter(msgadapter); //点击形成新布局！ btsend = (Button) this.findViewById(R.id.bt_send); btreceive = (Button) this.findViewById(R.id.bt_receive); messagecontent = (EditText) this.findViewById(R.id.message_content); btsend.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { // String message = messagecontent.getText().toString(); if(!"".equals(message)){ Message newmessage = new Message(message,1); msglist.add(newmessage); //适配器发现数据有变化 msgadapter.notifyDataSetChanged(); //布局重新布局信息！--并且将其放在最下方！ msglistview.setSelection(msglist.size()); messagecontent.setText(""); } } }); } //初始化数据 public void initmessages(){ Message msg1 = new Message("Hi,friend", 1); msglist.add(msg1); Message msg2 = new Message("Hello .Who is that ?", 2); msglist.add(msg2); Message msg3 = new Message("I am Carl .Nice to meet you !", 1); msglist.add(msg3); Message msg4 = new Message("Nice meet you too !", 2); msglist.add(msg4); } //接受消息的重新布局 public void messageput(View view){ int id = view.getId(); switch(id){ case R.id.bt_receive: String msg = messagecontent.getText().toString(); if(!"".equals(msg)){ Message newmsg = new Message(msg,2); msglist.add(newmsg); msgadapter.notifyDataSetChanged(); msglistview.setSelection(msglist.size()); messagecontent.setText(""); } break; } } }
四.项目效果：
最初运行：
编辑消息，选择”send“:
效果图：
再编辑消息，选择”receive“:
效果图如下：
至此，短信消息的发送与接收就完成了！
ps:中间隔了很长时间，才更新博客，大家也都懂得，放假嘛，总要high一下啦！以后一定及时更新博客！！！
