Introduction to database system Intro to android.pdfDatePicker DigitalClock EditText ExpandableListView GridView ImageButton ListView MapView MultiAutoCompleteTextView RadioButton

www . i t s c i .m ju . ac . t h / sayan

INTRODUCTION TO ANDROID DEVELOPMENT SAYAN UNANKARD

2

ส่วนประกอบของ ANDROID

• AndroidManifest.xml

• Views

• Activities

• Broadcast Receiver

• Services

• Content Providers

• Intents

2

VIEW

เป็นวัตถุที่วาดลงบนหน้าจอ• xml

• โปรแกรม

สามารถสร้างขึ้นเพื่อใช้งานได้ เช่น

• Games

• New widgets

3

ACTIVITY

Activities จัดเตรียม user interface ส าหรับงานใดงานหนึ่ง และ คอมโพแนนซ์ที่เป็นพื้นฐานของทุก ๆ แอพพลิเคชัน

เป็นพื้นที่ในการเขียนชุดค าสั่ง โดยแต่ละ Activity ถูก implemented โดยเป็น subclass ของคลาส Activity

มีหน้าที่ในการประมวลผลค าสั่งตามความต้องการของผู้ใช้

มีช่วงชีวิตการท างาน• Paused, Killed, etc.

4

BROADCAST RECEIVER

Broadcast receivers ท าหน้าที่คล้ายกับกล่องจดหมายส าหรับรับข้อความจากแอพพลิเคชันอื่น ๆ โดยสามารถรับและตอบสนองกับ Event ต่าง ๆ

ถ้า app ลงทะเบียนตัว receiver แล้ว ตัว event จะสามารถแจ้งเตือน และเรียกตัวซอฟต์แวร์น้ัน ๆ ได้

เช่น Low battery, power connected, shutdown, time zone changed, etc.

5

SERVICE

เป็นโค้ดที่รันเบื้องหลังการท างานอ่ืน ๆ

มีช่วงระยะเวลาการท างานนาน ๆ

ไม่มี UI

มีความปลอดภัยถ้าใช้ permissions

ตัวอย่างการท างานเช่น

• Play music, alarm clock, etc.

6

CONTENT PROVIDER

Content providers เป็นแหล่งเก็บข้อมูลซึ่งใช้ส าหรับการแลกเปลี่ยนข้อมูลระหว่างแอพพลิเคชัน

โอนถ่ายข้อมูลระหว่างแอพพลิเคชันต่าง ๆ ใน Android

แอพพลิเคชันอื่น ๆ ใช้ ContentResolver object ในการเข้าถึงข้อมูลที่มีการจัดเตรียมไว้ให้โดย ContentProvider

รูปแบบของข้อมูลเช่น• File System

• SQL Lite

7

INTENT

เป็นการส่งข้อมูลระหว่าง• Activity

• Service

• Broadcast Receiver

• Content Provider

การส่งเป็นแบบ Asynchronous ที่สามารถส่งข้อมูลพร้อมกับการประมวลผลส่วนอื่น ๆ

ภายใน intent เก็บ• Action

• Data

• ในการส่งข้อมูลใช้ค าสั่ง startActivity()8

APPLICATION และ ACTIVITY

Activity แต่ละตัวมีช่วงชีวิตการท างานของตัวเอง

หน้าจอต้องประมวลผลค าสั่งผ่าน Activity

แอพพลิเคชันมีได้หลาย Activity

แอพพลิเคชันจะประมวลผลใน Linux process ของตัวเอง

Application

View (GUI Element)

View (GUI Element)

View (GUI Element)

ACTIVITYSCREEN

ACTIVITYSCREEN

9

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.android.hello"

android:versionCode="1"

android:versionName="1.0.0">

<application android:icon="@drawable/icon"android:label="@string/app_name">

<activity android:name=".HelloAndroid" android:label="@string/app_name">

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

</manifest>

ANDROIDMANIFEST.XML

เป็นส่วนรวบรวมข้อมูลที่ใช้ในการรันโปรแกรม

Indicate the first target

10

ACTIVITY LIFE CYCLE

