วันอาทิตย์ที่ 10 กุมภาพันธ์ พ.ศ. 2556

Android กับการเขียน Java Syntax

Android กับการเขียน Java Syntax บนโปรแกรม Eclipse ในการเขียนโปรแกรมบน Android
นั้นจะใช้ภาษา Java Platform ในการพัฒนาและเขียนคำสั่งให้โปรแกรมทำงาน รูปในการเขียนเป็น
OOP ทั้งหมด และ API Library ต่าง ๆ ที่อยู่ใน Android Framework ที่เราสามารถเรียกใช้งานได้
ก็ถูกพัฒนาด้วยภาษา Java เช่นเดียวกัน และจะมีให้เลือกเรียกใช้งานหลายตัวมาก
แบ่งแยกตามวัตถุประสงค์ต่าง ๆ
(เราสามารถพัฒนา Library ขึ้นมาใช้เองก็ได้ หรือจะดาวน์โหลด Library จากแหล่งต่าง ๆ ที่มีทั้งฟรีและเสียเงิน)
โดยจะมีการแยก Package หรือ API Class Library ต่าง ๆ ถูกแยกจัดเก็บไว้ในแต่ะล่ะหมวดหมู่
เพื่อความสะดวกและง่ายต่อการนำมาใช้ เช่น TextView จัดการเกี่ยวกับข้อความหรือ Text ,
Button จัดการเกี่ยวกับปุ่ม Button หรืออื่น ๆ ที่ถูกจัดแยกไว้ตาม Class ที่อยู่ภายใต้ Widgets Class
และถ้าจะใช้งานตัวไหนก็ค่อยทำการ Import เข้ามาใน Class ของเรา ในการขียน Android ถ้ามีพื้นฐานการเขียน
Javaหรือ .NET Framework มาแล้ว ก็จะสามารถเข้าใจได้เร็วขึ้น




ในโครงสร้างการเขียนโปรแกรม Android พื้นฐานทั่วไปจะเป็นการทำงานของ XML Layout ซึ่งจะผสานการทำงานร่วมกับ XML และJava โดย XML จะถูกออกแบบให้เป็นส่วนที่เป็น GUI และใช้ XML Syntax ในการวาง Layout ต่าง ๆ ของ Widgets หรือ Element ต่าง ๆ ส่วนในภาษา Java จะเป็นชุดคำสั่งที่ควบควบคุมการทำงานของโปรแกรม และ หน้าจอที่แสดงผลที่อยู่ในรูปแบบของ XML Layout

ตัวอย่างการ XML ซึ่งเป็น Layout ของ Widgets


1.<TextView
2.android:id="@+id/textView1"
3.android:layout_width="wrap_content"
4.android:layout_height="wrap_content"
5.android:layout_alignParentTop="true"
6.android:layout_centerHorizontal="true"
7.android:layout_marginTop="78dp"
8.android:text="TextView" />

ส่วนที่เป็น Java จะทำงานควบคุม XML Layout นี้

ตัวอย่างการ import Library ต่าง ๆ


1.import android.os.Bundle;
2.import android.app.Activity;
3.import android.view.Menu;
4.import android.view.View;
5.import android.widget.TextView;
6.import android.widget.Button;
7.import android.widget.Toast;

ตัวอย่างการ import ตัว API Library ต่าง ๆ เข้ามาใน Project กรณีที่มี Widgets หรือ Element หลายรายการ ก็จะต้อง รmport เข้ามาทั้งหมดด้วยเช่นเดียวกัน

ใน Framework ของ Android จะมีการแยก Library ของแต่ล่ะตัวอย่างชัดเช่น เช่นถ้าต้องการใช้ TextView ใน Project หรือ Code จะต้องทำการ import android.widget.TextView; เข้ามาใน Project ด้วย


01.import android.widget.TextView;
02.
03.public class MainActivity extends Activity {
04.
05.@Override
06.public void onCreate(Bundle savedInstanceState) {
07.super.onCreate(savedInstanceState);
08.setContentView(R.layout.activity_main);
09.
10.final TextView editT1 = (TextView)findViewById(R.id.editText1);
11.
12.
13.}
14.}

คำอธิบาย
จากตัวอย่างจะมีการเรียกใช้ TextView เฉพาะฉะนั้นจะต้องทำการ import android.widget.TextView; เข้ามาด้วยเช่นเดียวกัน



เบื้องต้นการเขียน Android บนโปรแกรม Eclipse

ทดสอบสร้างโปรแกรม Android Project ขึ้นมาบน Eclipse

