• • Storyboarding is a feature built into XCode that allows both the various screens that comprise an iOS application and the navigation path through those screens to be visually assembled.
  • Using the Interface Builder component of XCode, the developer simply drags and drops view and navigation controllers onto a canvas and designs the user interface of each view in the normal manner.
  • The developer then drags lines to link individual trigger controls (such as a button) to the corresponding view controllers that are to be displayed when the control is selected by the user.
  • Having designed both the screens (referred to in the context of storyboarding as scenes) and specified the transitions between scenes (referred to as segues) XCode generates all the code necessary to implement the defined behavior in the completed application.
  • The style of transition for each segue (page fold, cross dissolve etc.) may also be defined within Interface Builder.
  • Further, segues may also be triggered programmatically in situations where behavior cannot be defined graphically using Interface Builder.

Example Storyboards -->> top

• Apple provides dozens of frameworks for iOS (and their other operating systems as well such as macOS, watchOS, and tvOS). By simply using Apple’s frameworks, you can accomplish common tasks by writing little code of your own. Some of Apple’s available frameworks include
  
  • UIKit – iOS user interface and touch screen support
  • ARKit – Augmented reality features
  • Core Animation – Displays animation
  • GameKit – Creates multiplayer interactive apps
  • Contacts – Accesses the Contacts data on an iOS device
  • SiriKit – Allows the use of voice commands through Siri
  • AVKit – Allows playing of audio and video files
  • MediaLibrary – Allows access to images, audio, and video stored on an iOS device
  • CallKit – Provides voice calling features

• View Controller, Scene and Segue

• Single View

• Interface Builder Objects (Library Objects)

• App1: Single View Temp Convertor
  1. Create Single View App, name: “TempCnv”

• 2. Layout Storyboards, set constraints

• 3. Connect Action and Outlet

• 4. Add code to Action

• 5. Run App

• iOS Application Life Cycle

• Views, Windows and the View Hierarchy

• Sub View and View Controller

• App2: Single View Multi Scene Segue
  
  1. Open File->New->Project… 2. Create Single View App, name: “Segue”, Interface: Storyboard. We will have a default ViewController UI and a ViewController.swift file.

• 3. Add another ViewController and another swift file name: “Scene2ViewController.swift” and layout the storyboards

• 4. Control drag from button in Scene1 into area in Scene2 to create a modal segue and control drag from button in Scene2 into Exit icon of Scene2 ViewController to create a return segue.
  5. Connect swift file “Scene2ViewController.swift” to a second view controller, usually one view controller, one swift file.

• 6. Create outlets for both labels

• 7. Connect scene1Label to outlet in ViewController

• 8. Connect scene2Label to outlet Scene2ViewController

• 9. Create prepare for segue to passing data between scenes, when transition from scene1 into scene2, send text label to scene2 and vice versa.

• 10. Run app.

• 
  โปรแกรมสร้างเครื่องคิดเลข
  
  เรื่องที่จะเรียนรู้
  • Xcode
  • Storyboard
  • ViewController
  • Button
  • Label
  • Attributes
  • Constraints
  • Action
  • Outlet
  

• 1. เปิดโปรแกรม Xcode แล้วเลือก "Create a new Xcode project"
  2. เลือกชนิดโปรแกรมเป็น "Single View Application" กด Next

• 3. ตั้งชื่อ MyCalculator หรือชื่อตามต้องการ ใส่ชื่อบริษัทและ ชื่อบันเดิล Organization Identifier เพื่อใช้เป็นชื่อแอปสำหรับใช้งานบนแอปสโตร์ ซึ่งจะไม่ซ้ำกันกับชื่ออื่นๆ ปกติจะใช้เป็นชื่อโดเมนย้อนกลับตามรูป และเลือกภาษาเป็น Swift แล้วกด Next

• 4. เลือกโฟลเดอร์สำหรับโปรแกรม ตามรูป แล้วกด Create

• 5. ในหน้าต่าง Project Navigator กดเลือก Main.storyboard

• 6. ออกแบบหน้าจอ storyboard โดยเลือกอุปกรณ์สำหรับแสดงผลเป็น iPhone 8 Plus และกดที่ทูลบาร์ Library (รูปเครื่องหมาย +) แล้วดึงปุ่ม Button (หรือค้นหาโดยพิมพ์ Button) มาวางบน storyboard

• 7. กดเลือก Size Inspector แล้วกำหนดขนาดของปุ่มเป็น 80x80

• 8. กดเลือก Attribute Inspector แล้วเปลี่ยนชื่อบนปุ่มเป็นเลข 1

• 9. คัดลอกปุ่มโดยกด Alt ค้างไว้ แล้วกดเลือกปุ่ม แล้วดึงเพื่อคัดลอก ให้ได้ 4 ปุ่ม จากนั้น เลือกทั้ง 4 ปุ่ม แล้วคัดลอกเป็น 5 แถว 4 คอลัม ทั้งหมด 20 ปุ่ม