Starting เป็นสถานะเริ่มต้นการท างานRunning เป็นสถานะท างานบนหน้าจอPaused• ย้ายไปประมวลผลเบื้องหลัง• หากมีการใช้หน่วยความจ ามาก ๆ

อาจจะเก็บข้อมูลที่ก าลังท างานไว้ในหน่วยความจ าแล้วสิ้นสุดการท างานโดยอัตโนมัติ

Stopped• หยุดท างาน (แต่ยังอยู่ใน

หน่วยความจ า)Destroy ลบออกจากหน่วยความจ า

11

เมธอดส ำหรับเขียนค ำสั่งควบคุมช่วงเวลำกำรท ำงำนของ ACTIVITY

• onCreate() ถูกเรียกใช้เมื่อเริ่มต้นการ

ท างาน เพื่อเรียกออปเจคที่สร้างไว้ จากนั้น

เรียกใช้เมธอด onStart()

• onStart() ก าหนดให้ Activity แสดงผลและ

เปลี่ยนสถานะเป็น onResume()

• onResume() ถูกเรียกใช้เมื่อพร้อมติดต่อกับ

ผู้ใช้งาน หรือเมื่อ Acitivity จาก paused

มาท างานใหม่อีกรอบหนึ่ง

12

เมธอดส ำหรับเขียนค ำสั่งควบคุมช่วงเวลำกำรท ำงำนของ ACTIVITY

• onPause() เมื่อก าหนดให้ Actitivityเปลี่ยนกลับไปท างานเบื้องหลัง

• onRestart() ก าหนดให้ Actitivityกลับมาท างานอึกครั้งหนึ่ง

• onStop() หยุดการท างานที่อาจกลับมาใช้งานใหม่ หรือส้ินสุดการท างาน

• onDestroy() ปิดการท างานของ Activity

13

ACTIVITY

public class SimpleActivity extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Toast.makeText(this, "Create", Toast.LENGTH_SHORT).show();

}

protected void onStart() {

super.onStart();

Toast.makeText(this, "Start", Toast.LENGTH_SHORT).show();

}

14

ACTIVITY

protected void onResume() {

super.onResume();

Toast.makeText(this, "Resume", Toast.LENGTH_SHORT).show();

}

protected void onRestart() {

super.onRestart();

Toast.makeText(this, "Restart", Toast.LENGTH_SHORT).show();

}

protected void onPause() {

super.onPause();

Toast.makeText(this, "Pause", Toast.LENGTH_SHORT).show();

}

15

ACTIVITY

protected void onStop() {

super.onStop();

Toast.makeText(this, "Stop", Toast.LENGTH_SHORT).show();

}

protected void onDestroy() {

super.onDestroy();

Toast.makeText(this, "Destroy", Toast.LENGTH_SHORT).show();

// Toast.makeText(getApplicationContext() , "onDestroy",

//Toast.LENGTH_SHORT).show();

}

}

16

APP WHEN FIRST START

17

WHEN CLICK UNDO

18

VIEW

AutoCompleteTextView

Button

CheckBox

CheckedTextView

DatePicker

DigitalClock

EditText

ExpandableListView

GridView

ImageButton

ListView

MapView

MultiAutoCompleteTextView

RadioButton

RatingBar

ScrollView

Spinner

TabHost

TableRow

TimePicker

ToggleButton

TwoLineListItem

VideoView

19

VIEW

การสร้าง layout ด้วย Java-based

การสร้าง layout ด้วย XML-based

การสร้าง layout ด้วย Android visual layout editor

การสร้าง layout แบบ Hybrid layout

20

JAVA-BASED APPROACH: TEMPLATE

การค าสั่งพื้นฐานที่ปรากฏในหน้าจอที่สร้างขึ้นประกอบด้วย Layout โดยในส่วนของ เป็นเสมือนฉากหลังในการวัตถุอื่นๆ

TableRow

Implements <View, ViewParent>

ViewGroup

FrameLayout

LinearLayout

RadioGroup TableLayout

21


ViewView() ใช้สร้าง Object ViewfindViewById() ใช้ค้นหา View ที่อยู่ภายใน Object View นี้ ที่มี id ตามที่

ก าหนด

ViewGroupaddView ( child ) ใช้เพิ่ม Object View เข้าไปใน Object LayoutaddView ( child, index ) ใช้เพิ่ม Object View เข้าไปใน Object Table ณ ต าแหน่งที่

