บันทึกการเรียนรู้ซ้ำ iOS ของฉันตอนที่ 1

Nov 29 2022
แนวคิดสำหรับบล็อกนี้คือการแบ่งปันสิ่งที่ฉันได้เรียนรู้กับคุณในรายละเอียดมากที่สุดเท่าที่จะเป็นไปได้ และกระชับ/ตอบคำถามใด ๆ ที่ฉันมีเมื่อเรียนรู้จากบทช่วยสอน "ศูนย์ถึงฮีโร่" ในโพสต์นี้ ฉันจะเริ่มต้นด้วยสิ่งที่เรียบง่ายมาก ซึ่งนักพัฒนาที่มีประสบการณ์อาจใช้เวลา 5 นาทีหรือน้อยกว่านั้นในการสร้าง

แนวคิดสำหรับบล็อกนี้คือการแบ่งปันสิ่งที่ฉันได้เรียนรู้กับคุณในรายละเอียดมากที่สุดเท่าที่จะเป็นไปได้ และกระชับ/ตอบคำถามใด ๆ ที่ฉันมีเมื่อเรียนรู้จากบทช่วยสอน "ศูนย์ถึงฮีโร่"

ในโพสต์นี้ ฉันจะเริ่มต้นด้วยสิ่งที่เรียบง่ายมาก ซึ่งนักพัฒนาที่มีประสบการณ์อาจใช้เวลา 5 นาทีหรือน้อยกว่านั้นในการสร้าง แต่เดี๋ยวก่อนเราทุกคนเริ่มต้นจากที่ไหนสักแห่งทำไมไม่มาที่นี่

นี่คือตัวอย่างของสิ่งที่เราจะทำที่นี่:

เช่นเดียวกับประเพณีของภาษาการเขียนโปรแกรม เราจะสร้างแอป "hello world" ที่เมื่อผู้ใช้แตะปุ่ม ข้อความด้านบนจะแสดงข้อความ "hello world" ในภาษาต่างๆ แบบสุ่ม

เป้าหมายของแอปนี้คือการเข้าใจพื้นฐานของ:

  1. UILable, UIButton และ UIImageView ของ UIKit
  2. การประกาศตัวแปร Swift และ Array
  3. IBOutlets และ IBActions

เริ่มกันเลย!

ก่อนอื่นให้เปิด Xcode ของคุณแล้วสร้างแอพใหม่ดังนี้:

สร้างแอป iOS ใหม่

นี่คือส่วนสำคัญ: เลือกการแตะ iOS แทนการแตะหลายแพลตฟอร์ม มิเช่นนั้นคุณจะไม่สามารถเลือกสตอรี่บอร์ดได้ในภายหลังและต้องทำงานร่วมกับ SwiftUI

ภายใต้ Product Name ให้พิมพ์ "Hello World App" หรือชื่อแฟนซีอื่นๆ ที่คุณอาจต้องการเรียก มันขึ้นอยู่กับความคิดสร้างสรรค์ของคุณจริงๆ!

ทีนี้ตัวระบุองค์กรคืออะไร

ตัวระบุองค์กรคือชื่อเฉพาะสำหรับแอพของคุณเพื่อให้ผู้อื่นค้นหาแอพของคุณใน App Store ฉันขอแนะนำให้คุณพิมพ์นามสกุลของคุณแล้วชื่อจริงที่นี่ t ทำให้โครงการนี้ง่ายขึ้น

ดังนั้น Bundle Identifier ของคุณ (อยู่ใต้ Organization Identifier โดยตรง) จะมีลักษณะดังนี้:

doejohn.Hello-World-App

Xcode รุ่นเก่าบางรุ่นอาจแสดงcom.doejohn.Hello-World-App สิ่งนี้เรียกว่าชื่อโดเมนย้อนกลับสำหรับข้อมูลของคุณเท่านั้น

ตอนนี้คลิกถัดไปและบันทึกโครงการของคุณในที่ที่คุณต้องการแล้วคลิกสร้างและไปที่ส่วนที่สนุก!

เมื่อเสร็จแล้ว Xcode ของคุณควรมีลักษณะดังนี้:

