当我们利用B4A程式来开发AndroidAPP时课件

第十一章

使用者基本介面設計課程名稱：程式設計授課老師：李春雄博士第十一章

使用者基本介面設計課程名稱：程式設計本章學習目標

1.讓讀者瞭解在B4A開發環境中「使用者基本介面

設計」物件種類及各物件的主要與共同屬性。2.讓讀者瞭解B4A開發環境中「使用者基本介面設

計」物件的使用方法與應用。本章學習目標1.讓讀者瞭解在B4A開發環境中「使用者基本介本章內容11-1B4A的使用者介面設計工具11-2標籤物件(Label)11-3輸入方塊物件(EditText)11-4命令控制項(Button)11-5對話訊息方塊11-6單選鈕物件(RadioButton)11-7複選鈕物件(CheckBox)11-8使用者螢幕物件(Activity)本章內容11-1B4A的使用者介面設計工具11-1B4A的使用者介面設計工具【功能】可以讓設計者在「設計介面」的同時，可以看到「呈現方式」。【工具】1.設計介面工具：Designer與AbstractDesigner設計視窗2.呈現方式工具：連結到Android模擬器與實體手機或平板【完整步驟】步驟一、在B4A功能選單中，開啟「Designer」設計視窗11-1B4A的使用者介面設計工具【功能】可以讓設計者在步驟二、從「Designer」設計視窗上方「AddView」功能選項，加入物件到「AbstractDesigner」介面中(亦即是一種抽像設計，因為只看到版面配置，而無法看到物件屬性值)，分別為：Label1與Button1。步驟二、從「Designer」設計視窗上方「AddView步驟三、在「Designer」設計視窗中設定物件的屬性之屬性值物件名稱屬性屬性值Label1NamelblResultButton1NamebtnRunButton1Text執行結果btnRun執行結果步驟三、在「Designer」設計視窗中設定物件的屬性之屬性步驟四：透過「Designer」設計視窗中的「Tools」工具選項，將「AbstractDesigner介面」連結到Android模擬器(即可看到版面配置中物件的屬性值)步驟四：透過「Designer」設計視窗中的「Tools」工步驟五：建立物件及事件之程式碼(一)建立介面表單中的物件及相關事件，其方式有兩種：第一種方法：從「Designer」設計視窗上方「Tools」功能表下的「GenerateMembers」選項來建立物件及事件之程式碼第二種方法：直接在「物件」上方按滑鼠右鍵，此時，請在功能選單中選擇「Generate」，並選取宣告的程式碼及相關事件。步驟五：建立物件及事件之程式碼第一種方法:「GenerateMembers」【適用時機】一次可以設定多個物件及事件之程式碼例如：一次宣告兩個物件(Button1,Label1)及一個事件程序(Button1_Click)【說明】請勾選需要使用的物件及事件即可，最後，再按「Close」鈕。第一種方法:「GenerateMembers」【適用時機】第二種方法：選擇「Generate」【適用時機】一次只針對某一物件宣告或事件程序產生程式碼例如1：宣告Label物件來顯示資料時，則只選「DimlalResultAsLabel」DimlalResultAsLabel第二種方法：選擇「Generate」【適用時機】一次只針對某例如2：宣告Button物件具有執行功能時，則必須選

