Home / Developer  / Android Developer  / เขียนแอพ Android ร่วมกับ JSON แสดงภาพบน ListView และ Intent

เขียนแอพ Android ร่วมกับ JSON แสดงภาพบน ListView และ Intent

บทเรียนเบื้องต้นสำหรับผู้พัฒนาแอพพลิเคชัน Android กับการใช้งาน ListView แสดงค่า JSON แสดงผลรูปภาพ และทำ Intent Activity ส่งค่าไปอีกหน้าด้วย Android Studio

ก่อนจะเข้าสู่บทเรียนนี้ แนะนำว่าให้ไปศึกษาบทความ

เขียนแอพ Android เรียก JSON Web service แสดงบน ListView

ก่อน เพราะมันต่อเนื่องกันครับ

เริ่มต้น

ให้เราใช้ Project ก่อนหน้านี้มาทำการพัฒนาต่อเลยนะครับ โดยเราจะเพิ่ม Layout ใหม่เข้าไปชื่อว่า activity_row.xml เลือกเป็น Relative Layout นะครับ

Screen Shot 2558-04-01 at 11.20.50 PM

ทำการออกแบบตาม Layout ข้างต้นครับ

Screen Shot 2558-04-01 at 11.21.19 PM

หรือจะใช้ XML นี้ก็ได้

เราจะได้ Layout ที่เปรียบเสมือน Row หรือแถวของ ListView ของเราทันทีครับ ต่อมาให้เปิดไฟล์ MainActivity.java ขึ้นมาแก้ไข บรรทัดส่วนของคำสั่งในการ Get ค่า JSON ส่วนนี้จากเดิมคือ

แก้ไขเป็น

เราจะดึง Key ใน json ของเราเพิ่มเข้ามาคือ thumbnail, excerpt (คำโปรย) และ content (เนื้อหาทั้งหมด) มาเก็บลงในตัวแปร MyArrList และพร้อมกับ สร้าง Intent เข้าไปเพิ่ม (อย่าลืม import header นะครับ)

ขณะนี้เราจะพบกับ Error อยู่ 1 จุดคือ showImageOnList ซึ่งมันไม่รู้จักให้กด Auto หรือ สร้าง Class ใหม่มารับรองมันก็ได้ครับ ซึ่งตรงนี้แหละครับที่เราจะใช้สำหรับ ดึง URL ของรูปภาพมาปรากฏบน ImageView ใน activity_row.xml

ซึ่งให้สร้าง Class showImageOnList ขึ้นมาใหม่ครับ ใส่คำสั่งดังนี้

ดังนั้นส่วนของ Header ที่ปรากฏก็จะเป็นเช่นนี้ครับ

Class ของ showImageOnList นั้น

เป็นการดึง Key ของ thumbnail ที่เป็น URL ของรูปภาพมาเก็บที่ imageView ครับ โดยอ้างไฟล์ activity_row.xml ที่บรรทัด

ตามด้วยการ Binding ค่า title และ excerpt มาปรากฏบน Layout

โดย Method สำหรับเรียกใช้งาน Bitmap นั้นอยู่ที่นี่ครับ

ภาพรวมของ Code ไฟล์ MainActivity.java เป็นดังนี้ครับ

อย่าลืมไปสร้าง MainActivity2.java เพื่อมารับหน้าสำหรับ Intent ด้วยนะครับ

Screen Shot 2558-04-01 at 11.40.34 PM

Code ของ MainActivity2.java ไม่มีอะไรมาก

ส่วน Layout ของ activity_main2.xml ก็

Screen Shot 2558-04-01 at 11.40.42 PM

โครงสร้าง xml ตามนี้

ทดสอบกันครับ

เปิดแอพ แบบไม่ใส่ Excerpt

เปิดแอพ แบบไม่ใส่ Excerpt

ใส่ excerpt เข้าไป

ใส่ excerpt เข้าไป

กด Intent แล้วเจอหน้า Detail

กด Intent แล้วเจอหน้า Detail

ตัวอย่างสำหรับผู้เริ่มต้นง่าย ลองเอาไปทำตามดูนะครับ

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.