android學習筆記: 2013

2013年7月14日星期日

android 基本圖庫瀏覽

在APP中，多少都一定會使用到圖片，所以這邊就先教簡單的圖片使用。

1.一開始先去專案的檔案區的res資料夾底下建立一個drawable資料夾

不知道在哪可以在你的專案名稱上按滑鼠右鍵，選Properties(或 Alt+Enter)，之後選Resource就可以看到Location: 路徑

2.把要放的圖片放進去(建議圖檔不要太大，不然很吃模擬器的記憶體)

3.之後回到編輯器上，在專題上按滑鼠右鍵重整，就會多一個drawable資料夾還有圖片

這樣圖片就進來圖庫區，並且也都有建立R.java的ID識別碼，沒有的話請關掉編輯器再重開看看，或是建立時路徑錯誤。

都完成之後就可以開始建立檔案和面版了

首先先建立Layout面版

1.先在左方元件庫，選擇Images & Media類別區裡的ImageView元件
(注意，這是一個圖片元件而不是單純圖片)

2.之後拉到右方的版子上，會出現對話視窗，圖片先隨便選，之後按OK。

之後再加幾顆Button元件，然後再把版面稍為排版一下

版面排版的程式碼，有標記比較要注意的地方。

都排版完之後就建立程式碼，並把所有要用到的元件都給抓到。

先看程式的架構

Tip重點
(1)
int[] imges={R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4,R.drawable.a5,R.drawable.a6};
由於R檔的識別碼是屬於整數型態，所以要用整數陣列來裝圖片
R.drawable.a1 因為是在drawable資料夾下，有點像是物件導向。
private p=0 是用來作為旗標值用。

(2)
bt1.setOnClickListener(new mylistener());
bt2.setOnClickListener(new mylistener());
按鈕事件可以設定給它同一個函數，這樣可以不用寫太多函數。

(3)
switch(v.getId())
因為點選Button之後會啟動mylistener()裡面的onClick(View v)，而這個View v就是代表onClick事件處發時的元件id。
case R.id.button1
case R.id.button2
到R檔裡面抓取元件的id來對應switch的值，判斷是哪顆Button被觸發

這是比較有技巧性的寫法，如果要一個按鈕事件對應一個函數也是可以。

基本架構完成後，就開始寫觸發事件的內容

Tip重點
iv1.setImageResource(imgs[p]);
對iv1圖片元件設定它的圖檔來源，由於已經把圖檔來源都放在imgs[]陣列裡了，所以直接用陣列來取出。
imgs.length-1
因為imgs.length是取陣列長度，但陣列索引值是從0開始，所以要-1。

之後就啟動模擬器看成果
按上一張

按下一張

到最後一張再繼續按下一張

這樣就完成了圖片的基本瀏覽

2013年7月8日星期一

Android EdtiText元件

先建立一個Text1.java主程式，之後再建立一個text1.xml Layout檔，兩者建立完之後，先到Layout建立版面。

版面的排版

注意事項
紅色框框是EditText的輸入格式，在要驗證時，可以省去很多正規表達式。
它的格式都列在上面，也就不多做說明了。

排版的程式碼

版面排版完之後記得要存檔

再來就是主程式的部分

這邊有幾個重點
private EditText et1
這是把EditText做成全域的，因為會離開onCreate()函數，所以要用全域的
private 是私有的，只能在這個Text1類別內使用，讓資料不會被修改。

et1.getText().toString()
這是抓取EditText元件內容的寫法，記得要加後面的toString()，不然會亂碼。
抓出來後本身toString()是字串型態，所以要用字串型態的變數去接取。

完成之後，記得存檔，再到AndroidManifest.xml 改要啟動的主程式名稱
不懂得可以看這一篇
完成畫面

這邊好像不支援中文輸入法，彷間也有一些教學，但SDK版本一更新的話，還要再重新設定，畢竟只是模擬程式而已，不過可以轉成中文介面。

