Chapter 6 進階UI設計.

Presentation on theme: "Chapter 6 進階UI設計."— Presentation transcript:

1 Chapter 6 進階UI設計

2 進階UI程式設計 本章節將介紹四種選單，分別為圖式選單、條列式選單、下拉式選單和整合式選單。
選單通常會包含一些常用的指令，用選單方式通常可以讓程式看起來較為簡單，不會讓程式畫面看起來有一堆功能或按鈕

3 條列式選單 當程式的內容為功能選項、檔案列表等較適合使用條列的方式來呈現時，我們可以使用條列式選單來實做，例如Android的Market應用程式選單，左圖為Market畫面，右圖為範例：

4 條列式選單 第一種寫法如下 – 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)); } 首先要製作一個條例式選單須使用到<ListView>元件，在main.xml當中創建一個id為ListView01的<ListView>；在java程式碼部分，首先先宣告一個ListView元件，並使用findViewById找到id為ListView01的<ListView>，接著用setAdapter將程式的內容文字設定到<ListView>當中

5 條列式選單 第二種寫法如下 – 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); public View getView(int position, View convertView, ViewGroup parent) { // 設定部分略 另一種條列式選單，利用BaseAdapter以及ListActivity來達成一樣的效果 在範例中，自訂一個擴展自BaseAdapter 的MyListAdapter類別，並將原類別的Activity換成ListActivity，而在MyListAdapter最重要的Method是複寫getView()，此Method為產生列表的重要關鍵，至於建立的列表數量則會依照getCount()回傳的數量來決定

6 條列式選單 接著將上述條列式範例加入圖檔： @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; 在範例中自訂一個ViewContainer的Class，裡面宣告兩個物件，一為TextView用來置放文字，另一為ImageView，用來放置圖案，若要更進一步客製化顯示的列表，可將要顯示的元件都置放在此Class中，接著再getView時依照此Class來建立列表

7 條列式選單 範例結果如下：

8 分頁選單 分頁選單如下圖的Tab選單，存放這些Tab則是使用TabHost，此分頁選單為Android內建選單。

9 分頁選單 每個Tab對應到一個LinearLayout，XML如下所示：
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <!-- 第一個Tab佈局 --> <LinearLayout androidrientation="vertical" > <!-- 可自訂元件在此 --> <TextView android:text="撥出來電資訊" android:textSize="40sp" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> </LinearLayout>

10 分頁選單 每個Tab對應到一個LinearLayout，XML如下所示： <!-- 第二個Tab佈局 -->
<LinearLayout 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 androidrientation="vertical"> <TextView android:text="未接來電資訊" </FrameLayout>

11 分頁選單 每個對應的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) ); } 程式一開始使用getTabHost() 得到TabActivity的TabHost，接著從LayoutInflater指定R.layout.main為存放TabHost的資源檔。再來使用TabHost的addTab() 來加入不同的Tab分頁，在範例中加入了三個Tab，每個Tab利用setContent()來指定對應到main.xml當中哪一個LinearLayout

12 分頁選單 範例結果如圖下：

13 程式介面設計

14 程式介面設計 佈景可將整個應用程式依自己建立的風格(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> <!— MyTextStyle02將文字大小設定為24sp --> <style name="MyTextStyle02"> <item name="android:textSize">24sp</item> </resources>

15 程式介面設計 從程式碼可看到我們設定了三個<style>，分別為MyTheme、MyTextStyle01和MyTestStyle02，MyTheme中可看到有一個<item>為“android:windowNoTitle”，此屬性若設定為true，可取消程式最上方的程式標題，如下圖：

16 程式介面設計 除了MyTheme之外，MyTextStyle01和MyTestStyle02這兩個Style分別將文字大小設置為20sp以及24sp，如下圖：

17 程式介面設計 範例程式碼如下： <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <!— 將TextView01的樣式設定為MyTextStyle01 --> <TextView android:text="第一種Style" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <!— 將TextView02的樣式設定為MyTextStyle02 --> android:text="第二種Style" </LinearLayout></resources>

18 程式介面設計 若要套用布景到整個應用程式，可修改res/AndroidManifest.xml，如下：
除了可套用至整個應用程式之外，也可以分別對於各個元件單獨設定不同的style，如main.xml，在此定義了兩個<TextView>，並在TextView加入下列屬性： <application … <TextView … … >

19 程式介面設計 下列表列出<style>常用到的<item>元素，更詳細的元素可至/docs/reference/android/R.styleable.html查詢： 屬性 功能敘述 android:windowNoTitle 若設為true，則會隱藏程式上方的標題 android:windowTitleSize 設定應用程式標題大小 android:windowTitleBackgroundStyle 設定標題的背景樣式 android:textColor 文字顏色 android:textSize 文字大小 android:textStyle 文字的樣式：粗體、斜體、粗斜體 android:windowBackground 設置應用程式的背景 android:windowFullscreen 設置應用程式是否為全螢幕 android:layout_width 設置layout的寬度 android:layout_height 設置layout的高度

20 Q&A