iMacbaszii's Blog

วันนี้จะแบ่งปันอะไรที่ได้มาจากการลองเล่นของเล่นตัวหนึ่งจาก Facebook ถ้าใครคุ้นตา ลองเปิด Facebook App ขึ้นนะครับ (ควรจะ Kill Process ไปก่อน) ในขณะที่กำลังโหลด News Feed อยู่นั้น คุณจะเห็นหน้าจอประมาณนี้ พร้อม Effect ที่เรียกว่า Shimmering มาลองดูวิธีทำกันครับ ไม่ยากอย่างที่คิด เพราะ Facebook เตรียมของให้เราแล้วนั่นคือ https://github.com/facebook/Shimmer คราวนี้ผมจะลองสร้าง Toy Project ตัวหนึ่งที่เป็น UITableView-based ธรรมดาเลย โดยผลลัพธ์สุดท้ายก็จะมีแค่นี้แหละ แสดงชื่อและอีเมล์ ขั้นตอนแรกให้สร้าง Prototype Cell อีกตัวขึ้นมาก่อน โดยให้มีโครงสร้างเหมือนกับ Prototype Cell ที่มีข้อมูลของเรา แต่แทนที่ Object ต่างๆ ด้วย UIView และอย่าลืมตั้งค่า Custom Class เป็น FBShimmerView ด้วยแบบนี้ ในที่นี้ผมตั้งชื่อ Cell ตัวนี้ว่า PlaceholderCell ต่อมาเนื้อหาใน PlaceholderCell ของผมก็จะเป็นประมาณนี้ Wait for the Code .... โดยจัดการสร้างและใส่ Content View ตอน -awakeFromNib และให้เริ่มแสดง Shimmering effect หลังจากที่ Auto Layout ทำงานเสร็จแล้ว คราวนี้ผมจะข้ามไปในส่...

ถ้าบอกว่าคลาสใน UIKit ตัวไหน ที่เราใช้กันบ่อยมากที่สุด ก็คงจะหนีไม่พ้น UITableView และ UICollectionView นั่นแหละนะ และงานที่เราต้องทำกันบ่อยๆ นอกเหนือจากการ Custom Cell ให้เป็นรูปแบบที่เราต้องการ ถ้า Cell ที่เราสร้างขึ้นอาจจะมีการนำมาใช้ใหม่ สิ่งที่เราต้องทำคือ สร้าง XIB file ขึ้นมาและก็ต้อง Register ให้รู้ด้วยว่าจะมี Cell อีกรูปแบบเข้ามาในระบบ คราวนี้มาดูเวลาเราเขียนโค้ดแบบปกติกันก่อน ว่าที่ผ่านมา ผมและหลายๆ คนทำกันยังไง เริ่มจาก UITableView และ UICollectionView นั้นมี API ที่เอาไว้ให้เรา Register Cell ดังนี้ Wait for the Code .... และวิธีการเขียน Datasource โดยทั่วไปก็จะเขียนกันแบบนี้ โดยอ้างถึง Reuse Identifier ด้วยค่าคงที่ที่ประกาศไว้ด้านบน Wait for the Code .... คราวนี้เราจะมาลองดูกันว่า เราจะทำให้โค้ดชุดนี้เรียบง่าย และปลอดภัยขึ้นได้อย่างไร ด้วยการใช้ Feature ของ Swift นั่นคือ Generics และ Protocol Extension เริ่มจาก ปกติแล้วผมก็จะตั้ง Reuse Identifier ตามชื่อ Cell Class (Nib File) นั่นแหละ เช่น Class ชื่อ BookCell ก็ตั้งว่า BookCell  ในเ...

