ลอง ๆ Button และ TextBox ใน android

วันนี้ผมนั่งครึ้ม ๆ กับตัวเอง เฮ้ย ไอ้ Hello world ก็ลองทำไปแล้ว แต่ผมอยากเล่นกับ interface ของ android บ้าง เอาลองหาใน google ดู เผื่อมันจะมี tutorial ดี ๆ มานั่งลองทำและเข้าใจ เจอที่นี่เลยครับ

http://androidcore.com/android-programming-tutorials/83-google-android-tutorial.html

ทดลองทำตามตั้งแต่ตัวอย่างแรก

Demo 1 TextBox  ในตัวอย่างนี้สิ่งที่ควรทดลองคือ สร้าง interface ของมัน โดยใช้ XML ลองนั่งทำความเข้าใจสักหน่อย ว่า มันจะมีตัว Layout และ component ที่ต้องใช้  Layout จะเป็นตัวที่ใช้ในการจัดหน้าจอ ในส่วนนี้จะเป็นส่วนของ View  ใครมีพื้นฐานในการเขียน HTML อยู่บ้างคงจะอ่านได้ไม่ยากเย็นอะไร ใน eclipse มีตัวช่วยในการสร้างบางส่วนแล้วคงจะไม่ยากมากมาย เมื่อสร้าง project android ตัว project จะสร้าง main.xml ให้อัตโนมัติ ดังในตัวอย่าง