สร้างโปรเจค Android Create New Project บนโปรแกรม Eclipse (Android Project)

http://www.thaicreate.com/mobile/android-eclipse-new-project.html

หน้าหลักของ Project



หน้าจอหลักที่ได้หลังจากการสร้างโปรเจค Android บน บน Eclipse (สามารถอ่านทำความเข้าใจได้จากลิ้งค์ที่ได้แนะนำไว้ในก่อนหน้านี้)



สิ่งที่เราจะต้องสนใจในขณะนี้มีอยู่เพียง 2 ไฟล์เท่านั้น คือ MainActivity.Java และ activity_main.xml ไฟล์นี้จะเป็น Activity ที่เป็นค่า Default ที่ Eclipse ได้สร้างมาให้

เมื่อ View ดู Code ก็จะเห็นดังนี้

activity_main.xml

01.<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
02.xmlns:tools="http://schemas.android.com/tools"
03.android:layout_width="match_parent"
04.android:layout_height="match_parent" >
05.
06.<TextView
07.android:id="@+id/textView2"
08.android:layout_width="wrap_content"
09.android:layout_height="wrap_content"
10.android:layout_centerHorizontal="true"
11.android:layout_centerVertical="true"
12.android:padding="@dimen/padding_medium"
13.android:text="@string/hello_world"
14.tools:context=".MainActivity" />
15.
16.</RelativeLayout>

คำอธิบายจะเห็นว่าในหน้า Graphical Layout จะมี Widget ที่ Textview อยู่ซึ่งเป็นค่า Default ที่ Elipcse ได้สร้างมาให้ โดยที่ค่า Text คำว่า "Hello world!" ถูกเรียกจาก


1.android:text="@string/hello_world"

ซึ่งเป็นค่าตัวแปร hello_word ถูกจัดเก็บไว้ใน strings.xml



/res/values/strings.xml

1.<resources>
2.<string name="app_name">MyApp</string>
3.<string name="hello_world">Hello world!</string>
4.<string name="menu_settings">Settings</string>
5.<string name="title_activity_main">My App V 1.0</string>
6.</resources>

หรือถ้าไม่ต้องการเรียกว่าค่าตัวแปรที่จัดเก็บอยู่ใน XML สามารถกำหนดค่าได้โดยตรงเช่น android:text="Hello world!"

เพิ่มเติม
ไฟล์ strings.xml เป๋นไฟล์ XML ที่จัดเก็บค่าตัวแปรต่าง ๆ ที่โปรแกรมใน Android สามารถเรียกใช้งานได้ในทันที เหตุผลที่บางตัวแปรจัดเก็บไว้ในนี้ เพราะเมื่อนำไปใช้งานจริงไฟล์ที่เป็น XML สามารถจัดการง่ายกว่า เมื่อตอนที่นำโปรแกรมไปใช้ ซึ่งอาจจะนิยมจัดเก็บค่า Config ต่าง ๆ ของโปรแกรม สำหรับการงานค่าตัวแปรของ XML ที่อยู่ใน /res/values/ สามารถอ่านได้ในบทความถัดไป

MainActivity.java

01.package com.myapp;
02.
03.import android.os.Bundle;
04.import android.app.Activity;
05.import android.view.Menu;
06.import android.view.MenuItem;
07.import android.support.v4.app.NavUtils;
08.
09.public class MainActivity extends Activity {
10.
11.@Override
12.public void onCreate(Bundle savedInstanceState) {
13.super.onCreate(savedInstanceState);
14.setContentView(R.layout.activity_main);
15.}
16.
17.@Override
18.public boolean onCreateOptionsMenu(Menu menu) {
19.getMenuInflater().inflate(R.menu.activity_main, menu);
20.return true;
21.}
22.
23.}

โดย Method ที่เป็นค่า Default จะมีอยู่ 2 ตัวคือ onCreate() และ onCreateOptionsMenu()


- onCreate() เป็น Method ที่ Android จะโหลดขึ้นมาและทำงานครั้งแรกสุด ซึ่งจะเห็นว่า setContentView(R.layout.activity_main) คือมีการโหลด Layout จาก activity_main มาแสดง
- onCreateOptionsMenu() เป็น Method ที่ทำหน้าที่โหลด Menu ขึ้นมาแสดง

คำอธิบาย


1.public void onCreate(Bundle savedInstanceState) {
2.super.onCreate(savedInstanceState); // Bundle savedInstanceState เป็น Object ของ import android.os.Bundle; ทำหน้าที่จัดการ Resource และสถานะของโปรแกรม
3.setContentView(R.layout.activity_main); // โหลด Layout ของ activity_main.xml มาแสดง
4.}


