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

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

[java] view plaincopy

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上添加就可以了，我们继续写一个内部类

[java] view plaincopy

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里面配置了

[xhtml] view plaincopy

<?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>

来看看最终效果吧