2014年12月15日 星期一

Android Studio 下載、安裝與設定


以前要寫 Android App 必須同時安裝 Eclipse 和 Android SDK,不僅手續繁瑣而且又須耗費不少時間去安裝與設定,現在有了 Android Studio 之後一切都變簡單了。

Android Studio 套件包括有 Android Studio IDE、Android SDK tools、Android 5.0 (Lollipop) platfrom 和 Android 5.0 emulator system image with Google APIs。

官網 http://developer.android.com/


下載 Android Studio

1. 切換網頁到 http://developer.android.com/sdk/index.html,點按螢幕中間的「Download Android Studio」綠色按鈕。
2. 勾選同意條款後,再點按下方的「Download Android Studio」藍色按鈕。


安裝 Android Studio 

雙擊 android-studio-bundle-xxxx.exe,然後依照視窗提示安即可。

一些提示:
1. 在安裝過程中它會順便幫你安裝 Microsoft C++ 和 Java,此部分一樣請依照視窗指示安裝。
2. 它也會幫你建立一個安卓虛擬裝置(Android Virtul Device),這個安卓虛擬裝置就是一個手機模擬器,如果你沒有安卓手機,仍然可以利用這個虛擬裝置來設計 App。
3. 另外它還會幫你預設一個虛擬裝置驅動規劃。不同的手機需要不同的裝置驅動規劃,它目前預設的可能並未符合我們的需求,在下一階段中我將會告訴你如何規劃我們的裝置驅動。

安裝完成後的畫面如下:


安裝完後還不能保證您可以開始寫 App,還需要做一些設定才行。這些設定是在 Android Studio IDE 裏面進行的,所以我們要先進入 IDE,步驟如下:

1. 選取 Start a new Android Studio project 這個項目。
2. 然後一直點按 [Next] 鈕,最後按下 [Finish] 鈕,就會出現 Android Studio 的操作畫面。




設定 Android Studio

這兒有幾項工作要做:指定 JAVA 安裝路徑,安裝 Android SDK,規劃虛擬裝置驅動。

指定 Java 的安裝路徑,步驟如下:

1. 選擇  開始功能表 > 設定 > 控制台 > 系統  > 進階 > 環境變數。
2. 在下方的系統變數區塊內點擊 [新增] 鈕。
3. 在「變數名稱」內鍵入 JAVA_HOME,在「變數值」內鍵入 C:\Program Files\Java\jdk1.7.0_21(此處應該鍵入你電腦上的 JAVA 路徑),如圖



安裝 Android SDK

雖然最新版的 Android 系統功能最多,但由於它並未支援大多數的行動裝置,因此我們需要安裝較低版的 Android 作業系統,此處我們建議您安裝 Android 2.3.3 版。

1. 點擊操作介面下拉功能表 Tools > Android > SDK Manager,出現「Android SDK Manager」視窗。
2. 除了它自動幫您建議必須安裝的項目之外,我們還必須勾選「Android 2.3.3(API 10)」這個項目。
3. 點擊右下角落的「Install xx packages...」鈕。
4. 點擊右下角落的「Accept License」鈕,再點擊「Install」鈕。
這個步驟需要花費一點時間,請您耐心等候。如果安裝完之後發現「Install xx packages...」這個按鈕還是亮的(可被點擊),請持續這部分的安裝值到按鈕都變灰色不可按下。
5. 點擊右上角落的紅色叉叉,關閉「Android SDK Manager」。


虛擬裝置(AVD)的驅動規劃

為了模擬不同尺寸的手機或平板,我們需要為它們設置不同的驅動規劃。
如果您有實體手機或平板,可以略過此步驟。
事實上,我們不太建議您略過此步驟,畢竟有時候會在沒有實體裝置的情況下來執行 App。

1. 點擊操作介面下拉功能表 Tools > Android > AVD Manager,出現「Android AVD Manager」視窗。
2. 點擊視窗下方的「Create Virtual Device」鈕。
3. 在「Category」列表裏面選擇「手機(Phone)」或「平板(Tablet)」。此處我選的是「Phone」。
4. 在右側列表裏面選擇「3.2" QVGA(ADP2)」。這是一個320x480畫素的手機,選擇這個項目可以適用於大部分的手機。
5. 點擊視窗右下方的「Next」鈕。
6. 選擇「Gingerbread 10 armeabi Android 2.3.3」後按下「Next」鈕。
7. 在 AVD Name 欄位右側鍵入您的手機名稱,然後按下「Finish」鈕。此處我是鍵入「320x480」。
8. 點擊視窗右下方的「OK」鈕。


簡單測試是否可正確執行

到這個階段我們大致上都已完成安裝與設定,不過我們還是要來測試一下是否可以正確執行 AVD。

1. 點擊工具列圖示

2. 在 Android virtual device: 右側欄位選擇「320x480」這個項目(註A),如下圖:
3. 點擊「OK」鈕。
經過一段時間之後螢幕會出現一支手機,如下圖:


註A:

如果您有實體手機或平板,可以選擇實體裝置,這個實體裝置將會出現在列表之中。
安裝實體裝置的步驟如下:

