ความเป็นมาและเรื่องสั้นเกี่ยวกับหัวข้อนี้

ในฐานะผู้เริ่มต้นในการเรียนรู้การพัฒนาแอพ iOS เราต้องรู้หรือเรียนรู้เกี่ยวกับการสร้างมุมมองโดยใช้สตอรี่บอร์ดและเค้าโครงอัตโนมัติ ครั้งแรกที่ฉันเรียนรู้เกี่ยวกับวิธีสร้างแอปพลิเคชัน iOS ฉันได้เรียนรู้การใช้กระดานเรื่องราว รวมถึงการตั้งค่าเค้าโครงสำหรับส่วนประกอบในมุมมอง อย่างไรก็ตาม คุณต้องรู้ว่าการใช้สตอรีบอร์ดนั้นไม่ได้ผลมากนักหากนำไปใช้ในโครงการขนาดใหญ่ โดยเฉพาะอย่างยิ่งหากต้องทำงานเป็นทีม การใช้สตอรีบอร์ดจะทำให้เรารวมและแก้ไขข้อขัดแย้งเมื่อทำงานร่วมกันได้ยาก นำทางยาก รีแฟคเตอร์โค้ดได้ยาก และอื่นๆ อีกมากมาย

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

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

ด้วยเหตุนี้ ฉันต้องการแบ่งปันวิธีการดำเนินการดังกล่าวโดยอธิบายผ่านการดำเนินการที่ฉันได้ทำในโครงการของทีม

เกี่ยวกับโครงการของทีมของฉัน

นี่คือแอปที่ฉันและทีมสร้างขึ้นชื่อว่า “Healo”
Healo เป็นแอพแชทบน iOS แบบไม่ระบุตัวตนที่เชื่อมโยงผู้คนที่กำลังพยายามรักษาบาดแผลจากพ่อแม่ (เรียกว่าเป็นผู้แสวงหา) กับคนที่สามารถฟังเรื่องราวที่พวกเขาแบ่งปันและเตือนพวกเขาให้มีแรงจูงใจในการเลี้ยงดูตนเอง (เรียกว่าเป็นผู้ฟัง ).

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

จริงๆ แล้วเราต้องสร้างหน้าการประเมินเพียงหน้าเดียว แต่เนื้อหาป้ายกำกับในหน้านั้นจะแสดงข้อความที่หลากหลายและแตกต่างกันไปตามหมายเลขคำถาม คำอธิบายและคำถามนี้นำมาจากฐานข้อมูลและไม่ได้เขียนและจัดเก็บไว้ในโครงการ Xcode โดยตรง ดังนั้นแน่นอนว่าเนื้อหาของข้อความและจำนวนคำก็จะแตกต่างกันไปด้วย

จริงๆ แล้ว เราสามารถทำให้รูปลักษณ์ของเราเรียบร้อยได้โดยไม่ต้องตั้งค่าบางอย่างในมุมมอง เราสามารถทำได้โดยตั้งค่าบนข้อมูลข้อความที่เราดึงมาจากฐานข้อมูล โดยเพิ่ม \n สำหรับข้อความที่ต้องขึ้นบรรทัดใหม่ เช่น “สวัสดี \nฉันชอบการเขียนโปรแกรม” แต่นั่นไม่สะดวกอย่างยิ่งหากมีข้อความจำนวนมากที่ต้องใช้การเพิ่มเติมเหล่านี้ และเราต้องทำด้วยตนเองเสมอ

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

การดำเนินการในโครงการ

หากต้องการใช้ไลบรารี SnapKit ก่อนที่เราจะเริ่มทำงานในโปรเจ็กต์ ตรวจสอบให้แน่ใจว่าเราได้ติดตั้ง CocoaPods แล้ว ( นี่คือคำแนะนำในการติดตั้ง CocoaPods )

หลังจากที่เราติดตั้ง CocoaPod แล้ว ต่อไปนี้เป็นขั้นตอนในการติดตั้ง SnapKit:
1. เราต้องไปที่โฟลเดอร์โปรเจ็กต์ Xcode และเปิดเทอร์มินัลจากที่นั่น (คลิกขวา + เลือก “เทอร์มินัลใหม่ที่โฟลเดอร์”)
2. เมื่อเทอร์มินัลเปิดขึ้น เราพิมพ์ “pod init” และจะสร้างไฟล์ pod ใหม่ในโฟลเดอร์ของเรา

3. เปิด Podfile นั้นแล้วพิมพ์สิ่งนี้:

จากนั้นบันทึก Podfile

4. กลับไปที่เทอร์มินัลแล้วพิมพ์ “pod install” หากไม่มีข้อผิดพลาด แสดงว่าติดตั้ง SnapKit สำเร็จแล้ว

5. เปิดไฟล์ Xcworkspace และเริ่มเขียนโค้ดที่นั่น

