Android Development Learning Path--ui Simple Chat interface

Learn a lot of UI knowledge, here to implement a chat interface, first to implement a layout of XML, the code is as follows:

<?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 "&    Gt <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_wid Th= "Match_parent" android:layout_height= "wrap_content" > <edittext android:id= "@+id/input_te XT "android:layout_height=" Wrap_content "android:layout_width=" 0DP "android:layout_weight = "1" android:hint= "Enter what you want to say" android:maxlines= "2"/> <button android:id= "@+id/ Send "android:layout_height=" wrap_content "android:layout_width=" Wrap_content "Android:te xt= "Send"/> </lineArlayout></linearlayout> 

here is mainly the ListView to implement the chat record display, edittext for input information, button to send buttons. The effect is as follows:

Then realize a ListView interface, here to use two ready-made pictures, is *.9.png, that is, 9 Gongge pictures, the main function is to prevent the stretching of the place, where the interface with the bubble, so as long as the middle of the background is good, on both sides do not stretch, Create a new msg_item.xml with the following code:

<?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=" @drawa Ble/left_messages "> <textview android:id=" @+id/left_msg "android:layout_width=" Wrap_con Tent "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:lay Out_gravity= "Right" Android:background= "@drawable/right_messages" > <textview android:id= "@+id/right_msg" Android:la            Yout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "center" android:layout_margin= "10DP"/> </LinearLayout></LinearLayout>

the effect is as follows:

Here's the picture is to find the PNG online, then PS change the size, finally in Android Studio, right click to select New 9-patch picture, and then select the stretched position as shown in:

In this way, the green shows the entire background picture, and then the middle red is where it can be stretched. In contrast to the PNG picture, the *.9.png picture mainly has four weeks of black lines. There is no longer a detailed explanation of the *.9.png pictures.

Then create a new MSG class with the following code:

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

Then there is the adapter, the Msgadapter code is as follows:

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, Textviewresour        CeId, 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;   }} 

Finally, let's implement the Mainactivity code:

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 is You?", msg.type_received);        Msglist.add (MSG1);        msg MSG2 = new msg ("Fine, thank, and you", msg.type_send);        Msglist.add (MSG2);        msg MSG3 = new msg ("I am Fine, too!", msg.type_received);    Msglist.add (MSG3); }}

run a look at the effect, enter some text, and then send:

The above interface has been and a bit similar, then add an avatar, then it will be better? Let's try that. First of all to prepare two pictures of the picture, simply named Head1,head2, where the picture is best to drink chat background of the same height pixels, this example is 45. Then modify the Msg_item.xml file with the following code:

<?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_grav            Ity= "left" android:src= "@drawable/head1"/> <linearlayout android:id= "@+id/left_layout" android:layout_height= "Wrap_content" android:layout_width= "Wrap_content" Android:layout_g Ravity= "left" android:background= "@drawable/left_messages" > <textview android:i D= "@+id/left_msg" anDroid:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_gravit y= "center" android:layout_margin= "10DP" android:textcolor= "#fff"/> </linearlayo ut> </LinearLayout> <linearlayout android:layout_width= "Wrap_content" Android:layout_heigh        t= "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_cont        ENT "android:layout_gravity=" center "android:layout_margin=" 10DP "/> </LinearLayout>        <imageview    Android:id= "@+id/head_right" android:layout_width= "wrap_content" android:layout_height= "Wrap_con Tent "android:src=" @drawable/head2 "/> </LinearLayout></LinearLayout>

here is the main picture of the ImageView and chat record TextView need to be on the same line, so here linearlayout inside again nested linearlayout.

Then modify the Msgadapter code as follows:

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, Textviewresour        CeId, 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; }}

here Viewholder adds Head1 and head2, then gets added to the resource, and adds the display and hidden code.

Picture, the code is ready, then run to see the effect:

Basically, the chat interface is a bit similar. With so much knowledge of the UI, it's easy to develop an interface. The UI learns here first, then continue to learn other knowledge.

Android Development Learning Path--ui Simple Chat interface