Home / Developer  / Android Developer  / เขียนแอพ Android ดึงข้อมูล JSON เก็บ Cache Imagd ด้วย Volley

เขียนแอพ Android ดึงข้อมูล JSON เก็บ Cache Imagd ด้วย Volley

การเขียนแอพพลิเคชันบนแพลตฟอร์ม Android ด้วย Android Studio ในการดึงข้อมูล JSON Webservice และโหลดรูปภาพ Image จาก Serve ผ่าน Cache เพิ่มความเร็ว ด้วย Volley

แรกเริ่มเดิมทีเราเลยเขียนแอพพลิเคชันในการดึง ข้อมูลจาก JSON Web Service มาบ้างแล้วกัยบทเรียนเหล่านี้

หรือ ทบทวนทั้งหมดก่อนที่นี่

http://www.daydev.com/category/developer/android-developer

จะเห็นว่าตัวอย่างที่เคยทำมาจะมีปัญหาในเรื่องของการแสดงผลรูปภาพของ ListView นั่นคือ อาการกระตุก ไม่ Smooth เมื่อมีการ Scrolling หน้าจอของ ListView หลักๆ เป็นเพราะเราต้องเสียเวลาในการโหลด Image จาก URL ที่อยู่ใน JSON ทุกทั้งที่มีการแสดงผล ซึ่งถ้าจะให้เร็ว และ Smooth นั้นมีทางเดียวคือต้องจัดการเก็บ Cache ของมันสำหรับโหลดภาพ หรือ Image ทีหลัง ซึ่งทางนักพัฒนาก็มี ส่วนเสริมมากมายหลากหลายให้เราเลือกใช้ ตัวเลือกหนึ่งที่คิดว่าไม่น่าจะลำบากมากน่าจะเป็น Volley ครับ

เริ่มต้นพัฒนากันดีกว่า เปิด Android Studio ขึ้นมาครับ (ตัวอย่างใช้ SDK 23.0.1)

Screen Shot 2558-09-26 at 10.44.52 AM

เลือกรูปแบบเป็น Blank Activity ปรกติครับ เสร็จแล้วดาวน์โหลด ไฟล์ volley.jar มาใช้กับ Project ของเรา

https://drive.google.com/file/d/0B08PZSOd4UmOTFBLbW1sQUlYVHc/view?usp=sharing

วิธีการวางไฟล์ .jar ไว้ใช้กับ Project ของเราให้ทำดังนี้ครับ

Screen Shot 2558-10-01 at 10.53.56 PM

คลิกที่ “Android” ตำแหน่งดังภาพข้างบนเลือกเป็น “Project”  แล้วลากไฟล์ volley.jar ที่ดาวน์โหลดมาไปวางในโฟลเดอร์ “app/libs” ของ Project ของเราให้เรียบร้อย แล้ว คลิกเปลี่ยน “Project” เป็น “Android” เช่นเดิมครับ

Screen Shot 2558-10-01 at 10.54.03 PM

 

Screen Shot 2558-10-01 at 10.55.50 PM

เมื่อเสร็จแล้วเปิด Gradle (build) ออกมาทำการเขียนคำสั่ง Compile Gradle เข้าไปครับ

นั่นคือการเพิ่ม

ไปแค่บรรทัดเดียว ทำการ Sync ให้เรียบร้อย และ Clean Project ครับต่อมาให้เราไปที่ Folder “res/values” สร้างไฟล์ colors.xml ขึ้นมา เพื่อกำหนด value ของชุดสีที่ต้องการจะใช้

แก้ไขไฟล์ dimens.xml ให้เป็นดังนี้

เมื่อเรียบร้อยแล้วให้เราสร้าง Values ใน โฟลเดอร์ “res/drawables” โดยสร้างไฟล์ขึ้นมา 3 ไฟล์ตามนี้ คือ list_row_bg.xml, list_row_bg_hover.xml และ list_row_selector.xml

Screen Shot 2558-10-03 at 12.19.17 AM

แก้ไขแต่ละไฟล์ครับ เป็นการวางค่า Layout บางอย่างเวลามีการกระทำที่ Row ของ ListView

ต่อมาให้เรานำ ListView ไปใส่ใน Layout ของ MainActivity นั่นคือไฟล์ activity_main.xml

โดย ListView ที่แทรกเข้าไปชื่ “list” นั้นจะมีการแสดงผล แถวแต่ละแถวตามตัวอย่างก่อนหน้านี้ คือมีภาพประกอบ และ ชื่อหัวข้อ เราต้องสร้าง Layout ของแถว ชื่อ “list_row.xml” ขึ้นมา

สังเกตจะเห็นว่าส่วนของรูปภาพเราจะไม่ใช้ ImageView เหมือนตัวอย่างก่อนๆ แต่จะเป็น

ส่วนของ NetworkImageView ที่มากับเข้า Valley นั่นเอง

สร้าง Package สำหรับ Project ของเราเพิ่มขึ้นมาคือ app, model, adapter และ util

Screen Shot 2558-10-03 at 12.09.13 AM

ไปที่ package “util” ทำการสร้าง Class ใหม่ขึ้นมาชื่อว่า LruBitmapCache.java” ซึ่งจะเป็นคำสั่งของ Volley ในการโหลดรูปภาพมาเก็บใน Cache ทีหลังจากการโหลดข้อมูล และเมื่อมาดูใหม่อีกครั้งจะไม่เกิดการโหลดรูปภาพจาก URL อีกเพราะอยู่ใน Cache เป็นที่เรียบร้อยแล้ว

ไปที่ Package “app” สร้าง Class ใหม่ชื่อว่า “AppController.java” เพื่อทำการเรียก util ที่เราสร้างไว้เมื่อมีการโหลดข้อมูล และเป็นการควบคุมการเรียกโหลดข้อมูลว่าสิ่งไหนควรโหลดหลัง หรือโหลดก่อนหน้า

เปิด Permission ของ AndroidManifest.xml ในส่วนของการ INTERNET และใช้ android:name ให้ควบคุมโดย AppController

และ

ไฟล์ AndroidManifest.xml จะเป็นดังนี้

จัดการส่วนของ model ใน package “model” สร้าง Class “Movie.java” ขึ้นมาเพื่อดึง Key ของ Web Service ที่เราต้องการเรียกซึ่งผมจะใช้ตัวอย่างเดิมคือ

http://www.lovedesigner.net/feed/json

รูปแบบของ JSON เป็นดังนี้

Screen Shot 2558-10-04 at 1.34.46 PM

ดังนั้น Movie.java ต้องใช้คำสั่ง Mapping Key ตามนี้

ไปที่ package “adapter” สร้าง Class ตัวสุดท้ายขึ้นมาคือ Adapter ไว้จัดการข้อมูล “CustomListAdapter.java” ทำงานร่วมกับ Movie.java 

ต่อมาคือการแสดงผล ListView ที่เราตั้ง id ว่า “list” ให้แสดงผลของ CustomeList และเก็บ Cache Image ครับแก้ไขไฟล์ Class “MainActivity.java” ดังนี้

ทดสอบการโหลดข้อมูลผ่าน Emulator หรือเครื่องสมาร์ทโฟนของเราดู จะเห็นว่า การ Scrolling ส่วนของ ListView จะเร็ว และ Smooth ไม่เกิดอาการกระตุก

Screen Shot 2558-10-04 at 1.41.00 PM

แหล่งข้อมูลเพิ่มเติม stackoverflow.comhttps://github.com/mcxiaoke/android-volley

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.