《当我们利用B4A程式来开发AndroidAPP时课件.ppt》由会员分享，可在线阅读，更多相关《当我们利用B4A程式来开发AndroidAPP时课件.ppt（82页珍藏版）》请在三一办公上搜索。
1、第十一章 使用者基本介面設計,課程名稱：程式設計授課老師：李春雄 博士,本章學習目標,1.讓讀者瞭解在B4A開發環境中使用者基本介面 設計物件種類及各物件的主要與共同屬性。2.讓讀者瞭解B4A開發環境中使用者基本介面設 計物件的使用方法與應用。,本章內容,11-1 B4A的使用者介面設計工具11-2 標籤物件(Label)11-3 輸入方塊物件(EditText)11-4 命令控制項(Button)11-5 對話訊息方塊11-6 單選鈕物件(RadioButton)11-7 複選鈕物件(CheckBox)11-8 使用者螢幕物件(Activity),11-1 B4A的使用者介面設計工具,【功能
2、】可以讓設計者在設計介面的同時，可以看到呈現方式。【工具】1.設計介面工具：Designer與Abstract Designer設計視窗2.呈現方式工具：連結到Android模擬器與實體手機或平板【完整步驟】步驟一、在B4A功能選單中，開啟Designer設計視窗,步驟二、從Designer設計視窗上方Add View功能選項，加入物件到Abstract Designer介面中(亦即是一種抽像設計，因為只看到版面配置，而無法看到物件屬性值)，分別為：Label1與Button1。,步驟三、在Designer設計視窗中設定物件的屬性之屬性值,btnRun,執行結果,步驟四：透過Designer設
3、計視窗中的Tools工具選項，將Abstract Designer介面連結到Android模擬器(即可看到版面配置中物件的屬性值),步驟五：建立物件及事件之程式碼(一)建立介面表單中的物件及相關事件，其方式有兩種：第一種方法：從Designer設計視窗上方Tools功能表下的Generate Members選項來建立物件及事件之程式碼第二種方法：直接在物件上方按滑鼠右鍵，此時，請在功能選單中選擇Generate，並選取宣告的程式碼及相關事件。,第一種方法:Generate Members,【適用時機】一次可以設定多個物件及事件之程式碼例如：一次宣告兩個物件(Button1,Label1)及一個
4、事件程序(Button1_Click)【說明】請勾選需要使用的物件及事件即可，最後，再按Close鈕。,第二種方法：選擇Generate,【適用時機】一次只針對某一物件宣告或事件程序產生程式碼例如1：宣告Label物件來顯示資料時，則只選Dim lalResult As Label,Dim lalResult As Label,例如2：宣告Button物件具有執行功能時，則必須選 Dim btnRun As Button及Click事件,Dim btnRun As Button,Click,此時，在Basic4Android程式碼編輯區中的Sub Globals程序中自動產生以下兩行程式碼及b
5、tnRun_Click事件：,【有關Add View表單物件】,在B4A程式語言中，它的表單物件如下圖：,【說明】在上圖中，Add View表單物件共有18種，常被使用有17種，並分成基本介面物件與進階介面物件。【註】基本介面物件在本章節介紹。而進階介面物件會在第十二章介紹。,【各物件的主要與共同屬性】,11-2 標籤物件(Label),【定義】是一種用來提示使用者在輸入或輸出資料時的說明。【目的】提示使用者相關的訊息內容。【使用時機】提示訊息或說明。【圖解說明】【注意】Label標籤物件一般是用來顯示的資料給予提示訊息和說明，但不提供使用者輸入或修改的動作。,【實作】,標籤物件(Label)
6、的實作步驟如下所示：,【設定屬性值】,一般在設定屬性值有兩種方法：第一種：靜態設定(利用屬性表來設定)【說明】表單中的Label1物件其內容是要透過屬性表的設定，方法如下：物件名稱.屬性名稱=屬性值,【標籤物件(Label)中常被設定的屬性】,第二種：動態設定(利用撰寫程式方式)步驟一：建立物件Label1,步驟二：撰寫程式碼【說明】要利用程式來撰寫時，必須先要知道，表單中是否已經有Label物件，否則指示給不存在的物件，將會產生錯誤。,步驟三：執行結果【注意】要在執行後才能看得到設定的結果。,11-3 輸入方塊物件(EditText),【定義】是指用來讓使用者輸入開放式資料的介面。【目的】讓
7、使用者輸入程式所需處理的原始資料。【使用時機】輸入或修改文字內容。【圖解說明】,【實作】,輸入方塊物件(EditText)的實作步驟如下所示：【設定屬性值】,【輸入方塊物件(EditText)中常被設定的屬性】,11-3.1 密碼文字方塊,【目的】保護個人的隱私及資料安全。【使用時機】保護隱私時。例如登入介面的密碼。【圖解說明】,【實作】,設定密碼文字方塊的實作步驟如下所示：【設定屬性值】,11-3.2 多行文字方塊,【目的】可以完整顯示文章式的內容。【使用時機】資料量較多時。例如：討論區與留言板。【圖解說明】,【實作】,設定多行文字方塊的實作步驟如下所示：【設定屬性值】,11-4 命令控制項
8、(Button),【定義】是指用來執行Click事件中的事件程序之程式。【目的】專門來處理使用者輸入的原始資料。【使用時機】命令程式碼【圖解說明】1.使用者按下按登入鈕。2.按鈕就會觸發Click事件。3.自動執行事件處理程序。,圖解說明,【說明】當使用者按一下Button命令控制項時，馬上就會觸發Click事件，並且執行對映的事件處理程序。,11-4.1 文字按鈕(Text Button),【目的】是指命令控制項是以文字標題呈現。【使用時機】一般性的資訊系統的介面設計【圖解說明】,【實作】,文字按鈕(Text Button)的實作步驟如下所示：【設定屬性值】,【命令控制項(Button)中常
9、被設定的屬性】,【兩個重要的事件】,【實例】,請設計一個程式，當使用者按一下，出現短按圖示只能開啟應用程式，而當使用者長按一下，出現長按開關才能開啟電腦主機。【註】短按是指點一下。長按是指停留大約12秒。,【參考解答】,11-4.2 圖片按鈕(Picture Button),【目的】是指命令控制項是以圖片標題呈現。【使用時機】遊戲或多媒體的資訊系統的介面設計。【圖解說明】,【命令控制項(Button)之圖片按鈕設定的屬性】,在B4A程式語言中，它的按鈕之背景圖片所支援的格式有：BMP,JPG,GIF及PNG等四種。其相關屬性的設定如下表：,【實作步驟】,請設計一個按鈕物件同時具有圖片+文字步驟
10、一：開啟Designer設計視窗，並在右邊的Image Files 框框加入圖檔。,步驟二：選擇欲加入的圖檔。,步驟三：在屬性表中的Drawable屬性，選擇StatelistDrawable屬性值，並再選Enabled Drawable屬性下的BitmapDrawable屬性值。因此，再到Image file屬性下，選擇Login_icon.gif圖檔。如下圖所示。,步驟四：執行結果,【參考解答】,-Sub btnLogin_ClickIf edtUserName.Text=OR edtPassword.Text=Then Msgbox(您尚未輸入帳號或密碼哦!,產生錯誤.)Else Dim
11、 Username As String Dim Password As String Username=edtUserName.Text Password=edtPassword.Text If Username=LeechPhd AND Password=123456 Then Msgbox(您是合法使用者！,系統回覆)Else Msgbox(您是非法使用者！,系統回覆)End IfEnd If,11-5 對話訊息方塊,【定義】是指用來讓使用者與正在執行中程式進行互動，並作適時的回覆。【目的】顯示程式執行中的狀態。【使用時機】提醒目前程式執行過程的狀態。【例如】確認視窗或錯誤訊息視窗。【呈現
12、方式】1.訊息方塊(只提供訊息)2.對話訊息方塊(除了提供訊息，也提供對話功能)【圖解說明】,11-5.1 訊息方塊(MsgBox),【功能】只顯示訊息，但不傳回值。【格式】Msgbox(訊息內容,標題)【範例】Msgbox(這是我的簡單訊息窗內容!,公告事項)【程式碼】ch11-5.1.b4a,11-5.2 對話訊息方塊(MsgBox2),【功能】可以顯示訊息，也可以傳回值。【格式】Msgbox2(第1個參數_訊息內容,第2個參數_標題,第3個參數_同意鈕之標題文字,第4個參數_取消鈕之標題文字,第5個參數_不同意鈕之標題文字,第6個參數_圖示之圖檔名稱)【說明】在以上六個參數中，第12個參
13、數務必要有資料內容。而第35個參數可以依照使用者的需要加入，如果沒有需要，則填入空字串。但是，第6個參數如果沒有需要，則填入null空值。,【範例1】只有第12個參數,【格式再提示】Msgbox2(第1個參數_訊息內容,第2個參數_標題,第3個參數_同意鈕之標題文字,第4個參數_取消鈕之標題文字,第5個參數_不同意鈕之標題文字,第6個參數_圖示之圖檔名稱),【範例2】只有第1,2及6個參數(含有圖片),【格式再提示】Msgbox2(第1個參數_訊息內容,第2個參數_標題,第3個參數_同意鈕之標題文字,第4個參數_取消鈕之標題文字,第5個參數_不同意鈕之標題文字,第6個參數_圖示之圖檔名稱),【
14、範例3】只有第15個參數(不含圖片),【格式再提示】Msgbox2(第1個參數_訊息內容,第2個參數_標題,第3個參數_同意鈕之標題文字,第4個參數_取消鈕之標題文字,第5個參數_不同意鈕之標題文字,第6個參數_圖示之圖檔名稱),【範例4】6個參數(全部),【格式再提示】Msgbox2(第1個參數_訊息內容,第2個參數_標題,第3個參數_同意鈕之標題文字,第4個參數_取消鈕之標題文字,第5個參數_不同意鈕之標題文字,第6個參數_圖示之圖檔名稱),【程式碼】ch11-5.2A.b4a,【實例】,請設計一個訊息視窗，可以讓使用者點選同意、取消或不同意，並且傳回值。,【參考解答】,11-5.3彈跳式
15、訊息方塊(ToastMessageShow),【功能】在短時間顯示訊息，用來提醒使用者即將發生的狀況。【格式】ToastMessageShow(訊息內容,設定時間長短)【說明】設定時間長短時，當True代表3秒，而False代表2秒【範例】ToastMessageShow(考試時間即將結束!,True),11-5.4 狀態列通知,【引言】一套功能完整的Android App應用程式，除了避免以上三種錯誤之外，也必須要將程式目前的執行狀態適時的通知使用者，以便讓使用者了解。【常見的作法】1.利用MsgBox訊息對話方塊。Msgbox(訊息內容,標題)2.彈跳式訊息方塊(ToastMessageS
16、how)ToastMessageShow(訊息內容,設定時間長短)3.開啟新的Activity活動之活動頁面。StartActivity(活動頁面)4.利用狀態列通知 本單元介紹！!,利用狀態列通知,【功能】將程式目前的執行狀態適時的通知使用者，以便讓使用者了解。【格式】SetInfo(標題,訊息內容,Activity活動之活動頁面)【說明】如果在Main活動執行並顯示時，則第三個參數設為Null。【範例】,【注意】,圖示檔案要先複製到指定的目錄下，亦即本支程式資料夾中的Objectsresdrawable並且每一位圖檔都必需要設定為唯讀狀態。,設定為唯讀狀態,【實例】,請設計一個程式，當學生
17、的成績為不同級數時，其條件如下：1.80100為優等生。2.6079為及格。3.60以下為不及格。並且以上三種不同情況，顯示不同的圖示。,【參考解答】,11-6 單選鈕物件(RadioButton),【定義】是指用來讓使用者輸入單一封閉式資料的介面。【目的】利用點選方式來輸入程式所需處理的原始資料。【優點】確保資料的一致性與正確性。【缺點】無法讓使用者填入開放式資料。【使用時機】當程式中需要有多個選項可供選擇，但只能單選時，我們可以使用選項鈕控制項來設計。實務上的應用方面如下：,【實作】,單選鈕物件(RadioButton)的實作步驟如下所示：【常見的屬性設定】,【重要觀念】,先了解Radio
18、Button1如何被點選，其原理是Checked 屬性，當Checked 屬性的屬性值為True時，代表被點選了，否則就沒有被點選。實務上的應用：在程式中應該撰寫成 RadioButton1.Checked=True 物件名稱 屬性=屬性值說明：若要判斷那個RadioButton1控制項的核取方塊是否被選取，只要透過下列敘述即可。,If RadioButton1.checked=True Then 判斷控制項是否被選取 End If,【實作】,請利用RadioButton物件來設計介面表單，可以讓學生輸入姓名並點選一門最喜歡的科目名稱，最後顯示姓名及所選的科目名稱。,【參考解答】,11-7 複
19、選鈕物件(CheckBox),【定義】是指用來讓使用者同時輸入多個封閉式資料的介面。【目的】利用勾選方式來輸入程式所需處理的原始資料。【優點】確保資料的一致性與正確性。【缺點】無法讓使用者填入開放式資料。【使用時機】輸入的資料項目三個或以上時。,【實作】,複選鈕物件(CheckBox)的實作步驟如下所示：【常見的屬性設定】,【重要觀念】,先了解CheckBox1如何被點選，其原理是Checked 屬性，當Checked 屬性的屬性值為True時，代表被點選了，否則就沒有被點選。實務上的應用：在程式中應該撰寫成 CheckBox1.Checked=True 物件名稱 屬性=屬性值說明：若要判斷那
20、個CheckBox1控制項的核取方塊是否被選取，只要透過下列敘述即可。,If CheckBox1.checked=True Then 判斷控制項是否被選取 End If,【實作】,請利用CheckBox物件來設計介面表單，可以讓學生輸入姓名並點選多門喜歡的科目名稱，最後顯示姓名及所選的科目名稱。,【參考解答】,11-8 使用者螢幕物件(Activity),【定義】是指使用者將螢幕當作一個物件來使用。【常見的事件】Touch事件：使用者在觸模螢幕時，就會立即觸發此事件，並且會傳回 該事件的動作及座標所在位置。KeyPress事件：是指按下鍵盤之按鍵就會對映到某一KeyCode碼。KeyUp事件：
21、是指放開鍵盤。,【實作1】,請利用Touch事件來偵測你目前在觸發動作及座標所在位置。,【參考解答】,【實作2】,請利用以上兩種結束活動事件的方法，來結束實作1的執行畫面。,【參考解答】,【結束活動事件的方法】,1.Activity.Finish()2.ExitApplication(),11-9 行動裝置之螢幕尺寸,【引言】當我們利用B4A程式來開發Android APP時，您一定會遇到不同行動裝置之螢幕尺寸大小以及螢幕直向或橫向旋轉的問題。換言之，不同螢幕尺寸在設計時，必須要設定不同的版面編排(Layout)方式。【常見的螢幕尺寸】目前行動裝置之螢幕尺寸，大致上可以分為三大類：一、4吋(含
22、以上)：是指智慧型手機二、7吋(含以上)：小型平版電腦三、10吋(含以上)：平版電腦,常見三種不同行動裝置之螢幕尺寸,而在B4A開發環境中，它可以讓設計者設定三種不同螢幕尺寸以及每一種尺寸配置方式(直向與橫向)，所以共有六種不同的情況。如下圖所示：,配置方式(直向與橫向),【實作】,請你將原先直向呈現的版面配置，另外設計可以水平呈現。步驟一：建立一個新的版面配置變異(1)在B4A環境中開啟Designer設計視窗(2)從Designer設計視窗右下方Layout Variants來建立另一個新的 版面配置表單，您只需按一下New Variant鈕即可。,【實作】,請你將原先直向呈現的版面配置，
23、另外設計可以水平呈現。步驟一：建立一個新的版面配置變異(1)在B4A環境中開啟Designer設計視窗(2)從Designer設計視窗右下方Layout Variants來建立另一個新的 版面配置表單，您只需按一下New Variant鈕即可。,建立一個新的版面配置變異,步驟二：重新配置水平版面1.從Designer設計視窗上方Tools功能表來選擇Abstract Designer視窗。,2.再從Abstract Designer設計視窗上方Layout功能表來選擇 手機橫向配置Phone(landscape)功能。【註】當你設定完成之後，務必要再連接到實機進行測試，以確保介面的正確性。【其他解析度設定】符合大部份手機(4吋7吋),筆者建議，如果你不知道你的手機解析度時，可以參考以下的設定：(一)直向呈現(垂直),【取得自己手機的解析度方法】,
