iOS DeveloperSwift

เขียนแอป iPhone: การใช้งาน SwiftUI

บทเรียน SwiftUI นี้เราจะได้เรียนรู้วิธีการจัดวาง UI โดยการประกาศและแก้ไขมุมมองและวิธีการใช้ State variables เพื่ออัปเดต UI ของคุณด้วย XCode

บทเรียน SwiftUI นี้เราจะได้เรียนรู้วิธีการจัดวาง UI โดยการประกาศและแก้ไขมุมมองและวิธีการใช้ State variables เพื่ออัปเดต UI ของคุณด้วย XCode

ในเวอร์ชันหลังของ XCode เวอร์ 11.3 มาจะเริ่มใช้ SwiftUI คละไปกับ UIKit ถามว่ายากไหมถ้าสาย dev ที่ใช้ UIKit มานานแล้วมาเจอการพัฒนา UI ด้วย SwiftUI มีความงุนงงพอประมาณแน่นอน แต่ถ้าใครที่เป็นสาย Flutter ของ Google อยู่แล้ว จะรู้ว่า SwiftUI คือการได้รับแรงบันดาลใจจาก Dart และ Flutter ดังนั้นใครที่เป็นสาย Dart ก็จะสบายๆ ชิลๆ

SwiftUI คุณต้องทิ้ง Interface Builder (IB) และ StoryBoard ไปเลย ฮาว ทู ทิ้ง! นั่นแหละ ไม่ต้องพูดเยอะมาลองดูบทเรียนกันดีกว่ารอบนี้อัพเด็ต XCode เป็นเวอร์ชัน 11.3 ซะ

เปิด XCode 11.3 ขึ้นมาสร้าง New Xcode project (กด Shift-Command-N), เลือก iOS ▸ Single View App ตั้งชื่อซะ

พอเริ่มสร้าง Project แล้วลองสังเกตใน Project Navigator ของเราแต่ก่อนจะประกอบไปด้วยไฟล์ AppDelegate.swift ตอนนี้แบ่งออกเป็น AppDelegate.swift และ SceneDelegate.swift และใน code จะเห็นว่าใน SceneDelegate จะมีคำสั่ง window

ซึ่งถ้าดูดีๆ SceneDelegate นั้นไม่ได้เกี่ยวอะไรกับ SwiftUI เลย จะมีแค่บรรทัดนี้บรรทัดเดียวที่เกี่ยวข้อง:

UIHostingController สร้างตัว ViewController สำหรับควบคุมมุมมองของ SwiftUI ใน ContentView

UIHostingController ช่วยให้คุณสามารถรวม SwiftUI Views เข้ากับแอปเราแค่เพิ่ม Host หรือตัวดูแลควบคุม View Controller ลงใน StoryBoard ของคุณและสร้าง Segue (ตัวต่อขยาย) จาก UIViewController ดังนั้นถ้าเราลาก segue ไปยัง ViewController มันจะสร้าง IBSegueAction ผ่าน Hosting ของ rootView นั่นคือการทำงานหลักๆของ SwiftUI

ให้เราไปเปิดที่ ContentView ในไฟล์ ContentView.swift

นี่คือ SwiftUI ที่ประกาศว่าเนื้อหาของ ContentView มี Text ที่แสดงคำว่า Hello Looser ผ่านโครงสร้าง struct ที่สอดคล้องใน Protocol ของ View

ด้านล่างของโครงสร้าง struct ของ ContentView, เราจะพบกับ struct ของ ContentView_Previews ทำหน้าที่สร้าง view ที่มีตัวอย่าง instance จาก struct ContentView ข้างบน

ทดสอบก็จะเห็นว่า แอปเราแสดงผลว่า “Hello Looser!” ดังนั้นเราลองเปลี่ยนกันหน่อยไปแก้ไข ContentViewเป็น:

แล้วกดที่ Resume ที่หน้า Preview

จะแสดงผลหน้าจอ iPhone ดังนี้:

ต่อมากดปุ่ม Command แล้วคลิกที่ Text view in the preview, and select Embed in HStack:

Code ใน struct ContentView ส่วนของ View จะเปลี่ยนจาก

เป็น

มีโจทย์ก็ต้องมี Choice เราจะทำการเพิ่ม Button เข้าไปต่อจาก Text() ใน HStack เลย

ดูใน Live Preview จะเป็นแบบนี้:

ตกทั้ง องค์ประกอบศิลป์ และ ทฤษฏี UX/UI เลยดังนั้นเราต้องปรับส่วนของ struct ตัว ContentView ใหม่เป็น:

แต่ง Style ส่วนของ Text และ Button กันหน่อยให้ดูสวยๆ ใช้หลักทฤษฏีของ Bootstrap css เลย

ใส่อะไรมากมายก็แค่ Font Size, Font Color, Padding, BackGround เออ แค่นั้นก็พอละมาดูหน้าตาแอปกัน:

พิจารณาถ้าเรา Test หรือ Run แอปของเราถ้าเราคลิกจะมีข้อความ Debug Windows ตามโครงสร้าง:

เมื่อ action: กดดูจะเกิดการ print ขึ้นมา ส่วนหลังคือ Style ของมันนั่นเอง

บทความนี้จะมา Basic เพียวๆ อย่างเดียวก็ยังไงๆ นะเพิ่ม Code หน่อยดีกว่ามี Basic ให้ไปนั่งเรียนนั่งจำจากผู้เชี่ยวชาญมาเยอะละ เรามา Implement Method กันเลย:

ประกาศ Global Variable ไว้ใน ContentView คือ:

แก้ action ของปุ่ม Button แรกเป็น:

ให้คลิกแล้วเปิดใช้งาน isAlert กำหนดเป็น true และ ตั้งค่าตัวแปร Clicked เป็น 1 คือเลือก Choice 1 นั่นแหละ

แก้ action ของปุ่ม Button ที่สองเป็น:

จะให้ Clicked เป็น 2 ถ้าไม่ตกสังคมก็จะรู้ว่า George Washington คือประธานาธิปดีคนแรกของ สหรัฐฯ ประเทศที่กำลังจะรบกับอิร่าน ในปี 2020

ไปสร้างฟังก์ชันใหม่ไว้ตรวจสอบคำตอบชื่อ CheckAnswer รับค่า int ตัวเดียว แล้ว return ว่าถูกหรือไม่ถูกเป็น String กลับมา

ไปเพิ่ม Alert มาใช้งานกันดีกว่า ไปเขียนใต้ Text ของโจทย์เรานั่นแหละ:

ตรง $isAlert ไว้เช็คว่าถ้า true ก็เด้ง Alert Box เลยส่วน Message อ่ะเรียก \(CheckAnswer(id:Clicked) ส่งค่า Clicked ไปยังฟังก์ชันที่เราเขียนไว้

ดังนั้นนี่คือภาพรวมของ ContentView.swift

มาทดสอบกันหน่อยคลิกปุ่มแรก หรือปุ่มหลัง:

สรุปก็คือ SwiftUI จะ Friendly มากกับสายพัฒนา Dart, Flutter หรือ JS, TS มาก่อน จะบอกว่ามันได้แรงบันดาลใจมาก็ว่าได้เลย ลองไปแกะ Code กันดูนะจ๊ะ!

Tags

Asst. Prof. Banyapon Poolsawas

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

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน