Android Serial 5-Write a WeChat chat interface

1. Make a Nine-Patch picture

1. Meaning: A specially processed png image that can specify which areas can be stretched and which areas cannot be stretched.

2. First make a layout

 

<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:background="#d8e0e8"

    android:orientation="vertical" >

   

    <ListView

        android:id="@+id/msg_list_view"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:divider="#0000" >

    </ListView>

   

​

  <LinearLayout

      android:layout_width="match_parent"

      android:layout_height = "wrap_content">

     

      <EditText

          android:id="@+id/input_text"

          android:layout_width="0dp"

          android:layout_height="wrap_content"

          android:layout_weight="1"

          android:hint="Type something here"

          android:maxLines="2"/>

     

      <Button

          android:id="@+id/send"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:text="Send"/>

     

  </LinearLayout>

​

</LinearLayout>

 

​

The basic structure here is to build a linear desktop, and then add dialog boxes, input boxes and a button

The background image of the dialog we created is to use a style similar to WeChat

 

 

Then, before designing the main program, rewrite an adapter

 

package com.example.uibestpractice;

​

import android.widget.ArrayAdapter;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.view.LayoutInflater;

import android.content.Context;

import java.util.*;

import android.view.ViewGroup;

import android.view.View;

​

​

public class MsgAdapter extends ArrayAdapter<Msg>{

 

  private int resourceId;

 

  public MsgAdapter(Context context,int textViewResourceId,List<Msg> objects) {

    super(context,textViewResourceId,objects);

    resourceId = textViewResourceId;

  }

 

  @Override

  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_RECEICED) { 

      // If it is a received message, display the message layout on the left and hide the message layout on the right

      viewHolder.leftLayout.setVisibility (View.VISIBLE); 

      viewHolder.rightLayout.setVisibility (View.GONE); 

      viewHolder.leftMsg.setText (msg.getContent ()); 

    } else  if (msg.getType () == Msg.TYPE_SENT) { 

      // If it is an outgoing message, display the message layout on the right and hide the message layout on the left 

      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;

  }

}

 

​

The general meaning of this adapter is that the information sent by the other party is left-aligned, and the information sent by itself is right-aligned. It can be seen that the first two constants are used to indicate whether the information was sent or sent in the past; internal class Represents the code for left and right alignment

 

Then write the main program to adapt

package com.example.uibestpractice;

​

import android.app.Activity;

​

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.Window;

import android.widget.Button;

import android.widget.ListView;

import android.widget.EditText;

import java.util.*;

​

public class MainActivity extends Activity {

 

  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);

    requestWindowFeature(Window.FEATURE_NO_TITLE);

    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.setAdapter(adapter);

    send.setOnClickListener(new OnClickListener() {

      @Override

      public void onClick(View v) {

        String content = inputText.getText().toString();

        if(!"".contentEquals(content)) {

          Msg msg = new Msg(content,Msg.TYPE_SENT);

          msgList.add(msg);

          adapter.notifyDataSetChanged();//当有新消息时候，刷新ListView中的显示

          msgListView.setSelection(msgList.size());// Locate the ListView to the last line 

          inputText.setText ( ""); // Empty the content in the input box 

        } 

      } 

    });    

  } 

  private  void initMsgs () { 

    Msg msg1 = new Msg ("Hello guy." , Msg. TYPE_RECEICED); 

    msgList.add (msg1); 

    Msg msg2 = new Msg ("Hello. Who id that" , Msg.TYPE_SENT); 

    msgList.add (msg2); 

    Msg msg3 = new Msg ("jsdlf" , Msg.TYPE_RECEICED) ; 

    msgList.add (the Msg3);    

  } 

}

 

 

 

Second, the source code:

1. Project address

https://github.com/ruigege66/Android/tree/master/UIBestPractice

2.CSDN：https://blog.csdn.net/weixin_44630050

3. Blog Park: https://www.cnblogs.com/ruigege0000/

4. Welcome to pay attention to WeChat public number: Fourier transform, personal public number, only used for learning and communication, reply "gift pack" in the background, get big data learning materials