• 10. กด Attribute Inspector เปลี่ยนชื่อปุ่ม ให้เหมือนปุ่มบนเครื่องคิดเลข ปรับฟอนต์เป็น Helvetica 30.0 และเปลี่ยนสีพื้นหลัง

• 11. ดึง Label มาวางด้านบนปุ่ม สำหรับแสดงตัวเลขที่กด และผลลัพธ์ เปลี่ยนสีพื้นหลังเป็นสีดำ อักษรสีขาว ปรับฟอนต์เป็น Helvetica 40.0

• 12. กด Attributes inspector เปลี่ยนค่า tag ของปุ่มตัวเลขให้มีค่าเหมือนเลขปุ่ม

• 13. เปลี่ยนค่า tag ของปุ่ม C เป็น 10 เครื่องหมาย / เป็น 11, เครื่องหมาย * เป็น 12, เครื่องหมาย – เป็น 13, เครื่องหมาย + เป็น 14, และเครื่องหมาย = เป็น 15

• 14. กำหนด Constraints ให้กับปุ่ม และเลเบล บนหน้าจอ เลือกเมนู Editor -> Resolve Auto Layout Issues -> Reset to Suggested Constraints จะปรากฏเส้นที่กำหนดขอบเขต และระยะในการวางปุ่มและเลเบล

• 15. เปิด Assistant Editor เพื่อแสดงหน้าต่างสำหรับเขียนโปรแกรม เลือก Assistant และเลือก Layout ให้แสดงด้านขวา

• 16. สร้าง Action หรือ function ให้กับแต่ละปุ่ม โดยกด control ค้างไว้ แล้วกดเมาส์ที่ปุ่ม 0 แล้วลากไปวางบน view controller ต่อจากชื่อคลาส จะมีหน้าต่าง popup แสดงขึ้นมาให้เราเชื่อม function เข้ากับปุ่มกด โดยเปลี่ยน connection เป็น 'action,' type เป็น 'UIButton,' และ event เป็น 'Touch Up Inside,' arguments เป็น 'Sender,' และ name เป็น 'numbers' ซึ่งชื่อฟังก์ชัน numbers เราสามารถเปลี่ยนเป็นชื่อตามที่เราต้องการได้ จากนั้นกด Connect จะมีสัญลักษณ์วงกลมทึบอยู่ในวงกลมโปร่งแทนหมายเลขบรรทัด หมายถึงบรรทัดนี้คือฟังก์ชันที่เชื่อมกับปุ่มกด

• 17. ทำแบบเดียวกันกันปุ่มตัวเลขที่เหลือทั้งหมด โดยกด control ค้างไว้ แล้วกดเมาส์ที่ปุ่ม 1 แล้วลากไปวางบนฟังก์ชัน numbers จะมีไฮไลท์เป็นสี่เหลียมครอบฟังก์ชันที่เลือก ทำซ้ำตัวเลข 2 ถึง 9 เมื่อทำครบแล้ว เอาเมาส์ไปวางไว้บนวงกลมที่เชื่อมฟังก์ชันกับปุ่ม วงกลมทึบจะเปลี่ยนเป็น + หมายถึงมีหลายปุ่มใช้ฟังก์ชันเดียวกัน และทุกปุ่มจะไฮไลท์

• 18. กด control ค้างไว้ กดเมาส์บนเลเบลที่ใช้แสดงตัวเลข แล้วดึงไปวางบน view controller ด้านบนฟังก์ชัน numbers เพื่อสร้างตัวแปรในโปรแกรมที่เชื่อมกับกับเลเบล ตัวแปรแบบนี้เราเรียกว่า Outlet ตั้งชื่อว่า result แล้วกด Connect

• 19. สร้างตัวแปรที่เกี่ยวข้องสำหรับใช้ในการเก็บค่าของตัวเลขที่แสดงบน result เลเบล ต่อจาก result ดังนี้
  var numberOnScreen: Double = 0;
  var performingMath = false;
  var previousNumber: Double = 0;
  var operation = 0;

• 20. เพิ่ม code ใหกับฟังก์ชัน numbers

• 21. สร้าง Action ให้กับปุ่มเครื่องหมาย โดยกด ค้างไว้แล้วกดเมาส์ที่ปุ่มเครื่องหมาย / แล้วดึงไปวางบน view controller ต่อจากฟังกชัน numbers เลือก Connection เป็น Action, Name เป็น command แล้วกด Connect

• 22. ทำซ้ำปุ่มเครื่องหมายที่เหลือทั้งหมด โดยวางไปที่ฟังก์ชัน command

• 23. เพิ่ม code ให้กับฟังก์ชัน command

• 24. รันโปรแกรม เลือก simulator เป็น iPhone 8 Plus แล้วกดปุ่ม run

• 25. กดปุ่ม 5 x 6 = ตามลำดับ จะได้ผลลัพธ์ 30.0

• Workshop
  1. เพิ่มปุ่มฟังก์ชัน %, +/-, Mod, X^2, X^Y, Sqrt, 1/X และ .