大家都知道Tabhost中Tabwidget的布局是图标在上,文字在下的垂直布局。比如通讯录的布局。
这种布局在手机上的竖屏上用得最多,但在横屏则显得水平分布得不够紧凑。如何实现自定义的布局呢?
1:首先理解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="0dip" android:layout_weight="1"> </FrameLayout> </LinearLayout> </TabHost>
TabHost里面包含了一个<LinearLayout>,然后LinearLayout里面有一个TabWidget 这个存放每个“切换卡”,FrameLayout里面存放每个切换卡下面的内容,
TabWidget 理解:
1. TabWidget 为 horizontal 的 LinearLayout
2. 且 其包含的标签又是一个RelativeLayout
3. 每个标签RelativeLayout 里面包含2个View: TextView ImageView
有了这个理解,可以估计得到
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" > <RelativeLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView /> <TextView /> </RelativeLayout> <RelativeLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView /> <TextView /> </RelativeLayout> ..........多个RelativeLayout </LinearLayout>
有了这个布局,就可以自定义自己的布局了,以图片在左,文字在右为例。
package com.android.customtabhost;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
public class CustomTabHost extends TabActivity {
private TabHost mTabHost;
private static final String TAB_SETTING_TAG_0 = "tab_setting0";
private static final String TAB_SETTING_TAG_1 = "tab_setting1";
private static final String TAB_SETTING_TAG_2 = "tab_setting2";
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
//setContentView(R.layout.main);
mTabHost = getTabHost();
// Setup the tabs
setupSettingTab(TAB_SETTING_TAG_0, 0);
setupSettingTab(TAB_SETTING_TAG_1, 1);
setupSettingTab(TAB_SETTING_TAG_2, 2);
}
private void setupSettingTab(String tag, int num) {
// TODO Auto-generated method stub
// Force the class since overriding tab entries doesn't work
Intent intent = new Intent();
intent.setClass(this, SettingActivity.class);
String name = getResources().getString(R.string.setting);
mTabHost.addTab(mTabHost.newTabSpec(tag).setIndicator("")
.setContent(intent));
addToTabHost(name, R.drawable.setting_background, num);
}
private void addToTabHost(String name, int image, int number) {
// TODO Auto-generated method stub
LinearLayout ll = (LinearLayout) mTabHost.getChildAt(0);
TabWidget tw = (TabWidget) ll.getChildAt(0);
RelativeLayout rl = (RelativeLayout) tw.getChildAt(number);
rl.addView(composeLayout(name, image), new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT));
}
private View composeLayout(String name, int image) {
LinearLayout layout = new LinearLayout(this);
layout.setGravity(Gravity.CENTER);
layout.setOrientation(LinearLayout.HORIZONTAL);
ImageView iv = new ImageView(this);
iv.setImageResource(image);
layout.addView(iv, new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT));
TextView tv = new TextView(this);
tv.setGravity(Gravity.CENTER);
tv.setSingleLine(true);
tv.setPadding(10, 0, 0, 0);
tv.setTextSize(18);
tv.setText(name);
layout.addView(tv, new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT));
return layout;
}
}