[sourcecode lang=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
[/sourcecode]

จากนั้นเราจะเพิ่มเติมส่วนที่เป็น component อื่น ๆ เข้าไป ประกอบไปด้วย EditText, Button ดังโครง xml ด้านล่าง

[sourcecode lang=”xml”]
<LinearLayout>
<EditText></EditText>
<Button></Button>
<Button></Button>
</LinearLayout>
[/sourcecode]

มาดูความหมายของ xml ที่ว่ากันคร่าว ๆ สักหน่อย

LinearLayout คือ Layout ที่มีลักษณะเรียงต่อกันไป (ผมว่าในตอนเริ่มต้นน่าจะโอเคสำหรับ Layout นี้ ไม่ต้องคิดอะไรมากมาย ใช้มันไปก่อนเลย มันก็เรียง ๆ ลงมาเรื่อย ๆ)

EditText เป็นช่องที่สามารถใส่ตัวอักษรและตัวเลขได้

Button เป็นปุ่ม ครับ

ในทุก ๆ อันจะมี attribute หรือชื่อข้อมูลที่คล้าย ๆ กัน เช่น

  • id ซึ่งมีหลักในการเขียน android:id=”@+id/ชื่อ” ดังนั้นเราสามารถเปลี่ยนแปลงชื่อได้เลยครับ มีผลต่อการอ้างอิงในการเขียนโปรแกรมด้วยครับ
  • text เป็นข้อความที่เกี่ยวข้องกับ component นั้น android:text=”สวัสดี”

มาดูตัวเต็ม ๆ ให้งง ๆ เล่นดีกว่าครับตามด้านล่างนี้เลย

[xml]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText android:id="@+id/EdtAnswer"
android:text="อยากรู้ก็ต้องกด"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_x="0dip"
android:layout_y="6dip">
</EditText>
<Button android:layout_height="wrap_content"
android:text="สวัสดี"
android:id="@+id/BtnHello"
android:layout_x="44dip"
android:layout_y="76dip"
android:layout_width="match_parent">
</Button>
<Button android:layout_height="wrap_content"
android:text="ขอโทษ"
android:id="@+id/BtnSorry"
android:layout_x="161dip"
android:layout_y="76dip"
android:layout_width="match_parent">
</Button>
</LinearLayout>
[/xml]

เมื่อเสร็จแล้วเราจะเริ่มส่วนที่เป็น Activity ในการเขียน android Activity ก็เปรียบเสมือนส่วนที่เป็น controller ที่ช่วยในการควบคุมโปรแกรมในสามารถดำเนินไปโดยในตัวอย่างนี้เราจะเอา controller ติดต่อและจัดการ view ที่ได้สร้างขึ้นมาข้างต้น

ก่อนอื่น ถ้าท่านใดยังไม่เข้าใจ java ลอง ๆ ไปเปิดตำราสักหน่อยนะครับ แต่ถ้ายังอยากนั่งอ่านต่อก็ลุยต่อเลยนะครับ

ใน project android จะสร้าง activity ในเรา 1 class เหมือนกันตามที่กำหนดมาตอนสร้างโปรเจคดังตัวอย่าง

[java]
public class EditTextActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
[/java]

ในส่วนของโปรแกรมจะเป็นส่วนที่ทำหน้าที่เป็น activity หลักของโปรแกรม โดยเมื่อมันเกิด activity ขึ้น โปรแกรมจะเรียก method onCreate เสียก่อนเป็นการสร้าง object หรือเตรียม ให้พร้อม ถ้าหากมีส่วนใดที่ต้องติดต่อกับ view ต้องเชื่อมกันในตำแหน่ง onCreate

ในโปรแกรมของเราจะมีส่วนที่ต้องติดต่อกับ Button 2 ปุ่ม และ EditText 1 ช่อง การที่จะเชื่อมต่อกับ view ใน XML ได้นั้นจะติดต่อผ่าน id โดยใช้ method findViewById ถ้าเราสังเกตดี ๆ ภายใน project จะมี directory  gen ในนี้จะมี class R โดยใน class R จะประกอบไปด้วย id ที่เกิดขึ้นจากการเชื่อมกับ XML ที่ได้เขียนเป็น view ไว้ข้างต้น

ตัวอย่างเช่น ถ้าต้องการติดต่อกับ ปุ่มจะทำยังไง ติดต่อกับ ช่องข้อความจะทำยังไง ???

ก่อนอื่นมองว่ามันเป็น Object ก่อนนะครับ แล้วเราก็เรียก Object โดยใช้ findViewById ตัวอย่างเช่น

[java]
Button btnHello = findViewById(R.id.BtnHello)
[/java]

จาก xml <Button> จะเห็นได้ว่า R.id.BtnHello จะมีการเรียกโดยใช้จาก id

[xml]
<Button android:layout_height="wrap_content"
android:text="สวัสดี"
android:id="@+id/BtnHello"
android:layout_x="44dip"
android:layout_y="76dip"
android:layout_width="match_parent">
</Button>
[/xml]

จากนั้นก็ link ทุกตัวเข้าด้วยกันได้ดังตัวอย่าง

[java]
public class ClickButton extends Activity {
Button btnHello;
Button btnSorry;
EditText edtAnswer;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
btnHello = (Button) findViewById(R.id.BtnHello);
btnSorry = (Button) findViewById(R.id.BtnSorry);
edtAnswer = (EditText) findViewById(R.id.EdtAnswer);

[/java]

หลังจากนี้ถ้าจะทำอะไรเราจะเล่นกับ btnHello,btnSorry และ edtAnswer แทนครับ ตัวอย่างเช่น ถ้าต้องการดัก click event ก็ดักโดยดังต่อไปนี้

[java]
btnHello.setOnClickListener(new Button.OnClickListener() {

@Override
public void onClick(View v) {
edtAnswer.setText("สวัสดีเช่นกันจ๊ะ");
}
});
[/java]

การกำหนดให้ object ดัก event หลักการง่าย ๆ คือ object.setOn…… แล้วก็สร้าง object เพื่อมาดัก event ในตัวอย่างข้างต้นเป็นการใช้ anonymous class ใน java คือ สร้าง class สด ๆ และสร้าง object เลย โดยเราจะต้องสืบทอด Button.OnClickListener และต้อง implements onClick method โดยที่ในตัวอย่าง เมื่อ click ปุ่มนี้แล้ว เราจะกำหนดให้ค่าข้อความใน edtAnswer เปลี่ยนแปลงเป็น “สวัสดีเช่นกันจ๊ะ”

จากนั้นก็ทำในปุ่ม btnSorry ด้วยครับ ทั้งหมดใน activity ก็ได้ดังนี้

[java]

public class ClickButton extends Activity {
/** Called when the activity is first created. */
Button btnHello;
Button btnSorry;
EditText edtAnswer;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
btnHello = (Button) findViewById(R.id.BtnHello);
btnSorry = (Button) findViewById(R.id.BtnSorry);
edtAnswer = (EditText) findViewById(R.id.EdtAnswer);
btnHello.setOnClickListener(new Button.OnClickListener() {

@Override
public void onClick(View v) {
edtAnswer.setText("สวัสดีเช่นกันจ๊ะ");
}
});
btnSorry.setOnClickListener(new Button.OnClickListener() {

@Override
public void onClick(View v) {
edtAnswer.setText("ไม่เป็นไรครับคราวหน้าวางแผนมานะ");

}
});
btnHello.setOnLongClickListener(new Button.OnLongClickListener(){

@Override
public boolean onLongClick(View v) {
edtAnswer.setText("กดนานจริง แต่ก็สวัสดีจ๊ะโอ้ว");
return true; // การ return false จะทำให้ ไม่เข้า event ของ onclick อีก
}
});
btnSorry.setOnLongClickListener(new Button.OnLongClickListener(){

@Override
public boolean onLongClick(View v) {
edtAnswer.setText("กดนานจริง วางแผนก็ให้มันนานเหมือนกดด้วยสิ");
return true;
}
});

}
}
[/java]

ยังไงก็ลอง ๆ ทำกันดูนะครับ ผมว่าไม่ยากเกินกว่าจะทำได้ครับ ไว้ยังไงใครทำแล้วไม่ได้มานั่งคุยกันครับ 🙂