# Android Studio 介面操作教學

[Android Studio 安裝連結](https://hackmd.io/@g08mpQYPR0yOHclCtVhKLQ/S1emtYWbC)

### I. Android Studio 主要操作環境

* 主要介面

* 布局介面

### II. 專案匯出與匯入

* 匯出專案(Export)

* 匯入專案(Import)

### III. APP 安裝檔

進入專案資料夾中，如下圖

進入 `.\app\build\outputs\apk\debug\app-debug.apk`，裡面這個`app-debug.apk`即為 Android APP 安裝檔(可以直接複製到 Android 手機上安裝)

# Android 程式開發教學

*補充說明*

以下範例程式碼容易在建置過程中發生 `Can't determine type for tag '<macro name="m3_comp_assist_chip_container_shape">?attr/shapeAppearanceCornerSmall</macro>'` 的錯誤：

主要原因是 gradle 版本過新，解決方式如下：
一律改成 1.6.0 版本後，重新建置即可。

### I. Android Element

說明 Android APP 的介面設計。

元件的建立可以直接以拖曳的方式從旁邊的 Palette 中拉到畫面中，透過點選元件，可以設定相關屬性。

#### 主要畫面 (Activity)

Android 在專案建立的當下，會同時建立一個主畫面 `activity_main.xml` 作為 APP 的初始畫面。

#### 文字方塊 (TextView)


* id: 每個元件都需要有一個 id，類似程式碼中的變數名稱
* layout_width / layout_height: 這個元件的長寬
* **wrap_content**: 依照顯示的文字來決定
* **match_parent**: 依照所屬 parent 的大小來決定
* text: 要顯示的文字

#### 按鈕 (Button)


* id: 每個元件都需要有一個 id，類似程式碼中的變數名稱
* layout_width / layout_height: 這個元件的長寬
* **wrap_content**: 依照顯示的文字來決定
* **match_parent**: 依照所屬 parent 的大小來決定
* text: 要顯示的文字
* onclick: 表示事件觸發時的 function 名稱(對應 Java 檔案中的函數撰寫)

其他表示方式(開發者常用的 xml 對照)：

> **對應範例專案 Button**
>
> 1. 修改布局為 RelativeLayout
> 2. 建立物件：TextView、Button
> 3. 撰寫 Java Script
> ```java
> // MatinActivity.java
> public static int size = 30;
> public void bigger(View v) { // press button
> TextView txv = (TextView) findViewById(R.id.txv);
> txv.setTextSize(++size);
> }
> ```
> 4. 事件觸發
> 

#### 文字輸入欄位 (EditText)


* id
* hint: 提示文字
* text: 初始文字

> **對應範例專案 EditText**
>
> 1. 修改布局為 RelativeLayout
> 2. 建立物件：TextView、Button、EditText
> 3. 撰寫 Java Script
> ```java
> // MatinActivity.java
> public void sayHello(View v){
> // 取得代表佈局中 EditText 及 TextView 的物件
> EditText name = (EditText)findViewById(R.id.name);
> TextView txv = (TextView)findViewById(R.id.txv);
>
> // 將 EditText 文字串接自訂訊息再設定給 TextView
> txv.setText(name.getText().toString() + ", hello!");
> }
> ```
> 4. 事件觸發
> 
> 5. 執行結果
> 

以下為進階元件介紹

---

#### 多選一的單選鈕 (RadioButton)


* `getCheckedRadioButtonId()`：取得被選取 RadioButton 的資源 ID
* `onCheckedChanged()`：選項改變的事件

> **對應範例專案**
> 1. Ticket_Kiosk
> 
>
> 2. Temperature
> > 字串資源的建立：
> > 
> > 利用字串資源的建立，可以印出一些需要 ASCII 編碼才能印出的字，並可重複利用。
> >
> 

#### 可複選的核取方塊 (CheckBox)


* `boolean isChecked()`：表示目前核取方塊是被勾選中或取消勾選中
* `onCheckedChanged()`：選取/取消核取方塊的事件

> **對應範例專案 Menu**
> 

#### 圖案 & 照片 (ImageView)

1. 使用 Android Studio 內建資源
2. 自行提供影像資源：將影像放到 /drawable 資料夾中

> **對應範例專案 FoodMenu**
> 
>

### II. Android 介面佈局

介紹視覺元件的畫面佈局。

#### RelativeLayout (相對佈局)

以元件與元件之間的相對關係來安排佈局。

*範例專案 Button 與 EditText 均為相對佈局*

#### LinearLayout (線性佈局)

從上到下或左到右依序擺放元件的佈局方式。

> **對應範例專案 Phone**
>
> 1. 修改布局為 LinearLayout
> 2. 建立物件：TextView、Button、EditText、LinearLayout，具有以下樹狀結構
> 
>
> 3. 撰寫 Java Script
> ```java
> // 宣告代表 UI 元件的變數
> EditText sname,fname,phone;
> TextView txv;
>
> @Override
> protected void onCreate(Bundle savedInstanceState) {
> super.onCreate(savedInstanceState);
> setContentView(R.layout.activity_main);
> // 初始化變數
> sname = (EditText) findViewById(R.id.surName);
> fname = (EditText) findViewById(R.id.firstName);
> phone = (EditText) findViewById(R.id.phone);
> txv = (TextView) findViewById(R.id.txv);
> }
>
> public void onclick(View v){
> txv.setText(sname.getText().toString() + // 取得姓
> fname.getText() + // 取得名
> "\'s phone number is " +
> phone.getText()); // 取得電話
> }
> ```
> 4. 事件觸發
> 
> 5. 執行結果
> 

#### ConstraintLayout (約束佈局)

可用以單獨設計更為複雜的版面，而不必層層套入多個佈局，讓設計更簡潔並提升執行效率。

> **對應範例專案 Phone1**
> 1. 佈局為 ConstraintLayout
> 2. 約束的建立
> 
>
> 3. 執行結果
> 

#### TableLayout (表格佈局)

以表格方式將個別元件放置在指定儲存格的佈局方式。

### III. 事件處理

關於事件處理概念，可參考 AWT 的[委派事件處理流程](https://hackmd.io/l_hvjM4xQ8SG2Ukpf8Wcyg#II-Java-Event)

程式碼設計邏輯 (以「按一下按鈕，計數器加一」為例)
1. 設計使用者畫面(xml)
2. 實作 Listener 介面：設計觸發事件時，會設定 listener 和 event source，通常會設定 "包含事件來源者的物件(Activity)" 為 listener

   // button 為 event source，MainActivity 為 listener
   public class MainActivity extends AppCompatActivity implements View.OnClickListener

3. 註冊物件

   btn.setOnClickListener(this); // 登錄監聽物件, this 表示活動物件本身

4. 撰寫事件處理的程式碼：改寫介面中的 abstract function onClick(View v)

   @Override
   public void onClick(View v) {
       txv.setText(String.valueOf(++counter)); // 將計數值加 1, 然後轉成字串顯示出來
   }

> **對應範例專案 Counter**
> 實作結果(長按 button 計數器加 2，長按計數值可歸零)
> 

### IV. 用 Intent 啟動程式中的其他 Activity

每個 Activity 可以被視為一個畫面，當我們要切換畫面時，除了製作新的 Activity 之外，切換動作的進行必須透過 Intent 來處理
1. 在專案中新增 Activity
對 layout 資料夾右鍵 -> New -> Activity -> Empty Activity


2. 撰寫切換 Activity 的腳本

   // 進入下一個頁面
   Intent it = new Intent(this, SecondActivity.class); //建立 Intent 並設定目標 Activity
   startActivity(it); // 啟動 Intent 中的目標 Activity

   // 結束當前頁面
   finish();

> **對應範例專案：Memo**
> 
>

3. 其他
`Intent` 也可以用來啟動手機內的內建應用程式、相機、影片播放等功能。

### IV. 其他設計範例

1. 以亂數指定顏色屬性 (RandomColor)

2. 長按手機震動 (Vibrator)
需要先設定手機震動權限：
`<uses-permission android:name="android.permission.VIBRATE" />`

執行結果(模擬器沒有震動效果，必須使用實際手機進行測試)：