Android UI-advanced iPhone-like tab Effect

I believe many people like the cool iPhone interface. Although the native control of Android is beautiful enough, it often cannot satisfy users' more and more discerning eyes. In fact, we can draw the interface by ourselves. Today, I will share with you how to create a tab interface that is the same as that of the iPhone. Next let's take a look at the effects on the iPhone.

 

 

Before we start, we must master the most basic, that is, drawing the graphic interface in Android. First, let's talk about how to draw a simple image. Here we will use this

In the Background section. View Code directly

1 public class itab extends view {<br/> 2 <br/> 3 private paint mpaint; <br/> 4 <br/> 5 Public itab (context, attributeset attrs) {// constructor. There are three methods for Constructor under view. This method must be configured in XML. <br/> 6 super (context, attrs ); <br/> 7 <br/> 8} <br/> 9 <br/> 10 @ override <br/> 11 protected void ondraw (canvas) <br/> 12 {<br/> 13 <br/> 14 super. ondraw (canvas); <br/> 15 <br/> 16 mpaint = new paint (); // create a paint brush <br/> 17 mpaint. setstyle (paint. style. fill); // set the paint brush to solid <br/> 18 <br/> 19 rect r = new rect (); // create a rectangle <br/> 20 this. getdrawingrect (r); <br/> 21 <br/> 22 canvas. drawcolor (0xff000000); <br/> 23 mpaint. setcolor (0xff434343); <br/> 24 canvas. drawline (R. left, R. top + 1, R. right, R. top + 1, mpaint); // draw this rectangle <br/> 25} <br/> 26} 

 

Configure in XML as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: Background = "# c5ccd4ff" <br/> <COM. notice520.itab. itab <br/> Android: Id = "@ + ID/tabs" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "49px" <br/> Android: layout_alignparentbottom = "true" <br/> </relativelayout> 

 

This will achieve the following results, which is obviously not what we want.

 

 

But don't worry, we just need to add the following code in the ondraw () method:

 

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

By repeating the graph, we can get the following results:

Is it easy. Another important thing in drawing is Paster. In the same example, it is very simple to draw an icon on the background. The following code is also added to the ondraw () method.

1 bitmap icon = bitmapfactory. decoderesource (getresources (), R. drawable. monitor); <br/> 2 paint P = new paint (paint. anti_alias_flag | paint. filter_bitmap_flag); <br/> 3 p. setcolor (color. white); <br/> 4 canvas. drawbitmap (icon, 10, 10, P );

 

The code is very simple. The first line gets the image resources, the first brush in the second line, the anti-aliasing and filtering are enabled at the same time, the third line sets the paint color, and the last line draws the image.

 

To see the effect

It's not bad. Of course, it's far from enough to achieve the full tab effect. Today, let's write it here. It's cool, and my hands are frozen. I will write it tomorrow or the day after tomorrow, so as to implement the same tab as the iPhone, of course, the native tab function can be completely replaced. If you have any questions, leave a message to discuss them.