「DimbtnRunAsButton」及「Click」事件DimbtnRunAsButtonClick例如2：宣告Button物件具有執行功能時，則必須選Dim此時，在Basic4Android程式碼編輯區中的「SubGlobals」程序中自動產生以下兩行程式碼及btnRun_Click事件：此時，在Basic4Android程式碼編輯區中的「Sub【有關AddView表單物件】在B4A程式語言中，它的表單物件如下圖：【有關AddView表單物件】在B4A程式語言中，它的表單【說明】在上圖中，AddView表單物件共有18種，常被使用有17種，並分成「基本介面物件」與「進階介面物件」。【註】「基本介面物件」在本章節介紹。而「進階介面物件」會在第十二章介紹。基本介面物件進階介面物件1.標籤物件(Label)2.輸入方塊物件(EditText)3.命令控制項(Button)4.單選鈕物件(RadioButton)5.複選鈕物件(CheckBox)1.開關式核取物件(ToggleButton)2.下拉式清單物件(Spinner)3.清單選項物件(ListView)4.容器物件(Panel)5.標籤頁物件(TabHost)6.瀏覽器物件(WebView)7影像物件(ImageView)8.可捲動的容器物件(ScrollView)9.可水平捲動的容器物件(HorizontalScrollView)10.進度軸(ProgressBar)11.讓用戶調整進度(SeekBar)12.系統自動顯示關鍵字(AutoCompleteEditText)【說明】基本介面物件進階介面物件1.標籤物件(Label)1【各物件的主要與共同屬性】屬性說明-MainName物件名稱(與變數名稱相同)建議使用有意義命名方式Type物件型態(唯讀)不提供使用者修改名稱EventName事件處理程序名稱(預設與物件名稱相同)建議使用預設即可Parent父物件的名稱(預設為最上層的Activity)當在介面表單中，有加入Panel容器物件時，則可以讓其他物件選擇。-CommonpropertiesLeft與父物件左邊界的距離(用來調整物件「水平」位置)Top與父物件上邊界的距離(用來調整物件「垂直」位置)Width調整物件的寬度設定物件的大小Height調整物件的高度Enabled設定物件是否可被使用(預設為True(可被使用))Visible設定物件是否可被看見(預設為True(可被看見))Tag用來註記物件的額外資訊Text設定物件呈現的「標題名稱」【各物件的主要與共同屬性】屬性說明-MainName物件名稱11-2標籤物件(Label)【定義】是一種用來提示使用者在輸入或輸出資料時的說明。【目的】提示使用者相關的訊息內容。【使用時機】提示訊息或說明。【圖解說明】【注意】「Label標籤物件」一般是用來「顯示」的資料給予提示訊息和說明，但不提供使用者「輸入或修改」的動作。11-2標籤物件(Label)【定義】是一種用來提示使用【實作】標籤物件(Label)的實作步驟如下所示：【實作】標籤物件(Label)的實作步驟如下所示：【設定屬性值】一般在設定屬性值有兩種方法：第一種：靜態設定(利用屬性表來設定)【說明】表單中的Label1物件其內容是要透過「屬性表」的設定，方法如下：

物件名稱.屬性名稱