เรามาพูดถึงสิ่งที่เรากำลังเห็นที่นี่โดยสังเขป:

  • ส่วนสีส้มคือด้านเนวิเกเตอร์ของคุณซึ่งกำลังแสดงเนวิเกเตอร์โครงการของคุณ ที่นี่คุณจะเห็นว่าคุณมีโครงการ Hello World ที่ด้านบนโดยมีสามโฟลเดอร์อยู่ในนั้น: Hello World , Hello WorldTest s และHello WorldUITests โฟลเดอร์ Hello World คือ ที่ที่เราจะทำการเข้ารหัสและแก้ไขทั้งหมดของเรา Hello WorldTestและHello WorldUITestsถูกสร้างขึ้นโดยอัตโนมัติเมื่อเราออกจากกล่อง กาเครื่องหมาย รวมการทดสอบเมื่อเราสร้างโครงการของเราในระหว่างขั้นตอนการสร้างชื่อ ฉันจะพูดถึงทั้งสองโฟลเดอร์ในโพสต์อื่น โปรดติดตาม!
  • ส่วนสีเขียวคือส่วนที่เกี่ยวกับข้อมูลทั่วไปและการแก้ไขแอปของเรา ภายใต้การแตะทั่วไปที่นี่ เราจะเห็นว่าเรามี ชื่อที่ แสดง (ชื่อแอปของเรา), ตัวระบุบันเดิล (สิ่งที่เราได้พูดถึงก่อนหน้านี้เกี่ยวกับชื่อโดเมนย้อนกลับ), เวอร์ชัน (เช่นเดียวกับเกมที่เรามีเวอร์ชัน 1.0, 1.1, 2.x... ฯลฯ )
  • ข้อมูลการพัฒนาส่วนสีม่วงคือที่ที่ฉันต้องการใช้เวลาอีกสักหน่อยในการพูดคุยที่นี่ เริ่มจากบนลงล่างกันที่นี่
  • ที่ด้านบนสุดเรามี iOS 15.2 ที่มีการตรวจสอบ iPhone และ iPad แต่ Mac Catalyst นี่เป็นเพราะเมื่อเราสร้างโครงการ เราเลือก "iOS" ไม่ใช่ "หลายแพลตฟอร์ม" ด้วยเหตุนี้จึงบอกว่า "เราต้องการให้แอปของเราทำงานบนอุปกรณ์ iOS เท่านั้น" ส่วน iOS 15.2 กำลังบอกว่า "เวอร์ชัน iOS ขั้นต่ำในการเรียกใช้แอปของเรา" คุณสามารถคลิกที่มันและเลือก iOS เวอร์ชันอื่นที่คุณต้องการให้ผู้ใช้ใช้งานเป็นอย่างน้อย ตรวจสอบว่าฟังก์ชันการทำงานที่คุณต้องการเรียกใช้ได้รับการสนับสนุนในเวอร์ชันขั้นต่ำที่คุณต้องการให้ผู้ใช้ใช้งานหรือไม่ สำหรับแอพนี้คุณน่าจะโอเค การวางแนวอุปกรณ์บอกว่าแอปของคุณทำงานเฉพาะในแนวตั้ง กลับหัว แนวนอนซ้าย หรือแนวนอนขวาอย่างที่คุณจินตนาการได้ เหมือนบางเกมจะอนุญาตให้ผู้เล่นเล่นในแนวที่กำหนดเท่านั้น เดอะแถบสถานะเป็นที่ที่คุณสามารถกำหนดรูปแบบการแสดงผลของแถบสถานะของคุณได้ คุณสามารถเล่นกับมันและดูว่าคุณชอบให้แอปของคุณมีลักษณะอย่างไร สำหรับแอปนี้ เราจะคงทุกอย่างไว้ในการตั้งค่าเริ่มต้นเพื่อให้ทุกอย่างง่ายขึ้น
  • ส่วนสีเหลืองเป็นที่ที่ผู้ตรวจสอบของคุณอยู่ ดังนั้นสิ่งต่างๆ เช่น ชื่อแอป เส้นทางแบบเต็มไปยังไฟล์ ฯลฯ สามารถพบได้ทั้งหมดในส่วนนั้น มันจะมีประโยชน์มากขึ้นเมื่อเราพัฒนาแอพของเราด้วย Storyboard

ตอนนี้ฉันต้องการให้คุณคลิกที่ปุ่มที่ฉันเน้นด้วยสี่เหลี่ยมสีเหลือง สิ่งนี้จะช่วยให้เราแบ่งส่วนตรงกลางของ Xcode ออกเป็นสองด้าน: ด้านหนึ่งสำหรับแสดงไฟล์หลัก และอีกด้านเราจะให้มันแสดงไฟล์ ViewController ของเรา

ทั้งสองด้านแสดงไฟล์ Main Storyboard

