# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201904/2014-0410.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.