=屬性值【設定屬性值】一般在設定屬性值有兩種方法：【標籤物件(Label)中常被設定的屬性】屬性說明Name物件名稱(與變數名稱相同)建議使用有意義命名方式Text設定物件呈現的「標題名稱」TextStyle設定文字樣式：Typeface(設定字型)Style(設定字體樣式：正常、粗體、斜體及粗斜體)HorizontalAlignment(水平排列：靠左、置中及靠右)VerticalAlignment(垂直排列：頂上、置中及底下)Size(設定字體大小)TextColor(設定字體顏色)Drawable三種模式(一)ColorDrawable(色彩模式)預設模式1.Cornerradius(設定圓滑角大小)2.Color(設定背景顏色)3.Alpha(設定深淺度)(二)GradientDrawable(漸層模式)(三)BitmapDrawable(圖片模式)【標籤物件(Label)中常被設定的屬性】屬性說明Name物第二種：動態設定(利用撰寫程式方式)步驟一：建立物件Label1第二種：動態設定(利用撰寫程式方式)步驟二：撰寫程式碼【說明】要利用程式來撰寫時，必須先要知道，表單中是否已經有Label物件，否則指示給不存在的物件，將會產生錯誤。步驟二：撰寫程式碼步驟三：執行結果【注意】要在「執行後」才能看得到設定的結果。步驟三：執行結果11-3輸入方塊物件(EditText)【定義】是指用來讓使用者輸入「開放式」資料的介面。【目的】讓使用者輸入程式所需處理的原始資料。【使用時機】輸入或修改文字內容。【圖解說明】11-3輸入方塊物件(EditText)【定義】是指用來【實作】輸入方塊物件(EditText)的實作步驟如下所示：【設定屬性值】物件名稱屬性屬性值EditText1NameedtUserNameEditText1HintText輸入帳號【實作】輸入方塊物件(EditText)的實作步驟如下所示：【輸入方塊物件(EditText)中常被設定的屬性】屬性說明Name物件名稱(與變數名稱相同)建議使用有意義命名方式Text使用者輸入的內容Password設定為密碼文字方塊。例如：登入介面的密碼方塊。SingleLine單行文字方塊(預設為True)，如果設為False則為多行文字方塊。例如：討論區與留言板。InputType設定使用者允許輸入內容的資料型態。NUMBERS(整數型態)TEXT(文字型態)PHONE(電話號碼型態)DECIMALNUMBERS(小整數型態)HintText提示字(用來提醒使用者，該欄位要輸入的資料類型)HintColor設定提示字的顏色Wrap當SingleLine設定為False則為多行文字方塊預設值True代表會自動換行；False代表不會自動換行【輸入方塊物件(EditText)中常被設定的屬性】屬性說明11-3.1密碼文字方塊【目的】保護個人的隱私及資料安全。【使用時機】保護隱私時。例如登入介面的「密碼」。【圖解說明】11-3.1密碼文字方塊【目的】保護個人的隱私及資料安全【實作】設定密碼文字方塊的實作步驟如下所示：【設定屬性值】物件名稱屬性屬性值EditText2NameedtPasswordEditText2PasswordTrueEditText2HintText輸入密碼【實作】設定密碼文字方塊的實作步驟如下所示：物件名稱屬性屬性11-3.2多行文字方塊【目的】可以完整顯示「文章式」的內容。【使用時機】資料量較多時。例如：討論區與留言板。【圖解說明】11-3.2多行文字方塊【目的】可以完整顯示「文章式」的【實作】設定多行文字方塊的實作步驟如下所示：【設定屬性值】物件名稱屬性屬性值EditText3NameedtTalkAreaEditText3SingleLineFalseEditText3HintText輸入留言內容EditText3WrapTrue【實作】設定多行文字方塊的實作步驟如下所示：物件名稱屬性屬性11-4命令控制項(Button)【定義】是指用來執行Click事件中的「事件程序」之程式。【目的】專門來「處理」使用者輸入的原始資料。【使用時機】命令程式碼【圖解說明】1.使用者按下按「登入」鈕。2.按鈕就會觸發「Click事件」。3.自動執行「事件處理程序」。11-4命令控制項(Button)【定義】是指用來執行C圖解說明【說明】當使用者按一下「Button命令控制項」時，馬上就會觸發「Click事件」，並且執行對映的「事件處理程序」。圖解說明【說明】11-4.1文字按鈕(TextButton)【目的】是指命令控制項是以「文字標題」呈現。【使用時機】一般性的資訊系統的介面設計【圖解說明】11-4.1文字按鈕(TextButton)【目的】是【實作】文字按鈕(TextButton)的實作步驟如下所示：【設定屬性值】物件名稱屬性屬性值Buton1NamebtnLoginButon1Text登入【實作】文字按鈕(TextButton)的實作步驟如下所示【命令控制項(Button)中常被設定的屬性】屬性說明Name物件名稱(與變數名稱相同)建議使用有意義命名方式Text設定物件呈現的「標題名稱」TextStyle設定文字樣式：1.Typeface(設定字型)2.Style(設定字體樣式：正常、粗體、斜體及粗斜體)3.HorizontalAlignment(水平排列：靠左、置中及靠右)4.VerticalAlignment(垂直排列：頂上、置中及底下)5.Size(設定字體大小)6.TextColor(設定字體顏色)【兩個重要的事件】物件名稱事件功能Buton1Click當使用者「按一下」Buton鈕觸發的事件Buton1LongClick當使用者「長按一下」Buton鈕觸發的事件【命令控制項(Button)中常被設定的屬性】屬性說明Nam【實例】請設計一個程式，當使用者「按一下」，出現「短按圖示」只能開啟應用程式，而當使用者「長按一下」，出現「長按開關」才能開啟電腦主機。

【註】「短按」是指「點一下」。「長按」是指「停留大約1~2秒」。【參考解答】【實例】請設計一個程式，當使用者「按一下」，出現「短按圖示」11-4.2圖片按鈕(PictureButton)【目的】是指命令控制項是以「圖片標題」呈現。【使用時機】遊戲或多媒體的資訊系統的介面設計。【圖解說明】11-4.2圖片按鈕(PictureButton)【目【命令控制項(Button)之圖片按鈕設定的屬性】在B4A程式語言中，它的按鈕之背景圖片所支援的格式有：BMP,JPG,GIF及PNG等四種。其相關屬性的設定如下表：屬性說明Drawable一、DefaultDrawable(預設)二、StatelistDrawable(一)EnabledDrawable(正常按鈕)1.ColorDrawable(色彩模式)預設模式(1)Cornerradius(設定圓滑角大小)(2)Color(設定背景顏色)(3)Alpha(設定深淺度)2.GradientDrawable(漸層模式)3.BitmapDrawable(圖片模式)(1)Imagefile(圖檔)(二)DisabledDrawable(沒有作用按鈕)(三)PressedDrawable(按下按鈕)【命令控制項(Button)之圖片按鈕設定的屬性】在B4A程【實作步驟】請設計一個按鈕物件同時具有「圖片+文字」步驟一：開啟「Designer」設計視窗，並在右邊的「ImageFiles」

框框加入圖檔。【實作步驟】請設計一個按鈕物件同時具有「圖片+文字」步驟二：選擇欲加入的圖檔。步驟二：選擇欲加入的圖檔。步驟三：在屬性表中的「Drawable」屬性，選擇「StatelistDrawable」屬性值，並再選「EnabledDrawable」屬性下的「BitmapDrawable」屬性值。因此，再到「Imagefile」屬性下，選擇「Login_icon.gif」圖檔。如下圖所示。步驟三：在屬性表中的「Drawable」屬性，選擇「Stat步驟四：執行結果【參考解答】------------SubbtnLogin_ClickIfedtUserName.Text=""ORedtPassword.Text=""ThenMsgbox("您尚未輸入帳號或密碼哦!","產生錯誤...")ElseDimUsernameAsStringDimPasswordAsStringUsername=edtUserName.TextPassword=edtPassword.TextIfUsername="LeechPhd"ANDPassword="123456"ThenMsgbox("您是合法使用者！","系統回覆")ElseMsgbox("您是非法使用者！","系統回覆")EndIfEndIf步驟四：執行結果【參考解答】------11-5對話訊息方塊【定義】是指用來讓使用者與正在執行中程式進行互動，並作適時的回覆。【目的】顯示程式執行中的狀態。【使用時機】提醒目前程式執行過程的狀態。【例如】確認視窗或錯誤訊息視窗。【呈現方式】1.訊息方塊(只提供訊息)2.對話訊息方塊(除了提供訊息，也提供對話功能)【圖解說明】11-5對話訊息方塊【定義】是指用來讓使用者與正在執行中程11-5.1訊息方塊(MsgBox)【功能】只顯示訊息，但不傳回值。【格式】Msgbox("訊息內容","標題")【範例】Msgbox("這是我的簡單訊息窗內容!!!","公告事項")【程式碼】ch11-5.1.b4a11-5.1訊息方塊(MsgBox)【功能】只顯示訊息，11-5.2對話訊息方塊(MsgBox2)【功能】可以顯示訊息，也可以傳回值。【格式】Msgbox2("第1個參數_訊息內容","第2個參數_標題","第3個參數_同意鈕之標題文字","第4個參數_取消鈕之標題文字","第5個參數_不同意鈕之標題文字","第6個參數_圖示之圖檔名稱")【說明】在以上六個參數中，第1~2個參數務必要有資料內容。而第3~5個參數可以依照使用者的需要加入，如果沒有需要，則填入「""」空字串。但是，第6個參數如果沒有需要，則填入「null」空值。11-5.2對話訊息方塊(MsgBox2)【功能】可以顯示【範例1】只有第1~2個參數【格式再提示】Msgbox2("第1個參數_訊息內容",

"第2個參數_標題","第3個參數_同意鈕之標題文字","第4個參數_取消鈕之標題文字","第5個參數_不同意鈕之標題文字","第6個參數_圖示之圖檔名稱")【範例1】只有第1~2個參數【格式再提示】【範例2】只有第1,2及6個參數(含有圖片)【格式再提示】Msgbox2("第1個參數_訊息內容",

"第2個參數_標題","第3個參數_同意鈕之標題文字","第4個參數_取消鈕之標題文字","第5個參數_不同意鈕之標題文字",

"第6個參數_圖示之圖檔名稱")【範例2】只有第1,2及6個參數(含有圖片)【格式再提示】【範例3】只有第1~5個參數(不含圖片)【格式再提示】Msgbox2("第1個參數_訊息內容",

"第2個參數_標題",

"第3個參數_同意鈕之標題文字","第4個參數_取消鈕之標題文字","第5個參數_不同意鈕之標題文字","第6個參數_圖示之圖檔名稱")【範例3】只有第1~5個參數(不含圖片)【格式再提示】【範例4】6個參數(全部)【格式再提示】Msgbox2("第1個參數_訊息內容",

"第2個參數_標題",

"第3個參數_同意鈕之標題文字","第4個參數_取消鈕之標題文字","第5個參數_不同意鈕之標題文字","第6個參數_圖示之圖檔名稱")【程式碼】ch11-5.2A.b4a【範例4】6個參數(全部)【格式再提示】【程式碼】ch11-【實例】請設計一個訊息視窗，可以讓使用者點選「同意」、「取消」或「不同意」，並且傳回值。【實例】請設計一個訊息視窗，可以讓使用者點選「同意」、「取消【參考解答】【參考解答】11-5.3彈跳式訊息方塊(ToastMessageShow)【功能】在短時間顯示訊息，用來提醒使用者即將發生的狀況。【格式】ToastMessageShow("訊息內容","設定時間長短")【說明】設定時間長短時，當True代表3秒，而False代表2秒【範例】ToastMessageShow("考試時間即將結束!!!","True")11-5.3彈跳式訊息方塊(ToastMessageShow11-5.4狀態列通知【引言】一套功能完整的AndroidApp應用程式，除了避免以上三種錯誤之外，也必須要將程式目前的執行狀態適時的通知使用者，以便讓使用者了解。【常見的作法】1.利用MsgBox訊息對話方塊。Msgbox("訊息內容","標題")

2.彈跳式訊息方塊(ToastMessageShow)ToastMessageShow("訊息內容","設定時間長短")3.開啟新的Activity活動之活動頁面。StartActivity("活動頁面")4.利用狀態列通知

本單元介紹！!!11-5.4狀態列通知【引言】[利用狀態列通知]【功能】將程式目前的執行狀態適時的通知使用者，以便讓使用者了解。【格式】SetInfo("標題","訊息內容",Activity活動之活動頁面)【說明】如果在Main活動執行並顯示時，則第三個參數設為Null。【範例】[利用狀態列通知]【功能】將程式目前的執行狀態適時的通知使用【注意】圖示檔案要先複製到指定的目錄下，亦即本支程式資料夾中的「Objects／res／drawable／並且每一位圖檔都必需要設定為「唯讀」狀態。設定為「唯讀」狀態【注意】圖示檔案要先複製到指定的目錄下，亦即本支程式資料夾中【實例】請設計一個程式，當學生的成績為不同級數時，其條件如下：1.80~100為優等生。2.60~79為及格。3.60以下為不及格。並且以上三種不同情況，顯示不同的圖示。【實例】請設計一個程式，當學生的成績為不同級數時，其條件如下【參考解答】【參考解答】11-6單選鈕物件(RadioButton)【定義】是指用來讓使用者輸入單一「封閉式」資料的介面。【目的】利用「點選方式」來輸入程式所需處理的原始資料。【優點】確保資料的一致性與正確性。【缺點】無法讓使用者填入「開放式」資料。【使用時機】當程式中需要有多個選項可供選擇，但只能單選時，我們可以使用「選項鈕」控制項來設計。實務上的應用方面如下：11-6單選鈕物件(RadioButton)【定義】是指【實作】單選鈕物件(RadioButton)的實作步驟如下所示：【常見的屬性設定】屬性功能Name設定控制項的名稱Text設定控制項的內容Checked當Checked屬性的屬性值為True時，代表被核取(勾選)，當Checked屬性的屬性值為False時，代表不核取(不勾選)。預設值為False。【實作】單選鈕物件(RadioButton)的實作步驟如下所【重要觀念】先了解RadioButton1如何被點選，其原理是Checked屬性，當Checked屬性的屬性值為True時，代表被點選了，否則就沒有被點選。實務上的應用：在程式中應該撰寫成

RadioButton1.Checked=True

物件名稱‧屬性=屬性值說明：若要判斷那個RadioButton1控制項的核取方塊是否被選取，只要透過下列敘述即可。IfRadioButton1.checked=TrueThen‘判斷控制項是否被選取…………EndIf【重要觀念】先了解RadioButton1如何被點選，其原理【實作】請利用「RadioButton」物件來設計介面表單，可以讓學生輸入「姓名」並點選「一門」最喜歡的「科目名稱」，最後顯示姓名及所選的科目名稱。【實作】請利用「RadioButton」物件來設計介面表單，【參考解答】【參考解答】11-7複選鈕物件(CheckBox)【定義】是指用來讓使用者同時輸入多個「封閉式」資料的介面。【目的】利用「勾選方式」來輸入程式所需處理的原始資料。【優點】確保資料的一致性與正確性。【缺點】無法讓使用者填入「開放式」資料。【使用時機】輸入的資料項目三個或以上時。11-7複選鈕物件(CheckBox)【定義】是指用來【實作】複選鈕物件(CheckBox)的實作步驟如下所示：【常見的屬性設定】屬性功能Name設定控制項的名稱Text設定控制項的內容Checked當Checked屬性的屬性值為True時，代表被核取(勾選)，當Checked屬性的屬性值為False時，代表不核取(不勾選)。預設值為False。【實作】複選鈕物件(CheckBox)的實作步驟如下所示：屬【重要觀念】先了解CheckBox1如何被點選，其原理是Checked屬性，當Checked屬性的屬性值為True時，代表被點選了，否則就沒有被點選。實務上的應用：在程式中應該撰寫成

CheckBox1.Checked=True

物件名稱‧屬性=屬性值說明：若要判斷那個CheckBox1控制項的核取方塊是否被選取，只要透過下列敘述即可。IfCheckBox1.checked=TrueThen‘判斷控制項是否被選取…………EndIf【重要觀念】先了解CheckBox1如何被點選，其原理是Ch【實作】請利用「CheckBox」物件來設計介面表單，可以讓學生輸入「姓名」並點選「多門」喜歡的「科目名稱」，最後顯示姓名及所選的科目名稱。【實作】請利用「CheckBox」物件來設計介面表單，可以讓【參考解答】程式檔案名稱ch11-7B.b4a01020304050607080910111213141516171819202122232425SubbtnRun_ClickIfedtName.Text=""ThenMsgbox("您尚未輸入姓名哦!","產生錯誤...")ElseDimTempAsStringTemp=edtName.Text&"同學

您好："&CRLFTemp=Temp&"你喜歡的科目為："&CRLFIfchkProgram.Checked=TrueThenTemp=Temp&chkProgram.Text&CRLFEndIfIfchkDB.Checked=TrueThenTemp=Temp&chkDB.Text&CRLFEndIfIfchkDS.Checked=TrueThenTemp=Temp&chkDS.Text&CRLFEndIfIfchkSA.Checked=TrueThenTemp=Temp&chkSA.Text&CRLFEndIfIfchkComputer.Checked=TrueThenTemp=Temp&chkComputer.Text&CRLFEndIflblResult.Text=TempEndIfEndSub【參考解答】程式檔案名稱ch11-7B.b4a01Subb11-8使用者螢幕物件(Activity)【定義】是指使用者將螢幕當作一個物件來使用。【常見的事件】Touch事件：使用者在觸模螢幕時，就會立即觸發此事件，並且會傳回

該事件的動作及座標所在位置。KeyPress事件：是指「按下」鍵盤之按鍵就會對映到某一KeyCode碼。KeyUp事件：是指「放開」鍵盤。11-8使用者螢幕物件(Activity)【定義】是指使【實作1】請利用「Touch事件」來偵測你目前在觸發動作及座標所在位置。【實作1】請利用「Touch事件」來偵測你目前在觸發動作及座【參考解答】【參