4.加法遊戲——用代碼寫手機親子小遊戲

作為一個程序員，需要具備大局觀，也就是掌控全局的一個能力，前幾節課我們都是基於Visual Designer可視化操作構建布局，本節課我們需要學習純代碼編程，不繪製布局，用代碼構建一個活動。

本節課需要了解：

屏幕與解析度的知識

方法Addview

對象Colors

InputType

TextChanged事件

首先我們要說一個哲學問題，當我們談到一個手機屏幕時候，我們談它的什麼？

尺寸？解析度？像素？長寬？長寬比？

我們說一個手機屏幕是5.5英寸，這裡說的是它的對角線長度。

我們說一個手機屏幕是1920x1080，這裡說的是它的長和寬的像素。

很多人會把長寬像素比稱為解析度，比如有些人說自己手機解析度是1080P，或者2K解析度手機，在手機攝像方面，有的人會直接用像素結果來表示解析度，比如五百萬像素解析度、800萬像素解析度……各種各樣不一而足。

我先介紹基礎單位：像素(pixel)，簡寫成pix或者px

像素是指組成的圖像小方格，也就是構成圖像或畫面的基本單位。

dpi 每英寸 的 點 （dots per inch）

ppi 每英寸 的 像素 （pixels per inch）

dip 設備獨立像素單位 （device independent pixels）簡寫成dp

某些情況下dpi和ppi是一回事，但dpi主要側重印刷領域，ppi主要側重顯示領域。

比如我的紅米NOTE3，1920x1080，5.5英寸，怎麼計算ppi呢？

√19202+10802 可以求出對角線的像素數（勾股定理）

除以 5.5，可以得每英寸的像素400，即解析度400ppi。（官方數字403ppi）

由於設備的屏幕尺寸大小不一，同樣一個100像素x100像素的按鈕，在手機上很大，在平板上就很小，所以引入了一個設備獨立像素單位（dip）的概念，dip可以說是一個比例值，它會在不同的設備中調整為不同的像素單位。它的計算方法是

Dip值=ppi值 / (160像素/英寸)。

因為第一款Android設備（HTC的T-MobileG1）是160 ppi的，所以1dip表示在屏幕解析度為160ppi時1px長度，在480*320，160ppi的標準屏幕上，px與dp的比例是1：1。解析度高的，比如800*480，240ppi的屏幕，px與dp的比例就是1.5：1

在B4A里常用的比例值可以參考下圖。根據B4A的劃分我的紅米NOTE3的比值應該是3，也就是說長邊1920，轉換為dip值應該是640dip，寬1080轉換為dip值應該是360dip。

理解了上面這一點之後，我們可以開始著手準備素材。這次我需要的素材很簡單，只要一張1920x1080的圖片，如下圖。

但是我們需要做的一些布局會在這個圖片上呈現，我要做三個Label，一個Button，一個EditText，我要在這個圖片上量好他們出現的像素位置，然後轉化成dip值。

在PS里先確定每一個對象的位置和大小，橫坐標、縱坐標、長寬，然後進入代碼區寫代碼。

新建保存、包名、圖標、app名、橫豎屏設置……過程就略了

在Globals里聲明我們需要的變數和對象。

由於本次沒有用到Visual Designer，也沒有畫布局，所以我們不需要載入布局，可以直接在Activity_Create區域開始寫代碼。

首先我們要給a和b賦值，它們等於1到99之間的隨機整數。

a=Rnd(1,100) b=Rnd(1,100)

然後我們給bg初始化，讓它載入事先準備好的背景圖片，並把它賦值給Activity.Background

bg.Initialize(LoadBitmap(File.DirAssets,"11.jpg")) bg.Gravity=Gravity.FILL Activity.Background=bg

然後我們初始化lbl1，用Addview方法，把lbl1的視圖載入到Activity當中。

Addview方法的語法是這樣用的：

AddView (對象名, 橫坐標,縱坐標, 寬度,高度 )

根據我事先測量的結果輸入如下：

lbl1.Initialize("lbl1")Activity.AddView(lbl1,60dip,130dip,80dip,80dip)

然後我們給lbl1設置顏色。上一節課我們也有設置顏色，但都是在布局裡面設置的。在代碼中顏色是這樣實現的，如：

lbl1.Color=Colors.White

除了直接接上一些常用顏色的英文名稱之外，還有兩種方法，一種是RGB，一種ARGB，其中ARGB就是帶一個Alpha值，也就是透明度，Alpha上節課有講到過，值的範圍是0-255。用法例子：

lbl1.Color=Colors.RGB(150,150,150)lbl1.Color=Colors.ARGB(255,255,0,0)

這裡我們不需要lbl1有背景，所以我直接將其設置成透明色。

lbl1.Color=Colors.ARGB(0,0,0,0)

然後根據我前面的圖片背景（黑板），我將文字設置成白色，其顯示方式設置為居中：

lbl1.TextColor=Colors.Whitelbl1.Gravity=Gravity.CENTER

調整好文字大小，將隨機數a的值賦值給lbl1的文本顯示：

lbl1.Textsize=50lbl1.Text=a

lbl1代碼如下：

同理設置lbl2和lbl3的屬性。

後面edt1和btn1的屬性設置也大同小異，但是在edt1裡面有一個InputType屬性，這裡我想說明一下，InputType決定了該文本框的輸入類型，輸入類型就決定了彈出的虛擬鍵盤樣式，且B4A裡面更改輸入類型後，文本框會變成單行模式。它一共有五個值：

INPUT_TYPE_DECIMAL_NUMBERS

INPUT_TYPE_NUMBERS

INPUT_TYPE_NONE

INPUT_TYPE_PHONE

INPUT_TYPE_TEXT

文本鍵盤模式（默認模式）

我這裡選擇了數字模式，意味著這個文本框只能輸入數字。

然後我們在btn1的單擊事件里，寫程序的關鍵代碼。當按下按鈕時，檢測如果文本框里的數字等於a+b的話，就彈出消息框「恭喜答對」，然後重置a和b以及lbl1和lbl3。如果並不相等，則彈出消息框「回答錯誤」。在判斷語句後將文本框清空。

代碼如下：

If edt1.Text= a + b Then Msgbox("恭喜答對","Right") a=Rnd(1,100) b=Rnd(1,100) lbl1.Text=a lbl3.Text=bElse Msgbox("回答錯誤","Wrong") End If edt1.Text=""

最後，我們多了一個TextChanged事件，EditText在B4A里只有3個事件，其中TextChanged是文本更改時發生的事件，這裡我只寫了很簡單的一句，就是當文本文字長度大於3時候，它就不作改變。因為我們這是100以內加減法，所以不會出現4位數。

If edt1.Text.Length > 3 Then edt1.Text=Old End If

這樣這個簡單的程序就寫完了，是不是感覺有點像忽悠小孩的？沒錯，這就是忽悠小孩的，快過年了，閑來無事編幾個app哄家裡小輩吧！編譯起來運行如下：

推薦閱讀：