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

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

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

     public static class iTab extends View
       {
           private Paint                    mPaint;//背景畫筆
            private Paint                    mActiveTextPaint;//選中
            private Paint                    mInactiveTextPaint;//未選中
            private ArrayList<TabMember>    mTabMembers;//tab成員
            private int                        mActiveTab;
           private OnTabClickListener        mOnTabClickListener = null;

          public iTab( Context context, AttributeSet attrs ) //構造器，在裏面初始化畫筆
           {
              super(context, attrs);

              mTabMembers = new ArrayList<MainActivity.iTab.TabMember>( );

              mPaint = new Paint( );
              mActiveTextPaint = new Paint( );
              mInactiveTextPaint = new Paint( );

              mPaint.setStyle( Paint.Style.FILL );
              mPaint.setColor( 0xFFFFFF00 );
              mPaint.setAntiAlias(true);

              mActiveTextPaint.setTextAlign( Align.CENTER );
              mActiveTextPaint.setTextSize( 12 );
              mActiveTextPaint.setColor( 0xFFFFFFFF );
              mActiveTextPaint.setAntiAlias(true);


              mInactiveTextPaint.setTextAlign( Align.CENTER );
              mInactiveTextPaint.setTextSize( 12 );
              mInactiveTextPaint.setColor( 0xFF999999 );
              mInactiveTextPaint.setAntiAlias(true);
              mActiveTab = 0;

          }

          @Override
          protected void onDraw( Canvas canvas )
          {
              super.onDraw( canvas );

              Rect r = new Rect( );
              this.getDrawingRect( r );

              // 計算每個標籤能使用多少像素
               int singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );


              // 繪製背景
               canvas.drawColor( 0xFF000000 );
              mPaint.setColor( 0xFF434343 );
              canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );

              int color = 46;

              for( int i = 0; i < 24; i++ )
              {
                  mPaint.setARGB( 255, color, color, color );
                  canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );
                  color--;
              }

              // 繪製每一個tab
               for( int i = 0; i < mTabMembers.size( ); i++ )
              {
                  TabMember tabMember = mTabMembers.get( i );

                  Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) );
                  Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 );
                  Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
                  Canvas iconCanvas = new Canvas( );
                  iconCanvas.setBitmap( iconColored );

                  if( mActiveTab == i )//爲已選中的tab繪製一個白藍的漸變色，未選中的繪製一個白灰的漸變色
                  {
                      p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),
                              0xFFFFFFFF, 0xFF54C7E1, Shader.TileMode.CLAMP ) );
                  }
                  else {
                      p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),
                              0xFFA2A2A2, 0xFF5F5F5F, Shader.TileMode.CLAMP ) );
                  }

                  iconCanvas.drawRect( 0, 0, icon.getWidth( ), icon.getHeight( ), p );

                  for( int x = 0; x < icon.getWidth(); x++ )
                  {
                      for( int y = 0; y < icon.getHeight(); y++ )
                      {
                          if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 )
                          {
                              iconColored.setPixel( x, y, 0x00000000 );
                          }
                    }
                  }

                  // 計算tab圖片的位置
                  int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 );

                 // 繪製tab圖片 選中的和未選中的
                 if( mActiveTab == i )
                 {
                     mPaint.setARGB( 37, 255, 255, 255 );
                     canvas.drawRoundRect(  new RectF( r.left + singleTabWidth * i + 3, r.top + 3,
                            r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 5, 5, mPaint );
                     canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );
                     canvas.drawText( tabMember.getText( ),
                            singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint );
                 } else
                 {
                     canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );
                     canvas.drawText( tabMember.getText( ),
                             singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint );
                }
             }

         }
         /*
          * 觸摸事件
          */
         @Override
         public boolean onTouchEvent( MotionEvent motionEvent )
         {
             Rect r = new Rect( );
             this.getDrawingRect( r );
             float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );

             int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 );

             mActiveTab = pressedTab;

             if( this.mOnTabClickListener != null)
             {
                 this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) );
             }

             this.invalidate();

             return super.onTouchEvent( motionEvent );
         }

         void addTabMember( TabMember tabMember )
         {
             mTabMembers.add( tabMember );
         }

         void setOnTabClickListener( OnTabClickListener onTabClickListener )
         {
             mOnTabClickListener = onTabClickListener;
         }

         public static class TabMember//處理tab成員
         {
             protected int        mId;
             protected String    mText;
             protected int         mIconResourceId;

             TabMember( int Id, String Text, int iconResourceId )
             {
                 mId = Id;
                 mIconResourceId = iconResourceId;
                 mText = Text;
             }

             public int getId( )
             {
                 return mId;
             }

             public String getText( )
             {
                 return mText;
             }

             public int getIconResourceId( )
             {
                 return mIconResourceId;
             }

             public void setText( String Text )
             {
                 mText = Text;
             }

             public void setIconResourceId( int iconResourceId )
             {
                 mIconResourceId = iconResourceId;
             }
         }

         public static interface OnTabClickListener
         {
             public abstract void onTabClick( int tabId );
         }
     }

這是MainActivity這個類裏面的兩個static類，看我寫的註釋和上篇博客的內容應該都能理解。其中還定義了觸摸事件，實現點擊tab出現不同佈局的效果。接下來我們只需要在我們的layout上添加就可以了，我們繼續寫一個內部類

 public static class iRelativeLayout extends RelativeLayout//注意，還是聲明爲靜態
       {
           private Paint    mPaint;
           private Rect    mRect;

           public iRelativeLayout( Context context, AttributeSet attrs )
           {
               super(context, attrs);

              mRect = new Rect( );
              mPaint = new Paint( );

              mPaint.setStyle( Paint.Style.FILL_AND_STROKE );
              mPaint.setColor( 0xFFCBD2D8 );
          }

          @Override
          protected void onDraw( Canvas canvas )
          {
              super.onDraw( canvas );

              canvas.drawColor( 0xFFC5CCD4 );

              this.getDrawingRect( mRect );

              for( int i = 0; i < mRect.right; i += 7 )//繪製屏幕背景的紋理效果
              {
                  canvas.drawRect( mRect.left + i, mRect.top, mRect.left + i + 2, mRect.bottom, mPaint );
              }

          }
      }


      private static final int TAB_HIGHLIGHT = 1;
      private static final int TAB_CHAT = 2;
      private static final int TAB_LOOPBACK = 3;
      private static final int TAB_REDO = 4;
      private iTab            mTabs;
      private LinearLayout     mTabLayout_One;
      private LinearLayout     mTabLayout_Two;
      private LinearLayout     mTabLayout_Three;
      private LinearLayout     mTabLayout_Four;
      private LinearLayout     mTabLayout_Five;

      @Override
      public void onCreate(Bundle savedInstanceState)
      {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);


          mTabs = (iTab) this.findViewById( R.id.Tabs );
          mTabLayout_One = (LinearLayout) this.findViewById( R.id.TabLayout_One );
          mTabLayout_Two = (LinearLayout) this.findViewById( R.id.TabLayout_Two );
          mTabLayout_Three = (LinearLayout) this.findViewById( R.id.TabLayout_Three );
          mTabLayout_Four = (LinearLayout) this.findViewById( R.id.TabLayout_Four );
          mTabLayout_Five = (LinearLayout) this.findViewById( R.id.TabLayout_Four );//偷個懶，不寫第五個界面啦

          mTabs.addTabMember( new TabMember( TAB_HIGHLIGHT, "精選", R.drawable.jingxuan ) );
          mTabs.addTabMember( new TabMember( TAB_CHAT, "類別", R.drawable.cat ) );
          mTabs.addTabMember( new TabMember( TAB_LOOPBACK, "25大排行榜", R.drawable.rank ) );
          mTabs.addTabMember( new TabMember( TAB_REDO, "搜索", R.drawable.search ) );
          mTabs.addTabMember( new TabMember( TAB_REDO, "更新", R.drawable.download ) );//添加tab

          /*初始顯示第一個界面*/
          mTabLayout_One.setVisibility( View.VISIBLE );
          mTabLayout_Two.setVisibility( View.GONE );
          mTabLayout_Three.setVisibility( View.GONE );
          mTabLayout_Four.setVisibility( View.GONE );

          mTabs.setOnTabClickListener( new OnTabClickListener( ) {
              @Override
              public void onTabClick( int tabId )//實現點擊事件
              {
                  if( tabId == TAB_HIGHLIGHT )
                  {
                      mTabLayout_One.setVisibility( View.VISIBLE );
                      mTabLayout_Two.setVisibility( View.GONE );
                      mTabLayout_Three.setVisibility( View.GONE );
                      mTabLayout_Four.setVisibility( View.GONE );
                  } else if( tabId == TAB_CHAT )
                  {
                      mTabLayout_One.setVisibility( View.GONE );
                      mTabLayout_Two.setVisibility( View.VISIBLE );
                      mTabLayout_Three.setVisibility( View.GONE );
                      mTabLayout_Four.setVisibility( View.GONE );
                  } else if( tabId == TAB_LOOPBACK )
                  {
                      mTabLayout_One.setVisibility( View.GONE );
                      mTabLayout_Two.setVisibility( View.GONE );
                      mTabLayout_Three.setVisibility( View.VISIBLE );
                      mTabLayout_Four.setVisibility( View.GONE );
                  } else if( tabId == TAB_REDO )
                  {
                      mTabLayout_One.setVisibility( View.GONE );
                      mTabLayout_Two.setVisibility( View.GONE );
                      mTabLayout_Three.setVisibility( View.GONE );
                      mTabLayout_Four.setVisibility( View.VISIBLE );
                 }
             }
         });
     }

