Android学习笔记(二):TabHost布局及新浪式TabHost布局
TabHost布局
TabHost的布局可以定义在布局文件中，也可以像上一篇的例子一样不用布局文件系统会生成自带布局。
TabHost布局必须包含两个部分，TabWidget和FrameLayout。TabWidget就是每个tab的标签，FrameLayout则是tab内容。
两种情况：
1.如果我们的Activity继承自TabActivity并且在onCreat()方法中调用setContentView(R.layout....)，那么我们在包含此TabHost的布局文件中必须：
① TabHost的id必须设置为@android:id/tabhost。
② TabWidget的id必须设置为@android:id/tabs。
③ FrameLayout的id必须设置为@android:id/tabcontent。
TabHost布局文件如下：
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout ..>....</LinearLayout>
<LinearLayout ..>....</LinearLayout>
<LinearLayout ..>....</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
2.如果我们的Activity没有继承自TabActivity则Activity应继承ActivityGroup并且在onCreat()方法中需要注意几点：
源代码：
protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_layout);
//步骤1：获得TabHost的对象，并进行初始化setup()
TabHost tabs = (TabHost)findViewById(R.id.th);
tabs.setup(this.getLocalActivityManager());
//步骤2：通过TabHost.TabSpec增加tab的一页，通过setContent()增加内容，通过setIndicator增加页的标签
/*（1）增加第1页*/
TabHost.TabSpec spec = tabs.newTabSpec("Tag1");
spec.setContent(R.id.c92_tab1);
spec.setIndicator("Clock");
tabs.addTab(spec);
/*（2）增加第2页*/
spec = tabs.newTabSpec("Tag2");
spec.setContent(R.id.c92_tab2);
spec.setIndicator("Button");
tabs.addTab(spec);
//步骤3：可通过setCurrentTab(index)指定显示的页，从0开始计算。
tabs.setCurrentTab(1);
}
添加动态变化标签
其实设置动态变化标签与我们平时设置按钮点击时背景变化一个道理，在drawable文件夹定义一个tab_indicator.xml，源代码如下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 这是顺序执行的，如果状态是selected，则为android_focused图标，如果不是下一步，采用android_normal图标-->
<item android:drawable="@drawable/android_selected"
android:state_selected="true" />
<item android:drawable="@drawable/android_normal" />
</selector>
Resources res = getResources();
spec.setIndicator("Button",res.getDrawable(R.drawable.tab_indicator));
新浪微博下端导航栏
效果如图：
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabhost"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"/>
<TabWidget
android:id="@android:id/tabs"
android:visibility="gone"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<RadioGroup
android:gravity="center_vertical"
android:orientation="horizontal"
android:id="@+id/rgTab"
android:background="@drawable/maintab_toolbar_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<RadioButton
style="@style/main_tab_rb"
android:text="首页"
android:id="@+id/rbHome"
android:drawableTop="@drawable/icon_1_n"/>
<RadioButton
style="@style/main_tab_rb"
android:text="私信"
android:id="@+id/rbSixin"
android:drawableTop="@drawable/icon_2_n"/>
<RadioButton
style="@style/main_tab_rb"
android:text="评论"
android:id="@+id/rbComment"
android:drawableTop="@drawable/icon_3_n"/>
<RadioButton
style="@style/main_tab_rb"
android:text="刷新"
android:id="@+id/rbRefresh"
android:drawableTop="@drawable/icon_4_n"/>
<RadioButton
style="@style/main_tab_rb"
android:text="更多"
android:id="@+id/rbMore"
android:drawableTop="@drawable/icon_5_n"/>
</RadioGroup>
</LinearLayout>
</TabHost>
此处应注意三个组件的id：android:id="@android:id/tabhost"，android:id="@android:id/tabcontent"，android:id="@android:id/tabs",在这个布局文件中我们将TabWidget的android:visibility="gone" 这样就起到了去掉tabHost默认布局的效果，然后我们在下面添加RadioGroup控件，在RadioGroup的选项改变事件里完成Tab的切换，达到点击radioButton就像点击TabWidget的效果。RadioGroup的选项改变事件代码在下面的MainTabActivity.java中。
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="main_tab_rb">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">1.0</item>
<item name="android:background">@drawable/rb_menu_bg</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:button">@null</item>
<item name="android:textColor">#ffffffff</item>
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
<item name="android:textSize">12sp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:layout_marginTop">2dp</item>
</style>
</resources>
rb_menu_bg.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@drawable/home_btn_bg_s"/>
<item android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s"/>
<item android:state_checked="true" android:drawable="@drawable/home_btn_bg_d"/>
</selector>
MainTabActivity.java
public class MainTabActivity extends TabActivity {
private RadioGroup rgTab;
private TabHost th;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
this.setContentView(R.layout.main);
rgTab = (RadioGroup) this.findViewById(R.id.rgTab);
th = this.getTabHost();
th.addTab(th.newTabSpec("TS_HOME").setIndicator("TS_HOME").setContent(new Intent(MainTabActivity.this,HomeActivity.class)));
th.addTab(th.newTabSpec("TS_SIXIN").setIndicator("TS_SIXIN").setContent(new Intent(MainTabActivity.this,SixinActivity.class)));
th.addTab(th.newTabSpec("TS_COMMENT").setIndicator("TS_COMMENT").setContent(new Intent(MainTabActivity.this,CommentActivity.class)));
th.addTab(th.newTabSpec("TS_REFRESH").setIndicator("TS_REFRESH").setContent(new Intent(MainTabActivity.this,RefreshActivity.class)));
th.addTab(th.newTabSpec("TS_MORE").setIndicator("TS_MORE").setContent(new Intent(MainTabActivity.this,MoreActivity.class)));
rgTab.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
switch (checkedId) {
case R.id.rbHome:
th.setCurrentTabByTag("TS_HOME");
break;
case R.id.rbSixin:
th.setCurrentTabByTag("TS_SIXIN");
break;
case R.id.rbComment:
th.setCurrentTabByTag("TS_COMMENT");
break;
case R.id.rbRefresh:
th.setCurrentTabByTag("TS_REFRESH");
break;
case R.id.rbMore:
th.setCurrentTabByTag("TS_MORE");
break;
default:
break;
}
}
});
}
}
如果对TabHost存放多Activity不了解可以参看上篇简单例子。
