PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การเพิ่ม activity ให้ app ใน android studio ตอนที่ 1

10 April 2015 By


เนื้อหานี้ต่อจากตอนที่แล้ว หลังจากที่เราได้สร้าง app หนึ่งขึ้นมาโดย
มี 1 activity (หรือ app ที่มีแค่หน้าเดียว) ซึ่งประกอบไปด้วย text field
และ button
 
การเพิ่ม string resources กับ user interface ตอนที่ 2 
http://www.ninenik.com/content.php?arti_id=615 via @ninenik
 
หน้าตา app
 
1
 
สำหรับในตอนนี้ เราจะเพิ่ม activity ใหม่เข้าไป (เหมือนการเพิ่มหน้า app)
และเริ่มมีการเขียน code java  หลักการทำงาน คือ ให้แสดง activity 
ใหม่ขึ้นมาเมื่อคลิกที่ปุ่ม Send
 
*ผู้เขียนไม่มีความรู้ด้าน java มาก่อน พอรู้เฉพาะ javascript หวังว่าคงไม่ต่างกัน
มาก สำหรับใครมือใหม่ ก็ศึกษาภาษา java ไปพร้อมๆ กันตาม code java เลย
 
เพิ่มการตอบสนอง การคลิกที่ปุ่ม Send
 
1. ใน android studio เปิดไฟล์ activity_my.xml ของเราขึ้นมา
2. ที่ Button ให้เพิ่ม attribute ชื่อ android:onClick และกำหนดค่าเท่ากับ "sendMessage"
    sendMessage คือ ชื่อ method ใน activity ที่เราจะสร้างขึ้นมา เพื่อให้ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send
 
จะได้ xml ไฟล์เป็นดังนี้
 
<LinearLayout 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:orientation="horizontal" >
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        android:onClick="sendMessage" />
</LinearLayout>  
 
 
3. จากนั้นมาที่ไฟล์ java ที่โฟลเดอร์ java/com.example.ninenik.study001
ดับเบิลคลิกเปิดไฟล์ MyActivity.java ขึ้นมา
 
2
 
 
    จาก code ด้านบน บนสุดจะเป็น package ต่อมาจะเป็นการ import class ที่จะใช้ใน code
ของเรา ตามรูป จะมีเครื่องหมาย + ให้คลิก เพื่อแสดงว่ามีการ import class อะไรบ้าง
หากต้องการซ่อน ก็คลิกที่เครื่องหมาย - 
 
3
 

 
4.ใน MyActivity class ให้เพิ่ม sendMessage() method  เข้าไปด้านใน
 
/** ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send button */
public void sendMessage(View view) {
    // ทำงานตามคำสั่ง
}
 
    หลักจากที่เราเพิ่ม code นี้เข้าไป android stuido จะมีระบบแจ้งเตือนข้อผิดพลาด
    เป็นตัวช่วยให้เราแก้ปัญหาได้
 
4
 
 
    สังเกตที่รูป คำว่า View ซึ่งเป็น object ที่เราจะเรียกใช้ใน method เป็นสีแดง
เป็นการแจ้งเตือนว่า ไม่มี object นี้ เราต้อง import class เข้าไป โดยทำได้ดังนี้
 
 
5. เพิ่ม class 
    โดย import ไว้ด้านบน ด้วยโค้ด
 
import android.view.View;
 
    หรือ
 
    ใน android studio ให้เราคลิกที่คำว่า View ที่เป็นสีแดง แล้วกดปุ่ม Alt + Enter 
    พร้อมกัน จะมี popup ขึ้นมา แล้วให้เราเลือก import class ระบบจะทำการ import 
    class ให้เราอัตโนมัติ
 
    จะได้เป็น
 
5

6
 
 
    ระบบจะสามารถเรียกใช้ method ผ่านการกำหนด android:onClick ได้นั้น
 
    ต้องกำหนด method ดังนี้
        - เป็นแบบ public (สามารถใช้กับ Instance อื่น ๆ ได้)
        - ไม่คืนค่าใดๆ ออกมา หรือ return type เป็น void
        - มี View เป็น parameter เดียว (คือ view ที่ถูกคลิก ซึ่งก็คือ button)
 
 
ต่อไปเราจะมา เขียน code สำหรับ method นี้ เพื่ออ่านค่าจาก text field และส่งค่า
ที่ได้ไปยังอีกหน้าหนึ่ง โดยใช้ Intent 
 
 
 