การใช้ UITableView, UICollectionView เป็นวิธีการยอดนิยม สำหรับข้อมูลที่มีลักษณะเป็นลำดับ (List) ซึ่งก็มีคำถามต่อมาว่า "ทำอย่างไรดี เมื่อไม่มีข้อมูลบน List เลย" ผู้คนมักปล่อยว่างเป็นหน้าขาวๆ ซึ่งเป็นวิธีที่ไม่ดีนักสำหรับผู้ใช้ โดยการที่ไม่มีข้อมูลบน List เลยอาจจะมาจากได้หลายสาเหตุ ไม่มีข้อมูล อาจจะเป็นการสมัครครั้งแรกและยังไม่มีข้อมูลใดๆ ไม่ได้เชื่อมต่อ Internet ดึงข้อมูลมา แล้วเกิด Error ซึ่ง App ที่ดี ก็ควรจะบอกผู้ใช้ด้วยว่า มันเกิดอะไรขึ้นดังเช่น App ดังๆ ทำกันแบบนี้ ผู้ใช้ควรจะรู้ว่าสถานะของ App เป็นอย่างไรเนอะ แล้วมันทำยังไงล่ะ ? วันนี้จะมาแนะนำ Library ตัวนึงชื่อ DZNEmptyDataSet เพื่อจัดการเหตุการณ์แบบนี้กันครับ :) โดยวิธีการใช้งาน ก็ไม่ยากเลยเพียงแค่เซต Datasource และ Delegate ให้ UITableView หรือ UICollectionView ที่เราใช้อยู่ จากนั้นก็ทำการเขียน Datasource methods เพื่อจัดการข้อความและรูปที่จะแสดงเวลาไม่มีข้อมูล (แม้กระทั่งสร้าง Custom View มาแปะเลยก็ได้) และ Delegate methods เพื่อจัดการเหตุการณ์ที่จะเกิดขึ้นกับ View ของ Empty Data Set...

นี่เรียกได้ว่าเป็น pain เล็กๆ อย่างหนึ่งของ iOS Developer เลยก็ว่าได้ สิ่งที่ว่าคือการ "คำนวณความสูงของ UITableViewCell" ซึ่งเมื่อก่อนจะต้องคำนวณเอง ซึ่งผมเคยเขียนไว้ที่นี่ Dynamic Height of UITableViewCell เมื่อ iOS8 SDK ออกมา สิ่งที่น่าตื่นเต้นที่สุดใน What's new in UITableView and UICollectionView ก็คือเรื่องนี่แหละ "Self Sizing Cell" หรือการที่ Cell สามารถคำนวณความสูงจาก Content ในตัวเองได้ แล้วมันจะคำนวณได้ยังไง ? สิ่งที่มาช่วย และเราต้องเรียนรู้ในครั้งนี้คือ Autolayout นั่นเอง โดย Code ที่เราจะเขียนมีเพียงแค่ 2 บรรทัดเท่านั้นใน -ViewDidLoad ต่อมาก็เป็นขั้นตอนสำคัญนั่นคือ การใส่ Constrains ของ Autolayout ให้ถูกต้อง มาดูตัวอย่างกัน นี่คือ รูปร่าง Prototype Cell ง่ายๆ ที่เราจะนำมาเป็นตัวอย่างกันนะ คล้ายๆ Subtitle Style เลย ขั้นแรกใน Label แต่ละตัว อย่าลืม! ปรับ Lines Number ให้เป็น 0 ด้วย นี่คือ Constrains ที่ผมใส่ให้ Name Label เป็นแบบนี้ Leading Spacing to Container Margin  บอกว่าห่างจากขอบ Cell ด้านหน้าเท่าไหร่ Trailing Sp...

มาดูเทคนิคหนึ่งที่อาจจะได้ใช้กัน เวลาใช้ UITableView  Multiple Selection โดยโปรแกรมที่นำมาเป็นตัวอย่างในวันนี้คือ  โดยใน Interface ของโปรแกรมจะประกอบไปด้วย ตัวแปรที่อ้างถึง TableView และ Array ที่ใช้เก็บข้อมูล ส่วนของ Implementation เริ่มด้วยการใส่ข้อมูลให้ Array และทำการเซต Property บางอย่างของ UITableView ซึ่งสามารถที่จะเซตผ่าน Interface Builder ได้เช่นกัน (ผมใส่ใน Code เพื่อให้เห็นภาพชัด) ต่อไปก็ Implement UITableView DataSource ตามปกติ ที่จะใส่ข้อมูลลงใน UITableView คราวนี้สิ่งที่แปลกใหม่ในการทำ Multiple Selection คือการ Implement Delegate method นี่ล่ะ โดยเป็น method ที่จะทำงานเมื่อ User ทำการ Select/Deselect ที่ Cell ใด Cell หนึ่งของ UITableView และทั้ง 2 method นั้นเขียนเหมือนกันนั่นคือสั่งให้ AccessoryType กลายเป็น Checkmark หรือไม่สลับกัน ผมจึง Refactor ออกมาเป็น Function และเรียกใช้แทน :) ผ่านจากตรงนี้เราจะเห็นได้ว่า เราสามารถที่จะ Select/Deselect Cell ต่างๆ ได้แล้วนะครับ  ต่อไปก็จะเป็นการนำค่าที่ User ทำการ Select ออกมา ...