หน้าจอของคุณอาจมีลักษณะเช่นนี้ในตอนแรก แต่คุณสามารถคลิกที่ด้านใดด้านหนึ่งที่คุณต้องการเปลี่ยนเพื่อแสดง ViewController และคลิกที่ ViewController ในส่วน Navigator จากนั้นหน้าจอจะเปลี่ยนไป

ผลลัพธ์ที่ต้องการ

หน้าจอของคุณควรมีลักษณะเช่นนี้เมื่อคุณทำเสร็จแล้ว ทีนี้มาดูสั้น ๆ อีกครั้งว่าบรรทัดของโค้ดที่เราเห็นใน ViewController หมายถึงอะไร:

ที่ด้านบนสุด เราเห็นบรรทัดนำเข้า UIKitซึ่งบอกว่า “เฮ้ เราต้องการนำเข้าเฟรมเวิร์ก/ไลบรารีนี้เพื่อใช้ในไฟล์ ViewController นี้!” ในกรณีนี้ เราต้องการทำงานกับ UIKit ดังนั้นเราจึงนำเข้าที่นี่ เราจะนำเข้าเพิ่มเติมในอนาคต เช่น Firebase ของ Google หรือไลบรารีแอนิเมชัน UI ที่คุณต้องการเพิ่ม!

ต่อไป เรามีคลาส ViewController: UIViewController{}ซึ่งบอกว่าเรามีคลาสชื่อViewControllerและสืบทอดมาจากUIViewController การสืบทอดในคลาสหมายความว่าเราซึ่งเป็นคลาสย่อย (ViewController) ต้องการที่จะสามารถใช้เมธอด คุณสมบัติ และคุณสมบัติอื่น ๆ ทั้งหมดจากซูเปอร์คลาส (UIViewController)

ภายใน ViewController Class ของเรา เรามีสิ่งต่อไปนี้:

viewDidLoad()

สิ่งนี้เรียกว่าฟังก์ชัน ฟังก์ชันเฉพาะนี้บอกว่าจะเกิดอะไรขึ้นเมื่อเริ่มโหลดมุมมองนี้ ตัวอย่างเช่น หากเราต้องการให้ตัวแปรStarเป็น 0 เสมอเมื่อโหลดมุมมองนี้ เราจะให้var star = 0ที่นี่

ตอนนี้ฉันต้องการให้คุณดูที่ส่วนตรงกลางของ Xcode ที่แถบด้านบนสุดควรมีเครื่องหมาย + ดังนี้:

คลิกที่สิ่งนั้นแล้วเราจะเห็นรายการวัตถุที่เราสามารถลากและวางลงในกระดานเรื่องราวหลักของเรา

ดังที่คุณเห็นใน Xcode เรามีวัตถุที่กำหนดไว้ล่วงหน้าเหล่านี้พร้อมใช้งานสำหรับเรา ดังนั้น ให้เราลากวัตถุป้ายชื่อและปุ่มเข้าไปในกระดานเรื่องราวหลักของเรา

ดังที่คุณเห็นเมื่อเราวาง Label Object ลงบนสตอรี่บอร์ดของเราเป็นครั้งแรก เราสามารถวางได้ทุกที่ที่เราต้องการ ใหญ่แค่ไหนก็ได้ตามต้องการ ลองขยายฉลากของเราให้กว้างเท่ากับเส้นประสีน้ำเงินเส้นแรกทั้งด้านซ้ายและขวา บรรทัดเหล่านี้คือสิ่งที่ Xcode บอกเราว่า "โซนปลอดภัย" เพื่อให้วัตถุของเรามีอยู่ ให้เราเปลี่ยนข้อความจาก Label เป็น Hello World ในระหว่างนี้โดยดับเบิลคลิกที่ Label Object

ก่อนหน้านั้น ผมอยากให้เราดูส่วนสี่เหลี่ยมสีเหลืองในภาพด้านบน สิ่งนี้เรียกว่าAttribute Inspectorซึ่งเราสามารถเปลี่ยนสิ่งต่างๆ เช่น สีข้อความ ฟอนต์ ขนาดฟอนต์ ฯลฯ สำหรับ Object ที่เราเลือก ที่นี่เราจะเปลี่ยนขนาดตัวอักษรเป็น 50 และข้อความจาก Label เป็น Hello World ดังที่เราเห็นด้านล่าง

ต่อไปเราจะทำสิ่งเดียวกันกับ Button Object เราจะประหยัดเวลาและส่งมอบให้คุณทำ (ที่นี่ไม่ขี้เกียจแน่นอน )

