TabHost基本用法(三)
前面的两种Tabhost的使用基本很少用了,因为不灵活,代码冗余,自从API11(3.0)后出现了Fragment,故要使用FragmentTabHost。
- activity_main.xml布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${relativePackage}.${activityClass}" >
<!-- android:id="@+id/tabhost"-->
<android.support.v4.app.FragmentTabHost
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<!-- android:id="@android:id/tabcontent"-->
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</FrameLayout>
<!-- stroke tabWidget的描边 -->
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/tabweiget"
>
</TabWidget>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</RelativeLayout>
注意:
1. 要使用android.support.v4.app.FragmentTabHost导入v4包,是为了向下兼容。
2. 要使用系统提供的id,tabs,tabcontent。不然会报错。 其中系统的tabhost不使用系统的,我试了也可以。
3. 让tabwidget置于最下方并且有一个分割线,background为添加的shape一个Stroke描边。tabweiget.xml如下:
<stroke android:width="1dp" android:color="#A9A9A9"/>
- fragment.xml的三个布局大致都一样,就是一个TextView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:text="second fragment"
android:textSize="20sp"
android:textColor="#ffff0000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>
- tabwidget.xml的布局是一个Imageview。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/tab_iv_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
- tabwidget的ImageView的selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_assistant_light" android:state_selected="true"/>
<item android:drawable="@drawable/tab_assistant_gray" android:state_selected="false"/>
</selector>
- fragment代码:注意此时fragment必须为==v4包==下的,因为FragmentTabHost和FragmentActivity都是v4包下的.
public class FragmentDemo2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment2,container,false);
}
}
- 主界面代码
public class MainActivity extends FragmentActivity {
private FragmentTabHost ft;
private LayoutInflater inflater;
// 图片
private int mImages[] = {
R.drawable.tab_counter,
R.drawable.tab_assistant,
R.drawable.tab_contest,
};
// 标题
private String mTabTags[] = {
"tab1",
"tab2",
"tab3",
};
//fragment类
private Class[] mFragments={
FragmentDemo1.class,
FragmentDemo2.class,
FragmentDemo3.class
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
inflater=LayoutInflater.from(this);
ft=(FragmentTabHost) findViewById(R.id.tabhost);
ft.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
//去掉分割线
ft.getTabWidget().setDividerDrawable(null);
for(int i=0;i<mTabTags.length;i++){
TabSpec ts=ft.newTabSpec(mTabTags[i]).setIndicator(getImageView(i));
//v4包提供的addTab类
ft.addTab(ts, mFragments[i], null);
}
}
// 获得图片资源
private View getImageView(int index) {
View view = getLayoutInflater().inflate(R.layout.view_tab_indicator, null);
ImageView imageView = (ImageView) view.findViewById(R.id.tab_iv_image);
imageView.setImageResource(mImages[index]);
return view;
}
}
分析:
1. 要继承v4包下的FragmentActivity。
2. 调用setup()初始化,因为是继承FragmentActivity故可直接调用getSupportFragmentManager()。
3. 调用addTab(TabSpec ts,Class c, Bundle b)添加Fragment类。
运行结果: