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

安卓工作室-java簡易實作

委派機制

選擇、點選、拖曳…

系統事件

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

產生與使用者的互動

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

指定某元件監聽某事件

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

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

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

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

Layout屬於畫面

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

物件導向事件驅動的方式

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

用以處理委派函式

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

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

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

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

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

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

Callback mether

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

開始java功能-操控物件

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

通常一個layout對應一個java

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

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

初始化面 layout

按鈕控制模組

Callback mether事件處理控制

首先新增一個對應頁面

Java右鍵new java or copy or new activity

Copy

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

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

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

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

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

Android中為layout建立子資料夾 - 程式人生

想少寫物件位址就必須

using class packages (c#)

import class packages (java)

控制物件必須對應確切id

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

(button)為強制轉型

實做設定監控器

紅色定義了監聽器介面 interface

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

key下去會自動產生底下

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

Ide觸發的事件超多

Ex

紅色監聽者對應綠色介面

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

藍色部分

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

程式碼

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取值放入變數

操作變數屬性

Homework 1 – 6

座號： 08 姓名：劉育誠

階段性作業一

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

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

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

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

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

(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

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、預設、預設)

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

結果畫面截圖：

程式碼：

<?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 姓名：劉育誠

階段性作業二

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

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

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

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

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

一連串自訂定文字

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

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

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

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

 按鈕 "+" 需跨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"處新增參考線，並利用此二條參考線新

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

結果畫面截圖：

程式碼

<?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 基準底線