ในที่สุดคุณควรมีบางอย่างที่มีลักษณะเช่นนี้ ตอนนี้เราค่อนข้างปลอดภัยที่จะบอกว่าส่วน UI ของเราเสร็จสมบูรณ์แล้ว! ตบหลังให้ใหญ่เลย

ต่อไปนี้เป็นคำถามใหญ่: แอปที่ยอดเยี่ยมของเรารู้ได้อย่างไรว่าต้องทำอย่างไรเมื่อผู้ใช้แตะที่ปุ่ม หรือเมื่อผู้ใช้แตะปุ่มควรทำอย่างไร? หรือแอพควรทำอย่างไรเมื่อตรวจพบว่าผู้ใช้ของเรากำลังประสบกับวิกฤตที่มีอยู่เช่นเดียวกับผู้เขียน

คำถามสุดท้ายอาจอยู่นอกเหนือขอบเขตของบทช่วยสอนนี้ แต่เดี๋ยวก่อน เราสามารถจัดการกับสองข้อแรกได้อย่างไม่มีปัญหา

Xcode ช่วยเราและทำให้สิ่งนี้ง่ายมาก: ควบคุม + คลิกที่ Obecjt แล้วลากไปที่ไฟล์ ViewController ดังนี้:

ระวังอย่าลากเข้าไปในเมธอด viewDidLoad()

กล่องโต้ตอบจะปรากฏขึ้นเหมือนที่เราเห็นในส่วนสี่เหลี่ยมสีเหลือง และ Xcode จะขอชื่อสำหรับป้ายกำกับนี้จากคุณ เรียกมันว่าhelloWorldText หลักการตั้งชื่อนี้เรียกว่า Camel Casing

ตอนนี้เรามีป้ายกำกับที่เชื่อมต่อกับรหัสของเราแล้ว! เราสามารถบอกให้มันทำการเสนอราคาโดยทางโปรแกรม! มึงวะฮ่าฮ่าฮ่า!

โปรดทราบว่าคุณสามารถดูวงกลมที่เต็มไปด้วยบรรทัดรหัส IBOutlet ได้ที่นั่น หมายความว่าวัตถุนี้เชื่อมต่อกับบางสิ่งในกระดานเรื่องราว

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

ตรวจสอบให้แน่ใจว่าได้เลือกการกระทำภายใต้การเชื่อมต่อ เราสามารถตั้งชื่อว่าHelloWorldActionที่นี่ ในส่วนเหตุการณ์คือที่ที่เรากำหนดว่าจะเกิดอะไรขึ้นเมื่อผู้ใช้ทำบางอย่างที่นี่ ที่นี่เราได้เลือก Touch Up Inside ซึ่งหมายความว่าเมื่อผู้ใช้แตะ (แตะแล้วปล่อย) ที่ปุ่ม

ตอนนี้เราสามารถบอกได้ว่าแอปของเราควรทำอย่างไรเมื่อผู้ใช้แตะแอปโดยทางโปรแกรม! โฮเร่

เอาล่ะ ไปที่ส่วนที่น่าสนใจของแอพของเรากัน มาเพิ่มโค้ดสองบรรทัดใต้ UILabel ของเรา:

var helloTextNumber = 0

var helloTextArray = ["สวัสดีชาวโลก", "Hej Verden!", "Hallo Wereld!", "Ciao mondo!", "Hei Verden!", "你好世界!"]

เรามาคุยกันสักหน่อยว่าตัวแปรสองตัวนี้คืออะไร

helloTextArray คือ Array ที่เราต้องการใช้เลือก "Hello World" ในภาษาอื่นที่นี่ ที่นี่เรามีอาร์เรย์สตริง 6 สตริง (สตริงเป็นเพียงประเภทที่มี “” อยู่ในนั้น) เช่นเดียวกับภาษาอื่น ๆ อาร์เรย์เริ่มต้นด้วย 0 ไม่ใช่ 1! ดังนั้นโปรดใช้ความระมัดระวังเมื่อคุณวนซ้ำ Swift Arrays!

ดังนั้น helloTextArray[0] จะเป็น “hello world”, helloTextArray[3] คือ “Ciao mondo” และ helloTextArray[5] คือ你好世界!

นี่คือลิงค์ไปยังเอกสาร Swift ของ Apple เกี่ยวกับ Array คุณสามารถอ่านข้อมูลเชิงลึกเพิ่มเติมได้ที่นี่:

