# 行動應用程式設計 W2&W3 ==計數器(MyCounter)==
###### tags: `行動應用程式設計` `二下課程` `高科大`

>:::spoiler **文章目錄**
>[TOC]
>:::

## 教學主軸
> **物件導向觀念運用**，**W2**將**介面xml拖拉定義屬性**及部分程式流程撰寫，
> **W3**重新將W2的主題再製作一遍，並**詳解Java程式碼**部分。

## 回顧先前
> 物件導向觀念運用

屬性、建構子、方法。

## 觀念先導
### 何謂MVC架構?

簡單的將介面、程式設計、連結劃分
也就是 **M(Model)** 用來 **定義Java程式**的部分

而 **使用者操作的介面** 為 **V(view)**，也就是我們常看見網站網頁、app的畫面
通常在**android studio**中，用**xml**表示。

**C(Controller)** 連結 **M 跟 V** 之間的關係。

>**更詳細的MVC解釋，請參考以下文章。**
[**什麼是MVC？能吃嗎？** - iT 邦幫忙](https://ithelp.ithome.com.tw/articles/10191216)

### 思考 MVC 與 android studio 之間的關聯
通常xml代表V的部分，若對於xml撰寫熟悉，就能直接撰寫code，但大多數用UI介面**拖拉元件**，較為方便快速，並且容易 **定義** 各元件 的 **屬性及id**。

而反之， **M跟C** 的部分 **對應** 到 **Java撰寫程式** 的部分。

## 開始操作
### 課本操作說明
> **如何用 android studio?**

#### 下載軟體

#### 先開一個空頁

#### 將撰寫邏輯程式 調整成Java

#### 安裝虛擬器(執行結果有兩種方式)
> 在W1有教學過，就不再敘述。
> [行動應用程式設計 W1](https://hackmd.io/@chiaoshin369/app_w1#%E4%B8%8A%E8%AA%B2%E6%95%99%E5%AD%B8-%E5%BB%BA%E7%AB%8Bapp%E5%B0%88%E6%A1%88)

## 實作 ==計數器(MyCounter)==

### 介面xml設計

#### <font color="#ffa500">介面要求</font>

#### <font color="#ffa500">呈現結果</font>

### 📌 完整介面xml設計
:::spoiler 點擊顯示 xml

<TextView
        android:id="@+id/TxvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的計數器"
        android:textColor="#000000"
        android:textSize="48sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.05" />

    <TextView
        android:id="@+id/txvSubTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="116dp"
        android:text="次數:"
        android:textColor="#000000"
        android:textSize="36sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/txvResult"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/TxvTitle" />

    <TextView
        android:id="@+id/txvResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="116dp"
        android:layout_marginEnd="100dp"
        android:layout_marginRight="100dp"
        android:text="0"
        android:textSize="36sp"
        app:layout_constraintEnd_toEndOf="@+id/TxvTitle"
        app:layout_constraintTop_toBottomOf="@+id/TxvTitle" />

    <Button
        android:id="@+id/btnUp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="284dp"
        android:text="+1"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/TxvTitle" />

    <Button
        android:id="@+id/btnDown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="284dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:text="-1"
        android:textSize="24sp"
        app:layout_constraintEnd_toStartOf="@+id/btnZero"
        app:layout_constraintHorizontal_bias="0.375"
        app:layout_constraintStart_toEndOf="@+id/btnUp"
        app:layout_constraintTop_toBottomOf="@+id/TxvTitle" />

    <Button
        android:id="@+id/btnZero"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="50dp"
        android:layout_marginRight="50dp"
        android:text="歸零"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btnDown" />

:::

### Java程式設計撰寫
> 老師先教 先前**物件導向觀念**

按鈕 b2 = new 按鈕();
b2.clr = Red;
b2.text = "按我";

b.onClick

#### STEP 1. ==宣告 全域物件變數==
> **老師上課教**

// 資料型態 物件變數名稱;
TextView myTxvResult;
Button myBtnUp,myBtnDown,myBtnZero;

> **自己修改**

// 資料型態 物件變數名稱;
TextView txvResult;
Button btnUp,btnDown,btnZero;

#### STEP 2. ==連結UI的元件 及 程式物件==
> **老師上課教**

//物件變數名稱 = 連結函數 (R.java 對應 id 為介面元件)
myTxvResult = findViewById(R.id.txvResult);
myBtnUp = findViewById(R.id.btnUp);
myBtnDown = findViewById(R.id.btnDown);
myBtnZero = findViewById(R.id.btnZero);

> **自己修改**

//物件變數名稱 = 連結函數 (R.java 對應 id 為介面元件)
txvResult = findViewById(R.id.txvResult);
btnUp = findViewById(R.id.btnUp);
btnDown = findViewById(R.id.btnDown);
btnZero = findViewById(R.id.btnZero);

##### R.java
> **R函數庫**，通過此將java程式連結相關元件。

#### STEP 3. ==為物件 安裝 傾聽者Listener==
> **老師上課教**

myBtnUp.setOnClickListener(myBtnUpListener);

> **自己修改**

btnUp.setOnClickListener(myBtnUpListener);
btnDown.setOnClickListener(myBtnDownListener);
btnZero.setOnClickListener(myBtnZeroListenter);

#### STEP 4. ==設定 相對應的傾聽者及方法==

View.OnClickListener myBtnUpListener = new View.OnClickListener(){...};

##### 設定 ==+1== 按鈕方法

View.OnClickListener myBtnUpListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int x = Integer.parseInt(txvResult.getText().toString());
            x++;
            txvResult.setText(""+x);
        }
};