คุณสามารถอ่านคำอธิบายเพิ่มเติมเกี่ยวกับการติดตั้ง SnapKit ได้ที่นี่

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

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

ประการที่สองเราเพียงแค่ต้องประกาศป้ายกำกับของเราภายในคลาสของตัวควบคุมมุมมองของเรา (สำหรับโปรเจกต์นี้ ฉันยังคงสร้างมุมมองภายในตัวควบคุมมุมมอง และไม่ได้แยกไฟล์สำหรับแต่ละมุมมองโดยเฉพาะ) ในระหว่างการประกาศฉลาก สิ่งที่สำคัญที่สุดที่คุณไม่ควรลืมคือการเพิ่มlabel.numberOfLines = 0และlabel.lineBreakMode = .byWordWrapping

สิ่งเหล่านี้มีไว้เพื่ออะไร?

จากสิ่งที่ฉันได้อ่านในเอกสารประกอบของ Apple นี่คือสิ่งที่ฉันสามารถแบ่งปันได้:

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

โหมดการขึ้นบรรทัดใหม่ใช้เพื่อตัดและตัดข้อความของฉลาก มีบางโหมดที่ใช้ได้ แต่สำหรับโหมดที่ใช้บ่อยที่สุดคือ NSLineBreakMode.byWordWrapping ถ้าเราใช้โหมดนี้จะทำให้คำถัดไปถูกตัด/ย้ายขึ้นบรรทัดใหม่ ถ้าคำไม่พอดี 1 บรรทัด

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับสิ่งนี้ได้ในเอกสารสำหรับนักพัฒนาของ Apple: คำอธิบายจำนวนบรรทัด & คำอธิบายโหมดการแบ่งบรรทัด

ต่อไป เราสามารถสร้าง 3 ฟังก์ชัน ได้แก่ setupData, setupView และ setupLayout นี่คือสิ่งที่อยู่ภายในของแต่ละฟังก์ชัน (ฉันไม่ได้แสดงอย่างละเอียด แค่แสดงสิ่งที่เกี่ยวข้อง):

1. ฟังก์ชัน setupData:

2. ฟังก์ชั่น setupView:

ภายในฟังก์ชันนี้ เราสามารถตั้งค่าสีพื้นหลังของมุมมอง และเราต้องเพิ่มป้ายคำอธิบายของเราในมุมมองเพื่อให้แน่ใจว่าจะปรากฏบนมุมมองของเรา

3. ฟังก์ชัน setupLayout:

ภายในฟังก์ชั่นนี้ เราสามารถกำหนด Layout ของฉลากให้ฉลากอยู่ในตำแหน่งที่เหมาะสม (ตามที่เราต้องการ)

ต่อไปนี้คือวิธีตั้งค่าเค้าโครงโดยใช้ SnapKit:
1. พิมพ์ชื่อส่วนประกอบที่เราต้องการตั้งค่าเค้าโครงให้ ในกรณีนี้ ฉันต้องการวางเลย์เอาต์ในหัวข้อDesc label ของฉัน นี่คือรหัส:

}

2. เขียนข้อจำกัดทั้งหมดที่เราต้องการ ในกรณีนี้ ฉันต้องการทำให้ตำแหน่งป้ายกำกับ topicDesc อยู่ด้านล่างชื่อหัวข้อ (โดยมีระยะห่าง 21 พิกเซลจากชื่อหัวข้อด้านล่าง) นี่คือรหัส:

topicDesc.snp.makeConstraints { ทำใน
make.top.equalTo(topicTitle.snp.bottom).offset(21)
}

ฉันต้องการทำให้ตำแหน่งป้ายกำกับ topicDesc มีระยะห่าง 27 พิกเซลจากทางซ้ายและทางขวาของ superview นี่คือรหัส:

topicDesc.snp.makeConstraints { ทำใน
make.top.equalTo(topicTitle.snp.bottom).offset(21)
make.left.equalToSuperview().offset(27)
make.right.equalToSuperview().offset(-27)
}

เคล็ดลับเพิ่มเติมในการใช้ SnapKit:

ค่าออฟเซ็ตต้อง > 0 สำหรับการเติมด้านบนและด้านซ้าย / นำหน้า
ค่าออฟเซ็ตต้อง < 0 สำหรับการเติมด้านล่างและด้านขวา / ต่อท้าย

เราสามารถใช้สิ่งที่แทรกเป็นโค้ดในแถวเดียวได้หากระยะห่างเท่ากัน เช่น
topicDesc.snp.makeConstraints { make in
make.left.right.equalToSuperview().inset(27)
}

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

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

นอกจากนี้ หากคุณสงสัยและต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับโครงการของทีมฉัน (Healo) คุณสามารถทดสอบแอปของเราได้ที่ Testflight ( คลิกที่นี่เพื่อทดสอบแอปของเรา )

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

© 2022 เอลวิน่า จาเซีย. สงวนลิขสิทธิ์.