1.public boolean onCreateOptionsMenu(Menu menu) {
2.getMenuInflater().inflate(R.menu.activity_main, menu); // กรณีที่ใน activity_main.xml มี XML ที่เกี่ยวกับ Menu ก็จะโหลดเมนูเหล่านั้นไปแสดงด้วย
3.return true;
4.}

การสร้างตัวแปรเพื่ออ้างถึง Widget ที่อยู่บน XML Layout ด้วย Java

ต่อไปจะเป็นการสร้าง Widget หรือ Element ลงใน Android XML Activity Layout Form และการอ้างถึงและเรียกใช้งาน Widgets เหล่านั้น



ลาก TextView มาลง Android XML Activity Layout Form


1.<TextView
2.android:id="@+id/textView1"
3.android:layout_width="wrap_content"
4.android:layout_height="wrap_content"
5.android:layout_alignParentTop="true"
6.android:layout_centerHorizontal="true"
7.android:layout_marginTop="78dp"
8.android:text="TextView" />



เมื่อดูในมุมมองของ XML ก็จะเห็น XML Tag ของ TextView ที่เราได้สร้างซึ่งชื่อว่า textView1

การเขียน Code บน Java


1.TextView txtView;
2.txtView = (TextView)findViewById(R.id.textView1);



คำอธิบาย
ในตัวอย่างประประกาษตัวแปรชื่อว่า txtView มี Type เป็น TextView และทำการ อ้างถึง Widgets ที่ชื่อว่า (R.id.textView1)



จากตัวอย่างจะเห็นว่ายังมี Error อยู่ ซึ่งในโปรแกรม Eclipse จะแจ้ง Error ให้ทราบ และแนะนำวิธีการแก้ไขปัญหาเบื้องต้น



รายการ Error ทั้งหมดจะแสดงใน Problems



โดย Error นี้เกิดจากเราเรียกใช้ Widgets ของ TextView แต่ยังไม่มีการ import Library ของ TextView เข้ามา



หรือวิธีที่ง่ายที่สุดคือการคลิกที่คำแนะนำของโปรแกรม ซึ่งจะมีการ import ให้อัตโนมัติ



ทำการ import เข้ามาเรียบร้อยแล้ว ซึ่ง Error ดังกล่าวจะหายไป หรือถ้ายังไม่หายให้ลองทำการ Clean Project โดยไปที่



เมนู Project -> Clearn



เลือก Project แล้วก็ OK



เมื่อกลับมาที่ Code ของ Java Error ดังกว่างก็จะหายไป

เพิ่มเติม
ใกนารเขียนโปรแกรมบน Eclipse การแก้ไข Code บางอย่างอาจจะยังไม่ Effect ในทันที วิธีแก้ไขคือให้เราทำการ Clean Project ทุกครั้งที่ต้องการดูผลการเปลี่ยนแปลง

เพิ่มเติมอีกนิด
ในส่วนของ Code ที่เป็น Java บางครั้งจะมีแถบสีแจ้งสถานะของ Code เช่น

- แดง หมายถึง Error จะต้องแก้ไขไม่ฉะนั้นจะรันไม่ได้
- เหลืองล้ม หมายถึง Warning สามารถรันต่อไปได้ แต่ควรแก้ไขให้ถูกต้อง

หลังจากทำการอ้างถึง Widgets หรือ Element ที่อยู่ใน XML Layout ได้แล้ว สามารถเรียกใช้โดยการกำหนดค่า หรือสร้าง Event ต่าง ๆ ได้ ขึ้นอยู่ว่า Widgets ตัวนั้นมีหน้าที่และคุณสมบัติอะไรบ้าง โดยในตัวอย่างจะให้ TextView แสดงข้อความว่า "Welcome to www.ThaiCreate.Com" และข้อความมีสีแสดง


1.TextView txtView;
2.txtView = (TextView)findViewById(R.id.textView1);
3.txtView.setText("Welcome to www.ThaiCreate.Com");
4.txtView.setTextColor(Color.RED);



ในการเรียกใช้ setTextColor จะต้องทำการ import android.graphics.Color; เข้ามาด้วย

ทดสอบรันบน Emulator

ได้ผลดังรูป



ตัวอย่างการสร้าง Event ให้กับ Widgets หรือ Element

ใรตัวอย่างเราจะเห็นว่ามี TextView ชื่อว่า textView2 ซึ่งแสดงข้อความคำว่า "Hello world!" เราจะมาสร้างเงื่อนไขเมื่อมีการคลิกที่ textView1 และให้ textView2 แสดงคำว่า "Hello www.ThaiCreate.Com" และมี Dialog Box คำว่า "Hello www.ThaiCreate.Com" เช่นเดียวกัน