其中onDraw()方法裏面實現了背景的紋理效果，配合xml裏面背景色的配置，實現瞭如下圖所示的效果：

 

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

 

 <?xml version="1.0" encoding="utf-8"?>

   <view xmlns:android="http://schemas.android.com/apk/res/android"
       class="com.notice520.MainActivity$iRelativeLayout"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:background = "#C5CCD4FF"
       >
          <LinearLayout
              android:id = "@+id/TabLayout_One"
              android:layout_width = "fill_parent"
              android:layout_height = "fill_parent"
              android:layout_above = "@+id/Tabs"
              >
              <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
                  <RelativeLayout
                      android:layout_width = "fill_parent"
                      android:layout_height = "fill_parent"
                      android:visibility = "visible"
                      >
                      <TextView
                          android:textColor="@android:color/black"
                          android:textSize="30sp"
                          android:layout_width = "wrap_content"
                          android:layout_height = "wrap_content"
                          android:text = "春節快樂!!"
                      />
                      </RelativeLayout>
                  </ScrollView>
              </LinearLayout>

          <LinearLayout
              android:id = "@+id/TabLayout_Two"
              android:layout_width = "fill_parent"
              android:layout_height = "fill_parent"
              android:layout_above = "@+id/Tabs"
              >
              <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
                      <RelativeLayout
                          android:layout_width = "fill_parent"
                          android:layout_height = "fill_parent"
                          android:visibility = "visible"
                          android:layout_above = "@+id/Tabs"
                          >
                          <Button
                              android:layout_width = "wrap_content"
                              android:layout_height = "wrap_content"
                              android:text = "祝大家事業有成！"
                              android:textSize = "30sp"
                          />
                      </RelativeLayout>
              </ScrollView>
          </LinearLayout>
          <LinearLayout
              android:id = "@+id/TabLayout_Three"
              android:layout_width = "fill_parent"
              android:layout_height = "fill_parent"
              android:layout_above = "@+id/Tabs"
              >
              <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
                  <RelativeLayout
                     android:layout_width = "fill_parent"
                      android:layout_height = "fill_parent"
                      android:visibility = "visible"
                      android:layout_above = "@+id/Tabs"
                      >
                      <ImageView

                          android:layout_width = "fill_parent"
                          android:layout_height = "fill_parent"
                          android:src="@drawable/newq"
                      />
                  </RelativeLayout>
              </ScrollView>
          </LinearLayout>
          <LinearLayout
              android:id = "@+id/TabLayout_Four"
              android:layout_width = "fill_parent"
              android:layout_height = "fill_parent"
              android:layout_above = "@+id/Tabs"
              >
              <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
                  <RelativeLayout
                      android:id = "@+id/TabLayout_Four"
                      android:layout_width = "fill_parent"
                      android:layout_height = "fill_parent"
                      android:visibility = "visible"
                      android:layout_above = "@+id/Tabs"
                      >
                      <TextView
                          android:textColor="@android:color/black"
                          android:layout_width = "wrap_content"
                          android:layout_height = "wrap_content"
                          android:text = "很簡單，是麼"
                      />
                  </RelativeLayout>
              </ScrollView>
          </LinearLayout>
     <view
         class="com.notice520.MainActivity$iTab"
         android:id="@+id/Tabs"
         android:layout_width = "fill_parent"
         android:layout_height = "49px"
         android:layout_alignParentBottom = "true"
     />
 </view>

來看看最終的效果吧

 

是不是還不錯呢  希望大家喜歡，有問題可以留言交流。