TabHost是Android中一种常用的控件,虽然说fragment可以替代tabhost,但是他还是很常用的一种控件。例如:
就是用tabhost来实现的。TabHost由两部分组成<TabWidget><FrameLayout>。其中需要注意的是TabWidget和FrameLayout的id必须设计为系统
底层的id。因为TabHost源码中有对其进行封装:源码为:
public void setup() {
mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
if (mTabWidget == null) {
throw new RuntimeException(
"Your TabHost must have a TabWidget whose id attribute is 'android.R.id.tabs'");
}
...............
}
下面先来介绍一种Tabhost的使用
下面先来布局部分的代码:
<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=".MainActivity" >
<TabHost
android:id="@+id/tabHost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- 设置TabHost的头部 -->
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="@+id/ll_1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="首页" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_2"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="第二页" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_3"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="第三页" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
主界面的Java代码
package cn.zxw.tabhost1;
import android.os.Bundle;
import android.app.Activity;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost tabHost = (TabHost) findViewById(R.id.tabHost);
tabHost.setup();// 初始化tabhost
// 一个页面
TabSpec tab1 = tabHost.newTabSpec("tab1");
tab1.setIndicator("首页");
tab1.setContent(R.id.ll_1);
tabHost.addTab(tab1);
//
TabSpec tab2 = tabHost.newTabSpec("tab2");
tab2.setIndicator("第二页");
tab2.setContent(R.id.ll_2);
tabHost.addTab(tab2);
//
TabSpec tab3 = tabHost.newTabSpec("tab3");
tab3.setIndicator("第三页");
tab3.setContent(R.id.ll_3);
tabHost.addTab(tab3);
}
}
其实现的界面为
如果需要改变上下的位置,只需要调换<TabWidget><FrameLayout>的前后顺序,既可以得到
而在TabActivity中封装了Tabhost的控件,故可以使用TabActivity去添加activty给人的感觉和各大新闻app界面相同的效果。
需要注意的是
TabHost
控件他是有一个升级的过程。
4.0
之前都是可以显示图片,但是
4.0
后就是显示文字。解决的方法一般是
把
TabWidget
隐藏用其他的来替换,常采用
RaidoGroup + RadioButton
来替换
。或者是重写方法。而前者为常用的方法。例如可以这样写代码:
<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=".MainActivity" >
<TabHost
android:id="@+id/tabHost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!-- 每个Tab要显示的布局 -->
<LinearLayout
android:id="@+id/ll_1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="首页"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_2"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="第二页"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_3"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="第三页"/>
</LinearLayout>
</FrameLayout>
<TabWidget
android:visibility="gone"
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<RadioGroup
android:id="@+id/rg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:background="@drawable/head_bg"
android:gravity="center"
android:text="首页"/>
<RadioButton
android:id="@+id/rb_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/head_bg"
android:gravity="center"
android:text="第二页"/>
<RadioButton
android:id="@+id/rb_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/head_bg"
android:gravity="center"
android:text="第三页"/>
</RadioGroup>
</LinearLayout>
</TabHost>
</RelativeLayout>
Java代码为
<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=".MainActivity" >
<TabHost
android:id="@+id/tabHost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!-- 每个Tab要显示的布局 -->
<LinearLayout
android:id="@+id/ll_1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="首页"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_2"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="第二页"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_3"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="第三页"/>
</LinearLayout>
</FrameLayout>
<TabWidget
android:visibility="gone"
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<RadioGroup
android:id="@+id/rg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:background="@drawable/head_bg"
android:gravity="center"
android:text="首页"/>
<RadioButton
android:id="@+id/rb_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/head_bg"
android:gravity="center"
android:text="第二页"/>
<RadioButton
android:id="@+id/rb_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/head_bg"
android:gravity="center"
android:text="第三页"/>
</RadioGroup>
</LinearLayout>
</TabHost>
</RelativeLayout>
以上为部分代码,可以自己调试。