01.<TextView
02.android:id="@+id/textView2"
03.android:layout_width="wrap_content"
04.android:layout_height="wrap_content"
05.android:layout_below="@+id/textView1"
06.android:layout_centerHorizontal="true"
07.android:layout_marginTop="93dp"
08.android:padding="@dimen/padding_medium"
09.android:text="@string/hello_world"
10.tools:context=".MainActivity" />

Code ที่เป็น Java เขียนดังนี้


01.package com.myapp;
02.
03.import android.os.Bundle;
04.import android.app.Activity;
05.import android.view.Menu;
06.import android.view.MenuItem;
07.import android.support.v4.app.NavUtils;
08.import android.widget.TextView;
09.import android.graphics.Color;
10.import android.view.View;
11.import android.app.AlertDialog;
12.
13.public class MainActivity extends Activity {
14.
15.@Override
16.public void onCreate(Bundle savedInstanceState) {
17.super.onCreate(savedInstanceState);
18.setContentView(R.layout.activity_main);
19.
20.// Dialog
21.final AlertDialog.Builder adb = new AlertDialog.Builder(this);
22.
23.// textView1
24.TextView txtView;
25.txtView = (TextView)findViewById(R.id.textView1);
26.txtView.setText("Welcome to www.ThaiCreate.Com");
27.txtView.setTextColor(Color.RED);
28.txtView.setOnClickListener(new View.OnClickListener() {
29.public void onClick(View v) {
30.// Perform action on click
31.
32.// textView2
33.TextView txtView2;
34.txtView2 = (TextView)findViewById(R.id.textView2);
35.txtView2.setText("Hello www.ThaiCreate.Com");
36.
37.// Show Dialog
38.AlertDialog ad = adb.create();
39.ad.setMessage("Hello www.ThaiCreate.Com");
40.ad.show();
41.}
42.});
43.}
44.
45.@Override
46.public boolean onCreateOptionsMenu(Menu menu) {
47.getMenuInflater().inflate(R.menu.activity_main, menu);
48.return true;
49.}
50.
51.}

Screenshot



เมื่อคลิกที่ Welcome to www.ThaiCreate.Com ที่เป็นก็จะแสดงข้อความ "Hello www.ThaiCreate.Com" ใน textView2 และ Dialog Box


การสร้าง Widgets หรือ Element ภายใต้ Dynamic Runtime
จากตัวอย่างก่อนหน้านี้ เราได้ทำการเรียกใช้ Widges อยู่ที่อยู่ XMl Layout แล้ว เราจะลองมาดูการสร้าง Widgets ภายใต้ Runtime หรือสร้างโดย Code ที่เป็น Java


activity_main.xml

1.<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.xmlns:tools="http://schemas.android.com/tools"
3.android:layout_width="match_parent"
4.android:layout_height="match_parent" >
5.
6.</RelativeLayout>

MainActivity.java

01.package com.myapp;
02.
03.import android.os.Bundle;
04.import android.app.Activity;
05.import android.view.Menu;
06.import android.view.MenuItem;
07.import android.support.v4.app.NavUtils;
08.import android.widget.TextView;
09.import android.graphics.Color;
10.import android.view.View;
11.import android.app.AlertDialog;
12.
13.public class MainActivity extends Activity {
14.
15.@Override
16.public void onCreate(Bundle savedInstanceState) {
17.super.onCreate(savedInstanceState);
18.//setContentView(R.layout.activity_main);
19.
20.// Create txtView1
21.TextView txtView1 = new TextView(this);
22.txtView1.setText("Welcome to www.ThaiCreate.Com");
23.txtView1.setTextColor(Color.RED);
24.setContentView(txtView1);
25.
26.final AlertDialog.Builder adb = new AlertDialog.Builder(this);
27.
28.txtView1.setOnClickListener(new View.OnClickListener() {
29.public void onClick(View v) {
30.// Perform action on click
31.
32.// Show Dialog
33.AlertDialog ad = adb.create();
34.ad.setMessage("Hello www.ThaiCreate.Com");
35.ad.show();
36.}
37.});
38.
39.}
40.
41.@Override
42.public boolean onCreateOptionsMenu(Menu menu) {
43.getMenuInflater().inflate(R.menu.activity_main, menu);
44.return true;
45.}
46.
47.}

Screenshot

ไม่มีความคิดเห็น:

แสดงความคิดเห็น