Android imitation QQ Homepage

This section describes the implementation of the QQ homepage. Let's take a look at the official website:

You can click to switch between friends and groups or slide to switch between them. Therefore, two methods must be used at the same time during implementation. "Session" and "friend" can be written using buttons, radiobutton, textview, and many methods. Here I chose textview. In addition, the textview must support color switching. The default value is dark white, and the page card stays in white. In general, it is relatively simple. Let's take a look at the XML layout file:

<? XML version = "1.0" encoding = "UTF-8"?> <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" tools: context = ". mainqqactivity "> <relativelayout Android: Id =" @ + ID/headlayout "Android: layout_width =" match_parent "Android: layout_height =" wrap_content "Android: Background =" @ draw Able/chat_bottom_send_pressed "> <imageview Android: Id =" @ + ID/stateimage "Android: layout_width =" 13dp "Android: layout_height =" 13dp "Android: layout_torightof = "@ + ID/nametext" Android: layout_marginleft = "10dp" Android: layout_centerinparent = "true" Android: contentdescription = "WQ" Android: src = "@ drawable/onlinestatus_online"/> <imageview Android: Id = "@ + ID/faceimage" Android: layout_width = "40dp" Android: layou T_height = "40dp" Android: layout_marginleft = "6dp" Android: layout_margintop = "10dp" Android: layout_alignparentleft = "true" Android: layout_centervertical = "true" Android: src = "@ drawable/QQ"/> <textview Android: Id = "@ + ID/nametext" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_centervertical = "true" Android: layout_marginleft = "14dp" Android: layout_torightof = "@ + ID/face Image "Android: text =" JY "Android: textcolor =" @ color/color_bai "Android: textsize = "18dp"/> </relativelayout> // This layout is the top profile, name, and status layout. Of course, you can also use linearlayout. <Linearlayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: Background = "@ drawable/login_moremenu_back" Android: orientation = "vertical"> <linearlayout // This linearlayout is used to display four titles: Android: Id = "@ + ID/bodylayout" Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: Background = "@ drawable/login_moremenu_back" Android: Orientation = "horizontal"> <textview Android: Id = "@ + ID/speaktext" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_marginbottom = "5dp" Android: layout_margintop = "5dp" Android: layout_weight = "1" Android: gravity = "center" Android: text = "session" Android: textcolor = "@ drawable/text_color" Android: textsize = "18dp"/> <textview Android: id = "@ + ID/fridenttext" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_marginbottom = "5dp" Android: layout_margintop = "5dp" Android: layout_weight = "1" Android: gravity = "center" Android: text = "friends" Android: textcolor = "@ drawable/text_color" Android: textsize = "18dp"/> <textview Android: Id = "@ + ID/grouptext" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_marginbottom = "5dp" Android: layout_margintop = "5dp" Android: layout_weight = "1" Android: gravity = "center" Android: text = "group" Android: textcolor = "@ drawable/text_color" Android: textsize = "18dp"/> <textview Android: Id = "@ + ID/changetext" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_marginbottom = "5dp" Android: layout_margintop = "5dp" Android: layout_weight = "1" Android: gravity = "center" Android: TEXT = "dynamic" Android: textcolor = "@ drawable/text_color" Android: textsize = "18dp"/> </linearlayout> <imageview // This is the following horizontal bar image Android: id = "@ + ID/cursor" Android: layout_width = "50dp" Android: layout_height = "6dp" Android: layout_marginleft = "15dp" Android: src = "@ drawable/meitu"/> </linearlayout> <android. support. v4.view. viewpager // not explained. It is used to slide the page card Android: Id = "@ + ID/vpager" Android: layout_width = "wrap_content" Android: layout_height = "0dp" Android: layout_gravity = "center" Android: layout_weight = "1.0" Android: Background = "#000000" Android: flipinterval = "30" Android: persistentdrawingcache = "Animation"/> </linearlayout>

Take a look at the activity code:

