ตอนที่ 4 Button & TextView

       ในตอนที่ 4 นี้ เราจะมาเรียนรู้การใช้ From Widgets ที่เป็น TextView และ Button กันนะครับ  TextView เป็น Widget ใช้สำหรับจัดการข้อความต่าง ๆ ทำงานเหมือนกับ Label  สำหรับ Button นั้น  เป็น Widget ที่ใช้สำหรับการสร้างปุ่มเพื่อใช้สำหรับกำหนดเหตุการณ์ต่าง ๆ เช่น ปุ่ม Submit  ปุ่มตัวเลขต่างๆ เป็นต้น

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

1. สร้างโปรเจคใหม่ขึ้นมา ไปที่เมนู File > New > Android Application Project

2. กรอกรายละเอียดให้ครบ ซึ่งในบทความนี้ผู้เขียนใช้ดังนี้

  • Application Name : TextviewButton
  • Project Name : TextviewButton
  • Package Name : com.kruchian.textviewbutton
  • Activity Name : MainActivity
  • Layout Name : activity_main
  • Navigation Type : None

 

3. ลบข้อความ Hello world! ออก

part4_3

 

4. เลือก From Widgets คลิกลาก TextView และ Button มาวางที่หน้า Layout ตามรูป

part4_4

 

5. ไปที่ Package Explorer เลือก res > values > เปิด  strings.xml > เลือกมุมมองที่เป็น ซอร์สโค๊ด โดยคลิกที่แถบ strings.xml ตามรูปด้าล่าง

part4_8

 

6. เพิ่ม strings ตามนี้ครับ

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

    <string name="app_name">TextviewButton</string>
    <string name="action_settings">Settings</string>
    <string name="title_label">เปลี่ยนข้อความด้วยการคลิกปุ่ม</string>
    <string name="text_show">สวัสดีครับ ผมชื่อ แอนดรอยด์ ครับ</string>
    <string name="button_label">คลิกที่นี่</string>

</resources>

 

 

7. ไปที่ Package Explorer เลือก res > layout > เปิด  activity_main.xml > เลือกมุมมองที่เป็น ซอร์สโค๊ด โดยคลิกที่แถบ activity_main.xml ตามรูปด้าล่าง

part4_12

8. แก้ไขรายละเอียด ของ android:id, android:text ตามนี้ครับ

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="42dp"
        android:layout_marginTop="24dp"
        android:text="@string/title_label" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="54dp"
        android:text="@string/text_show" />

    <Button
        android:id="@+id/bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/button_label" />

</RelativeLayout>

 

9. ไปที่ Package Explorer เลือก src > com.kruchian.textviewbutton > เปิด  MainActivity.java ตามรูปด้าล่าง

part4_9

10. เพิ่มและแก้ไขรายละเอียดตามนี้ครับ

package com.kruchian.textviewbutton;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //สร้างตัวแปร Button
        Button button = (Button) findViewById(R.id.bt);      

       //เพิ่มคำสั่ง Listener ให้ปุ่มกด
         button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                //สร้างตัวแปร TextView
                TextView text = (TextView) findViewById(R.id.tv);

                //เปลี่ยนข้อความของTextView เมื่อคลิกปุ่ม
                text.setText("Hi, my name is Android.");
            }
        });

    }
}

 

11. ผลลัพธ์ที่ได้

part4_10part4_11

.                  ข้อความก่อนคลิกปุ่ม                                   ข้อความหลังคลิกปุ่ม