1. 用USB線將它與電腦連接,首先安裝正確的USB驅動程式。
2. 然後執行手機桌面上的「設定(Settings)」程式,進入開發人員選項(Developer options)」 。
3. 將「USB debugging」設為「可用(Enable)」。


下一階段我會為您說明如何開始寫一個簡單的 App,請詳 http://pizgchen.blogspot.tw/2014/12/blog-post.html


2014年12月14日 星期日

開啟另一個活動(Activity)

開啟另一個活動(Activity)
原文詳 https://developer.android.com/training/basics/firstapp/starting-activity.html#BuildIntent


回應"Send"按鈕

1. 在 res/layout 路徑下編輯 activity_main.xml 檔案。
2. 在 <Button> 元素內加入 "android:onClick" 屬性。
activity_main.xml 內容看起來應如下:

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        android:onClick="sendMessage"/>

此 "android:onClick" 屬性的值 "sendMessage"它是一個方法(method),當使用者按下按鈕時會去執行這個方法。

3. 到 "java/com.example_xxx/myapplication1" 路徑下開啟 MainActivity.java。
4. 在 MainActivity 類別(class)下加入一個 "sendMessage()" 方法(method),如下所示:

 public void sendMessage(View view) {
        // Do something in response to button
 }

為了讓系統能配合這個方法,您必須符合如下規定:

1. 方法必須為全域(public)。
2. 需要有一個 void 的返回值。
3. 需要有一個 View 的參數。


建立一個意圖(Intent)

所謂"意圖(Intent)",就是在按下按鈕之後所要做的事。

1. 在 MainActivity.java 的 sendMessage() 方法內部建立一個意圖,在這兒我們要啟用另一個叫做 "DisplayMessageActivity" 的活動(Activity)。程式碼如下所示:

public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
}

注意:你會發現程式中出現紅色的文字,表示目前這兒有一些錯誤,這是因為我們目前尚未建立 "DisplayMessageActivity" 這個類別。目前您可以先忽視這個錯誤,稍後我們將會建立這個類別。

這個架構使用到兩個參數:

  • Context 作為 new Intent 的第一個參數(之所以使用 this 是因為 Context 的次類別是 Activity)。
  • App 的 Class 部件會用來驅動 Intent ,在這兒將會啟用一個 Activity。


2. 在檔案的頂端加入這一行

import android.content.Intent;

提示:同時按下<Alt>+<Enter>鍵可以自動匯入(import)遺失的類別(class)。

3. 在 sendMessage() 方法裏使用 findViewById 以取得 EditText 元件。
4. 在檔案的頂端加入這一行

import android.content.Intent;

你也可以同時按下<Alt>+<Enter>鍵自動匯入(import) EditText 類別。

5. 取得使用者輸入的內容,將值指定給區域變數 message。並且使用 putExtra() 方法將 message 這個值加到 Intent 裏。
MainActivity.java 內容看起來應如下:

public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
        String message = editText.getText().toString();
        intent.putExtra(EXTRA_MESSAGE, message);
}

6. 在 MainActivity 類別的頂端加入 "EXTRA_MESSAGE"的定義,如下:

public class MainActivity extends ActionBarActivity {
    public final static String EXTRA_MESSAGE = "com.mycompany.myfirstapp.MESSAGE";
    ....

7. 在 sendMessage() 方法內呼叫 startActivity() 方法,把這個 Intent 傳送出去,如下:

public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
        String message = editText.getText().toString();
        intent.putExtra(EXTRA_MESSAGE, message);
        startActivity(intent);
}

系統接收到這個呼叫之後,會開始一個 Intent 指定的 Activity 實例,現在你需要去建立一個 DisplayMessageActivity 類別,為了這事來工作。


建立第二個活動(Activity)

所有的 Activity 次類別都必須實作 onCreate()方法,可以使用這個方法來接收 Intent 傳遞過來的資訊,同時必須在 onCreate() 方法內使用 setContentView() 方法來激活佈局,

使用 Android Studio 建立一個新的活動(Activity)

1. 在 Android Studio 的 java 路徑下選擇 com.example.myapplication1,按下滑鼠右鍵並選取 New > Activity > Blank Activity
2. 在 選擇視窗內填入下列資料:

Activity Name = DisplayMessageActivity
Layout Name = activity_display_message
Title = DisplayMessageActivity
Hierarchical Parent = com.example.myapplication1.MainActivity
Package name = com.example.john.myapplication1

按一下 [Finish] 鍵。

3. 雙擊 DisplayMessageActivity 開啟程式碼視窗。

4. 移除 onCreateOptionsMenu() 方法。


建立活動

1. 在 src/ 路徑下建立一個新檔案 DisplayMessageActivity.java,


3. 到 strings.xml 內加入這一行

<string name="title_activity_display_message">My Message</string>

4. 雙擊 manifests 在 <Application> 裏面為 DisplayMessageActivity 這個類別加入 <activity> 宣告,如下:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.john.myapplication1" >

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".DisplayMessageActivity"
            android:label="@string/title_activity_display_message"
            android:parentActivityName=".MainActivity" >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.example.john.myapplication1.MainActivity" />
        </activity>
    </application>

