歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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;  
  2.        
  3.      forint 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, 1010, p);  

 

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

來看看效果

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

Copyright © Linux教程網 All Rights Reserved