顯示具有 android基礎UI元件 標籤的文章。 顯示所有文章
顯示具有 android基礎UI元件 標籤的文章。 顯示所有文章

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() 這樣它才會顯示在螢幕。



顯示結果