Home / Developer  / Android Developer  / เขียนแอพ Android ดึง JSON มาเล่นกับ RecyclerView และ Picasso

เขียนแอพ Android ดึง JSON มาเล่นกับ RecyclerView และ Picasso

การพัฒนาแอพพลิเคชัน Android ที่ถูกพัฒนาให้ง่ายขึ้นด้วย Layout ตัวใหม่อย่าง RecyclerView ให้สามารถดึง JSON Webservices ได้ง่ายพร้อม Image Load ผ่าน Picasso

เราเคยประสบปัญหาแรกๆ สมัยเริ่มพัฒนาแอพพลิเคชัน Android มาใหม่ๆ พอถึงการดึง Web Services อย่า JSON เช่นบทความ

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

เราจะเจอปัญหาแรกคือการกระตุกเมื่อมีการโหลดรูปภาพเข้าไปผ่าน ListView ซึ่ง View เราต้องไปเขียนฟังก์ชันให้มัน Clear View เพิ่มเมื่อพ้น Layout ไป

หลังจากนั้นเราก็ใช้ Third Party อย่าง Volley มาช่วยโหลด Cache Image ให้เลื่อน ListView เร็วขึ้น ปัญหาคือตัวอย่างที่ปรากฏในบทความนี้:

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

มีคนบ่นไป “Code เยอะไปนะ”

จนกระทั่งตอนนี้มี Layout ตัวใหม่คือ RecyclerView และ Third Party ที่เป็น Dependencies สำหรับโหลดรูปภาพที่ใช้งานง่ายมากๆ อย่าง Picasso การทำ JSON parse หรือดึงข้อมูล JSON เข้าแอพพลิเคชันของเราก็ง่ายขึ้น Code สั้นลงอีกต่างหาก

RecyclerView

Layout อย่างเจ้า RecyclerView นี่มีความพิเศษอย่างหนึ่ง คือมันถูกออกแบบมาเพื่อจัดการกับข้อมูลจำนวนมากที่ต้องดึงมาแสดงทีละหลายๆ ข้อมูลใน JSON เพื่อเป็นการลด Memory แทนที่จะใช้ ScrollView และ ListView ที่เปลือง Memory มากเหมือนเมื่อก่อน, ส่วนตัวคิดว่า RecyclerView นั้นคือ ListView รูปแบบใหม่ ที่เพิ่มประสิทธิภาพขึ้นมานั่นคือ:

  • มันสร้าง ListView Layout ได้ทั้ง Vertical แนวดิ่ง และ Horizontal แนวระนาบ ได้อย่างสะดวก
  • ใช้การควบคุมรูปแบบผ่าน LayoutManager
  • ลด Memory ด้วยการ Reuse โดยตรงผ่าน ViewHolder
  • จัดการข้อมูลผ่าน Adapter เหมือน ListView เดิม

Picasso

เป็น Third Party Library สำหรับการจัดการแคชบนรูปภาพ ImageView Cache มีการดาวน์โหลดรูปภาพภายหลัง Activity เริ่มทำงานโดยเก็บ cache ให้ทันที สามารถใช้งานได้ง่ายทั้งแบบ jar ไว้ใน Project หรือ Build ผ่าน Gradle ตรงๆ (ข้อมูลเพิ่มเติม: Picasso)

ลองมาพัฒนาแอพพลิเคชันเล่นๆ กันหน่อยดีกว่า:

ตัวอย่างนี้ผมจะใช้ Pattern จาก Plugin JSON API ของ WordPress เข้ากับเว็บไซต์ http://www.lovedesigner.net เว็บรีวิวหนังของผม หากติดตั้งเสร็จมันจะสามารถดู JSON Webservice ได้แบบนี้ครับ:

http://www.lovedesigner.net/api/get_posts?include=id,title,thumbnail

หรือดึงเลือกบาง fields ก็ต่อ param ไป, อีกทั้งเลือกเฉพาะหมวด category ได้ด้วยดังนี้

http://www.lovedesigner.net/api/get_category_posts/?slug=action&include=id,title,thumbnail

เวลาแสดงผลก็จะเป็นแบบนี้:

ลง Plugin ให้เรียบร้อย

ลง Plugin ให้เรียบร้อย

ตัว Arrays Key ที่เราจะทำงานหลักๆ คือ Key ที่ชื่อ posts ที่ประกอบไปด้วย post ย่อย หลายๆ ตัวเราจะดึงแค่ title และ thumbnail มาทำงานกับแอพพลิเคชันของเรา

ทำการสร้าง แอพฯ Android ของเราเป็นแบบ Empty Activity ผ่าน Android Studio ให้เรียบร้อย หลังจากนั้นเปิดไฟล์ build.gradle (Module)

ทำการเพิ่ม dependencies เข้าไปใหม่โดยเราจะใช้งาน RecyclerView ร่วมกับ CardView พร้อมทั้งดึง Library ของ Picasso มาใช้

กด Sync Gradle ให้เรียบร้อยหลังจากนั้นเราจะมาเริ่มออกแบบ Layout และ Color กัน เปิดไฟล์ colors.xml ขึ้นมาแก้ไขชุดสีให้สวยหน่อยตามนี้:

หลังจากนั้นไปหาภาพ Placeholder สำหรับแสดงผลรอระหว่างโหลดภาพลง  ImageView ซึ่งเราต้องเอาไปวางที่ Folder ชื่อ drawable ตามนี้

ตัวอย่าง Placeholder

ตัวอย่าง Placeholder

ทำการสร้าง Class ใหม่ขึ้นมาชื่อว่า JSONData.java

ทำการสร้าง Model สำหรับ Bind Keys ที่เราต้องใช้ในตัวอย่างเราต้องการแค่ title กับ thumbnail ออกแบบ Layout ของเราใหม่เปิด activity_main.xml ขึ้นมา:

สร้าง RecyclerView มาเก็บ Container ข้อมูล โดยมี ProgessBar มาแสดงการโหลดขณะที่เราดึงข้อมูลในตัวอย่างมีการแก้ไข สี ของ Constrain Layout เป็นสี Background เทาดำ

ทำการสร้าง Layout เพิ่มมาอีกตัวชื่อว่า list_row.xml จัดแต่งด้วย CardView เพื่อความสวยงาม โดยมี TextView คือ title และ ImageView คือ thumbnail

กลับมาเขียน Code สร้าง Class Java ใหม่ขึ้นมาเป็น Adapter เก็บข้อมูล JSON ชื่อว่า “MyRecyclerViewAdapter.java”

จัดการ Bind ข้อมูลผ่าน Layout ของ CardView ด้วย ViewHolder ส่วนนี้

และ Bind ViewHolder ส่วนนี้

เพื่อให้เกิดการรอข้อมูลรูปภาพเราจะไปโหลดไฟล์รูปภาพ placeholder มาเก็บไว้ ด้วย Library ของ Picasso เก็บค่าจำนวนของชุดข้อมูลผ่าน Method นี้:

แล้วไล่ Render ข้อมูลลง Widget ใน Method นี้:

ขั้นตอนต่อไปคือการแสดงผลผ่าน หน้าแรกของแอพพลิเคชันของเรา MainActivity.java

ประกาศตัวแปรข้างต้นใต้ Class เป็น Global หลังจากนั้น ทำการ Map ตัว Adapter เข้ากับ RecyclerView:

ระบบจะถามเราว่าสร้าง Inner Class ของ GetDataBinding() ไหมให้สร้างขึ้นมาในตัวอย่างทำงานดังนี้ครับ:

ระบบจะทำงาน Load Image เป็น BackGround Process ควบคู่ระหว่างที่แอพพลิเคชันกำลังทำงาน ผ่าน String ของเว็บไซต์ เข้าฟังก์ชันของ BufferedReader เรียกทำงานผ่าน parseResult(response.toString()); ซึ่งเราจะเขียนไว้แล้วว่า result =1 คือผ่าน, 0 คือโหลด JSON ไม่ได้ สร้าง Method ขึ้นมา

ขั้นตอนของ parseResult() คือฟังก์ชันปกติของพวก JSON Parser ลงตัวแปร ArrayList โดย Map ตัว Key ของ JSON คือ title,thumbnail (ส่วนนี้ใครจะเขียนแบบไหนก็แล้วแต่ Format JSON ของแต่ละคน)

เพิ่ม Interface Class สำหรับแตะ Touch ของ RecyclerView เพื่อให้แตะได้

เปิดไฟล์ MyRecyclerViewAdapter.java เขียนเพิ่มใต้บรรทัด:

เพิ่มบรรทัดดังนี้:

เพิ่ม Method ใหม่เข้าไปดังนี้:

อย่าลืมประกาศตัวแปรใต้ Class ของ MyRecyclerViewAdapter.java

เปิด AndroidManifest.xml เพิ่ม Permission ของ INTERNET เข้ามา

รันโปรแกรมของเราให้เรียบร้อย

ทดสอบโดยการแตะที่ RecyclerView และปรับ ได้ตามใจชอบในไฟล์ list_row.xml

ระบบของ RecyclerView จะเลื่อนและโหลด Cache ผ่าน Picasso ได้อย่าง Smooth ไม่มีกระตุกครับ ดาวน์โหลด Project ตัวอย่างได้ที่นี่นะครับ สำหรับสายขี้เกียจ

https://github.com/banyapondpu/RecycleView

แล้ว……..

ถ้าอยากเปลี่ยน RecyclerView ของเราจาก Vertical แบบ ListView เป็น Horizontal แบบ Banner เลื่อนซ้ายขวาล่ะ ให้ Backup Project เก่านะครับ แล้วแก้ไข Layout ของ list_row.xml เป็นแบบนี้ (หรือจะแต่งเองก็ได้นะ)

ตามที่บอกไว้ข้างต้นว่า RecyclerView นั้นควบคุมการแสดงผลผ่าน LayoutManager ดังนั้นเปิด MainActivity.java ขึ้นมาแก้ไขส่วนของการแสดงผลจาก

แก้ไขเป็น:

ทดสอบดูจะด้ RecyclerView เลื่อนแนวนอนสวยงาม

ทดลองเล่นกันนะครับง่ายดี 🙂

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.