Transcript Android TabHost說明

第五章
進階UI設計
進階UI程式設計
條列式選單
• 當程式的內容為功能選項、檔案列表等較適合使用條列的
方式來呈現時，我們可以使用條列式選單來實做，例如
Android的Market應用程式選單，左圖為Market畫面，右圖
為範例：
條列式選單-範例
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/mainListView">
</ListView>
</LinearLayout>
條列式選單-範例
simplerow.xml
<TextView
xmlns:android="http://schemas.android.com/apk/r
es/android"
android:id="@+id/rowTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16sp" >
</TextView>
條列式選單-範例
Activity
package com.windrealm.android;
import java.util.ArrayList;
import java.util.Arrays;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class SimpleListViewActivity extends Activity {
private ListView mainListView ;
private ArrayAdapter<String> listAdapter ;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Find the ListView resource.
mainListView = (ListView) findViewById( R.id.mainListView );
// Create and populate a List of planet names.
String[] planets = new String[] { "Mercury", "Venus", "Earth", "Mars",
"Jupiter", "Saturn", "Uranus", "Neptune"};
ArrayList<String> planetList = new ArrayList<String>();
planetList.addAll( Arrays.asList(planets) );
// Create ArrayAdapter using the planet list.
listAdapter = new ArrayAdapter<String>(this, R.layout.simplerow, planetList);
// Add more planets. If you passed a String[] instead of a List<String>
// into the ArrayAdapter constructor, you must not add more items.
// Otherwise an exception will occur.
listAdapter.add( "Ceres" );
listAdapter.add( "Pluto" );
listAdapter.add( "Haumea" );
listAdapter.add( "Makemake" );
listAdapter.add( "Eris" );
// Set the ArrayAdapter as the ListView's adapter.
mainListView.setAdapter( listAdapter );
}
}
條列式選單
• 第一種寫法如下 – ListView：
public class ListMenuExample extends Activity {
// 設定選單要顯示的內容
String[] menuItem = { “選單功能1”, “選單功能2”, “選單
功能3” , “選單功能4 ”, “選單功能5 ”};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ListView myListView = (ListView)
findViewById(R.id.ListView01);
// 將設定的內容利用Adapter顯示在ListView上
myListView.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, menuItem));
}
}
條列式選單
• 第二種寫法如下 – BaseAdapter和ListActivity：
public class ListMenuExample01 extends ListActivity {
// 設定選單要顯示的內容
String showData[] = {"選單功能1", "選單功能2", "選單功能3", "選單功能4", "選單功能5"};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setListAdapter(new MyListAdapter(this));
}
// 將選單內容以列表形式顯示出來
class MyListAdapter extends BaseAdapter{
LayoutInflater myInflater;
public MyListAdapter(Context c){
myInflater = LayoutInflater.from(c);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// 設定部分略
}
}
}
條列式選單
• 接著將上述條列式範例加入圖檔：
@Override
public View getView(int position, View convertView, ViewGroup parent) {
final int index = position;
ViewContainer vc = new ViewContainer();
if( convertView == null ){
convertView = myInflater.inflate(R.layout.main, null);
vc.textView = (TextView) convertView.findViewById(R.id.dataInfo);
vc.imageView = (ImageView) convertView.findViewById(R.id.icon);
convertView.setTag(vc);
}
else {
vc = (ViewContainer) convertView.getTag();
}
// 設定TextView的文字
vc.textView.setText(showData[index]);
// 設定ImageView的圖示
vc.imageView.setImageBitmap(bm);
return convertView;
}
條列式選單
• 範例結果如下：
分頁選單
• 分頁選單如下圖的Tab選單，存放這些Tab則是使
用TabHost，此分頁選單為Android內建選單。
分頁選單-main.xml
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns:android="http://schemas.android.com/ap
k/res/android" android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>
分頁選單-tab.xml
<?xml version="1.0" encoding="utf-8" ?>
<TabHost android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost">
<LinearLayout android:id="@+id/LinearLayout01"
android:orientation="vertical" android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_height="wrap_content" android:layout_width="fill_parent" />
<FrameLayout android:id="@android:id/tabcontent"
android:layout_height="fill_parent" android:layout_width="fill_parent" />
</LinearLayout>
</TabHost>
分頁選單TabBarExample.java(1/2)
01package com.androidpeople.tab;
02
03import android.app.TabActivity;
04import android.content.Intent;
05import android.os.Bundle;
06import android.widget.TabHost;
07import android.widget.TabHost.TabSpec;
08
09public class TabBarExample extends TabActivity { //在主程式部分則是擴展自TabActivity
10 /** Called when the activity is first created. */
11 @Override
12 public void onCreate(Bundle savedInstanceState) {
13
super.onCreate(savedInstanceState);
14
setContentView(R.layout.tab); //注意,畫面佈置來自於tab.xml
15
16~34 … see next page
35
36 }
37}
分頁選單TabBarExample.java(2/2)
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/** TabHost will have Tabs */ // 獲取TabActivity的TabHost
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
/** TabSpec used to create a new tab.(建立一個tab物件要用TabSpec類別)
* By using TabSpec only we can able to setContent to the tab.
* By using TabSpec setIndicator() we can set name to tab. */
/** tid1 is firstTabSpec Id. Its used to access outside. */
TabSpec firstTabSpec = tabHost.newTabSpec("tid1");
TabSpec secondTabSpec = tabHost.newTabSpec("tid1");
/** TabSpec setIndicator() is used to set name for the tab. */
/** TabSpec setContent() is used to set content for a particular tab. */
firstTabSpec.setIndicator("First Tab Name").setContent(newIntent(this,FirstTab.class));
secondTabSpec.setIndicator("Second Tab Name").setContent(newIntent(this,SecondTab.class));
/** Add tabSpec to the TabHost to display. */
tabHost.addTab(firstTabSpec);
tabHost.addTab(secondTabSpec);
分頁選單-FirstTab.java
01package com.androidpeople.tab;
02
03import android.app.Activity;
04import android.os.Bundle;
05import android.widget.TextView;
06
07public class FirstTab extends Activity {
08 /** Called when the activity is first created. */
09 @Override
10 public void onCreate(Bundle savedInstanceState) {
11
super.onCreate(savedInstanceState);
12
13
/* First Tab Content */
14
TextView textView = new TextView(this);
15
textView.setText("First Tab");
16
setContentView(textView);
17
18 }
19}
分頁選單-SecondTab.java
01package com.androidpeople.tab;
02
03import android.app.Activity;
04import android.os.Bundle;
05import android.widget.TextView;
06
07public class SecondTab extends Activity {
08 /** Called when the activity is first created. */
09 @Override
10 public void onCreate(Bundle savedInstanceState) {
11
super.onCreate(savedInstanceState);
12
13
/* Second Tab Content */
14
TextView textView = new TextView(this);
15
textView.setText("Second Tab");
16
setContentView(textView);
17
18 }
19}
分頁選單
• 分頁選單如下圖的Tab選單，存放這些Tab則是使
用TabHost，此分頁選單為Android內建選單。
分頁選單
• 每個Tab對應到一個LinearLayout，XML如下所示：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- 第一個Tab佈局 -->
<LinearLayout android:id="@+id/first_tab_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
androidrientation="vertical" >
<!-- 可自訂元件在此 -->
<TextView android:text="撥出來電資訊"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
分頁選單
• 每個Tab對應到一個LinearLayout，XML如下所示：
<!-- 第二個Tab佈局 -->
<LinearLayout android:id="@+id/second_tab_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
androidrientation="vertical" >
<!-- 可自訂元件在此 -->
<TextView android:text="接聽來電資訊"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
<!-- 第三個Tab佈局 -->
<LinearLayout android:id="@+id/third_tab_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
androidrientation="vertical">
<!-- 可自訂元件在此 -->
<TextView android:text="未接來電資訊"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
</FrameLayout>
分頁選單
• 每個對應的LinearLayout中則是可放使用者自訂的元件。
在主程式部分則是擴展自TabActivity，程式碼如下：
public class TabMenuExample extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 獲取TabActivity的TabHost
TabHost th = getTabHost();
LayoutInflater.from(this).inflate(R.layout.main, th.getTabContentView(), true);
// 加入第一個Tab並設定tab的名稱以及圖示並指定第一個佈局
th.addTab(th.newTabSpec("tab1")
.setIndicator("撥出來電
",getResources().getDrawable(android.R.drawable.sym_call_outgoing))
.setContent(R.id.first_tab_layout) );
// 加入第二個Tab並設定tab的名稱以及圖示並指定第二個佈局
th.addTab(th.newTabSpec("tab2")
.setIndicator("接聽來電
",getResources().getDrawable(android.R.drawable.sym_call_incoming))
.setContent(R.id.second_tab_layout) );
// 加入第三個Tab並設定tab的名稱以及圖示並指定第三個佈局
th.addTab(th.newTabSpec("tab3").
setIndicator("未接來電",getResources().getDrawable(android.R.drawable.sym_call_missed))
.setContent(R.id.third_tab_layout) );
}
}
分頁選單
• 範例結果如圖下：
程式介面設計
程式介面設計
• 佈景可將整個應用程式依自己建立的風格(style)來做UI設定，而自訂
的style可放置在res/values/style.xml內，而定義這些style必須先定義此
為<resources>，在<resources>當中建立自訂的<style>，在每個<style>
當中可設定各自的<item>元素，程式碼如下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!— MyTheme樣式隱藏視窗的Title -->
<style name="MyTheme">
<item name="android:windowNoTitle">true</item>
</style>
<!— MyTextStyle01將文字大小設定為20sp -->
<style name="MyTextStyle01">
<item name="android:textSize">20sp</item>
</style>
<!— MyTextStyle02將文字大小設定為24sp -->
<style name="MyTextStyle02">
<item name="android:textSize">24sp</item>
</style>
</resources>
程式介面設計
•
從程式碼可看到我們設定了三個<style>，分別為MyTheme、MyTextStyle01和
MyTestStyle02，MyTheme中可看到有一個<item>為“android:windowNoTitle”，
此屬性若設定為true，可取消程式最上方的程式標題，如下圖：
程式介面設計
• 除了MyTheme之外，MyTextStyle01和MyTestStyle02這兩
個Style分別將文字大小設置為20sp以及24sp，如下圖：
程式介面設計
• 範例程式碼如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!— 將TextView01的樣式設定為MyTextStyle01 -->
<TextView
style="@style/MyTextStyle01"
android:text="第一種Style"
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!— 將TextView02的樣式設定為MyTextStyle02 -->
<TextView
style="@style/MyTextStyle02"
android:text="第二種Style"
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout></resources>
程式介面設計
• 若要套用布景到整個應用程式，可修改
res/AndroidManifest.xml，如下：
<application … android:theme="@style/MyTheme">
• 除了可套用至整個應用程式之外，也可以分別對於各個元
件單獨設定不同的style，如main.xml，在此定義了兩個
<TextView>，並在TextView加入下列屬性：
<TextView … style="@style/MyTextStyle01" … >
程式介面設計
• 下列表列出<style>常用到的<item>元素，更詳細的元素可
至/docs/reference/android/R.styleable.html查詢：
屬性
功能敘述
android:windowNoTitle
若設為true，則會隱藏程式上方的標題
android:windowTitleSize
設定應用程式標題大小
android:windowTitleBackgro
設定標題的背景樣式
undStyle
android:textColor
文字顏色
android:textSize
文字大小
android:textStyle
文字的樣式：粗體、斜體、粗斜體
android:windowBackground
設置應用程式的背景
android:windowFullscreen
設置應用程式是否為全螢幕
android:layout_width
設置layout的寬度
android:layout_height
設置layout的高度
課後習題
1. ListActivity產生的列表數量會依照BaseAdapter的哪個
Method來決定？
2. 在條列式選單中，如何自訂列表中的項目？
3. 在分頁選單中，如何設定哪一個Tab對應到哪一個
Layout？
4. 如何將應用程式上面的Title給隱藏起來？
5. 佈局的元件是否可以指定不同的Style，若可以要如何指
定？
Q&A