|
锁定老帖子 主题：标签/TabActivity 深度研究
精华帖 (0) :: 良好帖 (6) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-02-25
最后修改：2010-02-25
何谓标签 印象最深刻的应该是这个
现在 我们将通过一系列的扩展来研究之 写道
1. 自定义TabActivity 使得标签处于屏幕下方
2. 各个标签所用布局 既可在 *.xml 中定义 也可在 *.java 中定义 3. 更改标签布局
1. 标签页 在 屏幕下方 写道
一个典型的标签Activity 是由2 部分构成的 且其id都有规定 即：
* TabWidget 用于展示标签页 id=tabs * FrameLayout 用于展示隶属于各个标签的具体布局 id=tabcontent
* 基本布局如下： <?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:gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="200dip" >
<RelativeLayout
android:id="@+id/view1"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello to Johnny.Griffin!"
android:layout_centerInParent="true"
android:textStyle="bold|italic" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/robot"
android:layout_toLeftOf="@id/text" />
</RelativeLayout>
<TextView
android:id="@+id/view2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="创新源于模仿！" />
<TextView
android:id="@+id/view3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="欢迎进入 droid 世界！" />
<ImageView
android:id="@+id/view4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/robot" />
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</TabHost>
* 得到TabHost tHost 仅在TabActivity中有效 tHost = this.getTabHost();
* 创建4个标签 并指定所使用的布局 public static final String Tab1 = "Tab1";
public static final String Tab2 = "Tab2";
public static final String Tab3 = "Tab3";
public static final String Tab4 = "Tab4";
public static final String Tab5 = "Tab5";
tHost.addTab(tHost.newTabSpec(Tab1).setIndicator("Tab 1", getResources().getDrawable(R.drawable.icon)).setContent(R.id.view1));
tHost.addTab(tHost.newTabSpec(Tab2).setIndicator("Tab 2", getResources().getDrawable(R.drawable.beijing_small)).setContent(R.id.view2));
tHost.addTab(tHost.newTabSpec(Tab3).setIndicator("Tab 3").setContent(R.id.view3));
tHost.addTab(tHost.newTabSpec(Tab4).setIndicator("Tab 4").setContent(R.id.view4));
* 设定监听器 用于监听 标签间切换事件 tHost.setOnTabChangedListener(new OnTabChangeListener(){
@Override
public void onTabChanged(String tabId) {
// TODO Auto-generated method stub
}
});
* emulator 运行情况：
2. 在 *.java 中定义标签所需布局
public class CustomLayout implements TabHost.TabContentFactory {
Activity activity;
LayoutInflater inflaterHelper;
LinearLayout layout;
public CustomLayout (Activity a) {
activity = a;
inflaterHelper = a.getLayoutInflater();
}
/** {@inheritDoc} *///tag 标记各个标签
public View createTabContent(String tag) {
return addCustomView(tag);
}
public View addCustomView(String id){
layout = new LinearLayout(activity);
layout.setOrientation(LinearLayout.VERTICAL);
if(id.equals(Tab1)){
ImageView iv = new ImageView(activity);
iv.setImageResource(R.drawable.beijing_big);
layout.addView(iv,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
}
else if(id.equals(Tab2)){
EditText edit = new EditText(activity);
layout.addView(edit,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
Button btn = new Button(activity);
btn.setText("OK");
btn.setWidth(100);
layout.addView(btn,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
RadioGroup rGroup = new RadioGroup(activity);
rGroup.setOrientation(LinearLayout.HORIZONTAL);
RadioButton radio1 = new RadioButton(activity);
radio1.setText("Radio A");
rGroup.addView(radio1);
RadioButton radio2 = new RadioButton(activity);
radio2.setText("Radio B");
rGroup.addView(radio2);
layout.addView(rGroup,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
}
else if(id.equals(Tab3)){
LinearLayout.LayoutParams param3 =
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
layout.addView(inflaterHelper.inflate(R.layout.hello, null),param3);
}
else if(id.equals(Tab4)){
TextView tv = new TextView(activity);
tv.setText("HelloTags!");
tv.setGravity(Gravity.CENTER);
layout.addView(tv);
}
return layout;
}
}
* 如何使用： CustomLayout ct = new CustomLayout(this);
tHost.addTab(tHost.newTabSpec(Tab4).setIndicator("Tab 4").setContent(ct));
* emulator 运行结果:
3. 改变标签布局
写道
可能很多人对TabActivity 不满意 原因之一：其很不美观 而不美观的根源就是：标签的问题 其图像和文字相互覆盖 导致的
那么 我们可以自己扩展么？ 当然
写道
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
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>
</LinearLayout>
* 去掉系统默认的布局 即 在 setIndicator() 中置空 修改如下： tHost.addTab(tHost.newTabSpec(Tab1).setIndicator("").setContent(ct));
写道
可能有人会说：那我不调用setIndicator() 不久可以了么 不行 否则 会报错
* 自己定义布局 并 指定显示的内容 public View composeLayout(String s, int i){
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
TextView tv = new TextView(this);
tv.setGravity(Gravity.CENTER);
tv.setSingleLine(true);
tv.setText(s);
layout.addView(tv,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
ImageView iv = new ImageView(this);
iv.setImageResource(i);
layout.addView(iv,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
return layout;
}
* 得到 TabWidget 实例 tw LinearLayout ll=(LinearLayout)tHost.getChildAt(0);
tw =(TabWidget)ll.getChildAt(1);
* 得到 TabWidget 内的具体某个Layout 并使用上面的布局 composeLayout() public void updateWidgetView(int i,String text,int image){
RelativeLayout rl =(RelativeLayout)tw.getChildAt(i);
rl.addView(composeLayout(text,image));
}
* emulator 运行截图 // 前面 3个是使用新布局 最后一个是使用TabActivity 默认的布局 哪个好看 大家自己选择之
that's all!
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-02-26
有N个tab显示超级难看
|
| 返回顶楼 | |
|
发表时间：2010-02-27
yuankai 写道 有N个tab显示超级难看
对的 我的方法也仅仅是稍微好点而已 其实如果Tab太多的话 建议使用Gallery + FrameLayout 会更好点 然否？ |
| 返回顶楼 | |
|
发表时间：2010-03-01
根据实际需求吧，反正我觉得通常的需求都不会要求太多的Tab，就像上面那个拨号的，如果过多的话就不用Tab了。
|
| 返回顶楼 | |
|
发表时间：2010-03-03
考虑如果这样的话，软件的移植会不会有问题.
|
| 返回顶楼 | |
|
发表时间：2010-05-06
通过addtab可以动态添加切换卡 但是怎么关闭某个特定的切换卡呢？
|
| 返回顶楼 | |
|
发表时间：2010-05-07
tab.removeView(view)
|
| 返回顶楼 | |
|
发表时间：2010-05-08
建议不要用tab，直接自己实现一条bar，然后处理点击每个item的事件就是了。。
|
| 返回顶楼 | |
|
发表时间：2010-06-01
yuankai 写道 有N个tab显示超级难看
我现在有四个tab，但每个tab里的字都不能完全显示出来，除了把字体调小，在用tab的基础上还有没有其他的办法，像控制tab的间距。 各位发表，谢～ |
| 返回顶楼 | |
|
发表时间：2010-06-14
你改进的TabWidget怎样改进啊？把你推算的代码发到<TabWidget>标签内吗？
|
| 返回顶楼 | |
