在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。
之後就啟動模擬器看成果
按上一張
按下一張
到最後一張再繼續按下一張
這樣就完成了圖片的基本瀏覽
先建立一個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',就完成中文了
這樣中文介面就設定完成了。
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() 這樣它才會顯示在螢幕。
顯示結果
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很像)
大致上基本的排版重點就這幾的地方。
基本上一個主程式配一個專案,不過因為一個專案就會多許多的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面板進來。
之後一樣要存檔。
3.設定啟動檔 AndroidManifest.xml
這邊是關鍵,沒弄好會開啟別之檔案或錯誤。
在下圖所圈起來的地方,紅色劍頭處,改成你要啟動的主程式檔名(不用 .副檔名)。
*重點:之後請存檔
4.啟動
一樣在主程式檔按下按滑鼠右鍵--->Run As--->Run Configurations
會來到如下圖的地方
選擇Launch 下拉,選你剛剛改的
com.example.android1.檔名
之後按Apply--->Run
等待啟動後就會出現另一支的程式檔了