鲨鱼网
Android UI进阶之仿iphone的tab效果二
创始人
2024-07-30 22:20:32
0次

接着上篇文章继续完成。在android中把这个仿iphone效果的tab写完，这个例子参考国外rolle3k共享的代码。

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

  1.  public static class iTab extends View  {    
  2. private Paint                    mPaint;//背景画笔    
  3. private Paint                    mActiveTextPaint;//选中    
  4. private Paint                    mInactiveTextPaint;//未选中    
  5. private ArrayList    mTabMembers;//tab成员    
  6. private int                        mActiveTab;    
  7. private OnTabClickListener        mOnTabClickListener = null;    
  8.  
  9. public iTab( Context context, AttributeSet attrs ) //构造器，在里面初始化画笔 {   
  10. super(context, attrs);   
  11.  
  12. mTabMembers = new ArrayList( );   
  13.  
  14. mPaint = new Paint( );  
  15. mActiveTextPaint = new Paint( );   
  16. mInactiveTextPaint = new Paint( );   
  17.    
  18. mPaint.setStyle( Paint.Style.FILL );   
  19. mPaint.setColor( 0xFFFFFF00 );   
  20. mPaint.setAntiAlias(true);   
  21.  
  22. mActiveTextPaint.setTextAlign( Align.CENTER );   
  23.  mActiveTextPaint.setTextSize( 12 );   
  24.  mActiveTextPaint.setColor( 0xFFFFFFFF );   
  25. mActiveTextPaint.setAntiAlias(true);   
  26.  
  27. mInactiveTextPaint.setTextAlign( Align.CENTER );   
  28. mInactiveTextPaint.setTextSize( 12 );   
  29. mInactiveTextPaint.setColor( 0xFF999999 );   
  30.  mInactiveTextPaint.setAntiAlias(true);   
  31. mActiveTab = 0;   
  32. }   
  33. @Override   
  34. protected void onDraw( Canvas canvas ) {   
  35. super.onDraw( canvas );   
  36. Rect r = new Rect( );  
  37. this.getDrawingRect( r );  
  38.    
  39. // 计算每个标签能使用多少像素   
  40.  int singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );   
  41. // 绘制背景   
  42. canvas.drawColor( 0xFF000000 );   
  43. mPaint.setColor( 0xFF434343 );  
  44.  canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );  
  45.  
  46.  int color = 46;  
  47.  
  48.  for( int i = 0; i < 24; i++ ) {   
  49.  mPaint.setARGB( 255, color, color, color );  
  50. canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );   
  51. color--;  
  52.  }  
  53.  
  54. // 绘制每一个tab  
  55. for( int i = 0; i < mTabMembers.size( ); i++ )  
  56. {   
  57. TabMember tabMember = mTabMembers.get( i );   
  58.  
  59. Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) );   
  60.  Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 );  
  61. Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);   
  62. Canvas iconCanvas = new Canvas( );   
  63.  iconCanvas.setBitmap( iconColored );   
  64.    if( mActiveTab == i )//为已选中的tab绘制一个白蓝的渐变色，未选中的绘制一个白灰的渐变色   
  65. {   
  66.  p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),   
  67. 0xFFFFFFFF, 0xFF54C7E1, Shader.TileMode.CLAMP ) );   
  68.  
  69.  }   
  70.  else {   
  71. p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),    
  72.  0xFFA2A2A2, 0xFF5F5F5F, Shader.TileMode.CLAMP ) );   
  73.  
  74.  }   
  75. iconCanvas.drawRect( 0, 0, icon.getWidth( ), icon.getHeight( ), p );   
  76.  
  77.  for( int x = 0; x < icon.getWidth(); x++ )   
  78.  {   
  79.  for( int y = 0; y < icon.getHeight(); y++ )   
  80. {   
  81. if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 )   
  82. {  
  83. iconColored.setPixel( x, y, 0x00000000 );   
  84. }   
  85.  }   
  86.  }   
  87.  
  88. // 计算tab图片的位置  
  89. int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 );  
  90.  
  91. // 绘制tab图片 选中的和未选中的  
  92.  if( mActiveTab == i )  
  93. {         
  94.  mPaint.setARGB( 37, 255, 255, 255 );  
  95.  canvas.drawRoundRect(  new RectF( r.left + singleTabWidth * i + 3, r.top + 3,   
  96. r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 5, 5, mPaint );  
  97. canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );  
  98. canvas.drawText( tabMember.getText( ),   
  99.  singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint );  
  100. } else  
  101. {  
  102. canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );  
  103. canvas.drawText( tabMember.getText( ),  
  104. singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint );  
  105. }    
  106. }  
  107.   }  
  108. /*120   
  109. * 触摸事件  
  110. */  
  111. @Override  
  112. public boolean onTouchEvent( MotionEvent motionEvent )  
  113. {  
  114. Rect r = new Rect( );  
  115. this.getDrawingRect( r );             
  116. float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );  
  117.  
  118.  int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 );  
  119.  
  120.  mActiveTab = pressedTab;  
  121.  
  122. if( this.mOnTabClickListener != null)  
  123.  
  124. this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) );  
  125.  
  126. }             
  127. this.invalidate();             
  128.  return super.onTouchEvent( motionEvent );  
  129. }  
  130.  
  131. void addTabMember( TabMember tabMember )  
  132. {  
  133.   mTabMembers.add( tabMember );  
  134. }  
  135.  
  136. void setOnTabClickListener( OnTabClickListener onTabClickListener )  
  137. {  
  138.  mOnTabClickListener = onTabClickListener;  
  139.  }  
  140.  
  141. public static class TabMember//处理tab成员  
  142. {  
  143. protected int        mId;  
  144.  protected String    mText;  
  145.  protected int   mIconResourceId;  
  146. TabMember( int Id, String Text, int iconResourceId )  
  147. {  
  148.  mId = Id;  
  149.  mIconResourceId = iconResourceId;  
  150. mText = Text;  
  151. }  
  152.  public int getId( )  
  153. {  
  154. return mId;169              
  155.  }  
  156.  public String getText( )  
  157. {  
  158. return mText;  
  159. }  
  160. public int getIconResourceId( )  
  161. {  
  162. return mIconResourceId;  
  163. }  
  164.  
  165. public void setText( String Text )  
  166. {  
  167. mText = Text;  
  168. }  
  169.  public void setIconResourceId( int iconResourceId )  
  170. {  
  171.  mIconResourceId = iconResourceId;189   
  172. }  
  173.  public static interface OnTabClickListener193 {  
  174. 、public abstract void onTabClick( int tabId );  
  175. }  
  176. } 

这是MainActivity这个类里面的两个static类，看我写的注释和上篇博客的内容应该都能理解。其中还定义了触摸事件，实现点击tab出现不同布局的效果。接下来我们只需要在我们的layout上添加就可以了，我们继续写一个内部类

  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.    
  22.             canvas.drawColor( 0xFFC5CCD4 );   
  23.                
  24.             this.getDrawingRect( mRect );   
  25.               
  26.             for( int i = 0; i < mRect.right; i += 7 )//绘制屏幕背景的纹理效果   
  27.             {   
  28.                canvas.drawRect( mRect.left + i, mRect.top, mRect.left + i + 2, mRect.bottom, mPaint );   
  29.            }   
  30.  
  31.         }   
  32.    }   
  33.        
  34.     private static final int TAB_HIGHLIGHT = 1;   
  35.     private static final int TAB_CHAT = 2;   
  36.     private static final int TAB_LOOPBACK = 3;   
  37.     private static final int TAB_REDO = 4;   
  38.     private iTab            mTabs;   
  39.     private LinearLayout     mTabLayout_One;   
  40.     private LinearLayout     mTabLayout_Two;   
  41.     private LinearLayout     mTabLayout_Three;   
  42.     private LinearLayout     mTabLayout_Four;   
  43.     private LinearLayout     mTabLayout_Five;   
  44.        
  45.     @Override   
  46.    public void onCreate(Bundle savedInstanceState)    
  47.     {  
  48.         super.onCreate(savedInstanceState);   
  49.        setContentView(R.layout.main);     
  50.           
  51.        mTabs = (iTab) this.findViewById( R.id.Tabs );   
  52.         mTabLayout_One = (LinearLayout) this.findViewById( R.id.TabLayout_One );   
  53.         mTabLayout_Two = (LinearLayout) this.findViewById( R.id.TabLayout_Two );  
  54.         mTabLayout_Three = (LinearLayout) this.findViewById( R.id.TabLayout_Three );   
  55.         mTabLayout_Four = (LinearLayout) this.findViewById( R.id.TabLayout_Four );  
  56.         mTabLayout_Five = (LinearLayout) this.findViewById( R.id.TabLayout_Four );//偷个懒，不写第五个界面啦   
  57.            
  58.         mTabs.addTabMember( new TabMember( TAB_HIGHLIGHT, "精选", R.drawable.jingxuan ) );   
  59.        mTabs.addTabMember( new TabMember( TAB_CHAT, "类别", R.drawable.cat ) );   
  60.         mTabs.addTabMember( new TabMember( TAB_LOOPBACK, "25大排行榜", R.drawable.rank ) );   
  61.         mTabs.addTabMember( new TabMember( TAB_REDO, "搜索", R.drawable.search ) );  
  62.         mTabs.addTabMember( new TabMember( TAB_REDO, "更新", R.drawable.download ) );//添加tab   
  63.            
  64.         /*初始显示第一个界面*/  
  65.         mTabLayout_One.setVisibility( View.VISIBLE );  
  66.         mTabLayout_Two.setVisibility( View.GONE );   
  67.         mTabLayout_Three.setVisibility( View.GONE );   
  68.         mTabLayout_Four.setVisibility( View.GONE );   
  69.            
  70.        mTabs.setOnTabClickListener( new OnTabClickListener( ) {   
  71.            @Override   
  72.             public void onTabClick( int tabId )//实现点击事件   
  73.             {   
  74.                if( tabId == TAB_HIGHLIGHT )   
  75.                 {  
  76.                     mTabLayout_One.setVisibility( View.VISIBLE );   
  77.                    mTabLayout_Two.setVisibility( View.GONE );  
  78.                     mTabLayout_Three.setVisibility( View.GONE );   
  79.                   mTabLayout_Four.setVisibility( View.GONE );   
  80.                 } else if( tabId == TAB_CHAT )   
  81.                 {  
  82.                      mTabLayout_One.setVisibility( View.GONE );   
  83.                     mTabLayout_Two.setVisibility( View.VISIBLE );   
  84.                     mTabLayout_Three.setVisibility( View.GONE );   
  85.                     mTabLayout_Four.setVisibility( View.GONE );   
  86.                 } else if( tabId == TAB_LOOPBACK )   
  87.                 {   
  88.                     mTabLayout_One.setVisibility( View.GONE );   
  89.                     mTabLayout_Two.setVisibility( View.GONE );  
  90.                     mTabLayout_Three.setVisibility( View.VISIBLE );   
  91.                     mTabLayout_Four.setVisibility( View.GONE );   
  92.                } else if( tabId == TAB_REDO )   
  93.                 {   
  94.                    mTabLayout_One.setVisibility( View.GONE );   
  95.                     mTabLayout_Two.setVisibility( View.GONE );   
  96.                     mTabLayout_Three.setVisibility( View.GONE );   
  97.                    mTabLayout_Four.setVisibility( View.VISIBLE );  
  98.                 }  
  99.             }  
  100.         });  
  101.   } 