1.先到下圖的地方，點選紅色框框Custom Locale

2.選擇語言

3.之後按Select 'zh_TW'，就完成中文了

這樣中文介面就設定完成了。

2013年7月6日星期六

android Button元件

Android最基礎，最常用的就是Button元件，所以先教簡單的基本應用
先建立一個主程式Button1.java 和 layout面板 button1.xml (檔案名稱自訂)

先做版面的排版和元件
button1.xml layout版面

這邊可以做 Button元件的修改
background 後面是顏色的編碼。

button1.xml 程式碼

這邊出現黃色虛線不會造成執行影響，是因為名稱是直接輸入的，而不是經由R檔那邊連結的，它會判定不太合邏輯。

Button的主程式碼

函數庫的宣告
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

重點解說 :
1. Button bt1=(Button) findViewById(R.id.button1);
// Button bt1 建立區域變數bt1，屬性Button。
// findViewById(int)到版面的資源去找介面元件的索引ID，R.id.button1--->是屬於整數int。

2. bt1.setOnClickListener(new mylistener());
// bt1.setOnClickListener() 對bt1設定一個OnClickListener函數點擊事件
// new mylistener() 建立新的函數，函數名稱自訂。
＊這邊建立Button的點擊事件是採用 implements 介面實做的方式，也是有其他的方式，但這邊就不多錯介紹了。

3. public class mylistener implements OnClickListener
// 對剛剛建立的新函數 mylistener() 去實做 OnClickListener介面
// 注意要在 public class Button1 extends Activity{} 裡面

Tip : 小技巧
public class mylistener implements OnClickListener{}
//當你打完之後，mylistener底下會乘現紅色虛線，這時可以把滑鼠移過去，
此時會出現下圖

這時可以移進去點 Add unimplemented methods
就會幫你加上 public void onClick(View v) {}的函數了

4. Toast.makeText(Button1.this, "123", Toast.LENGTH_LONG).show();
// 這個Toast很常用，這邊可以做一些訊息提示，也可以用來偵錯。

Tip : 重點
Button1.this 這邊也可以寫作2種
(1) this (需要在本文內 OnCreate()函數內)
(2) getApplicationContext()(在本文以外的地方離開OnCreate()函數時使用，本文內也可以)
不過用 Button1.this(檔名.this) 或getApplicationContext() 都通吃。
// "123" 為訊息，這邊要字串型態
// Toast.LENGTH_LONG 顯示的維持時間，目前是它內定，也可以輸入秒數(單位: 1/1000秒)。
// .show() 這樣它才會顯示在螢幕。

顯示結果

2013年7月5日星期五

LinearLayout 基本排版

LinearLayout是屬於線性排版，以基礎常用的排版，就用下面一張圖的排版來講解。

首先，先看右邊紅色框起來的地方，LinearLayout有分水平排版、垂直排版，在左邊的元件庫(Layouts)裡面都有，它也是屬於樹狀架構的，一層包一層，而LinearLayout也是屬於元件，也可依排版需求放很多個。

LinearLayout的水平排版和垂直排版的設定
Orientation : vertical 垂直排版
horizontal 水平排版

再來是元件的排版設定

1.垂直排版 (一層只能放一個元件)
要控制元件的左、中、右，在Gravity屬性裡面，
以下先列基本的排版
Gravity : left 靠左
center 置中
right 靠右

2.水平排版 (一層可以放多個元件)

這邊有個很重要的屬性 Weight

是控制水平元件的整體比例

它的最大值總合只有 1

剩下的就是 Width 和Height的屬性設定
這邊有2個最常用
wrap_content 未填滿會依照元件的內容物大小來決定(例如文字的長度大小)。
match_parent 填滿會依上一層給的長度或寬度大小去填滿它。
fill_parent 這是2.0版之前在用的功能跟match_parent一樣。
Tip 它也可以用數值來控制它的長寬單位dp

其它的屬性設定
Margins 單位dp
Margin : 元件與元件的間距
Left : 與左邊的間距
Top : 與上方的間距
Right : 與右邊的間距
Bottom : 與下方元件的間距
以下2個不太常用
Start : 元件與面板起始位置的距離 (跟Left很像)
End : 元件與面板結束位置的距離 (跟Right很像)

大致上基本的排版重點就這幾的地方。

2013年7月1日星期一

在同一個專案內建立新的主程式

基本上一個主程式配一個專案，不過因為一個專案就會多許多的UI元件和空間，所以在學習上建議把它歸類到同一個專案下，這樣要使用一些元件圖檔等比較容易，而且後期會有一個主程式配其它的副程式，所以多開檔按一定要會。

現在先來建立另一支主程式類別
步驟如下
1.在檔案區(或是左上的File)，選New--->Class

2.之後就會開啟主程式的設定頁面

這邊有幾個要注意
一、Package 基本上只要從檔案上按滑鼠右鍵建立，都會幫你寫進去，從其它地方(如:File)，就要自己手key進去了。
二、Name 這邊由於是第2個檔案，所以沒有硬是要求第一個字母大寫，不過還是建議第一個字母大寫比較好。
三、Superclass　＊重點！　
這邊是選擇繼承關係，因為android主類別，都一定要去繼承Activity才能啟動。之前是因為建立專案的關係，才幫我們自動繼承Activity，這邊我們是手動加入，所以繼承關係也一樣要手動加入。

3.主程式建立完成
建立完成後就會多一個檔案了

4.加入onCreate
在我們看之前的主程式，類別內不是還有onCreate函數，
當然，這邊也需要onCreate，不然繼承了Activity卻沒有onCreate程式也跑不起來
＊Tip:
這邊有比較快的加入函數方法，要用手Key我也不管你了
在要加入函數的檔案按滑鼠右鍵
選Source ----> Override/Implement Methods....

選完之後，會出現一些函數選項(太小的話，可以在對話框的右下角把它拉大)，之後找到onCreate(Bundle)。
在下面一點有onCreateOptionsMenu(Menu)--->這邊是屬於Menu的函數，在第一之檔案也有，不過目前還沒用到，可以暫時不用加，要加也是可以的。

之後按OK加入onCreate(Bundle)函數，之後如下圖。

這樣主程式架構就已經完成了。
接下來是要建立Layout面板，沒面板就不會在模擬器顯示了。

再來建立Layout檔案

1.建立Layout檔案
這邊建議在左邊樹狀檔案上找到layout資料夾，之後按滑鼠右鍵，選New--->Other

之後會要你選擇所要新增的檔案類型
選Android資料夾--->Android XML Layout File--->Next

之後這邊就是建立檔案名稱和面板排版方式

這邊要注意幾個地方
一、File
layout的檔名，開頭要小寫，建議跟主程式名稱有關(一樣也沒關係)。
二、Root Element
這邊最好用LinearLayout來排版比較不會出錯。這是屬於線性排版，大多也是都用這種來排版，也比較簡單好排。

之前第一之檔案是RelativeLayout，這是相對應的排版方式，雖然排版自由，不過很難去控制它的位置。

選完之後，按Next之後會來到這邊，這是要加入其它組態，
可以不用管它，按Finish完成。

這樣Layout面板就建立完成了。
右上角，就是你剛剛選擇的排版方式

2.加入UI元件
在面板的左邊元件區，選擇一個Button，之後用滑鼠拖曳的方式來拉到面板中，放開後，可以看到左上角多了一個button元件。

再來就是幫這個元件改個名子。
點選button元件後，在右下角有個Name，這邊可以改這個button的名子，讓它不再是button。

之後請存檔，讓上方的*不見。

7.建立主程式與的關聯性
再來就是要把面板拉進去到主程式裡面
先開啟剛剛的主程式
在onCreate函數下寫入
setContentView(R.layout.你Layout的檔名);
這就是從R檔裡面撈一個Layout面板進來。