android.support.v4包里面提供了FragmentTabHost用来替代TabHost,FragmentTabHost内容页面支持Fragment,下面我们就通过示例来看他的用法
效果图(仿新浪微博):
主界面布局文件:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <FrameLayout android:id="@+id/realtabcontent" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" /> <android.support.v4.app.FragmentTabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/maintab_toolbar_bg" > <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" android:orientation="horizontal" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0" /> </android.support.v4.app.FragmentTabHost> </LinearLayout>
主页实现代码
public class MainActivity extends FragmentActivity { private FragmentTabHost mTabHost; private Class<?> fragments[] = { FragmentPage1.class, FragmentPage2.class, FragmentPage3.class, FragmentPage4.class, FragmentPage5.class }; // 定义数组来存放按钮图片 private int imageIds[] = { R.drawable.tab_home_btn, R.drawable.tab_message_btn, R.drawable.tab_selfinfo_btn, R.drawable.tab_square_btn, R.drawable.tab_more_btn }; // Tab选项卡的文字 private String tabLabels[] = { "首页", "消息", "好友", "广场", "更多" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost); mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent); for (int i = 0; i < 5; i++) { mTabHost.addTab( mTabHost.newTabSpec(tabLabels[i]).setIndicator( getIndicator(i)), fragments[i], null); } } /** * 获取指示器 * * @param index * @return */ private View getIndicator(int index) { TextView textView = (TextView) View.inflate(this, R.layout.tab_item_view, null); textView.setCompoundDrawablesWithIntrinsicBounds(null, getResources() .getDrawable(imageIds[index]), null, null); textView.setText(tabLabels[index]); return textView; } }
指示器布局indicator_view.xml
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:background="@drawable/tab_bg_selector" android:gravity="center" android:textColor="#ffffff" android:textSize="12sp" />
每个Fragment很简单 就一个TextView这里就不贴出来了
源码下载:http://files.cnblogs.com/malinkang/FragmentTabHostExample.zip