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就先學到這裡，接下去繼續學習別的知識吧。

Android開發學習之路--UI之簡單聊天介面