iOS 8 Presentation Controllers

เนื่องด้วยความเป็น Adaptive Layout ของ iOS 8 SDK นั้น (ซึ่งผมยังไม่เคยเขียน Blog ถึงเรื่องนี้เลย แต่เดาเอาว่า หลายๆ ท่านคงผ่านตาคำคำนี้มาบ้าง) มีหลายๆ อย่างที่เราต้องเขียนในรูปแบบใหม่ ซึ่งเป็นเรื่องที่ดี ถ้าต้องเขียนแบบใหม่ แต่เขียนแค่รอบเดียว แล้วรองรับทุกๆ Screen Sizes และ Orientations

เราจะไม่ต้องเจอโค้ดนี้อีกต่อไป


หนึ่งในสิ่งที่ต้องเปลี่ยนแนวคิดและการเขียนคือเรื่องของ Presentation Controllers นี่แหละ พูดง่ายๆ มันก็คือการที่มี View ใดๆ แสดงขึ้นมาบนอีก View หนึ่งจะด้วยวิธีใดก็ตามๆ โดยใน Blog นี้จะกล่าวถึง Presentation Controller ทั้งหมด 3 ประเภทนั่นคือ UIAlertController, UIPopoverPresentationController และ UISearchController

UIAlertController

ก่อนหน้านี้การแสดง Alert หรือ Action Sheet เราจะใช้ Class ที่ชื่อ UIAlertView และ UIActionSheet แต่ตอนนี้มันถูกรวมเป็นอันเดียวกันแล้วในชื่อว่า UIAlertController โดยโค้ดที่จะต้องเขียนก็ประมาณนี้


น่ารักไหม ? เลิกเขียน Delegate ไปเลย มาใช้ Closure แทน แต่จริงๆ ผมว่าใน Objective-C หลายๆ ก็เขียนเอง หรือไม่ก็หา 3rd Patry Library มาเพื่อทำอะไรคล้ายๆ แบบนี้อยู่แล้วแหละนะ

แล้วถ้าเราต้องการแสดงเป็น Action Sheet ล่ะ ผมว่าลองสังเกตุโค้ดด้านบนดีๆ ก็น่าจะรู้จะครับ ว่าจะต้องเปลี่ยนตรงไหน... ลองเปลี่ยนให้เป็น Action Sheet ดูนะ คราวนี้สมมติว่ามันเป็นปุ่มแล้วแสดง Action Sheet ด้านบน อยากให้ลองรันบน iPad Simulator ดูนะครับ ว่าจะเกิดอะไรขึ้น ? บึ้มมมมมมมม


แต่ก็ไม่น่ากลัวขนาดนั้นนะ เอาเป็นว่า เมื่อเราแสดง Action Sheet เนี่ย เมื่ออยู่บน iPad (Regular Width, Regulat Height Size Classes) มันจะเปลี่ยนไปแสดงในรูปแบบของ Popover แทนให้อัตโนมัติครับ และเนื่องจากเราไม่ได้กำหนดบางอย่างให้กับ Popover ก็เลยแครชอย่างที่เห็น

โดยสิ่งที่เราต้องเพิ่มไปก็คือการกำหนดค่า sourceView และ sourceRect ให้ UIAlertController โดยเพิ่มไปก่อนที่จะแสดงมันขึ้นมาแบบนี้


UIPopoverPresentationController

คราวนี้มาว่ากันถึง Popover บน iPad บ้างล่ะ ก่อนหน้านี้เราจะใช้ UIPopoverController แล้วมัน Adaptive ยังไงล่ะ ? คำตอบก็คือ ตอนนี้เราสามารถแสดง Popover บน iPhone ได้ด้วยน่ะสิ (ซึ่งถ้าเราไม่เลือกให้แสดง Popover จะเป็นการแสดง Modal View ปกติ ดังนั้นอะไรที่เคยเป็น Modal View ก็สามารถแสดงในรูปแบบของ Popover ได้นั่นเอง) ดังนั้น Class ที่จะต้องเขียนมาแทนที่ก็คือ UIPopoverPresentationController

