android UI进阶之仿iphone的tab效果(二)

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

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

  
  
  
  
  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.               forint 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.     
  64.               // 绘制每一个tab  
  65.                forint i = 0; i < mTabMembers.size( ); i++ )  
  66.               {  
  67.                   TabMember tabMember = mTabMembers.get( i );  
  68.                     
  69.                   Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) );  
  70.                   Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 );  
  71.                   Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);  
  72.                   Canvas iconCanvas = new Canvas( );  
  73.                   iconCanvas.setBitmap( iconColored );  
  74.      
  75.                   if( mActiveTab == i )//为已选中的tab绘制一个白蓝的渐变色,未选中的绘制一个白灰的渐变色  
  76.                   {  
  77.                       p.setShader( new LinearGradient( 00, icon.getWidth(), icon.getHeight(),  
  78.                               0xFFFFFFFF0xFF54C7E1, Shader.TileMode.CLAMP ) );  
  79.                   }  
  80.                   else {      
  81.                       p.setShader( new LinearGradient( 00, icon.getWidth(), icon.getHeight(),   
  82.                               0xFFA2A2A20xFF5F5F5F, Shader.TileMode.CLAMP ) );  
  83.                   }  
  84.                     
  85.                   iconCanvas.drawRect( 00, icon.getWidth( ), icon.getHeight( ), p );  
  86.                     
  87.                   forint x = 0; x < icon.getWidth(); x++ )  
  88.                   {  
  89.                       forint y = 0; y < icon.getHeight(); y++ )  
  90.                       {  
  91.                           if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 )  
  92.                           {  
  93.                               iconColored.setPixel( x, y, 0x00000000 );  
  94.                           }  
  95.   }  
  96.                   }  
  97.                     
  98.                   // 计算tab图片的位置  
  99.                   int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 );  
  100.                    
  101.                  // 绘制tab图片 选中的和未选中的  
  102.                  if( mActiveTab == i )  
  103.                  {          
  104.                      mPaint.setARGB( 37255255255 );  
  105.                      canvas.drawRoundRect(  new RectF( r.left + singleTabWidth * i + 3, r.top + 3,   
  106.                             r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 55, mPaint );  
  107.                      canvas.drawBitmap( iconColored, tabImgX , r.top + 5null );  
  108.                      canvas.drawText( tabMember.getText( ),   
  109.                             singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint );  
  110.                  } else 
  111.                  {  
  112.                      canvas.drawBitmap( iconColored, tabImgX , r.top + 5null );  
  113.                      canvas.drawText( tabMember.getText( ),  
  114.                              singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint );  
  115.                 }  
  116.              }  
  117.    
  118.          }  
  119.          /*  
  120.           * 触摸事件  
  121.           */ 
  122.          @Override 
  123.          public boolean onTouchEvent( MotionEvent motionEvent )  
  124.          {  
  125.              Rect r = new Rect( );  
  126.              this.getDrawingRect( r );              
  127.              float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );  
  128.                
  129.              int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 );  
  130.                
  131.              mActiveTab = pressedTab;  
  132.                
  133.             ifthis.mOnTabClickListener != null)  
  134.              {  
  135.                  this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) );              
  136.              }  
  137.               
  138.              this.invalidate();  
  139.                
  140.              return super.onTouchEvent( motionEvent );  
  141.          }  
  142.            
  143.          void addTabMember( TabMember tabMember )  
  144.          {  
  145.              mTabMembers.add( tabMember );  
  146.          }  
  147.            
  148.          void setOnTabClickListener( OnTabClickListener onTabClickListener )  
  149.          {  
  150.              mOnTabClickListener = onTabClickListener;  
  151.          }  
  152.            
  153.          public static class TabMember//处理tab成员  
  154.          {  
  155.              protected int        mId;  
  156.              protected String    mText;  
  157.              protected int         mIconResourceId;  
  158.                
  159.              TabMember( int Id, String Text, int iconResourceId )  
  160.              {  
  161.                  mId = Id;  
  162.                  mIconResourceId = iconResourceId;  
  163.                  mText = Text;  
  164.              }  
  165.                
  166.              public int getId( )  
  167.              {  
  168.                  return mId;  
  169.              }  
  170.                
  171.              public String getText( )  
  172.              {  
  173.                  return mText;  
  174.              }  
  175.                
  176.              public int getIconResourceId( )  
  177.              {  
  178.                  return mIconResourceId;  
  179.              }  
  180.                    
  181.              public void setText( String Text )  
  182.              {  
  183.                  mText = Text;  
  184.              }  
  185.                
  186.              public void setIconResourceId( int iconResourceId )  
  187.              {  
  188.                  mIconResourceId = iconResourceId;  
  189.              }  
  190.          }  
  191.            
  192.          public static interface OnTabClickListener  
  193.          {  
  194.              public abstract void onTabClick( int tabId );  
  195.          }  
  196.      } 

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

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

 

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

 

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

来看看最终的效果吧

 

是不是还不错呢  希望大家喜欢,有问题可以留言交流。

你可能感兴趣的:(UI,android,移动开发,tab,iphone效果)