自定义TAB的三种实现方式

自定义TAB样式的实现
想必大家已看过很多资料的介绍
经在下总结，大致有以下三种实现方式：

1.自定义TabWidget
2.RadioGroup
3.ActivityGroup

下面本人就以上三种方式一一介绍,上图先:

主界面：

昨天 15:58 上传

下载附件 (55.65 KB)

 

自定义TabWidget

昨天 15:58 上传

下载附件 (52.89 KB)

 

RadioGroup

昨天 15:58 上传

下载附件 (58.45 KB)

 

ActivityGroup

昨天 15:58 上传

下载附件 (49.17 KB)

 

不难看出，以上三种方式实现的效果基本一致（如无特殊需求的话）
要实现自定义TAB
无非是要实现以下三点：
1.TAB的主背景
2.TAB的item视图
3.TAB的ITEM选择效果




且看自定义TABWIDGET
-------------------------------------------->
在配置文件里TAB背景图如此设置便可：

1. <TabWidget
2. android:id="@android:id/tabs"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:padding="2dip"
6. android:background="@drawable/tab_widget_background"
7. android:layout_weight="0.0"/>

复制代码

ITEM视图则在代码里设置

1. for(int i = 0; i < count; i++)
2. {
3. TabSpec tabSpec = m_tabHost.newTabSpec(ConValue.mTextviewArray[i]).
4. setIndicator(getTabItemView(i)).
5. setContent(getTabItemIntent(i));
6. m_tabHost.addTab(tabSpec);
7. m_tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);
8. }

复制代码

1. private View getTabItemView(int index)
2. {
4. View view = mLayoutInflater.inflate(R.layout.tab_item_view, null);
6. ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
8. if (imageView != null)
9. {
10. imageView.setImageResource(ConValue.mImageViewArray[index]);
11. }
13. TextView textView = (TextView) view.findViewById(R.id.textview);
15. textView.setText(ConValue.mTextviewArray[index]);
17. return view;
18. }

复制代码

setIndicator(getTabItemView(i))是关键


.TAB的ITEM选择效果则依赖
m_tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);

-------------------------------------------->






RadioGroup实现如下：
-------------------------------------------->

TAB背景图

1. <RadioGroup
2. android:id="@+id/main_radiogroup"
3. android:gravity="center_vertical"
4. android:layout_gravity="bottom"
5. android:orientation="horizontal"
6. android:padding="2dip"
7. android:background="@drawable/tab_widget_background"
8. android:layout_width="fill_parent"
9. android:layout_height="wrap_content">

复制代码

ITEM视图的设置

1. <RadioButton
2. android:id="@+id/RadioButton0"
3. android:text="主页"
4. android:drawableTop="@drawable/tab_icon1"
5. style="@style/tab_item_background" />

复制代码

TAB的ITEM选择效果体现在
style="@style/tab_item_background"

1. <style name="tab_item_background">
2. <item name="android:textAppearance">@style/tab_item_text_style</item>
3. <item name="android:gravity">center_horizontal</item>
4. <item name="android:background">@drawable/selector_tab_background2</item>
5. <item name="android:layout_width">fill_parent</item>
6. <item name="android:layout_height">wrap_content</item>
7. <item name="android:button">@null</item>
8. <item name="android:drawablePadding">3.0dip</item>
9. <item name="android:layout_weight">1.0</item>
10. </style>

复制代码

-------------------------------------------->




ActivityGroup实现如下：
-------------------------------------------->
ActivityGroup方式无TabWidget,所以是假TAB的实现


TAB背景图

2. <GridView
3. android:id="@+id/bottom_tab"
4. android:layout_width="fill_parent"
5. android:layout_height="wrap_content"
6. android:layout_alignParentBottom="true"
7. android:padding="2dp"
8. android:background="@drawable/tab_widget_background"
9. android:listSelector="@drawable/selector_tab_background"
10. android:numColumns="5">
11. </GridView>

复制代码

ITEM视图的设置

1. mBottomGridView = (GridView) findViewById(R.id.bottom_tab);
3. mBottomGridViewAdapter = new GridViewAdapter(this, ConValue.mImageViewArray, ConValue.mTextviewArray);

复制代码

适配器GridViewAdapter里实现getView方式返回视图

1. public View getView(int position, View convertView, ViewGroup parent) {
2. // TODO Auto-generated method stub
4. if (convertView == null)
5. {
6. convertView = mLayoutInflater.inflate(R.layout.tab_item_view, null);
7. }
9. ImageView imageView = (ImageView) convertView.findViewById(R.id.imageview);
10. imageView.setBackgroundResource(mImageviewArray[position]);
13. TextView textView = (TextView) convertView.findViewById(R.id.textview);
14. textView.setText(mTextViewArray[position]);
17. return convertView;
19. }

复制代码

TAB的ITEM选择效果体现在
android:listSelector="@drawable/selector_tab_background"
另外选择状态需要自己在切换ACTIVITY时动态设置图片

1. if (mCurTab != -1)
2. {
3. mBottomGridView.getChildAt(mCurTab).setBackgroundDrawable(null);
4. }
5. mBottomGridView.getChildAt(index).setBackgroundResource(R.drawable.tab_item_d);
6. mCurTab = index;

复制代码

-------------------------------------------->