ก็คล้ายๆ แบบเดิมที่เราจะต้องสร้าง View Controller ที่จะแสดงในรูปของ Popover จากนั้นก่อนที่จะแสดงก็กำหนด ModalPresentationStyle เป็น Popover ซะ โดยบน iOS จะมี UIModalPresentationStyle เพิ่มขึ้นมา 3 อันนั่นคือ
  • Popover อย่างที่เรากำลังยกตัวอย่างกันอยู่
  • OverFullScreen แสดงขึ้นมาเต็มจอเลย
  • OverCurrentContext แสดงซ้อนบน Parent View


** ในส่วนของ barButtonItem เป็นการบอกว่าเรากดปุ่มไหนให้แสดง Popover ตัวนี้

คราวนี้ให้ลองรันดูบน iPad Simulator ก็ไม่น่าจะมีปัญหาใดๆ นะ จากนั้นก็ลองรันบน iPhone Simulator สิครับ จะพบว่าสามารถแสดง View Controller ที่ทำมาเพื่อ Popover ได้เหมือนกัน แต่แสดงขึ้นแล้วมันไม่มีปุ่มที่กดให้มันปิดลงไป

หลายๆ คนรวมทั้งผม คงอาจจะคิดว่า ก็ใส่ Navigation Bar ใส่ปุ่มลงไป แล้วก็สั่ง Dismiss สิ ง่ายนิดเดียวเอง แต่อย่าลืมว่าถ้าเราไปใส่เลยใน Storyboard มันก็จะขึ้นตอนที่แสดงบน iPad ด้วยซึ่งมันไม่ควร ดังนั้นเราจะต้องเขียน Delegate methods เพื่อจัดการตรงนี้ โดยที่ให้ Class ที่ทำการแสดง Popover นี้ conform UIPopoverPresentationControllerDelegate แล้วเขียน 2 methods นี้ลงไป


เท่านี้เราก็จะได้ปุ่ม Close เพื่อปิด View Controller ที่ขึ้นมาละ แต่อย่างที่บอกว่า เราสามารถแสดง Popover Style บน iPhone ได้เลย ลองเปลี่ยน method แรกเป็นแบบนี้สิ


UISearchController

มาถึงอันสุดท้าย ซึ่งเป็นสิ่งที่จะมาแทน UISearchDisplayController นั่นคือ UISearchController ซึ่งมีความสามารถในการแสดงผลลัพธ์ของการค้นได้ทุกรูปแบบ ไม่ใช่แค่ UITableView แบบเมื่อก่อน โดยการใช้งาน UISearchController มี 3 ขั้นตอนหลักๆ คือ

  1. สร้าง View Controller เพื่อแสดงผลลัพธ์ของการค้นหา โดยที่จะเป็น View Controller แบบไหนก็ได้ ไม่ว่าจะเป็น UITableView, UICollectionView และ Custom View Controller แบบอื่นๆ
  2. สร้าง UISearchController และส่งไปยัง View Controller ที่แสดงผลลัพธ์ของการค้นหา
  3. UISearchController จะทำการแจ้งเตือนการแสดงผลลัพธ์ผ่าน searchResultsUpdater (โดยที่ View Controller ผลลัพธ์ของการค้นจะต้องเขียน method ของ UISearchResultsUpdating ด้วย) โดยเมื่อมีการเปลี่ยนแปลง keyword ที่ใช้ค้นหา ก็จะทำการกรองผลลัพธ์ผ่าน method ของ UISearchResultsUpdating
ตามเราร่ายมนต์เป็นคำพูดด้านบน เราก็จะได้โค้ดประมาณนี้


จากนั้นก็เขียน Delegate method ของ UISearchResultsUpdating ใน View Controller สำหรับแสดงผลลัพธ์ของการค้นหาเพื่อทำการกรองผลลัพธ์และแสดงในรูปแบบที่ต้องการ


เท่านี้เองครับ :) อาจจะงงๆ สักนิด บอกไว้ก่อนเลยว่า การอ่าน Blog นี้ต้องใช้ความเข้าใจพอสมควรนะครับ เพราะโค้ดแต่ละอันที่ให้ดูไม่สมบูรณ์ด้วยตัวมันเองทั้งสิ้น ซึ่งเป็นความตั้งใจของผมเอง ลองนำไปประยุกต์ใช้กันครับ 

Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

"อีสุกอีใส" ประสบการณ์เมื่อต้องมาเป็นตอนอายุ 22

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android