自定义Tabhost里的TabWidget布局

  自定义Tabhost里的TabWidget布局 收藏

    大家都知道Tabhost中Tabwidget的布局是图标在上，文字在下的垂直布局。比如通讯录的布局。

这种布局在手机上的竖屏上用得最多，但在横屏则显得水平分布得不够紧凑。如何实现自定义的布局呢？

首先要理解Tabwidget.

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>

有了这个布局，就可以自定义自己的布局了，以图片在左，文字在右为例。

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;
}

 

这样就实现了图片在左，文字在右的布局。

效果图：