其中onDraw()方法里面实现了背景的纹理效果，配合xml里面背景色的配置，实现了如下图所示的效果：

是不是非常漂亮呢。下面就是xml里面的配置了

  1.      
  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.        
  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.                
  16.                 
  17.                    android:layout_width = "fill_parent"   
  18.                   android:layout_height = "fill_parent" 
  19.                    android:visibility = "visible" 
  20.                    >   
  21.                    
  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.                      
  29.                   
  30.                
  31.              
  32.         
  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.                
  39.                    
  40.                        android:layout_width = "fill_parent"   
  41.                        android:layout_height = "fill_parent"   
  42.                         android:visibility = "visible"   
  43.                         android:layout_above = "@+id/Tabs" 
  44.                         >   
  45.                         
  46.                             android:layout_width = "wrap_content" 
  47.                            android:layout_height = "wrap_content"   
  48.                            android:text = "祝大家事业有成！" 
  49.                            android:textSize = "30sp" 
  50.                        />   
  51.                           
  52.                
  53.            
  54.         
  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.              
  61.                 
  62.                    android:layout_width = "fill_parent" 
  63.                     android:layout_height = "fill_parent"   
  64.                    android:visibility = "visible"   
  65.                     android:layout_above = "@+id/Tabs"   
  66.                    >   
  67.                     
  68.                          
  69.                        android:layout_width = "fill_parent"   
  70.                         android:layout_height = "fill_parent"   
  71.                         android:src="@drawable/newq"   
  72.                    />   
  73.                  
  74.                
  75.          
  76.         
  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.                       
  83.                
  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.                   
  91.                        android:textColor="@android:color/black"   
  92.                       android:layout_width = "wrap_content"   
  93.                         android:layout_height = "wrap_content"   
  94.                       android:text = "很简单，是么"   
  95.                    />   
  96.                    
  97.               
  98.                      
  99.     
  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. 108  

来看看最终的效果吧

 

Android UI进阶之仿iphone的tab效果算是完了，不知道有没有帮助到你。

【编辑推荐】

Android四种Activity的加载模式

Android应用之Activity传参数与跳转

Android UI进阶之仿iphone的tab效果一

Android UI控件组合应用之二：按钮布局

Acer抱怨微软为Windows Tablet设太多限制

上一篇：借鉴之人人网使用的开源软件列表

下一篇：IBM全球信息科技服务部石家庄分公司正式成立

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
2009 IBM动态架构新动力...
通过 XML 进行内容发布
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址，解救无法享受D... 在安装了DHCP服务器的局域网环境中，每一台工作站在上网之前，都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis，... 关于 SQL 和 ORM 的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...