<button id="u2w23"></button>

<tbody id="u2w23"><track id="u2w23"></track></tbody><dd id="u2w23"><track id="u2w23"></track></dd><button id="u2w23"><acronym id="u2w23"></acronym></button> <tbody id="u2w23"><noscript id="u2w23"></noscript></tbody>

  • <button id="u2w23"></button><li id="u2w23"><acronym id="u2w23"><cite id="u2w23"></cite></acronym></li>

  • android UI進階之仿iphone的tab效果(二)

    [來源] 達內    [編輯] 達內   [時間]2012-09-17

    今天把這個仿iphone效果的tab寫完,這個例子參考國外rolle3k共享的代碼,感謝rolle3k。

    今天把這個仿iphone效果的tab寫完,這個例子參考國外rolle3k共享的代碼,感謝rolle3k。
    上篇博客我們寫了一個Itab類,介紹了背景的繪制和簡單的一個圖的貼圖方法。我們繼續來完成Itab這個類,同時把他放到MainAcitvity(繼承Activity)這個類內部,這樣,整個程序只需一個類就可以了。(上篇博客例子運行需要再建一個Activity的子類來作為lanucher)。廢話不多說了,看看代碼
    [java] view plaincopy
    1. public static class iTab extends View
    2. {
    3. private Paint mPaint;//背景畫筆
    4. private Paint mActiveTextPaint;//選中
    5. private Paint mInactiveTextPaint;//未選中
    6. private ArrayList<TabMember> mTabMembers;//tab成員
    7. private int mActiveTab;
    8. private OnTabClickListener mOnTabClickListener = null;
    9.
    10. public iTab( Context context, AttributeSet attrs ) //構造器,在里面初始化畫筆
    11. {
    12. super(context, attrs);
    13.
    14. mTabMembers = new ArrayList<MainActivity.iTab.TabMember>( );
    15.
    16. mPaint = new Paint( );
    17. mActiveTextPaint = new Paint( );
    18. mInactiveTextPaint = new Paint( );
    19.
    20. mPaint.setStyle( Paint.Style.FILL );
    21. mPaint.setColor( 0xFFFFFF00 );
    22. mPaint.setAntiAlias(true);
    23.
    24. mActiveTextPaint.setTextAlign( Align.CENTER );
    25. mActiveTextPaint.setTextSize( 12 );
    26. mActiveTextPaint.setColor( 0xFFFFFFFF );
    27. mActiveTextPaint.setAntiAlias(true);
    28.
    29.
    30. mInactiveTextPaint.setTextAlign( Align.CENTER );
    31. mInactiveTextPaint.setTextSize( 12 );
    32. mInactiveTextPaint.setColor( 0xFF999999 );
    33. mInactiveTextPaint.setAntiAlias(true);
    34. mActiveTab = 0;
    35.
    36. }
    37.
    38. @Override
    39. protected void onDraw( Canvas canvas )
    40. {
    41. super.onDraw( canvas );
    42.
    43. Rect r = new Rect( );
    44. this.getDrawingRect( r );
    45.
    46. // 計算每個標簽能使用多少像素
    47. int singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );
    48.
    49.
    50. // 繪制背景
    51. canvas.drawColor( 0xFF000000 );
    52. mPaint.setColor( 0xFF434343 );
    53. canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );
    54.
    55. int color = 46;
    56.
    57. for( int i = 0; i < 24; i++ )
    58. {
    59. mPaint.setARGB( 255, color, color, color );
    60. canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );
    61. color--;
    62. }
    63. // 繪制每一個tab
    64. for( int i = 0; i < mTabMembers.size( ); i++ )
    65. {
    66. TabMember tabMember = mTabMembers.get( i );
    67.
    68. Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) );
    69. Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 );
    70. Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    71. Canvas iconCanvas = new Canvas( );
    72. iconCanvas.setBitmap( iconColored );
    73.
    74. if( mActiveTab == i )//為已選中的tab繪制一個白藍的漸變色,未選中的繪制一個白灰的漸變色
    75. {
    76. p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),
    77. 0xFFFFFFFF, 0xFF54C7E1, Shader.TileMode.CLAMP ) );
    78. }
    79. else {
    80. p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),
    81. 0xFFA2A2A2, 0xFF5F5F5F, Shader.TileMode.CLAMP ) );
    82. }
    83.
    84. iconCanvas.drawRect( 0, 0, icon.getWidth( ), icon.getHeight( ), p );
    85.
    86. for( int x = 0; x < icon.getWidth(); x++ )
    87. {
    88. for( int y = 0; y < icon.getHeight(); y++ )
    89. {
    90. if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 )
    91. {
    92. iconColored.setPixel( x, y, 0x00000000 );
    93. }
    94. }
    95. }
    96.
    97. // 計算tab圖片的位置
    98. int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 );
    99.
    100. // 繪制tab圖片 選中的和未選中的
    101. if( mActiveTab == i )
    102. {
    103. mPaint.setARGB( 37, 255, 255, 255 );
    104. canvas.drawRoundRect( new RectF( r.left + singleTabWidth * i + 3, r.top + 3,
    105. r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 5, 5, mPaint );
    106. canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );
    107. canvas.drawText( tabMember.getText( ),
    108. singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint );
    109. } else
    110. {
    111. canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );
    112. canvas.drawText( tabMember.getText( ),
    113. singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint );
    114. }
    115. }
    116. }
    117. /*
    118. * 觸摸事件
    119. */
    120. @Override
    121. public boolean onTouchEvent( MotionEvent motionEvent )
    122. {
    123. Rect r = new Rect( );
    124. this.getDrawingRect( r );
    125. float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );
    126.
    127. int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 );
    128.
    129. mActiveTab = pressedTab;
    130.
    131. if( this.mOnTabClickListener != null)
    132. {
    133. this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) );
    134. }
    135.
    136. this.invalidate();
    137.
    138. return super.onTouchEvent( motionEvent );
    139. }
    140.
    141. void addTabMember( TabMember tabMember )
    142. {
    143. mTabMembers.add( tabMember );
    144. }
    145.
    146. void setOnTabClickListener( OnTabClickListener onTabClickListener )
    147. {
    148. mOnTabClickListener = onTabClickListener;
    149. }
    150.
    151. public static class TabMember//處理tab成員
    152. {
    153. protected int mId;
    154. protected String mText;
    155. protected int mIconResourceId;
    156.
    157. TabMember( int Id, String Text, int iconResourceId )
    158. {
    159. mId = Id;
    160. mIconResourceId = iconResourceId;
    161. mText = Text;
    162. }
    163.
    164. public int getId( )
    165. {
    166. return mId;
    167. }
    168.
    169. public String getText( )
    170. {
    171. return mText;
    172. }
    173.
    174. public int getIconResourceId( )
    175. {
    176. return mIconResourceId;
    177. }
    178.
    179. public void setText( String Text )
    180. {
    181. mText = Text;
    182. }
    183.
    184. public void setIconResourceId( int iconResourceId )
    185. {
    186. mIconResourceId = iconResourceId;
    187. }
    188. }
    189.
    190. public static interface OnTabClickListener
    191. {
    192. public abstract void onTabClick( int tabId );
    193. }
    194. }
    這是MainActivity這個類里面的兩個static類,看我寫的注釋和上篇博客的內容應該都能理解。其中還定義了觸摸事件,實現點擊tab出現不同布局的效果。接下來我們只需要在我們的layout上添加就可以了,我們繼續寫一個內部類

    [java] view plaincopy
    1. public static class iRelativeLayout extends RelativeLayout//注意,還是聲明為靜態
    2. {
    3. private Paint mPaint;
    4. private Rect mRect;
    5.
    6. public iRelativeLayout( Context context, AttributeSet attrs )
    7. {
    8. super(context, attrs);
    9.
    10. mRect = new Rect( );
    11. mPaint = new Paint( );
    12.
    13. mPaint.setStyle( Paint.Style.FILL_AND_STROKE );
    14. mPaint.setColor( 0xFFCBD2D8 );
    15. }
    16.
    17. @Override
    18. protected void onDraw( Canvas canvas )
    19. {
    20. super.onDraw( canvas );
    21. canvas.drawColor( 0xFFC5CCD4 );
    22.
    23. this.getDrawingRect( mRect );
    24.
    25. for( int i = 0; i < mRect.right; i += 7 )//繪制屏幕背景的紋理效果
    26. {
    27. canvas.drawRect( mRect.left + i, mRect.top, mRect.left + i + 2, mRect.bottom, mPaint );
    28. }
    29. }
    30. }
    31.
    32. private static final int TAB_HIGHLIGHT = 1;
    33. private static final int TAB_CHAT = 2;
    34. private static final int TAB_LOOPBACK = 3;
    35. private static final int TAB_REDO = 4;
    36. private iTab mTabs;
    37. private LinearLayout mTabLayout_One;
    38. private LinearLayout mTabLayout_Two;
    39. private LinearLayout mTabLayout_Three;
    40. private LinearLayout mTabLayout_Four;
    41. private LinearLayout mTabLayout_Five;
    42.
    43. @Override
    44. public void onCreate(Bundle savedInstanceState)
    45. {
    46. super.onCreate(savedInstanceState);
    47. setContentView(R.layout.main);
    48.
    49. mTabs = (iTab) this.findViewById( R.id.Tabs );
    50. mTabLayout_One = (LinearLayout) this.findViewById( R.id.TabLayout_One );
    51. mTabLayout_Two = (LinearLayout) this.findViewById( R.id.TabLayout_Two );
    52. mTabLayout_Three = (LinearLayout) this.findViewById( R.id.TabLayout_Three );
    53. mTabLayout_Four = (LinearLayout) this.findViewById( R.id.TabLayout_Four );
    54. mTabLayout_Five = (LinearLayout) this.findViewById( R.id.TabLayout_Four );//偷個懶,不寫第五個界面啦
    55.
    56. mTabs.addTabMember( new TabMember( TAB_HIGHLIGHT, "精選", R.drawable.jingxuan ) );
    57. mTabs.addTabMember( new TabMember( TAB_CHAT, "類別", R.drawable.cat ) );
    58. mTabs.addTabMember( new TabMember( TAB_LOOPBACK, "25大排行榜", R.drawable.rank ) );
    59. mTabs.addTabMember( new TabMember( TAB_REDO, "搜索", R.drawable.search ) );
    60. mTabs.addTabMember( new TabMember( TAB_REDO, "更新", R.drawable.download ) );//添加tab
    61.
    62. /*初始顯示第一個界面*/
    63. mTabLayout_One.setVisibility( View.VISIBLE );
    64. mTabLayout_Two.setVisibility( View.GONE );
    65. mTabLayout_Three.setVisibility( View.GONE );
    66. mTabLayout_Four.setVisibility( View.GONE );
    67.
    68. mTabs.setOnTabClickListener( new OnTabClickListener( ) {
    69. @Override
    70. public void onTabClick( int tabId )//實現點擊事件
    71. {
    72. if( tabId == TAB_HIGHLIGHT )
    73. {
    74. mTabLayout_One.setVisibility( View.VISIBLE );
    75. mTabLayout_Two.setVisibility( View.GONE );
    76. mTabLayout_Three.setVisibility( View.GONE );
    77. mTabLayout_Four.setVisibility( View.GONE );
    78. } else if( tabId == TAB_CHAT )
    79. {
    80. mTabLayout_One.setVisibility( View.GONE );
    81. mTabLayout_Two.setVisibility( View.VISIBLE );
    82. mTabLayout_Three.setVisibility( View.GONE );
    83. mTabLayout_Four.setVisibility( View.GONE );
    84. } else if( tabId == TAB_LOOPBACK )
    85. {
    86. mTabLayout_One.setVisibility( View.GONE );
    87. mTabLayout_Two.setVisibility( View.GONE );
    88. mTabLayout_Three.setVisibility( View.VISIBLE );
    89. mTabLayout_Four.setVisibility( View.GONE );
    90. } else if( tabId == TAB_REDO )
    91. {
    92. mTabLayout_One.setVisibility( View.GONE );
    93. mTabLayout_Two.setVisibility( View.GONE );
    94. mTabLayout_Three.setVisibility( View.GONE );
    95. mTabLayout_Four.setVisibility( View.VISIBLE );
    96. }
    97. }
    98. });
    99. }
    其中onDraw()方法里面實現了背景的紋理效果,配合xml里面背景色的配置,實現了如下圖所示的效果:


    是不是非常漂亮呢,剩下的就是在xml里面配置了
    [xhtml] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <view xmlns:android="http://schemas.android.com/apk/res/android"
    3. class="com.notice520.MainActivity$iRelativeLayout"
    4. android:orientation="vertical"
    5. android:layout_width="fill_parent"
    6. android:layout_height="fill_parent"
    7. android:background = "#C5CCD4FF"
    8. >
    9. <LinearLayout
    10. android:id = "@+id/TabLayout_One"
    11. android:layout_width = "fill_parent"
    12. android:layout_height = "fill_parent"
    13. android:layout_above = "@+id/Tabs"
    14. >
    15. <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
    16. <RelativeLayout
    17. android:layout_width = "fill_parent"
    18. android:layout_height = "fill_parent"
    19. android:visibility = "visible"
    20. >
    21. <TextView
    22. android:textColor="@android:color/black"
    23. android:textSize="30sp"
    24. android:layout_width = "wrap_content"
    25. android:layout_height = "wrap_content"
    26. android:text = "春節快樂!!"
    27. />
    28. </RelativeLayout>
    29. </ScrollView>
    30. </LinearLayout>
    31.
    32. <LinearLayout
    33. android:id = "@+id/TabLayout_Two"
    34. android:layout_width = "fill_parent"
    35. android:layout_height = "fill_parent"
    36. android:layout_above = "@+id/Tabs"
    37. >
    38. <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
    39. <RelativeLayout
    40. android:layout_width = "fill_parent"
    41. android:layout_height = "fill_parent"
    42. android:visibility = "visible"
    43. android:layout_above = "@+id/Tabs"
    44. >
    45. <Button
    46. android:layout_width = "wrap_content"
    47. android:layout_height = "wrap_content"
    48. android:text = "祝大家事業有成!"
    49. android:textSize = "30sp"
    50. />
    51. </RelativeLayout>
    52. </ScrollView>
    53. </LinearLayout>
    54. <LinearLayout
    55. android:id = "@+id/TabLayout_Three"
    56. android:layout_width = "fill_parent"
    57. android:layout_height = "fill_parent"
    58. android:layout_above = "@+id/Tabs"
    59. >
    60. <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
    61. <RelativeLayout
    62. android:layout_width = "fill_parent"
    63. android:layout_height = "fill_parent"
    64. android:visibility = "visible"
    65. android:layout_above = "@+id/Tabs"
    66. >
    67. <ImageView
    68.
    69. android:layout_width = "fill_parent"
    70. android:layout_height = "fill_parent"
    71. android:src="@drawable/newq"
    72. />
    73. </RelativeLayout>
    74. </ScrollView>
    75. </LinearLayout>
    76. <LinearLayout
    77. android:id = "@+id/TabLayout_Four"
    78. android:layout_width = "fill_parent"
    79. android:layout_height = "fill_parent"
    80. android:layout_above = "@+id/Tabs"
    81. >
    82. <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
    83. <RelativeLayout
    84. android:id = "@+id/TabLayout_Four"
    85. android:layout_width = "fill_parent"
    86. android:layout_height = "fill_parent"
    87. android:visibility = "visible"
    88. android:layout_above = "@+id/Tabs"
    89. >
    90. <TextView
    91. android:textColor="@android:color/black"
    92. android:layout_width = "wrap_content"
    93. android:layout_height = "wrap_content"
    94. android:text = "很簡單,是么"
    95. />
    96. </RelativeLayout>
    97. </ScrollView>
    98. </LinearLayout>
    99. <view
    100. class="com.notice520.MainActivity$iTab"
    101. android:id="@+id/Tabs"
    102. android:layout_width = "fill_parent"
    103. android:layout_height = "49px"
    104. android:layout_alignParentBottom = "true"
    105. />
    106. </view>
     

    資源下載

    ?