android UI進階之仿iphone的tab效果（二）

 

今天把這個仿iphone效果的tab寫完，這個例子參考國外rolle3k共用程式碼，感謝rolle3k。

上篇部落格我們寫了一個Itab類，介紹了背景的繪製和簡單的一個圖的貼圖方法。我們繼續來完成Itab這個類，同時把他放到MainAcitvity（繼承Activity）這個類內部，這樣，整個程式只需一個類就可以了。（上篇部落格例子運行需要再建一個Activity的子類來作為lanucher）。廢話不多說了，看看代碼

public static class iTab extends View<br />{<br /> private PaintmPaint;//背景畫筆<br /> private PaintmActiveTextPaint;//選中<br /> private PaintmInactiveTextPaint;//未選中<br /> private ArrayList<TabMember>mTabMembers;//tab成員<br /> private intmActiveTab;<br /> private OnTabClickListenermOnTabClickListener = null;</p><p>public iTab( Context context, AttributeSet attrs ) //構造器，在裡面初始化畫筆<br />{<br />super(context, attrs);</p><p>mTabMembers = new ArrayList<MainActivity.iTab.TabMember>( );</p><p>mPaint = new Paint( );<br />mActiveTextPaint = new Paint( );<br />mInactiveTextPaint = new Paint( );</p><p>mPaint.setStyle( Paint.Style.FILL );<br />mPaint.setColor( 0xFFFFFF00 );<br />mPaint.setAntiAlias(true);</p><p>mActiveTextPaint.setTextAlign( Align.CENTER );<br />mActiveTextPaint.setTextSize( 12 );<br />mActiveTextPaint.setColor( 0xFFFFFFFF );<br />mActiveTextPaint.setAntiAlias(true);</p><p>mInactiveTextPaint.setTextAlign( Align.CENTER );<br />mInactiveTextPaint.setTextSize( 12 );<br />mInactiveTextPaint.setColor( 0xFF999999 );<br />mInactiveTextPaint.setAntiAlias(true);<br />mActiveTab = 0;</p><p>}</p><p> @Override<br /> protected void onDraw( Canvas canvas )<br /> {<br /> super.onDraw( canvas );</p><p> Rect r = new Rect( );<br /> this.getDrawingRect( r );</p><p> // 計算每個標籤能使用多少像素<br /> int singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );</p><p> // 繪製背景<br /> canvas.drawColor( 0xFF000000 );<br /> mPaint.setColor( 0xFF434343 );<br /> canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );</p><p> int color = 46;</p><p> for( int i = 0; i < 24; i++ )<br /> {<br /> mPaint.setARGB( 255, color, color, color );<br /> canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );<br /> color--;<br /> }<br /> // 繪製每一個tab<br /> for( int i = 0; i < mTabMembers.size( ); i++ )<br /> {<br /> TabMember tabMember = mTabMembers.get( i );</p><p> Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) );<br /> Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 );<br /> Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);<br /> Canvas iconCanvas = new Canvas( );<br /> iconCanvas.setBitmap( iconColored );</p><p> if( mActiveTab == i )//為已選中的tab繪製一個白藍的漸層色，未選中的繪製一個白灰的漸層色<br /> {<br /> p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),<br /> 0xFFFFFFFF, 0xFF54C7E1, Shader.TileMode.CLAMP ) );<br /> }<br /> else {<br /> p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),<br /> 0xFFA2A2A2, 0xFF5F5F5F, Shader.TileMode.CLAMP ) );<br /> }</p><p> iconCanvas.drawRect( 0, 0, icon.getWidth( ), icon.getHeight( ), p );</p><p> for( int x = 0; x < icon.getWidth(); x++ )<br /> {<br /> for( int y = 0; y < icon.getHeight(); y++ )<br /> {<br /> if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 )<br /> {<br /> iconColored.setPixel( x, y, 0x00000000 );<br /> }<br /> }<br /> }</p><p> // 計算tab圖片的位置<br /> int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 );</p><p> // 繪製tab圖片 選中的和未選中的<br /> if( mActiveTab == i )<br /> {<br /> mPaint.setARGB( 37, 255, 255, 255 );<br /> canvas.drawRoundRect( new RectF( r.left + singleTabWidth * i + 3, r.top + 3,<br /> r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 5, 5, mPaint );<br /> canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );<br /> canvas.drawText( tabMember.getText( ),<br /> singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint );<br /> } else<br /> {<br /> canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );<br /> canvas.drawText( tabMember.getText( ),<br /> singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint );<br /> }<br /> }<br /> }<br /> /*<br /> * 觸摸事件<br /> */<br /> @Override<br /> public boolean onTouchEvent( MotionEvent motionEvent )<br /> {<br /> Rect r = new Rect( );<br /> this.getDrawingRect( r );<br /> float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );</p><p> int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 );</p><p> mActiveTab = pressedTab;</p><p> if( this.mOnTabClickListener != null)<br /> {<br /> this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) );<br /> }</p><p> this.invalidate();</p><p> return super.onTouchEvent( motionEvent );<br /> }</p><p> void addTabMember( TabMember tabMember )<br /> {<br /> mTabMembers.add( tabMember );<br /> }</p><p> void setOnTabClickListener( OnTabClickListener onTabClickListener )<br /> {<br /> mOnTabClickListener = onTabClickListener;<br /> }</p><p> public static class TabMember//處理tab成員<br /> {<br /> protected intmId;<br /> protected StringmText;<br /> protected int mIconResourceId;</p><p> TabMember( int Id, String Text, int iconResourceId )<br /> {<br /> mId = Id;<br /> mIconResourceId = iconResourceId;<br /> mText = Text;<br /> }</p><p> public int getId( )<br /> {<br /> return mId;<br /> }</p><p> public String getText( )<br /> {<br /> return mText;<br /> }</p><p> public int getIconResourceId( )<br /> {<br /> return mIconResourceId;<br /> }</p><p> public void setText( String Text )<br /> {<br /> mText = Text;<br /> }</p><p> public void setIconResourceId( int iconResourceId )<br /> {<br /> mIconResourceId = iconResourceId;<br /> }<br /> }</p><p> public static interface OnTabClickListener<br /> {<br /> public abstract void onTabClick( int tabId );<br /> }<br />} 這是MainActivity這個類裡面的兩個static類，看我寫的注釋和上篇部落格的內容應該都能理解。其中還定義了觸摸事件，實現點擊tab出現不同布局的效果。接下來我們只需要在我們的layout上添加就可以了，我們繼續寫一個內部類

 

public static class iRelativeLayout extends RelativeLayout//注意，還是聲明為靜態<br />{<br />private PaintmPaint;<br />private RectmRect;</p><p>public iRelativeLayout( Context context, AttributeSet attrs )<br />{<br />super(context, attrs);</p><p>mRect = new Rect( );<br />mPaint = new Paint( );</p><p>mPaint.setStyle( Paint.Style.FILL_AND_STROKE );<br />mPaint.setColor( 0xFFCBD2D8 );<br />}</p><p>@Override<br />protected void onDraw( Canvas canvas )<br />{<br />super.onDraw( canvas );<br />canvas.drawColor( 0xFFC5CCD4 );</p><p>this.getDrawingRect( mRect );</p><p>for( int i = 0; i < mRect.right; i += 7 )//繪製螢幕背景的紋理效果<br />{<br />canvas.drawRect( mRect.left + i, mRect.top, mRect.left + i + 2, mRect.bottom, mPaint );<br />}<br />}<br />}</p><p>private static final int TAB_HIGHLIGHT = 1;<br />private static final int TAB_CHAT = 2;<br />private static final int TAB_LOOPBACK = 3;<br />private static final int TAB_REDO = 4;<br />private iTabmTabs;<br />private LinearLayout mTabLayout_One;<br />private LinearLayout mTabLayout_Two;<br />private LinearLayout mTabLayout_Three;<br />private LinearLayout mTabLayout_Four;<br />private LinearLayout mTabLayout_Five;</p><p> @Override<br /> public void onCreate(Bundle savedInstanceState)<br /> {<br /> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.main); </p><p> mTabs = (iTab) this.findViewById( R.id.Tabs );<br /> mTabLayout_One = (LinearLayout) this.findViewById( R.id.TabLayout_One );<br /> mTabLayout_Two = (LinearLayout) this.findViewById( R.id.TabLayout_Two );<br /> mTabLayout_Three = (LinearLayout) this.findViewById( R.id.TabLayout_Three );<br /> mTabLayout_Four = (LinearLayout) this.findViewById( R.id.TabLayout_Four );<br /> mTabLayout_Five = (LinearLayout) this.findViewById( R.id.TabLayout_Four );//偷個懶，不寫第五個介面啦</p><p> mTabs.addTabMember( new TabMember( TAB_HIGHLIGHT, "精選", R.drawable.jingxuan ) );<br /> mTabs.addTabMember( new TabMember( TAB_CHAT, "類別", R.drawable.cat ) );<br /> mTabs.addTabMember( new TabMember( TAB_LOOPBACK, "25大熱門排行榜", R.drawable.rank ) );<br /> mTabs.addTabMember( new TabMember( TAB_REDO, "搜尋", R.drawable.search ) );<br /> mTabs.addTabMember( new TabMember( TAB_REDO, "更新", R.drawable.download ) );//添加tab</p><p> /*初始顯示第一個介面*/<br /> mTabLayout_One.setVisibility( View.VISIBLE );<br /> mTabLayout_Two.setVisibility( View.GONE );<br /> mTabLayout_Three.setVisibility( View.GONE );<br /> mTabLayout_Four.setVisibility( View.GONE );</p><p> mTabs.setOnTabClickListener( new OnTabClickListener( ) {<br /> @Override<br /> public void onTabClick( int tabId )//實現點擊事件<br /> {<br /> if( tabId == TAB_HIGHLIGHT )<br /> {<br /> mTabLayout_One.setVisibility( View.VISIBLE );<br /> mTabLayout_Two.setVisibility( View.GONE );<br /> mTabLayout_Three.setVisibility( View.GONE );<br /> mTabLayout_Four.setVisibility( View.GONE );<br /> } else if( tabId == TAB_CHAT )<br /> {<br /> mTabLayout_One.setVisibility( View.GONE );<br /> mTabLayout_Two.setVisibility( View.VISIBLE );<br /> mTabLayout_Three.setVisibility( View.GONE );<br /> mTabLayout_Four.setVisibility( View.GONE );<br /> } else if( tabId == TAB_LOOPBACK )<br /> {<br /> mTabLayout_One.setVisibility( View.GONE );<br /> mTabLayout_Two.setVisibility( View.GONE );<br /> mTabLayout_Three.setVisibility( View.VISIBLE );<br /> mTabLayout_Four.setVisibility( View.GONE );<br /> } else if( tabId == TAB_REDO )<br /> {<br /> mTabLayout_One.setVisibility( View.GONE );<br /> mTabLayout_Two.setVisibility( View.GONE );<br /> mTabLayout_Three.setVisibility( View.GONE );<br /> mTabLayout_Four.setVisibility( View.VISIBLE );<br /> }<br /> }<br /> });<br /> } 其中onDraw()方法裡面實現了背景的紋理效果，配合xml裡面背景色的配置，實現了如所示的效果：

是不是非常漂亮呢，剩下的就是在xml裡面配置了

<?xml version="1.0" encoding="utf-8"?><br /><view xmlns:android="http://schemas.android.com/apk/res/android"<br />class="com.notice520.MainActivity$iRelativeLayout"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> android:background = "#C5CCD4FF"<br />><br /><LinearLayout<br />android:id = "@+id/TabLayout_One"<br />android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:layout_above = "@+id/Tabs"<br />><br /><ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"><br /><RelativeLayout<br />android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:visibility = "visible"<br />><br /><TextView<br />android:textColor="@android:color/black"<br />android:textSize="30sp"<br />android:layout_width = "wrap_content"<br />android:layout_height = "wrap_content"<br />android:text = "春節快樂!!"<br />/><br /></RelativeLayout><br /></ScrollView><br /></LinearLayout></p><p><LinearLayout<br />android:id = "@+id/TabLayout_Two"<br />android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:layout_above = "@+id/Tabs"<br />><br /><ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"><br /><RelativeLayout<br />android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:visibility = "visible"<br />android:layout_above = "@+id/Tabs"<br />><br /><Button<br />android:layout_width = "wrap_content"<br />android:layout_height = "wrap_content"<br />android:text = "祝大家事業有成！"<br />android:textSize = "30sp"<br />/><br /></RelativeLayout><br /></ScrollView><br /></LinearLayout><br /><LinearLayout<br />android:id = "@+id/TabLayout_Three"<br />android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:layout_above = "@+id/Tabs"<br />><br /><ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"><br /><RelativeLayout<br />android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:visibility = "visible"<br />android:layout_above = "@+id/Tabs"<br />><br /><ImageView</p><p>android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:src="@drawable/newq"<br />/><br /></RelativeLayout><br /></ScrollView><br /></LinearLayout><br /><LinearLayout<br />android:id = "@+id/TabLayout_Four"<br />android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:layout_above = "@+id/Tabs"<br />><br /><ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"><br /><RelativeLayout<br />android:id = "@+id/TabLayout_Four"<br />android:layout_width = "fill_parent"<br />android:layout_height = "fill_parent"<br />android:visibility = "visible"<br />android:layout_above = "@+id/Tabs"<br />><br /><TextView<br />android:textColor="@android:color/black"<br />android:layout_width = "wrap_content"<br />android:layout_height = "wrap_content"<br />android:text = "很簡單，是麼"<br />/><br /></RelativeLayout><br /></ScrollView><br /></LinearLayout><br /><view<br />class="com.notice520.MainActivity$iTab"<br />android:id="@+id/Tabs"<br />android:layout_width = "fill_parent"<br />android:layout_height = "49px"<br />android:layout_alignParentBottom = "true"<br />/><br /></view><br /> 

來看看最終效果吧

是不是還不錯呢  有問題可以留言交流。