Android UI進階之仿iPhone的tab效果

相信很多人都喜歡iphone 酷炫的界面，雖然Android的原生控件已經足夠漂亮，但是往往不能滿足用戶越來越挑剔的眼光。其實，我們完全可以自己來繪制界面。今天我就來分享下做一個和iphone一樣的tab界面。下面先來看下iphone上的效果

在開始之前，我們必須掌握最基礎的，也就是android中圖形界面的繪制。首先講下簡單圖形的繪制，這裡我們就借繪制這個

的背景部分來講下吧。直接看代碼

[java]

1. 1 public class Itab extends View {
2. 2
3. 3 private Paint mPaint;
4. 4
5. 5 public Itab(Context context, AttributeSet attrs) {//構造器，View下構造器有三種方式，在xml中配置必須實現這種方式
6. 6 super(context, attrs);
7. 7
8. 8 }
9. 9
10. 10 @Override
11. 11 protected void onDraw( Canvas canvas )
12. 12 {
13. 13
14. 14 super.onDraw( canvas );
15. 15
16. 16 mPaint = new Paint( );//創建畫筆
17. 17 mPaint.setStyle( Paint.Style.FILL );//設置畫筆 為實心
18. 18
19. 19 Rect r = new Rect( );//創建一個矩形
20. 20 this.getDrawingRect( r );
21. 21
22. 22 canvas.drawColor( 0xFF000000 );
23. 23 mPaint.setColor( 0xFF434343 );
24. 24 canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );//繪制這個矩形圖形
25. 25 }
26. 26 }

在xml中這樣配置

[c-sharp]

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:background="#C5CCD4FF"
7. >
8. <com.notice520.itab.Itab
9. android:id="@+id/Tabs"
10. android:layout_width="fill_parent"
11. android:layout_height = "49px"
12. android:layout_alignParentBottom = "true"
13. />
14. </RelativeLayout>

這樣就會得到如下的效果，這顯然不是我們想要的。

不過別著急，我們只要在onDraw()這個方法裡面添加如下一段代碼：

[c-sharp]

1. int color = 46;
3. for( int i = 0; i < 24; i++ )
4. {
5. mPaint.setARGB( 255, color, color, color );
6. canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );
7. color--;
8. } 通過循環的繪制，我們就可以得到如下的效果

是不是很簡單呢。圖形繪制中還有一個比較重要的是貼圖的繪制。同樣這個例子，我們在這個背景上繪制一個圖標，非常的簡單，同樣在onDraw()這個方法裡面添加如下代碼

[java]

1. 1 Bitmap icon = BitmapFactory.decodeResource( getResources( ), R.drawable.monitor );
2. 2 Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
3. 3 p.setColor(Color.WHITE);
4. 4 canvas.drawBitmap(icon, 10, 10, p);

代碼非常簡單，第一行獲得圖片資源，第二行第一一個畫筆，同時打開抗鋸齒和過濾，第三行設置畫筆顏色，最後一行繪制圖片。

來看看效果

還不錯吧，當然要實現完全的tab效果，這還是遠遠不夠的。今天就寫到這吧，天冷啊，手都凍僵了，明天或者後天我再接著寫，從而最終實現和iphone一樣的tab，當然也有完全可以替代原生tab的功能。