การสร้าง Intent
 
Intents คือ object ที่ไว้สำหรับเชื่อมระหว่างองค์ประกอบต่างๆ (เช่น ระหว่าง activity 2 อัน)
Intents ส่วนใหญ่จะใช้สำหรับการเรียกใช้ activity ขึ้นมาแสดง แต่เราก็สามารถใช้ intents 
สำหรับงานส่วนอื่นๆ ได้ (รายละเอียด เกี่ยวกับ intents จะได้ศึกษาต่อไป)
 
1. เพิ่ม code เรียกใช้งาน Intent ตามนี้เข้าไปใน sendMessage method
 
Intent intent = new Intent(this, DisplayMessageActivity.class);
 
7
 
    จะเห็นว่าขึ้นสีแดงที่ object intent ให้ import class intent โดยคลิกที่ข้อความสีแดง intent
    แล้ว กด Alt + Enter พร้อมกัน แล้วเลือก import class 
 
    จะได้เป็น
 
8
 
    จะเห็นว่า ตรงข้อความ DisplayMessageActivity ยังเป็นสีแดงอยู่ เพราะเป็นชื่อ activity ที่ยังไม่มี
    แต่เราจะสร้างในลำดับต่อไป สีแดงนี้ยังไม่ต้องแก้ไข
 
    code java ตัดมาเฉพาะส่วนด้านบน 
 
package com.example.ninenik.study001;

import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;


public class MyActivity extends ActionBarActivity {

    /** ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send button */
    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
    }

.......................
..............
........
 
    constructor จะรับค่า parameters 2 ค่าคือ
 
    ( * constructor คือ สิ่งที่ใช้สำหรับกำหนดค่าเริ่มต้นให้กับ object class โดยจะทำงานอัตโนมัติ
     เมื่อมีการสร้าง new object )
 
        - ตัวแรกคือ ส่วนที่เราใช้งานอยู่ context ปัจจุบัน ในที่นี้ก็คือ Activity class ชื่อ MyActivity
      โดยจาก code จะใช้คำว่า this แทน ระบุว่าหมายถึง class ปัจจุบันที่กำลังใช้งานอยู่
        - ตัวที่สองคือ Activity class ที่สอง เป็นส่วนที่เราส่งค่าไป หรือก็คือ  DisplayMessageActivity.class
 
 
2. เพิ่ม code สร้าง instance object เรียกใช้งาน EditText 
 
    /** ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send button */
    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
    }
 
 
    * EditText ขึ้นสีแดง ให้ import class 
 
    อธิบายโครงสร้าง อย่างง่าย 
 
 [ชนิด object] [ชื่อ instance หรือตัวแปร]  = ( [ชนิด object]) คำสั่งเลือกจาก id 
 
    แปลอย่างง่าย หา id ของ view object ที่เป็น EditText ที่ชื่อ edit_message มาเก็บ
    ใน instance ชื่อ editText ที่เป็น EditText
 
    ดังนั้นที่ได้คือ ตัวแปร instance แบบ EditText ชื่อ editText 
 
 
3. กำหนดตัวแปร local แบบ String ชื่อ message และเก็บค่าจาก editText ด้วยคำสั่ง getText().toString();
 
    /** ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send button */
    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
        String message = editText.getText().toString();
    }
 
4. ใช้ intent เก็บค่าข้อความจากตัวแปร message มาไว้ในตัวแปร EXTRA_MESSAGE โดยใช้คำสั่ง putExtra()
    สังเกตลักษณะการเก็บค่าจะเป็นแบบ key -> value ในรูปแบบ
 
    putExtra(key,value) 

    /** ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send button */
    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
        String message = editText.getText().toString();
        intent.putExtra(EXTRA_MESSAGE, message);
    }
 
 
9
 
    ตัวแปร EXTRA_MESSAGE จะขึ้นสีแดง เพราะยังไม่มีการกำหนดค่า
 
 
5. กำหนดค่าให้กับ EXTRA_MESSAGE 
    ตำแหน่งไว้ภายใน MyActivity class 
 
public class MyActivity extends ActionBarActivity {
    public final static String EXTRA_MESSAGE = "com.example.ninenik.study001.MESSAGE";

    /** ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send button */
    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
        String message = editText.getText().toString();
        intent.putExtra(EXTRA_MESSAGE, message);
    }

