[Android Studio Dev] การเชื่อมต่อหน้า App ไปยังอีกหน้าด้วยการ Intent

Mobile Application Developing- Android, iOS, Window Phone สอนเขียนโปรแกรมบนมือถือ ระบบปฏิบัติการต่าง แอนดรอยด์ ไอโอเอส วินโดโฟน สอนเขียนโปรแกรมบนมือถือ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
prakasit.bank
PHP Super Member
PHP Super Member
โพสต์: 316
ลงทะเบียนเมื่อ: 02/06/2015 9:47 am

[Android Studio Dev] การเชื่อมต่อหน้า App ไปยังอีกหน้าด้วยการ Intent

โพสต์โดย prakasit.bank » 09/06/2015 12:18 pm

การสร้างหน้า Application หลายๆหน้าต้องมีการเชื่อมกันโดยใช้การ Intent เพื่อไปยังอีกหน้า

ขั้นตอนที่ 1 : เข้าโปรแกรม Android Studio สร้างโปรเจคใหม่ขึ้นมา
ขั้นตอนที่ 2 : สร้าง ปุ่ม Button ขั้นมาในหน้า activity_main เป็นหน้าแรก

โค้ด: เลือกทั้งหมด

<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=".MainActivity"
    >
   
    <TextView
        android:id="@+id/textview01"
        android:text="PAGE 1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textSize="30sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next Page"
        android:id="@+id/button01"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/textview01"
        />

</RelativeLayout>

Screenshot_4.png
Screenshot_4.png (16.23 KiB) เปิดดู 5454 ครั้ง

ขั้นตอนที่ 3 : สร้างหน้า layout ขึ้นมาอีกหน้า
วิธีสร้างหน้า layout ใหม่
คลิกขวาที่ layout เลือก New > XML > Layout XML File

Screenshot_3.png
Screenshot_3.png (58.2 KiB) เปิดดู 5454 ครั้ง

ตั้งชื่อไฟล์ XML ส่วน Root Tag ให้เป็น Linear Layout เหมือนเดิมก็ได้ สามารถเปลี่ยนทีหลังได้

Screenshot_2.png
Screenshot_2.png (49.35 KiB) เปิดดู 5454 ครั้ง

code หน้า 2

โค้ด: เลือกทั้งหมด

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView
        android:id="@+id/textview02"
        android:text="PAGE 2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textSize="30sp" />

</RelativeLayout>

Screenshot_8.png
Screenshot_8.png (45.8 KiB) เปิดดู 5454 ครั้ง

ขั้นตอนที่ 4 : มาที่โฟลเดอร์ java > ชื่อ package ของเรา ให้เลือกโฟลเดอร์ที่ ไม่มีคำว่า (android Test) แล้วจะเจอ MainActivity.java
- ให้เราสร้าง Java Class ขึ้นมาอีก 1 Class เป็น Class ที่เอาไว้เชื่อมต่อกับไฟล์ XML หน้า 2
วิธีสร้าง Java Class
คลิกขวาที่ package เลือก New > Java Class

Screenshot_7.png
Screenshot_7.png (17.99 KiB) เปิดดู 5454 ครั้ง

- ตั้งชื่อ Class (ex. Page2Activity)

Screenshot_6.png
Screenshot_6.png (48.33 KiB) เปิดดู 5454 ครั้ง

- หลังจากสร้าง Class ให้ extents Activity

โค้ด: เลือกทั้งหมด

public class Page2Activity extends Activity


- คลิกพื้นที่ว่างในปีกกา ไปที่ Code > Override Methods

Screenshot_5.png
Screenshot_5.png (49.4 KiB) เปิดดู 5454 ครั้ง

- แล้วเลือก onCreate กด OK แล้วจะได้ code ตามนี้

Screenshot_10.png
Screenshot_10.png (31.78 KiB) เปิดดู 5454 ครั้ง

โค้ด: เลือกทั้งหมด

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }


ขั้นตอนที่ 5 : ให้พิมพ์ code จากบรรทัด super

โค้ด: เลือกทั้งหมด

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

*page2 คือชื่อไฟล์ layout หน้า 2 ที่เราสร้างไว้

ขั้นตอนที่ 6 : มาที่ MainActivity.java
สร้าง Method onClick ขึ้นมาเพื่อให้หน้า Main ไปยังหน้า Page2
จะได้ code ตามนี้

โค้ด: เลือกทั้งหมด

public void onClickNext(View view){
        Button btn_next = (Button)findViewById(R.id.button01);
        Intent intent = new Intent(MainActivity.this,Page2Activity.class);
        startActivity(intent);
    }

อธิบาย code
- บรรทัดแรก ชื่อ Method ตั้งชื่ออะไรก็(ex. onClickNext) เรียกใช้ View และตัวแปร ตั้งอะไรก็ได้ (ex. view)
- บรรทัดที่ 2 เรียกใช้ Button เพื่อให้เชิ่อมต่อปุ่มในหน้า xml โดย R.id.button01 เราต้องตั้ง id button01 ในหน้า xml
- บรรทัดที่ 3 เรียกใช้ Intent เป็นคำสั่งไปยังอีกหน้า (MainActivity.this = หน้าปัจจุบัน ,Page2Activity.class = หน้าที่จะไป );

ขั้นตอนที่ 7 : เราต้องไปเพิ่ม Activity ใน manifest มาที่โฟลเดอร์ minifest
ให้เพิ่ม Activity Page2Activity เข้าไป ต่อจากปีกกาปิดของ Activity

โค้ด: เลือกทั้งหมด

<activity android:name=".Page2Activity"/>


ขั้นตอนที่ 8 : เราต้องไปเพิ่ม code onclick ที่ปุ่ม button ใน layout xml ด้วย

โค้ด: เลือกทั้งหมด

android:onClick="onClickNext"

จะได้รูปแบบนี้

โค้ด: เลือกทั้งหมด

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next Page"
        android:id="@+id/button01"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/textview01"
        android:onClick="onClickNext"
        />

เพียงเท่านี้ก็สามารถกดปุ่มไปยังอีกหน้าได้แล้ว

หน้าแรก

Screenshot_9.png
Screenshot_9.png (43.77 KiB) เปิดดู 5454 ครั้ง

หน้าที่สอง

Screenshot_11.png
Screenshot_11.png (28.22 KiB) เปิดดู 5454 ครั้ง


เสร็จสิ้นการเชื่อมต่อไปยังอีกหน้าด้วยการ Intent
รูปภาพ

ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 16746
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: [Android Studio Dev] การเชื่อมต่อหน้า App ไปยังอีกหน้าด้วยการ Intent

โพสต์โดย mindphp » 24/04/2016 3:08 pm

เนื้อหา อื่นๆบทเรียน Android
viewforum.php?f=30
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: viewforum.php?f=29
รับอบรม และพัฒนาระบบ: viewtopic.php?f=6&t=2042

ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 16746
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: [Android Studio Dev] การเชื่อมต่อหน้า App ไปยังอีกหน้าด้วยการ Intent

โพสต์โดย mindphp » 24/04/2016 3:11 pm

สอนเริ่มต้น พัฒนา Application Android หัด ทำแอป แอนดรอยด์ แบบง่าย Android Studio

https://www.youtube.com/watch?v=sTMqYEyhqNM
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: viewforum.php?f=29
รับอบรม และพัฒนาระบบ: viewtopic.php?f=6&t=2042


  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน