Transcript Document

Chapter 6
進階UI設計
本投影片（下稱教用資源）僅授權給採用教用資源相關之旗標書籍為教科書之授課老師（下稱老師）專用，老師為教學使用之目的，得摘錄、編輯、重製教用資
源（但使用量不得超過各該教用資源內容之80%）以製作為輔助教學之教學投影片，並於授課時搭配旗標書籍公開播放，但不得為網際網路公開傳輸之遠距教學、
網路教學等之使用；除此之外，老師不得再授權予任何第三人使用，並不得將依此授權所製作之教學投影片之相關著作物移作他用。
著作權所有 © 旗標出版股份有限公司
進階UI程式設計
條列式選單
 當程式的內容為功能選項、檔案列表等較適合使用條列的
方式來呈現時，我們可以使用條列式選單來實做，例如
Android的Market應用程式選單，左圖為Market畫面，右圖
為範例：
條列式選單
 第一種寫法如下 – 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內建選單。
分頁選單
 每個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的高度
Q&A