ก าหนดremoveView(start,count) ลบ Object View ออกจาก Object Layout ณ ต าแหน่งที่

ก าหนด และจ านวน Object View ที่ต้องการลบ

22


คลาส View คือวัตถุที่วางใน Layout

Object

View

TextView

Button EditText

CheckBox RadioButton

CompoundButton

23


Button / TextView

Button() ใช้สร้าง Object Button

TextView() ใช้สร้าง Object TextView

setText ( text ) ใช้ก าหนดข้อความ ให้กับ Object TextView

setText ( text, start, len ) ใช้ก าหนดข้อความ ให้กับ Object TextView

getText() น าข้อความออกจาก Object TextView

24




String message = "...";

LinearLayout window = new LinearLayout(this);

Button b = new Button(this);

b.setText("Button Label");

b.setOnClickListener(new SomeHandler());

TextView t = new TextView(this);

t.setText("Text Label");

window.addView(b);

window.addView(t);

setContentView(window);

}

25

XML-BASED APPROACH: TEMPLATE

Java



setContentView(R.layout.activity_main);

}

public void handlerMethod(View clickedButton) { }

xml

res/values/strings.xml res/layout/activity_main.xml


<resources>

<string name="some_name">…</string>

…

</resources>


<LinearLayout …>

<TextView android:text="@string/some_name" />

<Button … android:onClick="handlerMethod" />

</LinearLayout>

26



<LinearLayout xmlns:android="http://schemas.android .com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:paddingLeft="5dp"

android:paddingRight="5dp"

android:paddingTop="5dp">

</LinearLayout>

margin เป็นการก าหนดระยะห่างระหวา่งวตัถุ

padding จดัระยะห่างระหวา่งขอบของวตัถุ และเน้ือหา

27


px -> ค่าพิกเซลจริงของจอภาพ

dip/dp -> ค่าพิกเซลอ้างอิงตามขนาดจอ 160 dpi

sp -> ค่าพิกเซลอ้างอิงตามของ font ที่ผู้ใช้เลือกไว้

pt -> ค่าความยาว 1/72 ตามขนาดของหน้าจอจริง

in -> ค่าความยาวเป็นนิ้วตามขนาดของหน้าจอจริง

mm ->ค่าความยาวเป็นมิลลิเมตรตามขนาดของหน้าจอจริง

28


wrap_content เป็นการก าหนดขนาดให้พอดีกับขนาดของวัตถุ

fill_parent เป็นการก าหนดขนาดให้พอดีกับขนาดของหน้าจอ ไม่ว่าจะเป็นแอนดรอยด์ที่มีขนาดหน้าจอต่างกัน

match_parent เหมือนกับ fill_parent ซึ่งก็คือ fill_parent แหละ แต่ได้เปลี่ยนมาใช้เป็น match_parent ใน API 8 ดังนั้นใน API ต่ ากว่า 8 จะใช้ match_parent ไม่ได้

29

HYBRID APPROACH: TEMPLATE




Button b = (Button)findViewById(R.id.button_id);

b.setOnClickListener(new SomeHandler());

}

private class SomeHandler implements OnClickListener {

public void onClick(View clickedButton) {

doSomething(...);

}

}

xml

สร้างหน้าจอก าหนดค่า id

<button

android:layout_width="wrap_content"

android:layout_height="wrap_content“

android:id="@+id/button_id" />

30

LISTENERS

การติดต่อกับผู้ใช้แบ่งการท างานออกเป็น 2 ส่วน• ส่วนการสร้าง Layout

• ส่วนของเหตุการณ์ (Event) เช่นการกดปุ่มบนหน้าจอ การสัมผัสต าแหน่งบนหน้าจอ

เมื่อมีเหตุการณ์เกิดขึ้นต้องสร้างเมธอดเพื่อรองรับการท างาน

• เมื่อกดปุ่ม Back เรียกใช้เมธอด onBackPressed()

• เมื่อกดปุ่มทั่วไปเรียกใช้เมธอด onClick()

