在android編程中做成仿iphone的tab效果

《KOF拳皇》iPhone|iPad1.01.00 最新版[ipa]

• 類型：ios動作射擊大�。�374.3M語言：中文 評分：6.9
• 標(biāo)簽：

立即下載

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

在開始之前，我們必須掌握最基礎(chǔ)的，也就是android中圖形界面的繪制。首先講下簡單圖形的繪制，這里我們就借繪制這個的背景部分來講下吧。直接看代碼
1publicclass Itab extends View {
2
3private Paint mPaint;
4
5public Itab(Context context, AttributeSet attrs) {//構(gòu)造器，View下構(gòu)造器有三種方式，在xml中配置必須實現(xiàn)這種方式
6 super(context, attrs);
7
8    }
9
10    @Override
11protectedvoid onDraw( Canvas canvas )
12    {
13
14super.onDraw( canvas );
15
16        mPaint =new Paint( );//創(chuàng)建畫筆
17        mPaint.setStyle( Paint.Style.FILL );//設(shè)置畫筆 為實心
18
19        Rect r =new Rect( );//創(chuàng)建一個矩形
20this.getDrawingRect( r );
21
22        canvas.drawColor( 0xFF000000 );
23        mPaint.setColor( 0xFF434343 );
24        canvas.drawLine( r.left, r.top +1, r.right, r.top +1, mPaint );//繪制這個矩形圖形
25    }
26}

 在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--;
        }

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

是不是很簡單呢。圖形繪制中還有一個比較重要的是貼圖的繪制。同樣這個例子，我們在這個背景上繪制一個圖標(biāo)，非常的簡單，同樣在onDraw()這個方法里面添加如下代碼
1        Bitmap icon = BitmapFactory.decodeResource( getResources( ), R.drawable.monitor );
2        Paint p =new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
3        p.setColor(Color.WHITE);   
4        canvas.drawBitmap(icon, 10, 10, p);

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

來看看效果

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