一、前言
上篇 （原創）【B4A】一步一步入門01：簡介、開發環境搭建、HelloWorld 中我們建立了預設的專案，現在我們來看一下B4A專案的構成，以及如何所見即所得的設計介面，並新增和使用自帶的控制元件。
相信看完的你，一定會有所收穫！
本地地址：https://www.cnblogs.com/lesliexin/p/17080697.html
二、視覺化介面設計器
和WinForm、WPF一樣，B4A的程式同樣是“介面+後臺程式碼”的方式。B4A的介面檔案是.bal格式的檔案。
1，開啟視覺化設計器
我們在【File Manager】視窗，可以看到預設的“MainPage.bal”檔案。
注1：如果沒有【File Manager】視窗，可以透過選單欄的【視窗】-【檔案管理器】開啟。
注2：B4A的IDE是支援多語言的，可以透過選單欄的【工具】-【IDE選項】-【語言】-【簡體中文】，即可切換介面語言為中文。
我們雙擊“MainPage.bal”，將自動開啟視覺化介面設計器。
2，連線手機所見即所得
（因對安卓開發不太瞭解，下述描述僅為個人理解，如果有誤敬請指正）
2.1，為什麼需要
在B4A中，可以建立多個不同解析度的【變體】，以精準匹配指定的解析度。預設的變體是320*480。
因為安卓程式可以自適應螢幕，所以一般情況下，介面都是相對佈局，所以也就不需要建立新的變體，直接使用預設的即可。
這種時候，為了確定介面可正常適應，而不是僅在設計介面正常，就需要連線到手機或模擬器，透過所見即所得的方式實時檢視真實的介面效果。
2.2，怎麼去操作
首先，連線手機或者啟動模擬器。本文方便演示以模擬器為例。
然後，點選選單樣的【所見即所得設計器】-【連線】，如果是初次執行，將會自動安裝“B4A-Designer”，然後自動啟動。
2.3，操作效果
我們在設計介面上拖動按鈕，手機/模擬器上會同步發生改變。
這裡，我們將按鈕設定為與螢幕等寬，透過【所見即所得設計器】可以看到，在實際執行時，按鈕並不是與螢幕等寬的。
下面，我們就來看到下如何去修改控制元件屬性以達到預期效果。
三、控制元件的使用
本節，我們將實現一個簡單的功能：點選按鈕後，標籤(Label)上顯示一些資訊。涉及到了控制元件的新增、控制元件屬性的修改、控制元件事件的新增、程式碼操作控制元件等。
1，修改控制元件屬性
和Winform、WPF等類似，B4A的視覺化設計器同樣擁有【屬性】視窗。
注：屬性視窗可以透過選單欄的【視察】-【屬性】開啟。
首先，選中按鈕，我們將屬性視窗中的【水平錨定】設定為第3個雙箭頭，代表的左右同時錨定。
然後，我們可以以看到在【所見即所得設計器】中，按鈕已經和設計介面一樣，與螢幕等寬了。
2，新增控制元件
我們這裡新增一個標籤Label，用來顯示文字。
新增控制元件有兩種操作方式，一是點選選單欄的【新增控制元件】-【選擇控制元件】；二是在佈局設定中右鍵，選擇【新增控制元件】-【選擇控制元件】。
然後，我們設定Label的一些屬性，如下圖所示：
因為要使用程式碼操作控制元件，所以還要在後臺程式碼中新增控制元件物件。
其新增方式與事件一樣，見下方事件的新增。
3，新增事件
控制元件的操作離不開事件，我們為按鈕新增點選事件。
新增事件的方式有多種，單個控制元件新增事件的話，可以在佈局設計器中的控制元件上右鍵-【生成（目標：XXX）】-【選擇】，還可以在左側的【控制元件樹】視窗中選擇控制元件-【右鍵】-【生成（目標：XXX）】-【選擇】。
如果是為多個控制元件批次生成，可以選擇選單欄的【工具】-【生成成員】-在彈出視窗中勾選要生成的物件。
上面生成選單中，以分割線為界分為兩組，上面是【生成控制元件成員】，格式為“Dim 控制元件名稱 As 控制元件型別”；下面是【生成控制元件事件】。按需選擇即可。
根據本文需要，我們新增了標籤成員、按鈕點選事件、按鈕長按事件。
按快捷鍵【Ctrl+S】儲存佈局檔案。我們返回後臺程式碼，可以看到標籤物件和按鈕事件都已完成新增。注：因為使用的是預設的按鈕，所以按鈕的Click事件已經存在，我們將程式碼刪除即可。
注1：在右鍵選單的【生成（目標：XXX）】上，會有“目標”物件，在【生成成員】視窗的標題欄上，同樣會有“目標：XXX”資訊。
因為介面佈局檔案（.bal）需要在類模組“B4XPage”中載入後使用（具體的具後續文章會有講解，本文僅簡述邏輯），所以當生成控制元件成員和事件時，要選擇生成到哪個類模組“B4XPage”中，也就是“目標”。
預設情況下，會自動生成預設的“B4XMainPage”，在其程式碼中，我們可以看到是載入的“MainPage.bal”介面佈局檔案的程式碼。
注2：在實際專案中，也可以直接在後臺程式碼中快速插入事件，IDE會有智慧提示，只需要修改下事件名即可。
4，編寫程式碼
下面，我們就編寫程式碼，實現我們想要的簡單功能。
注：B4A的語法和VB非常類似，也非常簡單，我在沒有VB基礎只有C#基礎的情況下，參照著VB摸索摸索很快就掌握了。因為我也是摸索出來的，純純的野路子，所以也就不專門寫教程講解了，免得誤導大家，大家可以去官網檢視教程學習：https://www.b4x.com/guides/B4XLanguage.html ，如果嫌棄是英文的話，可以使用瀏覽器的翻譯功能。
我們在Click事件中編寫以下程式碼，作用是上標籤中顯示相應的文字。
同樣，我們在LongClick事件中編寫程式碼。
5，編譯執行
我們點選【執行】按鈕，或者按快捷鍵F5，IDE將編譯程式碼並自動安裝到手機或模擬器中。
我們分別點選按鈕，長按按鈕，效果如下：
四、總結
本文的例子非常簡單，演示了B4A的視覺化介面設計器的使用方法，及自帶控制元件的使用方法。
可以看到B4A在編寫起來是非常簡單的，也非常直觀。
歡迎大家一起學習一起進步。
-【END】-