การท างานของ View ต่าง ๆ จะท างานร่วมกับ Event Listener เพื่อใช้ตรวจสอบการท างานของผู้ใช้หากตรงกับ Event ที่ระบุไว้จะเริ่มท างาน• เช่น setOnclickListenner หากเกิดการกดปุ่มจะเรียกใช้เมธอด onClick

31

LISTENERS

GestureDetector.OnGestureListener -Notify when gestures occur (การวาดรูปบนจอภาพ)

MenuItem.OnMenuItemClickListener - a menu item is clicked.

View.OnClickListener - a view is clicked.

View.OnCreateContextMenuListener -the context menu for this view is being built.

View.OnFocusChangeListener - the focus state of a view changed.

View.OnKeyListener - a key event is dispatched to this view.

View.OnLongClickListener - a view has been clicked and held.

View.OnTouchListener - a touch event is dispatched to this view.

ViewGroup.OnHierarchyChangeListener - the hierarchy within this view changed.

ViewStub.OnInflateListener - ViewStub has successfully inflated its layout resource.

ViewTreeObserver.OnGlobalFocusChangeListener - the focus state within the view tree changes.

32

LISTENERS

ViewTreeObserver.OnGlobalLayoutListener- the global layout state or the visibility of views within

the view tree changes.

ViewTreeObserver.OnPreDrawListener - the view tree is about to be drawn.

ViewTreeObserver.OnTouchModeChangeListener - the touch mode changes.

33

ONCLICK LISTENERS

34

ONCLICK LISTENERS

เพิ่มปุ่ม และ TextField ลงใน Layout

ก าหนด id

สร้าง Listener เพื่อตรวจสอบการคลิก

clickButton.setOnClickListener(new View.OnClickListener() {

});

ก าหนดการท างานลงในฟังก์ชัน onClick()public void onClick(View arg0) {}

<EditText android:id="@+id/editText“ />

<Button android:id="@+id/buttonclick"/>

35

CLICK LISTENER EXAMPLE

public class SimpleStringActivity extends Activity {

private EditText textMessage;

private Button clickButton;

@Override




textMessage =(EditText) findViewById(R.id.editText);

clickButton = (Button)findViewById(R.id.buttonclick);

clickButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) { textMessage.setText("On click"); }

});

}

}

36

CLICK LISTENER EXAMPLE

37

RADIOGROUP / RADIOBUTTON

ค าสั่ง getCheckedRadioButtonId()

38

XML

<RadioGroup android:id="@+id/radioGroup1"

android:layout_width="wrap_content" android:layout_height="wrap_content">

<RadioButton android:layout_width="wrap_content"

android:text="RadioButton" android:layout_height="wrap_content"

android:id="@+id/radio1"></RadioButton>

<RadioButton android:layout_width="wrap_content"

android:text="RadioButton" android:layout_height="wrap_content"

android:id="@+id/radio2"></RadioButton>

</RadioGroup>

<Button android:text="Button" android:id="@+id/button1"

android:layout_width="wrap_content“android:layout_height="wrap_content">

</Button>

39

ACTIVITY




btn1= (Button)findViewById(R.id.button1);

rg = (RadioGroup)findViewById(R.id.radioGroup1);

rd1 = (RadioButton)findViewById(R.id.radio1);

rd2 = (RadioButton)findViewById(R.id.radio2);

btn1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

if (view.getId() == btn1.getId()) {

if(rg.getCheckedRadioButtonId() == rd1.getId()){

Toast.makeText(SampleViewActivity.this, "radio1",

Toast.LENGTH_SHORT).show(); }

}

}

} }40

CHECKBOX

41

XML


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

<CheckBox android:text="CheckBox1" android:id="@+id/checkBox1"


android:layout_height="wrap_content"></CheckBox>







</LinearLayout>

42

ACTIVITY

protected void onCreate(Bundle savedInstanceState) {



chk1 = (CheckBox)findViewById(R.id.checkBox1);



chk1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

if (chk1.isChecked()) {

Toast.makeText(SampleMultiActivity.this, "check 1",

Toast.LENGTH_SHORT).show();

}

}

}

} 43

Documents

Introduction to database system Intro to android.pdfDatePicker DigitalClock EditText ExpandableListView GridView ImageButton ListView MapView MultiAutoCompleteTextView RadioButton