> For the complete documentation index, see [llms.txt](https://johch3n611u.gitbook.io/c50108/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201904/2014-0410.md).

# 2019/0409/安卓工作室-物件導向事件驅動實作+Homework1&2

## 安卓工作室-java簡易實作

### 委派機制

選擇、點選、拖曳…

系統事件

被程式設計師指定要某個事件處理函式處理系統事件

產生與使用者的互動

一系列特定的內容會包含在委派函式裡面

![](/files/-LdBlWPMfBcG9d1XL_ud)

指定某元件監聽某事件

前面所有部分都是屬於UI (圖形與文字)

所以按下按鈕不會發生任何事件

有兩件事沒做 1.沒監聽事件 2.沒有委派處理函式

所以要有互動就必須設定以上兩點。

Layout屬於畫面

之後開始java的委派函式與監聽內容

### 物件導向事件驅動的方式

![](/files/-LdBlNW-HV5tKXWUyd4n)

第一行意思為 layout取出某id物件然後存到變數button1

用以處理委派函式

第三行對button1物件設定一個監控器

監聽點擊事件觸發new android.view\.View\.OnClickListener()函數

每個語言都有自己的Class packages熟讀就能對物件操控更理解

![](/files/-Ld8Pfj2UgcG-6yBMZw-)

![](/files/-Ld8PmTtXxE2OJKMM4I2)

![](/files/-Ld8PvzOLujSsr_S8-GM)

![](/files/-Ld8Q1W9Bp9QZowP0aN4)

![](/files/-Ld8Q8dnfwe2ym9BYJsh)

![](/files/-Ld8QtDdSJ1gye3t5uiI)

Java語言的架構為利用interface介面來實作委派呼叫，定義類別行為/規範、函式原形(規格/規格實際實現)

Ex1叫了一碗麵 每個人作的麵不太一樣 但都是麵

Ex2 證照英打1分鐘要打n個字 只要超過n個字你打幾個字都可以

Callback mether 

人家設計好class packages 就要遵照規則 (其實也可以自己定義)

## 開始java功能-操控物件

![](/files/-Ld8R-gG7fYrWz0nTpFs)

操控物件，物件一定要有id

通常一個layout對應一個java

 

![](/files/-Ld8ROcf_7Q_1GXNeqQM)

### 如何在頁面切換activity - 結果沒講只有講如何將初始頁面切換activity

且如果存切換顯示，會造成監聽器/函式找不到物件報錯。

初始化面 layout

按鈕控制模組 

Callback mether事件處理控制

首先新增一個對應頁面

Java右鍵new java or copy or new activity

![](/files/-Ld8RwY92VGHdKPlRLyo)

Copy

![](/files/-Ld8SVj7qPcQ3bwEDh4b)

如果要讓app初始頁面改動則必須去改動 manifests

開啟權限也會寫在這邊(相機gps…

![](/files/-Ld8Sm9IzYkOmZx-LQaP)

當新增檔案後必須在這邊做類似註冊頁目的動作

Intent 意圖 呼叫別的畫面的內容

修改 .ManActivity 則可以修改app初始頁面

{% embed url="<https://www.itread01.com/content/1544450822.html>" %}

想少寫物件位址就必須

using class packages (c#)

import class packages (java)

控制物件必須對應確切id

```
button2=(Button)findViewById(R.id.btn_2);
```

(button)為強制轉型

![](/files/-Lc1vu0IMxQCwyw7_Jwa)

![](/files/-Lc1vvOKfSqb5qziqAN5)

### 實做設定監控器

![](/files/-Ld8SuIj81rMLbRzv26y)

![](/files/-Ld8T0BhhBYEBqdnr4AX)

紅色定義了監聽器介面 interface

綠色的部分下面定義了事件處理函式 interface的架構不可更改

key下去會自動產生底下

藍色的部分定義了實際每一步動作

Ide觸發的事件超多

![](/files/-Ld8T6snTc5UnVMlN6XD)

### Ex&#xD;

紅色監聽者對應綠色介面

定義了消防檢查員有哪些資格(安檢證照)，

藍色部分

為消防法規規定了那些規格

### 程式碼

```
package com.example.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class Activity_Button_Java extends AppCompatActivity {

    Button button1,button2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button_java);
        button1=(Button)findViewById(R.id.btn_1);
        button2=(Button)findViewById(R.id.btn_2);

        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                button1.setText("已經按下");
                button1.setBackgroundColor(0);
                button1.setClickable(false);

                button2.setText("按鈕２");
                        button2.setBackgroundResource(R.drawable.button_blue);
                        button2.setClickable(true);
            }
        });
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                button2.setText("已經按下2");
                button2.setBackgroundColor(0);
                button2.setClickable(false);

                button1.setText("按鈕1");
                button1.setBackgroundResource(R.drawable.button_blue);
                button1.setClickable(true);
            }
        });
    }
}
```

button是個class

view取值放入變數

操作變數屬性

![](/files/-Ld8Trb7D_vyN8BrYUf-)

## Homework 1 – 6

座號： 08          姓名：劉育誠

### 階段性作業一&#xD;

	利用課堂介紹之View與ViewGroup元件，包括: Button、TextView 、ImageView、EditText，完成程式畫面之設計：

1\.	以LinearLayout(線性佈局)設計一個使用者介面，並加入Button、TextView 、ImageView等元件，完成以下畫面設計。

	ImageView高度設定 200dp，載入資源drawable/picture01

	以水平LinearLayout排列3個Button，顯示(網站、APP、APP2)

	水平置中1個Button ，顯示 “我的按鈕”，字型大小

![](/files/-Lc1xkSr6QnfCpxMp3E4)

(10 sp)

 

2\.	以Layout (相對佈局)設計一個使用者介面，並加入EditText、TextView 、Image View等元件，完成以下畫面設計。

	在畫面左上方及右下方，以垂直方向排列2次，載入系統圖片資源drawable/ sym\_def\_app\_icon

	以水平置中、垂直置中方式排列1個TextView，顯示 “請問畫面上一共有幾個Android機器人圖案?”，字型大小(20 sp)

	在上一個TextView下方新增EditText，給定輸入提示(hint) "你的答案"

	在畫面右上方及左下方，分別以垂直方向排列2次及1次，載入系統圖片資源drawable/star\_big\_on

![](/files/-Lc1xpkJwToWj9YpCMAt)

3\.	以TableLayout (表格佈局)設計一個使用者介面，並加入Button、TextView 、ImageView等元件，完成以下畫面設計。

	TableRow 的方式新增3個TextView於第一行，顯示內容(“遊戲名稱”、 "遊戲版本"、"系統")，字型大小(30sp、20sp、30sp)，前景色("#f70707"、"#00fd2a"、"#0004ff")

	將第一行"系統"區域背景設為背景色 "#00ff22"

	TableRow 的方式新增3個TextView於第二，四行，顯示內容("英雄聯盟"、 "Version 1.6.8"、"Android2.2")、("傳說對決"、"Version 1.8"、"Android 4.0")，字型大小(25sp、預設、預設)、(15sp、預設、預設)&#x20;

	單獨新增ImageView、Button於第三，五行，載入資源drawable/star\_big\_on ，顯示 "選擇"

![](/files/-Lc1xvz9CZomv3iRXUii)

結果畫面截圖：

![](/files/-Lc1y9nj-_h7Ge-J8jN_)

![](/files/-Lc1yWMNxDoKQBeASFd2)

![](/files/-Lc1zRwWMDNJWOeuIjjx)

程式碼：

```
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="fitCenter"
        android:src="@drawable/picture01" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的名字"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center"
        >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="網站"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="網站"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="網站"/>

    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="10sp"
        android:text="我的按鈕"/>




</LinearLayout>

(2)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentRight="true"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/star_big_on"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/star_big_on"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/sym_def_app_icon"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/sym_def_app_icon"/>
    </LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="請問畫面上一共有幾個Android機器人圖案?"
        android:textSize="20sp"

        />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="你的答案"
        />
</LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/sym_def_app_icon"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/sym_def_app_icon"/>
    </LinearLayout>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/star_big_on"
        />

    </LinearLayout>

</RelativeLayout>

(3)
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">


    <TableRow>
        <TextView
            android:text="遊戲名稱"
            android:textSize="30dp"
            android:gravity="center"
            android:textColor="#f70707"


            />
        <TextView
            android:text="遊戲版本"
            android:gravity="center"
            android:textColor="#00fd2a"
            android:textSize="20dp"

            />

        <TextView
            android:text="系統"
            android:background="#00ff22"
            android:textColor="#0004ff"
            android:textSize="30dp"
            android:gravity="center"

            />


    </TableRow>

    <TableRow>
        <TextView
            android:text="英雄聯盟"
            android:textSize="25dp"
            android:gravity="center"


            />
        <TextView
            android:text="Version 1.6.8"
            android:gravity="center"

       />

        <TextView
            android:text="Android 2.2"
            android:gravity="center"

      />

    </TableRow>

    <ImageView
        android:src="@android:drawable/star_big_on"
        android:gravity="center" />

    <TableRow>
        <TextView
            android:text="傳說對決"
            android:textSize="15dp"
            android:gravity="center"


            />
        <TextView
            android:text="Version 1.8"
            android:gravity="center"
 />

        <TextView
            android:text="Android 4.0"
            android:gravity="center"
/>

    </TableRow>
    <Button
        android:text="選擇"/>
</TableLayout>

```

座號： 08        姓名：劉育誠

### 階段性作業二&#xD;

	利用課堂介紹之FrameLayout、GridLayout、ConstraintLayout布局方式，完成程式畫面之設計：

4\.	以FrameLayout (框架佈局)設計一個使用者介面，並加入EditText、TextView 、ImageView等元件，完成類似畫面設計。

	ImageView寬度、高度設定為 "match\_parent"，scaleType屬性設定為"fitXY"，載入任意資源圖片

	以水平置中方式排列1個EditText，顯示輸入提示(hint) "搜尋"，字型大小(26\~36 sp)

	以水平置中、垂直置中方式排列1個TextView，顯示

![](/files/-Lc20U_BVg-1GL-C7Vso)

一連串自訂定文字

5\.	以GridLayout (網格佈局)設計一個使用者介面，並加入Button、EditText等元件，完成類似畫面設計。

	以GridLayout 新增一個6 x 4大小的網格，設定屬性columnCount="4"，rowCount="6"

	新增一個 TextView，跨4欄顯示，內部文字邊界左右(2\~10 dp)、上下(2\~10dp)(layout\_marginLeft、layout\_marginTop)

![](/files/-Lc20YaYiPnkJGb4TTcz)

	分別依序新增按鈕，相對應的顯示文字如下圖，平均分配每一列的寬度空間給四個按鈕

	按鈕 "+" 需跨2列顯示，按鈕 "=" 需跨2欄顯示

6\.	以ConstraintLayout (限制佈局)設計一個使用者介面，並加入Button、TextView、EditText 、ImageView等元件，完成類似畫面設計。

	新增ImageView寬度設定為 "match\_parent"、高度設定(220\~260)dp ，scaleType屬性設定為"fitCenter"，載入任意資源圖片，絕對位置設定為"parent" (layout\_constraintLeft\_toLeftOf、layout\_constraintTop\_toTopOf)

	新增二組TextView、EditText，第一組的TextView上方及左方的邊界設定為"(15\~25)dp"，對齊ConstraintLayout容器左方以及上方ImageView下方(layout\_constraintLeft\_toLeftOf、layout\_constraintTop\_toBottomOf) 第一組EditText對齊TextView

	第二組的TextView上方及左方的邊界設定為"(15\~25)dp"，對齊Constraint Layout容器左方以及上方TextView下方(layout\_constraintLeft\_toLeftOf、layout\_constraintTop\_toBottomOf) ，EditText對齊TextView

	利用Guideline 在水平"(400\~450)dp"、垂直"(140\~200)dp"處新增參考線，並利用此二條參考線新

![](/files/-Lc20bcex7_EBu2-8hne)

增二個Button("上一張"、"下一張")

結果畫面截圖：

![](/files/-Lc23P1_gEb1db5zhoUi)

![](/files/-Lc23YLkELRSh-osceVk)

![](/files/-Lc23aPIJbVILM6gsmQX)

程式碼

```
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/picture01"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="搜尋"
        android:layout_gravity="center_horizontal"
        android:textSize="36sp"

        />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="這是懸崖峭壁!"
    android:textColor="#FF4000"
    android:textSize="64sp"
    android:layout_gravity="center"/>


</FrameLayout>

(2)
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:rowCount="6">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:layout_rowSpan="1"
        android:textSize="50dp"
        android:layout_margin="10dp"
        android:hint="0">
       </TextView>
    <Button
        android:layout_width="80dp"
        android:text="返回" />
    <Button
        android:layout_width="80dp"
        android:text="清空" />
    <Button
        android:layout_width="80dp"
        android:text="/" />
    <Button
        android:layout_width="80dp"
        android:text="X" />
<!-- 需要把底下的格子補齊，合併格才會成功顯示。 -->
    <Button
        android:layout_width="80dp"
        android:text="7"
        />
    <Button
        android:layout_width="80dp"
        android:text="8"
        />
    <Button
        android:layout_width="80dp"
        android:text="9"
        />
    <Button
        android:layout_width="80dp"
        android:text="-"
        />
<!-- 下一行 -->
    <Button
        android:layout_width="80dp"
        android:text="4"
        />
    <Button
        android:layout_width="80dp"
        android:text="5"
        />
    <Button
        android:layout_width="80dp"
        android:text="6"
        />
    <Button
        android:layout_width="80dp"
        android:text="+"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        />
    <!-- 下一行 -->
    <Button
        android:layout_width="80dp"
        android:text="1"
        />
    <Button
        android:layout_width="80dp"
        android:text="2"
        />
    <Button
        android:layout_width="80dp"
        android:text="3"
        />
    <!-- 下一行 -->
    <Button
        android:layout_width="80dp"
        android:text="0"
        />
    <Button
        android:layout_width="80dp"
        android:text="."
        />
    <Button
        android:layout_width="80dp"
        android:text="="
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        />
</GridLayout>

(3)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity_constraintlayout"
    android:id="@+id/constraintLayout">
    
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="260dp"
        android:src="@drawable/picture01"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/img1"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:layout_marginLeft="25dp"
        android:text="懸崖:"
        android:textSize="25dp"
        app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
        app:layout_constraintTop_toBottomOf="@id/img1"
        android:id="@+id/texv1"/>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="清水斷崖"
        android:textSize="25dp"

        app:layout_constraintBottom_toBottomOf="@+id/texv1"
        app:layout_constraintLeft_toRightOf="@+id/texv1"
        app:layout_constraintTop_toTopOf="@+id/texv1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:layout_marginLeft="25dp"
        android:text="拍攝日期:"
        android:textSize="25sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/texv1" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:hint="12/05"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toBottomOf="@+id/textView"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="@+id/textView" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="394dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="200dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="下一張"
        app:layout_constraintStart_toEndOf="@+id/button4"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="上一張"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

</android.support.constraint.ConstraintLayout>

```

### Baseline 基準底線

![](/files/-Ld8UHr2iqKI5ZU5JCZV)

![](/files/-Ld8V-NwW-4zTyR8frqe)