ดังที่เราได้เห็นข้างต้น ในการรับองค์ประกอบจาก hellTextArray เราต้องบอกหมายเลขที่เราต้องการ (อันแรกเราพูดว่า helloTextArray[0], ที่สอง helloTextArray[1], ที่สาม helloTextArray[2] … ฯลฯ ) แต่เราไม่สามารถพิมพ์แต่ละรายการด้วยตนเองได้ และเราไม่ควรคาดหวังให้ผู้ใช้ป้อนตัวเลขให้เรา (คาดหวังน้อยที่สุดจากผู้ใช้เสมอ หลักการที่ฉันได้เรียนรู้) แล้วเราจะทำอย่างไร

มาแล้ว helloTextNumber helloTextNumber คือตัวแปรจำนวนเต็ม (Int) ที่เราต้องการใช้เป็นตัวยึดตำแหน่งสำหรับองค์ประกอบใดของอาร์เรย์ที่เราต้องการแสดง เราจะมีวิธีสร้าง Integer แบบสุ่มระหว่าง 0 ถึง 5 และใช้ helloTextNumber เพื่อเก็บตัวเลขนั้นไว้ให้เรา ดังนั้นเราจึงสามารถแสดงองค์ประกอบจาก helloTextArray ของเราแบบสุ่ม หากคุณยังสับสนเล็กน้อยเกี่ยวกับส่วนนี้ ไม่ต้องกังวล มันจะกระจ่างขึ้นในส่วนถัดไป

นี่คือรหัสที่ฉันต้องการให้คุณเพิ่ม:

มาดูกันดีกว่าว่าภายในบล็อกโค้ดของ hellowWorldAction ทำอะไรได้บ้าง

ที่นี่เราได้ตั้งค่า helloTextNumber เป็น Int.random(in:0…5) ความหมายของโค้ดบรรทัดนี้คือเราต้องการให้ helloTextNumber ของเราเป็นจำนวนเต็มที่สร้างขึ้นแบบสุ่มตั้งแต่ 0 ถึง 5 รวม (หมายถึงรวม 5)

นี่คือบางสิ่งที่ฉันอยากจะอธิบายเพิ่มเติมอีกเล็กน้อยด้วย เรามาพูดถึงบรรทัดต่อไป

helloWorldText.text = helloTextArray[helloTextNumber]

ใน Swift สัญกรณ์จุดนี้เป็นไปตามกฎของ

ใคร อะไร = มูลค่า

ซึ่งแบ่งออกเป็น:

“ใครบ้างที่ต้องเปลี่ยน”

“จุด”

“สิ่งที่ต้องเปลี่ยนแปลง”

“เท่ากัน”

“สิ่งที่ควรเปลี่ยนเป็น”

ด้วยรหัสของเรา เรากำลังบอกว่า:

เราต้องการให้ข้อความของ helloWorldText (ใคร) (อะไร) เปลี่ยนเป็นอิลิเมนต์ของ helloTextNumber ของ helloTextArray

ดังนั้น เมื่อเราเรียกใช้โค้ดบรรทัดนี้ เราจะเปลี่ยน helloWorldText เพื่อแสดงองค์ประกอบใดก็ตามใน helloWorldTextArray ซึ่งเป็นเมธอด Int.random() จำนวนที่สร้างขึ้นแบบสุ่มที่สร้างขึ้นสำหรับ helloWorldTextNumber ของเรา

ตอนนี้เมื่อเราเรียกใช้โปรแกรมจำลองของเรา ( comnad + r หรือปุ่ม ▶️ บนแถบด้านบนของ Xcode ) เมื่อเราคลิกปุ่มของเรา ข้อความของเราควรเปลี่ยนเมื่อใดก็ตามที่เราแท็บปุ่ม!

กรี๊ด! เราเสร็จสิ้นส่วนการเข้ารหัสของแอปของเราแล้ว!

สิ่งสุดท้าย. พื้นหลังของเราค่อนข้างน่าเกลียด เราต้องการเพิ่มภาพพื้นหลังบางประเภทเพื่อไม่ให้ดูธรรมดา ดังนั้นไปหารูปภาพที่คุณต้องการเพิ่มเป็นพื้นหลังสำหรับแอปของคุณ สำหรับฉัน ฉันจะใช้รูปโลก

ตอนนี้ให้คลิกที่ 'Assests' ใต้โฟลเดอร์ Hello World และคุณควรเห็นสิ่งต่อไปนี้ ลากรูปภาพที่คุณเลือกและวางลงในคอลัมน์ที่มี “AccentColor” และ “Appicon” นี่คือที่ที่ภาพลักษณ์ของเราจะอยู่และถูกเรียกใช้

