当我们利用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事件」來偵測你目前在觸發動作及座【參考解答】【參考解答】【實作2】請利用以上兩種結束活動事件的方法，來結束「實作1」的執行畫面。【實作2】請利用以上兩種結束活動事件的方法，來結束「實作1」【參考解答】【參考解答】【結束活動事件的方法】1.Activity.Finish()2.ExitApplication()【結束活動事件的方法】1.Activity.Finish(11-9行動裝置之螢幕尺寸【引言】當我們利用B4A程式來開發AndroidAPP時，您一定會遇到不同行動裝置之螢幕尺寸大小以及螢幕直向或橫向旋轉的問題。換言之，不同螢幕尺寸在設計時，必須要設定不同的版面編排(Layout)方式。【常見的螢幕尺寸】目前行動裝置之螢幕尺寸，大致上可以分為三大類：一、4吋(含以上)：是指智慧型手機二、7吋(含以上)：小型平版電腦三、10吋(含以上)：平版電腦11-9行動裝置之螢幕尺寸【引言】常見三種不同行動裝置之螢幕尺寸而在B4A開發環境中，它可以讓設計者設定三種不同螢幕尺寸以及每一種尺寸配置方式(直向與橫向)，所以共有六種不同的情況。如下圖所示：常見三種不同行動裝置之螢幕尺寸而在B4A開發環境中，它可以讓配置方式(直向與橫向)配置方式(直向與橫向)【實作】請你將原先「直向」呈現的版面配置，另外設計可以「水平」呈現。步驟一：建立一個新的版面配置變異(1)在B4A環境中開啟「Designer」設計視窗(2)從「Designer」設計視窗右下方「LayoutVariants」來建立另一個新的

版面配置表單，您只需按一下「NewVariant」鈕即可。【實作】請你將原先「直向」呈現的版面配置，另外設計可以「水平【實作】請你將原先「直向」呈現的版面配置，另外設計可以「水平」呈現。步驟一：建立一個新的版面配置變異(1)在B4A環境中開啟「Designer」設計視窗(2)從「Designer」設計視窗右下方「LayoutVariants」來建立另一個新的

版面配置表單，您只需按一下「NewVariant」鈕即可。【實作】請你將原先「直向」呈現的版面配置，另外設計可以「水平建立一個新的版面配置變異建立一個新的版面配置變異步驟二：重新配置「水平」版面1.從「Designer」設計視窗上方「Tools」功能表來選擇「AbstractDesigner」視窗。步驟二：重新配置「水平」版面2.再從「AbstractDesigner」設計視窗上方「Layout」功能表來選擇

手機橫向配置「Phone(landscape)」功能。【註】當你設定完成之後，務必要再連接到實機進行測試，

以確保介面的正確性。【其他解析度設定】符合大部份手機(4吋~7吋)2.再從「AbstractDesigner」設計視窗上方「筆者建議，如果你不知道你的手機解析度時，可以參考以下的設定：(一)直向呈現(垂直)筆者建議，如果你不知道你的手機解析度時，可以參考以下的設定：【取得自己手機的解析度方法】程式碼DimdpiAsLayoutValuesdpi=GetDeviceLayoutValuesMsgbox(dpi,"您的手機解析度")【取得自己手機的解析度方法】程式碼DimdpiAsLa第十一章

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

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

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)的實作步驟如下所【重要觀念】先了解RadioBu