Package COM. example. imitateqq; import Java. util. arraylist; import Java. util. list; import android. app. activity; import android. graphics. bitmapfactory; import android. graphics. matrix; import android. OS. bundle; import android. support. v4.view. pageradapter; import android. support. v4.view. viewpager; import android. support. v4.view. viewpager. onpagechangelistener; import android. util. displaymetrics; import android. view. layoutinflater; import android. view. view; import android. view. window; import android. view. view. onclicklistener; import android. view. animation. animation; import android. view. animation. translateanimation; import android. view. viewgroup; import android. widget. imageview; import android. widget. textview; public class mainqqactivity extends activity {private viewpager; private imageview; private textview textview1, textview2, textview3, textview4; private view view1, view2, view3, view4; private list <View> views; private int offset = 0; // animation image offset private int currindex = 0; // the current page card number private int bmp w; // animation Image Width @ overrideprotected void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); this. requestwindowfeature (window. feature_no_title); setcontentview (R. layout. mainqq); initview (); initlistener ();} private void initview () {viewpager = (viewpager) findviewbyid (R. id. vpager); imageview = (imageview) findviewbyid (R. id. cursor); textview1 = (textview) findviewbyid (R. id. speaktext); textview2 = (textview) findviewbyid (R. id. fridenttext); textview3 = (textview) findviewbyid (R. id. grouptext); textview4 = (textview) findviewbyid (R. id. changetext); layoutinflater = getlayoutinflater (); view1 = layoutinflater. inflate (R. layout. qqtab_1, null); view2 = layoutinflater. inflate (R. layout. qqtab_2, null); view3 = layoutinflater. inflate (R. layout. qqtab_3, null); view4 = layoutinflater. inflate (R. layout. qqtab_4, null); views = new arraylist <View> (); views. add (view1); views. add (view2); views. add (view3); views. add (view4); bmp w = bitmapfactory. decoderesource (getresources (), R. drawable. a ). getwidth (); displaymetrics = new displaymetrics (); getwindowmanager (). getdefadisplay display (). getmetrics (displaymetrics); int screenw = displaymetrics. widthpixels; offset = (screenw/4-bmp w)/2; matrix = new matrix (); matrix. posttranslate (screenw, 0); imageview. setimagematrix (matrix);} private void initlistener () {textview1.setonclicklistener (New myonclicklistener (0); listener (New myonclicklistener (1); listener (New myonclicklistener (2 )); textview4.setonclicklistener (New myonclicklistener (3); viewpager. setadapter (New mypageradapter (Views); viewpager. setonpagechangelistener (New myonpagechangelistener (); viewpager. setcurrentitem (0); textview1.settextcolor (getresources (). getcolor (R. color. color_bai);} private class mypageradapter extends pageradapter {private list <View> mlistviews; Public mypageradapter (list <View> mlistviews) {This. mlistviews = mlistviews;} @ overridepublic void destroyitem (viewgroup container, int position, object) {container. removeview (mlistviews. get (position) ;}@ overridepublic object instantiateitem (viewgroup container, int position) {container. addview (mlistviews. get (position); Return mlistviews. get (position) ;}@ overridepublic int getcount () {return mlistviews. size () ;}@ overridepublic Boolean isviewfromobject (view arg0, object arg1) {return arg0 = arg1 ;}} private class myonpagechangelistener implements onpagechangelistener {int one = offset * 2 + BMP; // page Card 1-> page Card 2 offset public void onpagescrollstatechanged (INT arg0) {} public void onpagescrolled (INT arg0, float arg1, int arg2) {} public void onpageselected (INT arg0) {animation = new translateanimation (one * currindex, one * arg0, 0, 0); currindex = arg0; animation. setfillafter (true); // true: the image is parked at the animation end position. setduration (300); imageview. startanimation (animation); Switch (currindex) {Case 0: textview1.settextcolor (getresources (). getcolor (R. color. color_bai); textview2.settextcolor (getresources (). getcolor (R. color. title_bg); textview3.settextcolor (getresources (). getcolor (R. color. title_bg); textview4.settextcolor (getresources (). getcolor (R. color. title_bg); break; Case 1: textview2.settextcolor (getresources (). getcolor (R. color. color_bai); textview1.settextcolor (getresources (). getcolor (R. color. title_bg); textview3.settextcolor (getresources (). getcolor (R. color. title_bg); textview4.settextcolor (getresources (). getcolor (R. color. title_bg); break; Case 2: textview3.settextcolor (getresources (). getcolor (R. color. color_bai); textview2.settextcolor (getresources (). getcolor (R. color. title_bg); textview1.settextcolor (getresources (). getcolor (R. color. title_bg); textview4.settextcolor (getresources (). getcolor (R. color. title_bg); break; Case 3: textview4.settextcolor (getresources (). getcolor (R. color. color_bai); textview2.settextcolor (getresources (). getcolor (R. color. title_bg); textview3.settextcolor (getresources (). getcolor (R. color. title_bg); textview1.settextcolor (getresources (). getcolor (R. color. title_bg); default: Break ;}} private class myonclicklistener implements onclicklistener {private int Index = 0; Public myonclicklistener (int I) {Index = I ;} public void onclick (view v) {viewpager. setcurrentitem (INDEX); Switch (INDEX) {Case 0: textview1.settextcolor (getresources (). getcolor (R. color. color_bai); textview2.settextcolor (getresources (). getcolor (R. color. title_bg); textview3.settextcolor (getresources (). getcolor (R. color. title_bg); textview4.settextcolor (getresources (). getcolor (R. color. title_bg); break; Case 1: textview2.settextcolor (getresources (). getcolor (R. color. color_bai); textview1.settextcolor (getresources (). getcolor (R. color. title_bg); textview3.settextcolor (getresources (). getcolor (R. color. title_bg); textview4.settextcolor (getresources (). getcolor (R. color. title_bg); break; Case 2: textview3.settextcolor (getresources (). getcolor (R. color. color_bai); textview2.settextcolor (getresources (). getcolor (R. color. title_bg); textview1.settextcolor (getresources (). getcolor (R. color. title_bg); textview4.settextcolor (getresources (). getcolor (R. color. title_bg); break; Case 3: textview4.settextcolor (getresources (). getcolor (R. color. color_bai); textview2.settextcolor (getresources (). getcolor (R. color. title_bg); textview3.settextcolor (getresources (). getcolor (R. color. title_bg); textview1.settextcolor (getresources (). getcolor (R. color. title_bg); default: break ;}}}}

Finally, let's take a look:

This basically applies to the UI of QQ, which will be introduced into the server to implement the communication function. Of course, there are still a lot of UIS to write, such as chat pages, setting pages, and so on, and then write them when they are used. Thank you for your attention!