ตอนนี้ให้กลับไปที่ 'หลัก' และปล่อยวัตถุรูปภาพจากไลบรารีวัตถุ (หากคุณลืมวิธีการทำ ให้เลื่อนขึ้นเพื่อดูว่าเราได้พูดถึงตำแหน่งใดเกี่ยวกับวัตถุป้ายชื่อและปุ่ม) ฉันต้องการให้คุณขยายวัตถุรูปภาพให้ใหญ่จนครอบคลุมทั้งหน้าจอโทรศัพท์ของคุณ ตอนนี้ฉันต้องการให้คุณคลิกที่วัตถุรูปภาพนั้นแล้วไปที่ตัวตรวจสอบ (แผงด้านขวามือ) แล้วมองหาสิ่งนี้:

ใต้มุมมองรูปภาพ ฉันต้องการให้คุณคลิกที่เมนูแบบเลื่อนลงของรูปภาพ และเลือกรูปภาพพื้นหลังที่คุณวางในเนื้อหาก่อนหน้านี้ นี่คือที่ที่เราสามารถกำหนดว่า Image Object ใดควรแสดงโดยไม่ต้องเขียนโค้ดอะไรในนั้น ประณีต! ยิ่งเข้ารหัสน้อยยิ่งดี!

ตอนนี้หน้าจอของคุณอาจมีลักษณะดังนี้:

รอสักครู่… เกิดอะไรขึ้นที่นี่? เกิดอะไรขึ้นกับป้ายกำกับและปุ่มที่เราทำงานอย่างหนักเพื่อสร้าง

สิ่งที่เกิดขึ้นที่นี่เป็นเพียงปัญหาเลเยอร์ ลองนึกภาพเรามีจาน แอปเปิ้ลและส้ม สิ่งที่เราทำคือเราแสดง Apple และ Orange ก่อน จากนั้นจึงวางจานไว้ด้านบนของทั้งสอง ดังนั้นเราจะเห็นเฉพาะส่วนท้าย (ภาพพื้นหลัง) ไม่ใช่ Apple (ฉลาก) หรือ Orange (ปุ่ม) สิ่งที่เราต้องการคือวางจานของเราก่อนจากนั้นจึงวางแอปเปิ้ลและส้มไว้ด้านบน

แล้วเราจะทำอย่างไร? เราเพียงแค่ต้องลบโครงการทั้งหมดของเราและทำใหม่ทั้งหมดหรือไม่

ถ้าคุณต้องการทำเช่นนั้นเพื่อเสริมความแข็งแกร่งให้กับสิ่งที่คุณได้เรียนรู้ที่นี่ คุณยินดีเป็นอย่างยิ่งที่จะทำเช่นนั้น! แต่ Apple ให้วิธีที่ง่ายกว่ามากแก่เราในการทำเช่นนั้น

ที่ด้านซ้ายมือของภาพหน้าจอก่อนหน้า เราเห็น 'ดูฉากควบคุม' ภายใต้นั้นเรามี 'View Controller' และภายใต้นั้นเรามี 'View' ของเรา นี่คือเลเยอร์ของมุมมองปัจจุบันของเราที่มีวัตถุอยู่ในนั้น (ป้ายกำกับ ปุ่ม และรูปภาพ) พร้อมกับค่าเริ่มต้น 'พื้นที่ปลอดภัย' ซึ่งเป็นเส้นประสีน้ำเงินที่เราเห็นเมื่อเราลากวัตถุของเรา

ตอนนี้เพียงแค่ลาก Image Object จากด้านล่างไปทางขวาด้านล่าง 'Safe Area' ดังนี้:

และโวล่า! เราเห็นฉลากและปุ่มของเรา! และเมื่อเราเรียกใช้แอปนี้ในโปรแกรมจำลองของเรา เราควรเห็นทุกอย่างทำงานตามที่ตั้งใจไว้!

ฉันหวังว่าสิ่งนี้จะช่วยให้คุณเริ่มต้นเส้นทางการเรียนรู้ iOS ได้ดี โปรดแสดงความคิดเห็นและปรบมือหากคุณพบว่าสิ่งนี้มีประโยชน์

แต่ฉันจะเขียนแบบฝึกหัดเพิ่มเติมในอนาคตไม่ว่าอะไรจะเกิดขึ้น แย่มากถ้าคุณไม่ชอบฉัน

สันติ ✌