วันนี้ผมขอเสนอ Case Study ง่ายๆ ในการบอกแนวคิดในการ Insertion และ Deletion ข้อมูลใน TableView นะครับ ข้อมูลที่ใช้ในโจทย์ข้อนี้จะเป็นแค่ NSMutableArray เท่านั้น (แต่ถึงเวลาจริงๆ งานจริงๆ จะใช้ Core Data) เป็น Project เล็กๆ ที่ทำทุกอย่างใน Controller นะครับ ... DeletingTableViewViewController.h ในไฟล์ .h ก็ไม่มีอะไรมากนะครับ .. มี List ของข้อมูลซึ่งเป็น NSMutableArray และตัวแปรที่จะอ้างถึง TableView เพื่อทำการ reloadData ** แต่เราสามารถสร้าง ViewController ให้เป็น UITableView SubClasses ได้เลยครับ      ถ้าทำแบบที่ว่า เราจะสามารถใช้ self.tableView ได้ทันที ... แต่กรณีนี้ผมสร้าง Project แบบ      SingleView Application จึงต้องทำการสร้าง UITableView เอง DeletingTableViewViewController.m ในไฟล์ .m ส่วนแรก ก็ไม่มีอะไรมากนอกจากตั้งค่าเริ่มต้นให้กับข้อมูล และ ตั้งค่า UI ตอนเริ่มต้น โดยเพิ่ม UITableView ไปใน View และเพิ่มเติมอะไรนิดหน่อยที่ updateUI method ส่วนต่อไปคือ DataSource Method ของ UITableView ที่เราเรียกใช้ ซึ่งในส่วนแรก เป็นแค่การเร...

JSON (Javascript Object Notation) เป็น Format ข้อมูลชนิดนึง ที่ได้รับความนิยม ไม่แพ้ XML เลย ถูกใช้กันอย่างแพร่หลาย เช่นใน Facebook SDK ก็ใช้ โดยมีเว็บหลักคือ http://json.org/ และสามารถเข้าไปดูตัวอย่าง format ของข้อมูลได้ที่นี่ http://json.org/example.html วันนี้ผมจะเขียนถึงเรื่องการ Parsing JSON บน iOS กัน ... โดยจะ Parse มาใส่ UITableView เฉพาะชื่อ Title เท่านั้น ไฟล์ *.json ที่ผมเตรียมไว้มีข้อมูลตามนี้ครับ จะเห็นได้ว่า ไฟล์ของผมมี Array อยู่ 1 ชุดชื่อ 'docterme' และ ข้างในเป็น Dictionary ซึ่งมี key ด้วยกัน 4 ตัว .. ขั้นตอนแรกไป clone Repository ของ JSONKit มาก่อนเลยครับ (Download นั่นแหละ) https://github.com/johnezang/JSONKit เมื่อได้มาแล้ว ก็ลากทั้ง JSONKit และไฟล์ข้อมูล .json ที่เราเตรียมไว้ลง Project ซะ (ของผม content.json) และอีกเรื่องนึงที่ควรรู้ เมื่อกด Build (cmd + b) ครั้งแรกก็คือ JSONKit ไม่รองรับ ARC (Automatic Reference Counting) ถ้าคุณไม่ได้ใช้ ก็ไม่ต้องกังวล แต่ถ้าคุณใช้ ARC (เลือกได้ตอน Create Project) ต้องไปใส่ Flag No ให้มันก่อ...