</manifest>


接收意圖

1. 編輯 DisplayMessageActivity.java 檔案。
2. 移除 onCreate() 方法裏面的這一行

setContentView(R.layout.activity_display_message);

3. 取得意圖,並將他指定給 intent 區域變數。

Intent intent = getIntent();

4. 在檔案的頂端加入這一行

import android.content.Intent;

你也可以同時按下<Alt>+<Enter>鍵自動匯入(import) EditText 類別。

5. 使用 getStringExtra() 方法萃取從 MyActivity 傳遞過來的訊息。

String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);


顯示訊息

1. 在 onCreate() 方法內建立 TextView 物件。

 TextView textView = new TextView(this);

2. 使用 setText() 方法設定文字大小和內容。

textView.setTextSize(40);
textView.setText(message);

3. 利用 setContentView() 方法將 textView 傳送到最底層的活動佈局裏。
4. 在檔案的最頂端加入

import android.widget.TextView;

完整的 onCreatet() 方法程式碼如下:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Get the message from the intent
        Intent intent = getIntent();
        String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

        // Create the text view
        TextView textView = new TextView(this);
        textView.setTextSize(40);
        textView.setText(message);

        // Set the text view as the activity layout
        setContentView(textView);
}


現在你可以執行這個 App 了,畫面如下:



















建立簡單的使用者介面

Android Studio - 建立簡單的使用者介面
原文詳 https://developer.android.com/training/basics/firstapp/building-ui.html

建立 Linear Layout (線性布局)

線性布局(Linear Layout)有水平(horizontal) 和垂直(vertical)兩種型式。


1. 在 Android Studio 裏切換到 res/layout 路徑,開啟 activity_main.xml 檔案。
2. 在 預覽面板(Preview)裏,點按  關閉預覽。
3. 刪除 <TextView> 元素。
4. 將 <RelativeLayout> 變更為 <LinearLayout>。
5. 加入 android:orientation 屬性將畫面設置為水平。
6. 移除 android:padding 屬性並加入 tools:context 屬性。
res/layout/activity_mail.xml 內容看起來應如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

</LinearLayout>


加入文字欄位

1. 在 activity_main.xml 檔案的 <LinearLayout> 裏面定義一個 <Edittext> 元素,並將
它的 ID 屬性設為 @ + ID / edit_message 
2. 將 layout:width 和 layout_height 屬性的值設為 warp_content。
3. 將 hint 的屬性值設為 edit_message 的 string 物件。
<EditText>元素內容看起來應如下:

<EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

你應該可以注意到有紅色的文字出現,這表示該行有錯誤。
底下我們要來修訂這個錯誤。


加入 String 資源

預設情況下,專案包含有一個 res/values/string.xml 資源,我們將會在這兒增加一個 "edit_message" 的項目,並將它的值設為 "Edit a message"。

1. 在 res/values 路徑下開啟 strings.xml。
2. 加入 "edit_message" 這一行,並將它的值設為 "Edit a message"。
3. 加入 "button_send" 這一行,並將它的值設為 "Send"。這個東西是作為我們下一階段給按鈕元件使用的。
4. 移除 "hello world" 文字。
strings.xml 內容看起來應如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My Application1</string>
    <string name="action_settings">Settings</string>
    <string name="edit_message">Edit a message</string>
    <string name="button_send">Send</string>
</resources>


加入一個按鈕

1. 在 res/layout 路徑下編輯 activity_main.xml。
2. 在 <LinearLayout> 內部的 <EditText> 下方加入一個按鈕元素 <Button>。
3. 設定按鈕的 "width" 和 "height" 屬性值為 "warp_content"。
4. 將按鈕的文字標籤屬性 :androis:text 設為 string 資源裏的 "button_send"。
activity_main.xml 內容看起來應如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

注意: 這個按鈕並不需要一個 android:id 屬性,因為它不會被其他介面所參考。

目前這個佈局包刮了一個 EditText 元件和 Button 元件,如下所示:


目前雖然這個按鈕可以正常運作,但由於使用者可能在會在輸入盒(EditText)裏鍵入過長的文字,所以我們可以透過指定這個元件的 weight (權重),來重新分配 "EditText" 和 "Button" 所佔用的比例。

所有工具元件權重的預設值都是 0,如果你指定大於 0 的值,你就可以看到元件佔據該空間的比例。


讓輸入盒(EditText)充滿螢幕寬度

1. 將 <EditText> 的 "layout_weight" 屬性設為 1。
2. 同時將 <EditText> 的 "layout_width" 屬性設為 0dp。
activity_main.xml 內容看起來應如下:

....
<EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message"/>
....

切換到 Display 頁籤,你可以看到目前這個佈局外觀變更了,如下所示:


所以, activity_main.xml 最終內容看起來應如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>


執行這個 APP

點按  這個工具列按鈕,執行我們上面所建立的 APP。


在下一個階段,我會告訴您如何回應按鈕的動作,去取得使用者輸入的內容,並開啟另一個活動(Activity),詳 http://pizgchen.blogspot.tw/2014/12/activity.html。