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

在開始之前，我們必須掌握最基礎(chǔ)的，也就是android中圖形界面的繪制。首先講下簡(jiǎn)單圖形的繪制，這里我們就借繪制這個(gè) 的背景部分來講下吧。直接看代碼

public class Itab extends View {   
     private Paint mPaint;   
     public Itab(Context context, AttributeSet attrs) {//構(gòu)造器，View下構(gòu)造器有三種方式，在xml中配置必須實(shí)現(xiàn)這種方式   
     super(context, attrs);   
     }   
    @Override  
     protected void onDraw( Canvas canvas ){  
         super.onDraw( canvas );  
         mPaint = new Paint( );//創(chuàng)建畫筆17            
         mPaint.setStyle( Paint.Style.FILL );//設(shè)置畫筆 為實(shí)心  
         Rect r = new Rect( );//創(chuàng)建一個(gè)矩形  
         this.getDrawingRect( r );  
         canvas.drawColor( 0xFF000000 );  
         mPaint.setColor( 0xFF434343 );  
         canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );//繪制這個(gè)矩形圖形  
      }  
 } 

在xml中這樣配置

<?xml version="1.0" encoding="utf-8"?> 
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="#C5CCD4FF"      
> 
   <com.notice520.itab.Itab    
    android:id="@+id/Tabs" 
    android:layout_width="fill_parent" 
    android:layout_height = "49px" 
    android:layout_alignParentBottom= "true"   
  /> 
</RelativeLayout> 

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

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

int color = 46;                  
for( int i = 0; i < 24; i++ ){              
    mPaint.setARGB( 255, color, color, color );          
    canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );             
    color--;         
 } 

通過循環(huán)的繪制，我們就可以得到如下的效果

是不是很簡(jiǎn)單呢。圖形繪制中還有一個(gè)比較重要的是貼圖的繪制。同樣這個(gè)例子，我們?cè)谶@個(gè)背景上繪制一個(gè)圖標(biāo)，非常的簡(jiǎn)單，同樣在onDraw()這個(gè)方法里面添加如下代碼

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

代碼非常簡(jiǎn)單，第一行獲得圖片資源，第二行第一一個(gè)畫筆，同時(shí)打開抗鋸齒和過濾，第三行設(shè)置畫筆顏色，最后一行繪制圖片。

來看看效果

還不錯(cuò)吧，當(dāng)然要實(shí)現(xiàn)完全的tab效果，這還是遠(yuǎn)遠(yuǎn)不夠的。今天就寫到這吧，天冷啊，手都凍僵了，明天或者后天我再接著寫，從而最終實(shí)現(xiàn)和iphone一樣的tab，當(dāng)然也有完全可以替代原生tab的功能。大家有什么問題可以留言討論哈。

【編輯推薦】

Android UI設(shè)計(jì)模式

Android四種Activity的加載模式

Android應(yīng)用之Activity傳參數(shù)與跳轉(zhuǎn)

iPhone音樂播放應(yīng)用軟件UI設(shè)計(jì)實(shí)錄

谷歌Android UI設(shè)計(jì)技巧:新的UI設(shè)計(jì)模式