.......................
..............
........
 
    จาก code เรากำหนดค่าของ EXTRA_MESSAGE key ให้เท่ากับ 
    com.example.ninenik.study001.MESSAG เป็นเพียงต้องการให้รู้ว่าเรา
    ใช้งานอยู่ในส่วนไหนอยู่ จะใช้เป็นค่าเริ่มต้นค่าอื่นก็ได้
 
7. และสุดท้ายเพื่อส่งค่าข้อความ ไปอีกหน้า ใช้คำสั่ง startActivity() เพื่อส่งผ่านคือ
    ที่ได้ไปยัง intent ที่เราสร้างขึ้น
 
public class MyActivity extends ActionBarActivity {
    public final static String EXTRA_MESSAGE = "com.example.ninenik.study001.MESSAGE";

    /** ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send button */
    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
        String message = editText.getText().toString();
        intent.putExtra(EXTRA_MESSAGE, message);
        startActivity(intent);
    }
 
 
    code ทั้งหมดของ MyActivity.java สุดท้าย ที่เราจะได้
 
package com.example.ninenik.study001;

import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.EditText;


public class MyActivity extends ActionBarActivity {
    public final static String EXTRA_MESSAGE = "com.example.ninenik.study001.MESSAGE";

    /** ทำงานเมื่อผู้ใช้คลิกที่ปุ่ม Send button */
    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
        String message = editText.getText().toString();
        intent.putExtra(EXTRA_MESSAGE, message);
        startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_my, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}
 

 
การเพิ่ม activity ตัวที่ 2 ชื่อ DisplayMessageActivity 
 
ทำความเข้าใจก่อนว่า subclasses ของ activity จะต้องประกอบไปด้วย onCreate() method เสมอ
โดยที่ method onCreate() นี้จะรับค่า intent ที่มีข้อความแล้วนำมาแสดง ดังนั้น ใน onCreate() method
ก็จะมีคำสั่ง setContentView() เพื่อเรียก layout มาแสดงด้วยถ้ามีใช้งานหรือกำหนด view object มาด้วย
ในตอนต้น ตัวอย่างเช่น ถ้า activity ที่เราจะแสดงม่ text field  สำหรับแสดงคำวา Hello World เป็นต้น
 
1. ใน android studio ที่โฟลเดอร์ java ให้คลิกขวาที่ชื่อ package แล้วเลือก New > Activity > Blank Activity.
 
10
 
2. ถ้าหน้าตั้งค่า activity แสดงแล้ว ให้กรอกข้อมูลรายละเอียดตามดังนี้  และคลิก Finish.

11
 
Activity Name: DisplayMessageActivity
Layout Name: activity_display_message
Title: My Message
Menu Resource Names: menu_display_message

Hierarchical Parent: com.example.ninenik.study001.MyActivity
Package name: com.mycompany.myfirstapp
 
3. รอสักครู่ android stuido จะสร้าง activity เพิ่มให้เรา พร้อมส่วนที่จำเป็นต่างๆ ดังนี้
 
12
 
    - ใน ไฟล์ AndroidManifest.xml มีการเพิ่ม activity เข้ามา
 
        <activity
            android:name=".DisplayMessageActivity"
            android:label="@string/title_activity_display_message"
            android:parentActivityName=".MyActivity" >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.example.ninenik.study001.MyActivity" />
        </activity>
 
    - ในโฟลเดอร์ java สร้าง DisplayMessageActivity class 
    - ใน res/layout/ สร้าง activity_display_message มาให้พร้อมมี text field 
    ที่ใช้แสดงข้อความ hello world มาด้วย แต่เราจะไม่ใช้ ให้ลบออกได้เลย
 
     activity_display_message.xml
 
<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.ninenik.study001.DisplayMessageActivity">

</RelativeLayout>
 
    - ใน res/values/strings.xml มีการเพิ่ม string resources มาให้อีกสองตัวคือ 
    <string name="title_activity_display_message">My Message</string>
    <string name="hello_world">Hello world!</string>
       เราสามารถลบ hello world ออกได้ เพราะเราได้ลบ text field ออกจาก layout แล้วและไม่ได้ใช้
 
    strings.xml
<resources>
    <string name="app_name">Study001</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="action_settings">Settings</string>
    <string name="title_activity_display_message">My Message</string>
</resources>  
 
 
การรับค่าจาก intent ขอต่อในตอนที่ 2



เนื้อหาที่เกี่ยวข้อง



Tags:: android studio android intent activity

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง