相信很多人都喜歡iphone 酷炫的界面,雖然android的原生控件已經足夠漂亮,但是往往不能滿足用戶越來越挑剔的眼光。其實,我們完全可以自己來繪製界面。今天我就來分享下做一個和iphone一樣的tab界面。下面先來看下iphone上的效果。
在開始之前,我們必須掌握最基礎的,也就是android中圖形界面的繪製。首先講下簡單圖形的繪製,這裏我們就借繪製這個的背景部分來講下吧。直接看代碼
- public class Itab extends View {
- private Paint mPaint;
- public Itab(Context context, AttributeSet attrs) {//構造器,View下構造器有三種方式,在xml中配置必須實現這種方式
- super(context, attrs);
- }
- @Override
- protected void onDraw( Canvas canvas )
- {
- super.onDraw( canvas );
- mPaint = new Paint( );//創建畫筆
- mPaint.setStyle( Paint.Style.FILL );//設置畫筆 爲實心
- Rect r = new Rect( );//創建一個矩形
- this.getDrawingRect( r );
- canvas.drawColor( 0xFF000000 );
- mPaint.setColor( 0xFF434343 );
- canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );//繪製這個矩形圖形
- }
- }
在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>
這樣就會得到如下的效果,這顯然不是我們想要的。
不過彆着急,我們只要在onDraw()這個方法裏面添加如下一段代碼:
- 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--;
- }
通過循環的繪製,我們就可以得到如下的效果
是不是很簡單呢。圖形繪製中還有一個比較重要的是貼圖的繪製。同樣這個例子,我們在這個背景上繪製一個圖標,非常的簡單,同樣在onDraw()這個方法裏面添加如下代碼
- 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);
代碼非常簡單,第一行獲得圖片資源,第二行第一一個畫筆,同時打開抗鋸齒和過濾,第三行設置畫筆顏色,最後一行繪製圖片。
來看看效果
還不錯吧,當然要實現完全的tab效果,這還是遠遠不夠的。今天就寫到這吧,天冷啊,手都凍僵了,明天或者後天我再接着寫,從而最終實現和iphone一樣的tab,當然也有完全可以替代原生tab的功能。大家有什麼問題可以留言討論哈。