何謂標籤 印象最深刻的應該是這個
現在 我們將通過一系列的擴展來研究之
寫道
1. 自定義TabActivity 使得標籤處於屏幕下方
2. 各個標籤所用佈局 既可在 *.xml 中定義 也可在 *.java 中定義
3. 更改標籤佈局
2. 各個標籤所用佈局 既可在 *.xml 中定義 也可在 *.java 中定義
3. 更改標籤佈局
1. 標籤頁 在 屏幕下方
寫道
一個典型的標籤Activity 是由2 部分構成的 且其id都有規定 即:
* TabWidget 用於展示標籤頁 id=tabs
* FrameLayout 用於展示隸屬於各個標籤的具體佈局 id=tabcontent
* 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();
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));
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
- }
- });
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;
- }
- }
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));
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
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>
<?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));
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;
- }
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);
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));
- }
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!