Home / Developer  / การเขียน Widget บน iOS8 ด้วยภาษา Swift แบบง่าย

การเขียน Widget บน iOS8 ด้วยภาษา Swift แบบง่าย

หน้าจอสบายๆ ของ Widget เรา

บทเรียนการเขียน  Widget บน iOS8 สำหรับผู้เริ่มต้นด้วยภาษา Swift แบบง่ายเหมาะกับการสร้าง UI ในหน้าจอ Lock Screen หรือส่วนที่เราต้อง Pull Down ลงมาจากตำแหน่งบนสุดของหน้าจอ

ส่วนมาก หน้าจอของ Widget นั้นเราจะไม่เน้นการออกแบบที่ซับซ้อน UI ของส่วนนี้จะต้องเป็นอะไรที่ อ่านง่าย เข้าใจง่าย เช่นพวก Stock หุ้น หรือ Calendar เป็นต้น ดังนั้น Widget จึงต้องเป็นอะไรที่ใช้ง่าย และต้องคำนึงถึงฟังก์ชันของมันนั่นคือการ “เตือน” หรือ “แจ้ง” นั่นเอง

Widget นั้นก็ไม่ใช่อะไรที่จะพัฒนายากเย็นหรอกครับ บทเรียนนี้จึงนำเสนอวิธีการสร้าง Widget เกี่ยวกับ แจ้งเวลา หรือเตือนเวลามาให้รู้ว่ามันทำงานง่าย

เปิด XCode ขึ้นมา

เปิด Xcode 6.0.1 ขึ้นมา

เปิด Xcode 6.0.1 ขึ้นมา

สร้าง New Project ขึ้นมาเป็น Single View Application ครับ เลอกเป็นภาษา Swift ในการพัฒนา

เปิด Single View Application

เปิด Single View Application

ตั้งชื่อ เลือก Swift

ตั้งชื่อ เลือก Swift

เมื่อพร้อมแล้วให้ไปที่ File > New > Target อีกรอบ

สร้าง Target ใหม่ขึ้นมา

สร้าง Target ใหม่ขึ้นมา

เลือก Template ของ Application Extension เป็น Today Extension ครับ

ที่อื่นเค้าเน้น Keyboard ของเราเน้นไร้สาระ

ที่อื่นเค้าเน้น Keyboard ของเราเน้นไร้สาระ

ตั้งชื่อให้สอดคล้องกับ แอพพลิเคชันของเราสักหน่อย

ตั้งชื่อให้แตกต่างกันเล็กน้อย

ตั้งชื่อให้แตกต่างกันเล็กน้อย

ยืนยันการสร้าง

ยืนยันการสร้าง

เราจะได้ Extension เพิ่มมาใน Project ของเราพร้อมไฟล์ MainStoryInterface.StoryBoard และ Swift File

ได้ไฟล์ Target มาและ

ได้ไฟล์ Target มาและ

เปิด MainStoryInterface.StoryBoard ขึ้นมาให้เคลียร์ หรือลบข้อความ Hello world ออกไปเลยครับไม่ใช้และ

ลบ Hello World ออกไป

ลบ Hello World ออกไป

ทำการปรับความสูงตามใจชอบครับผ่าน Inspector ด้านข้าง

ปรับขนาดความสูงหน่อย

ปรับขนาดความสูงหน่อย

ตัวอย่างแอพพลิเคชัน Widget นี้ผมจะทำ แอพเตือนว่าถูกหวยหรือเปล่าง่ายๆ ก็ใช้ UILabel มาวางตามรูปแบบที่ต้องการ แล้วทำการ Link ตัว UILabel ไปสร้าง IBOutlet ของ TodayViewController.swift

สร้าง iBOutlet

สร้าง iBOutlet

ผมสร้าง UI ตามนี้

วางๆ ไปเถอะ

วางๆ ไปเถอะ

ส่วนของ Code ที่สร้าง IBoutlet คือ

ทำการเซ็ตค่า CGSizeMake ให้พอดีกับหน้าจอ ใน viewDidLoad() สักหน่อย

เขียน Function เพิ่มขึ้นมาเพื่อเรียกให้ UILabel ของเราแสดงค่า ก็เป็นฟังก์ชันง่าย สามารถสร้างตัวแปร หรือดึงฐานข้อมูลได้ตามที่เราต้องการครับ ในตัวอย่างผมก็ใส่ Static Value ตามนี้

กลับไปที่ viewDidLoad() เพิ่มการเรียกทำงานของ function showFuckinDay() ลงไป

ภาพรวมของ Code ใน TodayViewController.Swift จะต้องเป็นดังนี้ครับ

ทดสอบให้ลอง Run ตัวแอพพลิเคชัน และตัว Widget ของเราได้เลยครับ วิธีใช้คือ Pull Down สว่นบนหน้าจอลงมา แล้วแตะที่ชื่อ LuckyWidgetiOS เลยครับ

ทำการ Pull down widget ลงมา

ทำการ Pull down widget ลงมา

ผลลัพธ์ที่ได้ ก็ตามที่เขียนนั่นแหละครับ คงไม่มีอะไรยากหรอกมั้ง?

หน้าจอสบายๆ ของ Widget เรา

หน้าจอสบายๆ ของ Widget เรา

ดาวน์โหลด Source Code ไปศึกษาได้ที่ http://www.daydev.com/download/LuckyWidget.zip

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: