`

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

 
阅读更多

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

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

view plain
  1. publicstaticclassiTabextendsView
  2. {
  3. privatePaintmPaint;//背景画笔
  4. privatePaintmActiveTextPaint;//选中
  5. privatePaintmInactiveTextPaint;//未选中
  6. privateArrayList<TabMember>mTabMembers;//tab成员
  7. privateintmActiveTab;
  8. privateOnTabClickListenermOnTabClickListener=null;
  10. publiciTab(Contextcontext,AttributeSetattrs)//构造器，在里面初始化画笔
  11. {
  12. super(context,attrs);
  14. mTabMembers=newArrayList<MainActivity.iTab.TabMember>();
  16. mPaint=newPaint();
  17. mActiveTextPaint=newPaint();
  18. mInactiveTextPaint=newPaint();
  20. mPaint.setStyle(Paint.Style.FILL);
  21. mPaint.setColor(0xFFFFFF00);
  22. mPaint.setAntiAlias(true);
  24. mActiveTextPaint.setTextAlign(Align.CENTER);
  25. mActiveTextPaint.setTextSize(12);
  26. mActiveTextPaint.setColor(0xFFFFFFFF);
  27. mActiveTextPaint.setAntiAlias(true);
  30. mInactiveTextPaint.setTextAlign(Align.CENTER);
  31. mInactiveTextPaint.setTextSize(12);
  32. mInactiveTextPaint.setColor(0xFF999999);
  33. mInactiveTextPaint.setAntiAlias(true);
  34. mActiveTab=0;
  36. }
  38. @Override
  39. protectedvoidonDraw(Canvascanvas)
  40. {
  41. super.onDraw(canvas);
  43. Rectr=newRect();
  44. this.getDrawingRect(r);
  46. //计算每个标签能使用多少像素
  47. intsingleTabWidth=r.right/(mTabMembers.size()!=0?mTabMembers.size():1);
  50. //绘制背景
  51. canvas.drawColor(0xFF000000);
  52. mPaint.setColor(0xFF434343);
  53. canvas.drawLine(r.left,r.top+1,r.right,r.top+1,mPaint);
  55. intcolor=46;
  57. for(inti=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(inti=0;i<mTabMembers.size();i++)
  65. {
  66. TabMembertabMember=mTabMembers.get(i);
  68. Bitmapicon=BitmapFactory.decodeResource(getResources(),tabMember.getIconResourceId());
  69. BitmapiconColored=Bitmap.createBitmap(icon.getWidth(),icon.getHeight(),Bitmap.Config.ARGB_8888);
  70. Paintp=newPaint(Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
  71. CanvasiconCanvas=newCanvas();
  72. iconCanvas.setBitmap(iconColored);
  74. if(mActiveTab==i)//为已选中的tab绘制一个白蓝的渐变色，未选中的绘制一个白灰的渐变色
  75. {
  76. p.setShader(newLinearGradient(0,0,icon.getWidth(),icon.getHeight(),
  77. 0xFFFFFFFF,0xFF54C7E1,Shader.TileMode.CLAMP));
  78. }
  79. else{
  80. p.setShader(newLinearGradient(0,0,icon.getWidth(),icon.getHeight(),
  81. 0xFFA2A2A2,0xFF5F5F5F,Shader.TileMode.CLAMP));
  82. }
  84. iconCanvas.drawRect(0,0,icon.getWidth(),icon.getHeight(),p);
  86. for(intx=0;x<icon.getWidth();x++)
  87. {
  88. for(inty=0;y<icon.getHeight();y++)
  89. {
  90. if((icon.getPixel(x,y)&0xFF000000)==0)
  91. {
  92. iconColored.setPixel(x,y,0x00000000);
  93. }
  94. }
  95. }
  97. //计算tab图片的位置
  98. inttabImgX=singleTabWidth*i+(singleTabWidth/2-icon.getWidth()/2);
  100. //绘制tab图片选中的和未选中的
  101. if(mActiveTab==i)
  102. {
  103. mPaint.setARGB(37,255,255,255);
  104. canvas.drawRoundRect(newRectF(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. publicbooleanonTouchEvent(MotionEventmotionEvent)
  122. {
  123. Rectr=newRect();
  124. this.getDrawingRect(r);
  125. floatsingleTabWidth=r.right/(mTabMembers.size()!=0?mTabMembers.size():1);
  127. intpressedTab=(int)((motionEvent.getX()/singleTabWidth)-(motionEvent.getX()/singleTabWidth)%1);
  129. mActiveTab=pressedTab;
  131. if(this.mOnTabClickListener!=null)
  132. {
  133. this.mOnTabClickListener.onTabClick(mTabMembers.get(pressedTab).getId());
  134. }
  136. this.invalidate();
  138. returnsuper.onTouchEvent(motionEvent);
  139. }
  141. voidaddTabMember(TabMembertabMember)
  142. {
  143. mTabMembers.add(tabMember);
  144. }
  146. voidsetOnTabClickListener(OnTabClickListeneronTabClickListener)
  147. {
  148. mOnTabClickListener=onTabClickListener;
  149. }
  151. publicstaticclassTabMember//处理tab成员
  152. {
  153. protectedintmId;
  154. protectedStringmText;
  155. protectedintmIconResourceId;
  157. TabMember(intId,StringText,inticonResourceId)
  158. {
  159. mId=Id;
  160. mIconResourceId=iconResourceId;
  161. mText=Text;
  162. }
  164. publicintgetId()
  165. {
  166. returnmId;
  167. }
  169. publicStringgetText()
  170. {
  171. returnmText;
  172. }
  174. publicintgetIconResourceId()
  175. {
  176. returnmIconResourceId;
  177. }
  179. publicvoidsetText(StringText)
  180. {
  181. mText=Text;
  182. }
  184. publicvoidsetIconResourceId(inticonResourceId)
  185. {
  186. mIconResourceId=iconResourceId;
  187. }
  188. }
  190. publicstaticinterfaceOnTabClickListener
  191. {
  192. publicabstractvoidonTabClick(inttabId);
  193. }
  194. }
这是MainActivity这个类里面的两个static类，看我写的注释和上篇博客的内容应该都能理解。其中还定义了触摸事件，实现点击tab出现不同布局的效果。接下来我们只需要在我们的layout上添加就可以了，我们继续写一个内部类

view plain
  1. publicstaticclassiRelativeLayoutextendsRelativeLayout//注意，还是声明为静态
  2. {
  3. privatePaintmPaint;
  4. privateRectmRect;
  6. publiciRelativeLayout(Contextcontext,AttributeSetattrs)
  7. {
  8. super(context,attrs);
  10. mRect=newRect();
  11. mPaint=newPaint();
  13. mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
  14. mPaint.setColor(0xFFCBD2D8);
  15. }
  17. @Override
  18. protectedvoidonDraw(Canvascanvas)
  19. {
  20. super.onDraw(canvas);
  21. canvas.drawColor(0xFFC5CCD4);
  23. this.getDrawingRect(mRect);
  25. for(inti=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. }
  32. privatestaticfinalintTAB_HIGHLIGHT=1;
  33. privatestaticfinalintTAB_CHAT=2;
  34. privatestaticfinalintTAB_LOOPBACK=3;
  35. privatestaticfinalintTAB_REDO=4;
  36. privateiTabmTabs;
  37. privateLinearLayoutmTabLayout_One;
  38. privateLinearLayoutmTabLayout_Two;
  39. privateLinearLayoutmTabLayout_Three;
  40. privateLinearLayoutmTabLayout_Four;
  41. privateLinearLayoutmTabLayout_Five;
  43. @Override
  44. publicvoidonCreate(BundlesavedInstanceState)
  45. {
  46. super.onCreate(savedInstanceState);
  47. setContentView(R.layout.main);
  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);//偷个懒，不写第五个界面啦
  56. mTabs.addTabMember(newTabMember(TAB_HIGHLIGHT,"精选",R.drawable.jingxuan));
  57. mTabs.addTabMember(newTabMember(TAB_CHAT,"类别",R.drawable.cat));
  58. mTabs.addTabMember(newTabMember(TAB_LOOPBACK,"25大排行榜",R.drawable.rank));
  59. mTabs.addTabMember(newTabMember(TAB_REDO,"搜索",R.drawable.search));
  60. mTabs.addTabMember(newTabMember(TAB_REDO,"更新",R.drawable.download));//添加tab
  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);
  68. mTabs.setOnTabClickListener(newOnTabClickListener(){
  69. @Override
  70. publicvoidonTabClick(inttabId)//实现点击事件
  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. }elseif(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. }elseif(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. }elseif(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里面配置了

view plain
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <viewxmlns: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. <ScrollViewandroid: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>
  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. <ScrollViewandroid: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. <ScrollViewandroid: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
  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. <ScrollViewandroid: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>

来看看最终效果吧

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

分享到：
| Asp.Net前台页面中有几种标记: < %= %>< % ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics