Android UI-advanced iPhone-like tab effect (2)

 

Today, I wrote the tab for the iPhone-like effect. For this example, refer to the Code shared by rolle3k abroad. Thanks to rolle3k.

In the previous blog, we wrote an itab class, which introduced the background rendering and a simple map method. We continue to complete the itab class and put it inside the mainacitvity (inheriting activity) class. In this way, the whole program only needs one class. (For the previous blog example, you need to create a subclass of the activity as lanucher ). Let's talk about the code.

Public static class itab extends view <br/>{< br/> private paintmpaint; // background paint <br/> private paintmactivetextpaint; // select <br/> private paintminactivetextpaint; // unselected <br/> private arraylist <tabmember> mtabmembers; // tab member <br/> private intmactivetab; <br/> private ontabclicklistenermontabclicklistener = NULL; </P> <p> Public itab (context, attributeset attrs) // constructor, in which the paint brush is initialized <br/>{< br/> super (Conte XT, attrs); </P> <p> mtabmembers = new arraylist <mainactivity. itab. tabmember> (); </P> <p> mpaint = new paint (); <br/> mactivetextpaint = new paint (); <br/> minactivetextpaint = new paint (); </P> <p> mpaint. setstyle (paint. style. fill); <br/> mpaint. setcolor (0xffffff00); <br/> mpaint. setantialias (true); </P> <p> mactivetextpaint. settextalign (align. center); <br/> mactivetextpaint. settextsize (12); <br/> MACT Ivetextpaint. setcolor (0 xffffffff); <br/> mactivetextpaint. setantialias (true); </P> <p> minactivetextpaint. settextalign (align. center); <br/> minactivetextpaint. settextsize (12); <br/> minactivetextpaint. setcolor (0xff999999); <br/> minactivetextpaint. setantialias (true); <br/> mactivetab = 0; </P> <p >}</P> <p> @ override <br/> protected void ondraw (canvas) <br/>{< br/> super. ondraw (canvas); </P> <P> rect r = new rect (); <br/> This. getdrawingrect (r); </P> <p> // calculate the number of pixels each tag can use. <br/> int singletabwidth = R. right/(mtabmembers. size ()! = 0? Mtabmembers. size (): 1); </P> <p> // draw the background <br/> canvas. drawcolor (0xff000000); <br/> mpaint. setcolor (0xff434343); <br/> canvas. drawline (R. left, R. top + 1, R. right, R. top + 1, mpaint); </P> <p> int color = 46; </P> <p> for (INT I = 0; I <24; I ++) <br/>{< br/> mpaint. setargb (255, color); <br/> canvas. drawrect (R. left, R. top + I + 1, R. right, R. top + I + 2, mpaint); <br/> color --; <Br/>}< br/> // draw each tab <br/> for (INT I = 0; I <mtabmembers. size (); I ++) <br/>{< br/> tabmember = mtabmembers. get (I); </P> <p> bitmap icon = bitmapfactory. decoderesource (getresources (), tabmember. geticonresourceid (); <br/> bitmap iconcolored = bitmap. createbitmap (icon. getwidth (), icon. getheight (), bitmap. config. argb_8888); <br/> paint P = new paint (paint. anti_alias_flag | Paint. filter_bitmap_flag); <br/> canvas iconcanvas = new canvas (); <br/> iconcanvas. setbitmap (iconcolored); </P> <p> If (mactivetab = I) // draws a white-blue gradient for the selected tab, draws a gray-colored gradient. <br/>{< br/> P. setshader (New lineargradient (0, 0, icon. getwidth (), icon. getheight (), <br/> 0 xffffffff, 0xff54c7e1, shader. tilemode. clamp); <br/>}< br/> else {<br/> P. setshader (New lineargradient (0, 0, icon. getwidt H (), icon. getheight (), <br/> 0xffa2a2a2, 0xff5f5f5f, shader. tilemode. clamp); <br/>}</P> <p> iconcanvas. drawrect (0, 0, icon. getwidth (), icon. getheight (), P); </P> <p> for (INT x = 0; x <icon. getwidth (); X ++) <br/>{< br/> for (INT y = 0; y <icon. getheight (); y ++) <br/>{< br/> If (icon. getpixel (x, y) & 0xff000000) = 0) <br/>{< br/> iconcolored. setpixel (X, Y, 0x00000000); <br/>}< br />}< Br/>}</P> <p> // calculate the position of the tab image <br/> int tabimgx = singletabwidth * I + (singletabwidth/2-icon. getwidth ()/2); </P> <p> // draw the selected and unselected tab image <br/> If (mactivetab = I) <br/>{< br/> mpaint. setargb (37,255,255,255); <br/> canvas. drawroundrect (New rectf (R. left + singletabwidth * I + 3, R. top + 3, <br/> r. left + singletabwidth * (I + 1)-3, R. bottom-2), 5, 5, mpaint); <br/> can Vas. drawbitmap (iconcolored, tabimgx, R. top + 5, null); <br/> canvas. drawtext (tabmember. gettext (), <br/> singletabwidth * I + (singletabwidth/2), R. bottom-2, mactivetextpaint); <br/>} else <br/>{< br/> canvas. drawbitmap (iconcolored, tabimgx, R. top + 5, null); <br/> canvas. drawtext (tabmember. gettext (), <br/> singletabwidth * I + (singletabwidth/2), R. bottom-2, minactivetextpai NT ); <br/>}< br/>/* <br/> * Touch events <br/> */<br/> @ override <br/> Public Boolean ontouchevent (motionevent) <br/>{< br/> rect r = new rect (); <br/> This. getdrawingrect (r); <br/> float singletabwidth = R. right/(mtabmembers. size ()! = 0? Mtabmembers. size (): 1); </P> <p> int pressedtab = (INT) (motionevent. getx ()/singletabwidth)-(motionevent. getx ()/singletabwidth) % 1); </P> <p> mactivetab = pressedtab; </P> <p> If (this. montabclicklistener! = NULL) <br/>{< br/> This. montabclicklistener. ontabclick (mtabmembers. get (pressedtab ). GETID (); <br/>}</P> <p> This. invalidate (); </P> <p> return Super. ontouchevent (motionevent); <br/>}</P> <p> void addtabmember (tabmember) <br/>{< br/> mtabmembers. add (tabmember); <br/>}</P> <p> void setontabclicklistener (ontabclicklistener) <br/>{ <br/> montabclicklistener = ontabclicklistener; <br/>}</P> <p> Public static class tabmember // process tab members <br/>{< br/> protected intmid; <br/> protected stringmtext; <br/> protected int miconresourceid; </P> <p> tabmember (int id, string text, int iconresourceid) <br/>{< br/> mid = ID; <br/> miconresourceid = iconresourceid; <br/> mtext = text; <br/>}</P> <p> Public int GETID () <br/>{< br/> return mid; <br/>}</P> <p> Public String gettext () <br/>{< br/> return mtext; <br/>}</P> <p> Public int geticonresourceid () <br/>{< br/> return miconresourceid; <br/>}</P> <p> Public void settext (string text) <br/>{< br/> mtext = text; <br/>}</P> <p> Public void seticonresourceid (INT iconresourceid) <br/> {<br/> miconresourceid = iconresourceid; <br/>}</P> <p> Public static interface ontabclicklistener <br/>{< br/> public abstract void ontabclick (INT Tabid ); <br/>}< br/>}This is two static classes in the mainactivity class. You can understand the comments I wrote and the content of the previous blog. The Touch event is also defined to achieve different la s by clicking tab. Next, we only need to add it on our layout. We can continue to write an internal class.

 

Public static class irelativelayout extends relativelayout // note, or declare it as static <br/>{< br/> private paintmpaint; <br/> private rectmrect; </P> <p> Public irelativelayout (context, attributeset attrs) <br/>{< br/> super (context, attrs ); </P> <p> mrect = new rect (); <br/> mpaint = new paint (); </P> <p> mpaint. setstyle (paint. style. fill_and_stroke); <br/> mpaint. setcolor (0xffcbd2d8); <br/>}</P> <p> @ override <br/> protected void ondraw (canvas) <br/>{< br/> super. ondraw (canvas); <br/> canvas. drawcolor (0xffc5ccd4); </P> <p> This. getdrawingrect (mrect); </P> <p> for (INT I = 0; I <mrect. right; I + = 7) // draw the texture of the screen background <br/>{< br/> canvas. drawrect (mrect. left + I, mrect. top, mrect. left + I + 2, mrect. bottom, mpaint); <br/>}</P> <p> Private Static final int tab_highlight = 1; <br/> Private Static final int tab_chat = 2; <br/> Private Static final int tab_loopback = 3; <br/> Private Static final int tab_redo = 4; <br/> private itabmtabs; <br/> private linearlayout mtablayout_one; <br/> private linearlayout layout; <br/> private linearlayout mtablayout_three; <br/> private linearlayout layout; <br/> private linearlayout mtablayout_five; </P> <p> @ override <br/> Public void oncreate (bundle savedinstancestate) <br/>{< br/> super. oncreate (savedinstancestate); <br/> setcontentview (R. layout. main); </P> <p> mtabs = (itab) This. findviewbyid (R. id. tabs); <br/> mtablayout_one = (linearlayout) This. findviewbyid (R. id. tablayout_one); <br/> mtablayout_two = (linearlayout) This. findviewbyid (R. id. tablayout_two); <br/> mtablayout_three = (linearlayout) This. findviewbyid (R. id. tablayout_three); <br/> mtablayout_four = (linearlayout) This. findviewbyid (R. id. tablayout_four); <br/> mtablayout_five = (linearlayout) This. findviewbyid (R. id. tablayout_four); // you can skip the fifth interface. </P> <p> mtabs. addtabmember (New tabmember (tab_highlight, "featured", R. drawable. jingxuan); <br/> mtabs. addtabmember (New tabmember (tab_chat, "category", R. drawable. CAT); <br/> mtabs. addtabmember (New tabmember (tab_loopback, "Top 25", R. drawable. rank); <br/> mtabs. addtabmember (New tabmember (tab_redo, "Search", R. drawable. search); <br/> mtabs. addtabmember (New tabmember (tab_redo, "Update", R. drawable. download); // Add a tab </P> <p>/* display the first page */<br/> mtablayout_one.setvisibility (view. visible); <br/> mtablayout_two.setvisibility (view. gone); <br/> mtablayout_three.setvisibility (view. gone); <br/> mtablayout_four.setvisibility (view. gone); </P> <p> mtabs. setontabclicklistener (New ontabclicklistener () {<br/> @ override <br/> Public void ontabclick (INT Tabid) // click events <br/>{< br/> If (Tabid = tab_highlight) <br/>{< br/> mtablayout_one.setvisibility (view. visible); <br/> mtablayout_two.setvisibility (view. gone); <br/> mtablayout_three.setvisibility (view. gone); <br/> mtablayout_four.setvisibility (view. gone); <br/>}else if (Tabid = tab_chat) <br/>{< br/> mtablayout_one.setvisibility (view. gone); <br/> mtablayout_two.setvisibility (view. visible); <br/> mtablayout_three.setvisibility (view. gone); <br/> mtablayout_four.setvisibility (view. gone); <br/>}else if (Tabid = tab_loopback) <br/>{< br/> mtablayout_one.setvisibility (view. gone); <br/> mtablayout_two.setvisibility (view. gone); <br/> mtablayout_three.setvisibility (view. visible); <br/> mtablayout_four.setvisibility (view. gone); <br/>}else if (Tabid = tab_redo) <br/>{< br/> mtablayout_one.setvisibility (view. gone); <br/> mtablayout_two.setvisibility (view. gone); <br/> mtablayout_three.setvisibility (view. gone); <br/> mtablayout_four.setvisibility (view. visible); <br/>}< br/>}); <br/>}The ondraw () method achieves the background texture effect. In combination with the background color configuration in XML, the effect is shown in:

Isn't it very beautiful? The rest is configured in XML

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <view xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> class = "com. notice520.mainactivity $ irelativelayout "<br/> Android: Orientation =" vertical "<br/> Android: layout_width =" fill_parent "<br/> Android: layout_height = "fill_parent" <br/> Android: Background = "# c5ccd4ff" <br/> <linearlayout <br/> Android: id = "@ + ID/tablayout_one" <br/> Android: layout_width = "fill_parent" <br/> and Roid: layout_height = "fill_parent" <br/> Android: layout_above = "@ + ID/tabs" <br/> <scrollview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content"> <br/> <relativelayout <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: visibility = "visible" <br/> <textview <br/> Android: textcolor = "@ Android: color/Black "<br/> Android: Texts Ize = "30sp" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: text = "Happy spring festival !! "<Br/> </relativelayout> <br/> </scrollview> <br/> </linearlayout> </P> <p> <linearlayout <br/> Android: id = "@ + ID/tablayout_two" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: layout_above = "@ + ID/tabs" <br/> <scrollview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content"> <br/> <relativelayout <br/> Android: layout_width = "Fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: visibility = "visible" <br/> Android: layout_above = "@ + ID/tabs" <br/> <button <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: text = "I wish you a successful career! "<Br/> Android: textsize = "30sp" <br/> </relativelayout> <br/> </scrollview> <br/> </linearlayout> <br/> <linearlayout <br/> Android: id = "@ + ID/tablayout_three" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: layout_above = "@ + ID/tabs" <br/> <scrollview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content"> <br/> <relativelayout <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: visibility = "visible" <br/> Android: layout_above = "@ + ID/tabs" <br/> <imageview </P> <p> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: src = "@ drawable/newq" <br/> </relativelayout> <br/> </scrollview> <br/> </linearlayout> <br /> <linearlayout <br/> Android: id = "@ + ID/tablayout_four" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: layout_above = "@ + ID/tabs" <br/> <scrollview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content"> <br/> <relativelayout <br/> Android: Id = "@ + ID/tablayout_four" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: visibility = "visible" <br/> Android: layout_above = "@ + ID/tabs" <br/> <textview <br/> Android: textcolor = "@ Android: color/Black "<br/> Android: layout_width =" wrap_content "<br/> Android: layout_height =" wrap_content "<br/> Android: text =" very simple, yes "<br/> </relativelayout> <br/> </scrollview> <br/> </linearlayout> <br/> <view <br/> class = "com. notice5domainmainactivity $ itab "<br/> Android: Id =" @ + ID/tabs "<br/> Android: layout_width =" fill_parent "<br/> Android: layout_height = "49px" <br/> Android: layout_alignparentbottom = "true" <br/> </View> <br/> 

Let's see the final result.

Is it good? If you have any questions, you can leave a message.