android UI进阶之仿iphone的tab效果
public static class iTab extends View { private PaintmPaint;//背景画笔 private PaintmActiveTextPaint;//选中 private PaintmInactiveTextPaint;//未选中 private ArrayList<TabMember>mTabMembers;//tab成员 private intmActiveTab; private OnTabClickListenermOnTabClickListener = null; public iTab( Context context, AttributeSet attrs ) //构造器，在里面初始化画笔{super(context, attrs);mTabMembers = new ArrayList<MainActivity.iTab.TabMember>( );mPaint = new Paint( );mActiveTextPaint = new Paint( );mInactiveTextPaint = new Paint( );mPaint.setStyle( Paint.Style.FILL );mPaint.setColor( 0xFFFFFF00 );mPaint.setAntiAlias(true);mActiveTextPaint.setTextAlign( Align.CENTER );mActiveTextPaint.setTextSize( 12 );mActiveTextPaint.setColor( 0xFFFFFFFF );mActiveTextPaint.setAntiAlias(true);mInactiveTextPaint.setTextAlign( Align.CENTER );mInactiveTextPaint.setTextSize( 12 );mInactiveTextPaint.setColor( 0xFF999999 );mInactiveTextPaint.setAntiAlias(true);mActiveTab = 0;} @Override protected void onDraw( Canvas canvas ) { super.onDraw( canvas ); Rect r = new Rect( ); this.getDrawingRect( r ); // 计算每个标签能使用多少像素 int singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 ); // 绘制背景 canvas.drawColor( 0xFF000000 ); mPaint.setColor( 0xFF434343 ); canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint ); 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--; } // 绘制每一个tab for( int i = 0; i < mTabMembers.size( ); i++ ) { TabMember tabMember = mTabMembers.get( i ); Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) ); Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 ); Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); Canvas iconCanvas = new Canvas( ); iconCanvas.setBitmap( iconColored ); if( mActiveTab == i )//为已选中的tab绘制一个白蓝的渐变色，未选中的绘制一个白灰的渐变色 { p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(), 0xFFFFFFFF, 0xFF54C7E1, Shader.TileMode.CLAMP ) ); } else { p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(), 0xFFA2A2A2, 0xFF5F5F5F, Shader.TileMode.CLAMP ) ); } iconCanvas.drawRect( 0, 0, icon.getWidth( ), icon.getHeight( ), p ); for( int x = 0; x < icon.getWidth(); x++ ) { for( int y = 0; y < icon.getHeight(); y++ ) { if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 ) { iconColored.setPixel( x, y, 0x00000000 ); } } } // 计算tab图片的位置 int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 ); // 绘制tab图片 选中的和未选中的 if( mActiveTab == i ) { mPaint.setARGB( 37, 255, 255, 255 ); canvas.drawRoundRect( new RectF( r.left + singleTabWidth * i + 3, r.top + 3, r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 5, 5, mPaint ); canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null ); canvas.drawText( tabMember.getText( ), singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint ); } else { canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null ); canvas.drawText( tabMember.getText( ), singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint ); } } } /* * 触摸事件 */ @Override public boolean onTouchEvent( MotionEvent motionEvent ) { Rect r = new Rect( ); this.getDrawingRect( r ); float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 ); int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 ); mActiveTab = pressedTab; if( this.mOnTabClickListener != null) { this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) ); } this.invalidate(); return super.onTouchEvent( motionEvent ); } void addTabMember( TabMember tabMember ) { mTabMembers.add( tabMember ); } void setOnTabClickListener( OnTabClickListener onTabClickListener ) { mOnTabClickListener = onTabClickListener; } public static class TabMember//处理tab成员 { protected intmId; protected StringmText; protected int mIconResourceId; TabMember( int Id, String Text, int iconResourceId ) { mId = Id; mIconResourceId = iconResourceId; mText = Text; } public int getId( ) { return mId; } public String getText( ) { return mText; } public int getIconResourceId( ) { return mIconResourceId; } public void setText( String Text ) { mText = Text; } public void setIconResourceId( int iconResourceId ) { mIconResourceId = iconResourceId; } } public static interface OnTabClickListener { public abstract void onTabClick( int tabId ); }}?这是MainActivity这个类里面的两个static类，看我写的注释和上篇博客的内容应该都能理解。其中还定义了触摸事件，实现点击tab出现不同布局的效果。接下来我们只需要在我们的layout上添加就可以了，我们继续写一个内部类
?
?
public static class iRelativeLayout extends RelativeLayout//注意，还是声明为静态{private PaintmPaint;private RectmRect;public iRelativeLayout( Context context, AttributeSet attrs ) {super(context, attrs);mRect = new Rect( );mPaint = new Paint( );mPaint.setStyle( Paint.Style.FILL_AND_STROKE );mPaint.setColor( 0xFFCBD2D8 );}@Overrideprotected void onDraw( Canvas canvas ){super.onDraw( canvas );canvas.drawColor( 0xFFC5CCD4 );this.getDrawingRect( mRect );for( int i = 0; i < mRect.right; i += 7 )//绘制屏幕背景的纹理效果{canvas.drawRect( mRect.left + i, mRect.top, mRect.left + i + 2, mRect.bottom, mPaint );}}}private static final int TAB_HIGHLIGHT = 1;private static final int TAB_CHAT = 2;private static final int TAB_LOOPBACK = 3;private static final int TAB_REDO = 4;private iTabmTabs;private LinearLayout mTabLayout_One;private LinearLayout mTabLayout_Two;private LinearLayout mTabLayout_Three;private LinearLayout mTabLayout_Four;private LinearLayout mTabLayout_Five; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mTabs = (iTab) this.findViewById( R.id.Tabs ); mTabLayout_One = (LinearLayout) this.findViewById( R.id.TabLayout_One ); mTabLayout_Two = (LinearLayout) this.findViewById( R.id.TabLayout_Two ); mTabLayout_Three = (LinearLayout) this.findViewById( R.id.TabLayout_Three ); mTabLayout_Four = (LinearLayout) this.findViewById( R.id.TabLayout_Four ); mTabLayout_Five = (LinearLayout) this.findViewById( R.id.TabLayout_Four );//偷个懒，不写第五个界面啦 mTabs.addTabMember( new TabMember( TAB_HIGHLIGHT, "精选", R.drawable.jingxuan ) ); mTabs.addTabMember( new TabMember( TAB_CHAT, "类别", R.drawable.cat ) ); mTabs.addTabMember( new TabMember( TAB_LOOPBACK, "25大排行榜", R.drawable.rank ) ); mTabs.addTabMember( new TabMember( TAB_REDO, "搜索", R.drawable.search ) ); mTabs.addTabMember( new TabMember( TAB_REDO, "更新", R.drawable.download ) );//添加tab /*初始显示第一个界面*/ mTabLayout_One.setVisibility( View.VISIBLE ); mTabLayout_Two.setVisibility( View.GONE ); mTabLayout_Three.setVisibility( View.GONE ); mTabLayout_Four.setVisibility( View.GONE ); mTabs.setOnTabClickListener( new OnTabClickListener( ) { @Override public void onTabClick( int tabId )//实现点击事件 { if( tabId == TAB_HIGHLIGHT ) { mTabLayout_One.setVisibility( View.VISIBLE ); mTabLayout_Two.setVisibility( View.GONE ); mTabLayout_Three.setVisibility( View.GONE ); mTabLayout_Four.setVisibility( View.GONE ); } else if( tabId == TAB_CHAT ) { mTabLayout_One.setVisibility( View.GONE ); mTabLayout_Two.setVisibility( View.VISIBLE ); mTabLayout_Three.setVisibility( View.GONE ); mTabLayout_Four.setVisibility( View.GONE ); } else if( tabId == TAB_LOOPBACK ) { mTabLayout_One.setVisibility( View.GONE ); mTabLayout_Two.setVisibility( View.GONE ); mTabLayout_Three.setVisibility( View.VISIBLE ); mTabLayout_Four.setVisibility( View.GONE ); } else if( tabId == TAB_REDO ) { mTabLayout_One.setVisibility( View.GONE ); mTabLayout_Two.setVisibility( View.GONE ); mTabLayout_Three.setVisibility( View.GONE ); mTabLayout_Four.setVisibility( View.VISIBLE ); } } }); }?其中onDraw()方法里面实现了背景的纹理效果，配合xml里面背景色的配置，实现了如下图所示的效果：?
是不是非常漂亮呢，剩下的就是在xml里面配置了
?
<?xml version="1.0" encoding="utf-8"?><view xmlns:android="http://schemas.android.com/apk/res/android"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width = "fill_parent"android:layout_height = "fill_parent"android:visibility = "visible"><TextViewandroid:textColor="@android:color/black"android:textSize="30sp"android:layout_width = "wrap_content"android:layout_height = "wrap_content"android:text = "春节快乐!!"/></RelativeLayout></ScrollView></LinearLayout><LinearLayoutandroid:id = "@+id/TabLayout_Two"android:layout_width = "fill_parent"android:layout_height = "fill_parent"android:layout_above = "@+id/Tabs"><ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width = "fill_parent"android:layout_height = "fill_parent"android:visibility = "visible"android:layout_above = "@+id/Tabs"><Buttonandroid:layout_width = "wrap_content"android:layout_height = "wrap_content"android:text = "祝大家事业有成！"android:textSize = "30sp"/></RelativeLayout></ScrollView></LinearLayout><LinearLayoutandroid:id = "@+id/TabLayout_Three"android:layout_width = "fill_parent"android:layout_height = "fill_parent"android:layout_above = "@+id/Tabs"><ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width = "fill_parent"android:layout_height = "fill_parent"android:visibility = "visible"android:layout_above = "@+id/Tabs"><ImageViewandroid:layout_width = "fill_parent"android:layout_height = "fill_parent"android:src="@drawable/newq"/></RelativeLayout></ScrollView></LinearLayout><LinearLayoutandroid:id = "@+id/TabLayout_Four"android:layout_width = "fill_parent"android:layout_height = "fill_parent"android:layout_above = "@+id/Tabs"><ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"><RelativeLayoutandroid:id = "@+id/TabLayout_Four"android:layout_width = "fill_parent"android:layout_height = "fill_parent"android:visibility = "visible"android:layout_above = "@+id/Tabs"><TextViewandroid:textColor="@android:color/black"android:layout_width = "wrap_content"android:layout_height = "wrap_content"android:text = "很简单，是么"/></RelativeLayout></ScrollView></LinearLayout><viewsrc="/img/2012/06/25/0400213175.gif">?
?
http://blog.csdn.net/notice520/article/details/6169904
