自定义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;
- }
这样就实现了图片在左,文字在右的布局。
效果图: