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

相信很多人都喜欢iphone 酷炫的界面，虽然android的原生控件已经足够漂亮，但是往往不能满足用户越来越挑剔的眼光。

其实，我们完全可以自己来绘制界面。

今天我就来分享下做一个和iphone一样的tab界面。

下面先来看下iphone上的效果

在开始之前，我们必须掌握最基础的，也就是android中图形界面的绘制。

首先讲下简单图形的绘制，这里我们就借绘制这个的背景部分来讲下吧。

直接看代码1publicclass Itab extends View {23private Paint mPaint;45public Itab(Context context, AttributeSet attrs) {//构造器，View下构造器有三种方式，在xml中配置必须实现这种方式6super(context, attrs);78 }910 @Override11protectedvoid onDraw( Canvas canvas )12 {1314super.onDraw( canvas );1516 mPaint =new Paint( );//创建画笔17 mPaint.setStyle( Paint.Style.FILL );//设置画笔 为实心1819 Rect r =new Rect( );//创建一个矩形20this.getDrawingRect( r );2122 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--; }

通过循环的绘制，我们就可以得到如下的效果

是不是很简单呢。

图形绘制中还有一个比较重要的是贴图的绘制。

同样这个例子，我们在这个背景上绘制一个图标，非常的简单，同样在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);

代码非常简单，第一行获得图片资源，第二行第一一个画笔，同时打开抗锯齿和过滤，第三行设置画笔颜色，最后一行绘制图片。

来看看效果

还不错吧，当然要实现完全的tab效果，这还是远远不够的。

今天就写到这吧，天冷啊，手都冻僵了，明天或者后天我再接着写，从而最终实现和iphone一样的tab，当然也有完全可以替代原生tab的功能。

大家有什么问题可以留言讨论哈。