##### 設定 ==-1== 按鈕方法

View.OnClickListener myBtnDownListener = new View.OnClickListener(){
        @Override
        public void onClick(View v)
        {
            int x = Integer.parseInt(txvResult.getText().toString());
            x--;
            txvResult.setText(""+x);
        }
};

##### 設定 ==歸0== 按鈕方法

View.OnClickListener myBtnZeroListenter = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            txvResult.setText(""+0);
        }
};

:::info
📌 **下方為 STEP 4. 詳細說明**
:::
##### 將文字在button上變化 ==.setText()==

myBtnZero.setText("100");     //將歸零按鈕上文字變成100
myTxvResult.setText("0");  用來將TextView結果歸零

##### 讓button字體反覆變換 ==.getText()、.toString()==
主要老師用意為，一開始定義出 `.getText()` ，拿到的為**字元集合CharSet**，所以要用 `.toString()` 去**強制轉換**為**字串型態**。

String temp = myBtnZero.getText().toString();    //主軸

 if(temp.equals("100"))        //讓btn字體變化
{
    myBtnZero.setText("歸零");
    myTxvResult.setText(""+0);
}
else 
{
    myBtnZero.setText("100");
}

:::success
**兩種方式**
>**讓 字元集合CharSet 轉換成 字串**

getText().toString()    //正規用法 (.toString())
getText()+""            //額外方法 (+"")

:::
##### 取出的字串 轉成 整數變數 ==Integer.parseInt()==
由於**字串的累加**會變成"0"+"1"+"1"，也就是"011"，而非計算出數字2。
所以**用函數** `Integer.parseInt()` 把**字串轉換成整數**，即可方便做運算。

int temp = Integer.parseInt(myBtnZero.getText().toString());

### 📌 完整程式碼 java
:::spoiler **JAVA 程式碼複製**

TextView txvResult;
    Button btnUp,btnDown,btnZero;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        txvResult = findViewById(R.id.txvResult);
        btnUp = findViewById(R.id.btnUp);
        btnDown = findViewById(R.id.btnDown);
        btnZero = findViewById(R.id.btnZero);

        btnUp.setOnClickListener(myBtnUpListener);
        btnDown.setOnClickListener(myBtnDownListener);
        btnZero.setOnClickListener(myBtnZeroListenter);
    }

    View.OnClickListener myBtnUpListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int x = Integer.parseInt(txvResult.getText().toString());
            x++;
            txvResult.setText(""+x);
        }
    };

    View.OnClickListener myBtnDownListener = new View.OnClickListener(){
        @Override
        public void onClick(View v)
        {
            int x = Integer.parseInt(txvResult.getText().toString());
            x--;
            txvResult.setText(""+x);
        }
    };

    View.OnClickListener myBtnZeroListenter = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            txvResult.setText(""+0);
        }
    };

:::

### 最終作品成果

---
:::spoiler 最後更新日期
>==第一版==[time=2022 3 2 , 10:10 PM][color=#786ff7]

>第二版[time=2022 3 9 , 8:16 PM][color=#ce770c]

>第三版[time=2022 5 25 , 11:22 AM][color=#ce770c]

>**最後版[time=2022 5 25 , 11:22 AM]**[color=#EA0000]
:::