android UI进阶之仿iphone的tab效果（二）

 

今天把这个仿iphone效果的tab写完，这个例子参考国外rolle3k共享的代码，感谢rolle3k。

上篇博客我们写了一个Itab类，介绍了背景的绘制和简单的一个图的贴图方法。我们继续来完成Itab这个类，同时把他放到MainAcitvity（继承Activity）这个类内部，这样，整个程序只需一个类就可以了。（上篇博客例子运行需要再建一个Activity的子类来作为lanucher）。废话不多说了，看看代码

public static class iTab extends View { private Paint mPaint;//背景画笔 private Paint mActiveTextPaint;//选中 private Paint mInactiveTextPaint;//未选中 private ArrayList<TabMember> mTabMembers;//tab成员 private int mActiveTab; private OnTabClickListener mOnTabClickListener = 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 int mId; protected String mText; 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 Paint mPaint; private Rect mRect; 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 ); } @Override protected 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 iTab mTabs; 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" class="com.notice520.MainActivity$iRelativeLayout" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background = "#C5CCD4FF" > <LinearLayout android:id = "@+id/TabLayout_One" 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"> <RelativeLayout android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:visibility = "visible" > <TextView android:textColor="@android:color/black" android:textSize="30sp" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "春节快乐!!" /> </RelativeLayout> </ScrollView> </LinearLayout> <LinearLayout android: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"> <RelativeLayout android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:visibility = "visible" android:layout_above = "@+id/Tabs" > <Button android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "祝大家事业有成！" android:textSize = "30sp" /> </RelativeLayout> </ScrollView> </LinearLayout> <LinearLayout android: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"> <RelativeLayout android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:visibility = "visible" android:layout_above = "@+id/Tabs" > <ImageView android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:src="@drawable/newq" /> </RelativeLayout> </ScrollView> </LinearLayout> <LinearLayout android: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"> <RelativeLayout android:id = "@+id/TabLayout_Four" android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:visibility = "visible" android:layout_above = "@+id/Tabs" > <TextView android:textColor="@android:color/black" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "很简单，是么" /> </RelativeLayout> </ScrollView> </LinearLayout> <view class="com.notice520.MainActivity$iTab" android:id="@+id/Tabs" android:layout_width = "fill_parent" android:layout_height = "49px" android:layout_alignParentBottom = "true" /> </view>  

来看看最终效果吧

是不是还不错呢  有问题可以留言交流。