คู่มือสำหรับผู้เริ่มต้นในการพัฒนา iOS ส่วนต่อประสาน - ส่วนที่ 1
Apple เป็นอุตสาหกรรมชั้นนำในโลกมือถือมานานหลายปีด้วย iPhone และ iPad ซีรีย์ แม้จะเป็นโฆษณาที่สามารถสร้างได้ทุกรุ่นอย่างเป็นทางการ แต่ก็ยังมีส่วนแบ่งการตลาดส่วนใหญ่ในแพลตฟอร์มมือถือและนี่อาจเป็นเหตุผลที่ลูกค้าส่วนใหญ่ต้องการให้แอพของพวกเขามีอยู่ในแอปสโตร์ของ Apple จึงกลายเป็นเหตุผลสำหรับนักพัฒนาในการเรียนรู้และสร้างแอพ iPhone.
ข่าวดีก็คือการพัฒนาแอปพลิเคชั่นของ iPhone นั้นไม่ยากอย่างที่คิดและโพสต์นี้มีอยู่ในคู่มือฉบับสมบูรณ์ที่จะนำคุณไปสู่กระบวนการสร้างแอพพลิเคชั่นสำหรับ iPhone.
เราจะพูดคุยถึงเหตุผลขั้นตอนและเครื่องมือสำหรับการพัฒนาแอพและในที่สุดคุณจะทำตามแบบฝึกหัดที่ง่ายในการออกแบบแอปพลิเคชั่น iPhone ขั้นพื้นฐานโดยใช้ Xcode.
ดังนั้นไม่ว่าคุณจะเรียนธุรกิจหรือมีไอเดียแอพที่น่าทึ่งที่อาจทำให้คุณเป็นเศรษฐีเริ่มต้นสร้างแอพ iPhone เครื่องแรกของคุณ!
หมายเหตุ: คุณจะต้องใช้คอมพิวเตอร์ที่มีระบบปฏิบัติการ Macintosh (Mac OS) สำหรับการติดตั้ง Xcode การพัฒนาแอปพลิเคชันและการส่งแอปไม่มีวิธีที่คุณสามารถทำได้บน Windows อย่างถูกกฎหมาย.
ทำไมต้องพัฒนาสำหรับ Apple?
ฉันเห็นคำถามนี้ถามบ่อยดังนั้นฉันต้องการอธิบายว่าทำไมคุณควรสนใจพัฒนา iPhone เช่นเดียวกับที่ฉันได้ระบุไว้ในบทนำตอนนี้ iPhone ถือครองส่วนแบ่งการตลาดส่วนใหญ่ในแพลตฟอร์มมือถือ.
ฉันคิดว่าเหตุผลนี้น่าจะเพียงพอสำหรับคุณที่จะเรียนรู้การพัฒนาแอปพลิเคชั่น iPhone ไม่ว่าคุณจะพัฒนาเพื่อตัวคุณเองหรือลูกค้าคนส่วนใหญ่อาจหวังว่าแอปของพวกเขาสามารถเข้าถึงได้โดยคนจำนวนมากในโลก.
จากมุมมองของการพัฒนา, Apple ชอบสิ่งที่เรียบง่าย, และสิ่งนี้ใช้กับผลิตภัณฑ์และกรอบการทำงาน. iOS เป็นระบบปฏิบัติการที่ให้พลังงานกับอุปกรณ์พกพาของ Apple ทั้งหมด. เหล่านี้รวมถึง iPod Touch, iPhone และ iPad โปรดจำไว้ว่าเมื่อคุณพัฒนาแอพสำหรับ iPhone คุณควรเป็น พัฒนาสำหรับอุปกรณ์อื่น ๆ ทั้งหมดด้วย iOS!
นอกจากนี้สิ่งที่ทำให้คุณสมบัติข้างต้นยิ่งใหญ่กว่าคือสามารถบันทึกการเข้ารหัสได้มากเพียงใด เมื่อคุณเขียนรหัสสำหรับแอปพลิเคชัน iPhone คุณจะต้อง ใช้ภาษาการเขียนโปรแกรมเดียวกันสำหรับอุปกรณ์คอมพิวเตอร์ทั้งหมดของ Apple. ซึ่งหมายความว่าเมื่อคุณพัฒนาแอปพลิเคชั่น iPhone แอปสามารถรวมเข้ากับ iPad และ Mac ได้ในภายหลัง.
Objective-C เป็นภาษาการเขียนโปรแกรมหลักที่เปิดใช้งานกรอบทั้งหมดของพวกเขา พร้อมกับ Objective-C คุณจะพัฒนาแอพ iPhone ด้วย โกโก้ทัช, กรอบการเขียนโปรแกรมขับเคลื่อนการโต้ตอบกับผู้ใช้บน iOS.
นี่เป็นเพียงข้อมูลเล็กน้อยเพื่อให้คุณเริ่มต้นในการพัฒนาแอพ iPhone การพัฒนาค่อนข้างเป็นกระบวนการที่ซับซ้อน แต่ผ่อนคลายเอาช้า ดังนั้นเหตุผลอยู่ที่นี่และการตัดสินใจเป็นของคุณ ไม่ว่าคำตอบคือใช่หรือไม่คุณสามารถกระโดดเข้าไปในหัวข้อถัดไปได้เสมอ: ออกแบบแอพสำหรับ iPhone.
วางแผนโครงสร้างแอพ iPhone ของคุณ
ในอุดมการณ์มาตรฐานในการสร้างแอป iPhone ที่คุณต้องการ ผ่านไปสองสามขั้นตอน. ในระยะแรกประกอบด้วย การวางแผนและการร่างภาพ.
ก่อนอื่นคุณต้องมีความคิด แอปของคุณกำลังจะทำอะไร. ทำไมผู้คนถึงต้องการดาวน์โหลด? และ คุณลักษณะใดที่คุณต้องการรวมไว้? นี่คือขั้นตอนที่สำคัญที่สุดราวกับว่าคุณทำถูกต้องคุณจะ บันทึกความสับสนและปัญหามากมาย ในขั้นตอนการเข้ารหัส.
ที่เลวร้ายที่สุดมันทำให้คุณกลับไปที่กระดานวาดภาพ.
ฉันแนะนำให้ ร่างแนวคิดคร่าวๆบางหน้า (หรือมุมมอง) ของใบสมัครของคุณ เพียงวาดรูปสี่เหลี่ยมผืนผ้าอาจเป็น 5 หรือ 6 รูปร่างบนกระดาษแล้ววาดคุณสมบัติที่คุณต้องการในแต่ละมุมมองแอปของคุณ.
คุณสามารถนึกถึงมุมมองเช่นหน้าต่างๆในเว็บไซต์ แต่ละมุมมองจะมีฟังก์ชันการทำงานที่แตกต่างกันเช่นแบบฟอร์มการเข้าสู่ระบบรายชื่อผู้ติดต่อหรือสารบัญ.
ด้านล่างฉันได้สร้างคอลเลกชันสั้น ๆ ขององค์ประกอบแถบ UI ที่แตกต่างกัน:
- แถบสถานะ - แสดงระดับแบตเตอรี่ปัจจุบันของอุปกรณ์การเชื่อมต่อ 3G แถบรับสัญญาณผู้ให้บริการโทรศัพท์และอีกมากมาย ขอแนะนำให้คุณรวมองค์ประกอบเหล่านี้ไว้เสมอ.
- แถบนำทาง - ให้ผู้ใช้ของคุณมีตัวเลือกเพื่อนำทางระหว่างลำดับชั้นของหน้า ซึ่งมักจะมีปุ่มที่ด้านซ้ายของแถบเพื่อให้ผู้ใช้กลับไปที่มุมมองแอปก่อนหน้า.
- แถบเครื่องมือ - ปรากฏที่ด้านล่างของแอพ iPhone นี่จะเป็นไอคอนเล็กน้อยที่เชื่อมโยงกับฟังก์ชั่นบางอย่างเช่น หุ้น, ดาวน์โหลด, ลบ, ฯลฯ.
- แถบแท็บ - คล้ายกับแถบเครื่องมือยกเว้นตอนนี้คุณกำลังทำงานกับแท็บ เมื่อผู้ใช้คลิกที่ไอคอนแท็บระบบจะไฮไลต์โดยอัตโนมัติและจะแสดงสถานะโฮเวอร์แบบมัน แถบนี้ใช้เพื่อสลับระหว่างมุมมองแทนที่จะเสนอฟังก์ชั่นโดยตรง.
รายการนี้มีแถบเครื่องมือที่คุณสามารถพบได้ในแอพส่วนใหญ่เท่านั้น มีมุมมองและสไตล์อื่น ๆ ที่ควรพิจารณาซึ่งคุณสามารถดูได้ในแนวทางการใช้องค์ประกอบ UI UI ของ Apple ฉันแนะนำอย่างยิ่งให้อ้างอิงเอกสารนี้เมื่อคุณมีข้อสงสัยเกี่ยวกับองค์ประกอบ UI ของ iPhone.
เพื่อประโยชน์ของเวลาฉันจะไม่อธิบายองค์ประกอบ UI ทุกรายการ มีองค์ประกอบที่ต้องพิจารณามากเกินไปและคุณจะไม่ต้องใช้ทั้งหมดในแอพเดียว แต่เมื่อคุณร่างมุมมองของคุณคุณสามารถ ดึงแรงบันดาลใจจากแนวทางที่แนะนำข้างต้นและแอพ iPhone อื่น ๆ คุณสนุกกับการใช้พวกเขา.
ออกแบบ Mockups Photoshop
ฉันสมมติว่าพวกคุณส่วนใหญ่ค่อนข้างสบายใจที่ทำงานกับ Adobe Photoshop มันเป็นซอฟต์แวร์รอบปฐมทัศน์สำหรับการสร้างกราฟิกสำหรับเว็บไซต์แบนเนอร์โลโก้และอุปกรณ์พกพา การออกแบบกราฟิกสำหรับเว็บเป็นกระบวนการที่ค่อนข้างตรงไปตรงมา แต่มันซับซ้อนกว่าเล็กน้อยเมื่อพูดถึงการออกแบบแอพของ iPhone.
หากคุณต้องการสร้างแอปที่คุณควรทำ สร้างการออกแบบจำลอง mockup ที่สมบูรณ์แบบตั้งแต่เริ่มต้น.
ในการเริ่มต้นเราควรหารือเกี่ยวกับการตั้งค่า Photoshop เนื่องจากเรากำลังออกแบบสำหรับ iPhone เราจำเป็นต้องพิจารณารูปแบบการออกแบบที่แตกต่างกัน 2 แบบ จอแสดงผล iPhone ปกติคือ 320 x 480 พิกเซล. อย่างไรก็ตาม iPhone 4 รวมถึง จอแสดงผลเรตินาซึ่งเพิ่มจำนวนพิกเซลเป็นสองเท่าภายในขนาดหน้าจอเดียวกัน. ดังนั้นคุณควร เพิ่มความละเอียดเป็นสองเท่าเป็น 640 x 960 พิกเซล และออกแบบเลย์เอาต์ของคุณให้เป็นมาตรฐานนี้.
ซึ่งหมายความว่าคุณจะต้อง สร้างไอคอน 2 ชุด สำหรับการจำลองของคุณ ไอคอนเดิมจะเป็น ตั้งค่าเป็น 163ppi แต่คุณจะต้อง รวมถึงไอคอนที่มี 326ppi สำหรับ iPhone 4. ไอคอนถูกทำเครื่องหมายตามธรรมเนียมด้วย @ 2x ในตอนท้ายของชื่อไฟล์เช่น “[email protected]“.
ทีนี้มาเพิ่มประสิทธิภาพการตั้งค่าเอกสารใหม่ของเรา ก่อนอื่นเราจะต้องแก้ไขการตั้งค่าบางอย่างดังนั้นเข้าถึง Photoshop> แก้ไข> การตั้งค่า> เส้นบอกแนวกริดและสไลซ์. เราจะเป็น การตั้งค่า Gridline ของเราทุก ๆ 20px โดยแบ่งเป็น 2. เมื่อออกแบบจอแสดงผลเรตินา 2px line จะแสดง 1 point บนหน้าจอ. นี่เป็นกฎสำคัญที่คุณต้องคำนึงถึงในการลดขนาดแอปของคุณ.
ฉันมักจะพบว่ามันง่ายกว่าในการสร้างงานออกแบบของฉันที่มีความละเอียดสูงกว่าจากนั้นย่อขนาดลง แต่คุณสามารถทำได้ ลองทั้งสองวิธีและดูว่าอะไรที่เหมาะกับคุณที่สุด. เราใช้ 640 x 960 พิกเซลที่ 326ppi - บันทึกเป็นค่าที่กำหนดล่วงหน้าหากคุณคิดว่าคุณจะใช้บ่อย.
อาคารที่มีองค์ประกอบเทมเพลต
ตอนนี้คุณสามารถใช้ Photoshop เพื่อสร้างเลย์เอาต์พิกเซลที่สมบูรณ์แบบด้วยตัวคุณเอง แต่สิ่งนี้พิสูจน์ให้เห็นว่าเป็นงานที่เหนื่อยล้าและน่าเบื่อมาก.
นี่เป็นไฟล์ขนาดใหญ่ที่มีองค์ประกอบมากเกินไป เพื่อให้ง่ายขึ้นคุณสามารถกด v เพื่อเปิดใช้งาน ย้ายเครื่องมือ และคลิกที่ “Auto-เลือก” บนแถบตัวเลือกจากนั้นเลือก “ชั้น” ค่อนข้างมากกว่า “กลุ่ม”. ด้วยการตั้งค่าคุณสามารถคลิกที่องค์ประกอบใดก็ได้และ Photoshop จะนำคุณไปสู่เลเยอร์ที่เกี่ยวข้อง!
รู้สึกอิสระที่จะเล่นกับ mockup, หรือคุณสามารถสร้างต้นแบบแอปพลิเคชันของคุณจาก mockup ขึ้นอยู่กับแอพของคุณคุณสามารถรวมคุณสมบัติบางอย่างไว้ในพื้นที่หลักซึ่งหลาย ๆ อย่างที่คุณสามารถหาได้ในไฟล์ PSD นี้ นอกจากนี้ยังเป็นไปได้ที่จะไปที่เลเยอร์องค์ประกอบเหล่านี้และแก้ไขแบบอักษรสีไล่ระดับสีและสไตล์การออกแบบอื่น ๆ เช่นกัน เพียงแค่ ตรวจสอบให้แน่ใจว่าคุณไม่ได้ปรับขนาดอะไรเลย เนื่องจากแถบและองค์ประกอบ UI ทั้งหมดถูกตั้งค่าเป็นขนาดมาตรฐานเริ่มต้น.
การพัฒนาแอพใน Xcode
เครื่องมือสำหรับนักพัฒนาสำหรับการเขียนโปรแกรม iOS และ Mac OS X มีชื่อเป็น Xcode หากคุณใช้ OS X Lion คุณสามารถค้นหา Xcode และแพ็คเกจที่ใช้ได้ทั้งหมดได้ฟรีใน Mac App Store.
หลังจากการติดตั้งเสร็จสิ้นให้เปิด Xcode และหน้าจอต้อนรับจะปรากฏขึ้นมา จากที่นี่คุณสามารถโหลดโครงการที่เก่ากว่าหรือเลือกที่จะสร้างโครงการใหม่ สำหรับตอนนี้คุณต้องคลิก “สร้างโครงการ Xcode ใหม่“, จากนั้นหน้าต่างเทมเพลตจะมีตัวเลือกไม่กี่ตัว ภายใต้ iOS> แอปพลิเคชันคลิกที่ “แอปพลิเคชันมุมมองเดียว” และตี “ต่อไป”. คุณสามารถ ตั้งชื่อแอปใหม่, เช่น ทดสอบ (ไม่มีช่องว่าง) จากนั้นบน ตัวบ่งชี้ บริษัท, พิมพ์คำใด ๆ เช่น บริษัท ของฉัน, และในที่สุดก็เลือกไดเรกทอรีและกด “บันทึก”.
Xcode จะสร้างไดเรกทอรีไฟล์และส่งคุณเข้าสู่หน้าต่างใหม่สำหรับการทำงาน คุณควรเห็นตัวเลือกไฟล์มากมายในรายการ แต่ โฟลเดอร์ที่ตั้งชื่อตามใบสมัครของคุณ เป็นจุดสนใจหลัก.
ด้วย Xcode คุณมีสองตัวเลือกสำหรับการออกแบบองค์ประกอบส่วนหน้า ความคลาสสิค Xib / ปลายปากกา รูปแบบเป็นมาตรฐานสำหรับแอป Mac OS X และ iOS ซึ่งคุณจะต้องออกแบบการดูหน้าเว็บใหม่ทุกครั้ง อย่างไรก็ตามในขณะที่คุณกำลังสร้างการดูมากขึ้นในแอปเดียวจำนวนไฟล์ปลายปากกาอาจล้นหลามเกินไปดังนั้นใหม่ สตอรี่บอร์ด ไฟล์เก็บมุมมองปลายปากกาของคุณทั้งหมดในบานหน้าต่างเอดิเตอร์เดียว จากที่นี่คุณสามารถลบและเพิ่มองค์ประกอบและคุณสมบัติ UI ได้อย่างง่ายดาย.
นอกจากนี้คุณจะเจอ .ชั่วโมง และ .ม. ไฟล์ในกลุ่มโฟลเดอร์เดียวกัน เป็นชื่อไฟล์สั้น ๆ สำหรับ ส่วนหัว และ การดำเนินงาน รหัส. ไฟล์เหล่านี้เป็นที่ที่คุณเขียนฟังก์ชั่น Objective-C และตัวแปรทั้งหมดที่จำเป็นสำหรับแอปของคุณในการทำงาน มันเป็นความคิดที่ดีที่จะอธิบายวิธีการทำงานของ Xcode MVC (รุ่นมุมมองคอนโทรลเลอร์), ซึ่งเป็นเหตุผลที่เราต้องการ 2 ไฟล์สำหรับแต่ละคอนโทรลเลอร์.
ลำดับขั้นการเขียนโปรแกรม MVC
เพื่อให้เข้าใจถึงการทำงานของแอพคุณจะต้องเข้าใจสถาปัตยกรรมการเขียนโปรแกรม กับ Model, View, Controller (MVC) เป็นรากฐาน, Xcode สามารถแยกจอแสดงผลและรหัสอินเตอร์เฟสทั้งหมดออกจากฟังก์ชันลอจิกและการประมวลผลของคุณและไม่มีตัวเลือกอื่นให้เลือก MVC อาจดูสับสนในตอนแรก แต่ถ้าคุณพยายามที่จะทำความเข้าใจและเริ่มสร้างแอพพื้นฐานบางอย่างคุณจะต้องชื่นชอบโครงสร้าง.
เพื่อให้เข้าใจง่ายขึ้นฉันได้นำเสนอวัตถุแต่ละรายการในรายการด้านล่าง:
- แบบ - เก็บข้อมูลตรรกะและแกนหลักของคุณทั้งหมด ซึ่งรวมถึงตัวแปรการเชื่อมต่อกับฟีด RSS หรือรูปภาพภายนอกฟังก์ชั่นโดยละเอียดและการบีบอัดตัวเลข เลเยอร์นี้จะแยกออกจากมุมมองของคุณอย่างสมบูรณ์เพื่อให้คุณสามารถเปลี่ยนมุมมองได้อย่างง่ายดายและยังคงมีข้อมูลเดิมที่ใช้งานได้.
- ดู - สไตล์หน้าจอหรือการแสดงผลในแอปพลิเคชันของคุณ รายการตารางหน้าโปรไฟล์หน้าสรุปบทความเครื่องเล่นเสียงเครื่องเล่นวิดีโอเหล่านี้เป็นตัวอย่างของการดูทั้งหมด คุณสามารถเปลี่ยนสไตล์และลบองค์ประกอบ แต่คุณจะยังคงทำงานกับข้อมูลเดียวกันในโมเดลของคุณ.
- ตัวควบคุม - ทำหน้าที่เป็นสื่อกลางระหว่างอีกสองคน คุณเชื่อมต่อวัตถุในมุมมองของคุณกับ ViewController ซึ่งส่งผ่านข้อมูลไปยังและจากรุ่นของคุณ ด้วยวิธีนี้คุณสามารถมีผู้ใช้แตะที่ปุ่มและลงทะเบียนในแบบจำลองของคุณ จากนั้นเรียกใช้ฟังก์ชันออกจากระบบและผ่านตัวควบคุมเดียวกันผ่านข้อความ “ออกจากระบบสำเร็จแล้ว!”.
ดังนั้นโดยทั่วไปคุณ model เก็บข้อมูลและฟังก์ชั่นทั้งหมด ว่าคุณจะต้องแสดงที่ใดที่หนึ่งบนหน้าจอ แต่ รุ่นไม่สามารถโต้ตอบกับหน้าจอได้เฉพาะมุมมองเท่านั้น. จำนวนการดูส่วนใหญ่เป็นภาพทั้งหมดและสามารถดึงข้อมูลผ่าน ViewController ได้เท่านั้น. ตัวควบคุมเป็นวิธีที่ละเอียดอ่อนกว่าในการซ่อนข้อมูลส่วนหลังของคุณจากการออกแบบส่วนหน้า. ด้วยวิธีนี้คุณสามารถปรับปรุงการออกแบบซ้ำหลาย ๆ ครั้งในขณะที่ไม่สูญเสียฟังก์ชันการทำงานใด ๆ.
ด้วยความรู้นี้จึงไม่ยากที่จะเริ่มสร้างแอพแรก ๆ ของคุณ ตามที่กล่าวไว้ก่อนหน้านี้, Objective-C เป็นภาษาการเขียนโปรแกรมหลักที่คุณจะใช้พัฒนาแอพ มันสร้างขึ้นในภาษา C พร้อมกับไวยากรณ์ที่ได้รับการปรับปรุงและกระบวนทัศน์เพิ่มเติมบางอย่าง คุณจะต้องใช้เวลามากในการทำความคุ้นเคยกับภาษา แต่สำหรับบทเรียนสำหรับผู้เริ่มต้นฉันแนะนำชุดการสอนจาก Mobiletuts+.
มุมมองออกแบบพร้อมสตอรีบอร์ด
ตอนนี้เราได้ตรวจสอบด้านเทคนิคของแอปพลิเคชันแล้วเราควรใช้เวลาสักครู่ในการออกแบบส่วนต่อประสาน ฉันสมมติว่าคุณเก็บไว้ “สตอรี่บอร์ด” ตัวเลือก ตรวจสอบเมื่อสร้างโครงการซึ่งหมายความว่าคุณสามารถค้นหาเดียว MainStoryboard_iPhone.storyboard ไฟล์บางแห่งในกลุ่มโฟลเดอร์ที่อยู่ทางด้านซ้ายของหน้าต่าง คลิกที่ไฟล์เพื่อเลือกและเปิดมุมมอง.
แถบด้านข้างใหม่ควรปรากฏขึ้นทางด้านขวาของกลุ่มโฟลเดอร์โดยตรง สิ่งนี้เรียกว่า เค้าร่างเอกสาร และเป็นวิธีการดูตัวอย่างแบบย่อสำหรับตรวจสอบมุมมองที่มีอยู่ทั้งหมดในกระดานเรื่องราวนี้.
เราต้องการเริ่มต้นด้วยการเพิ่มองค์ประกอบเพียงไม่กี่หน้าในตัวควบคุมมุมมองของเรา เราต้องการสององค์ประกอบที่แตกต่างกัน: แถบนำทาง และ แถบแท็บ. ก่อนที่เราจะคว้าพวกเขาเข้าสู่ คุณสมบัติของผู้ตรวจสอบ (ดู> ยูทิลิตี้> แสดงตัวตรวจสอบคุณสมบัติ) ทางด้านขวาของหน้าต่างจากนั้นมองหา แถบสถานะ ฉลาก. โดยค่าเริ่มต้นมันถูกตั้งค่าเป็น อนุมาน ซึ่งใช้สีสถานะของ iPhone มาตรฐาน แต่คุณสามารถเลือกได้ สีดำ หรือ โปร่งแสงสีดำ ถ้าการออกแบบแอปของคุณเหมาะกับสีที่ดีกว่า.
ห้องสมุดวัตถุ
หากว่า ยูทิลิตี้ บานหน้าต่างด้านขวาของหน้าต่างจะไม่ปรากฏให้เห็นคุณสามารถเปิดใช้งานได้โดยการเข้าถึงมุมมอง> ยูทิลิตี้> แสดงยูทิลิตี้ ในบานหน้าต่าง Utilities ให้ดูที่ด้านล่างสำหรับแผงที่เรียกว่า ห้องสมุดวัตถุ. มันมีเมนูแบบเลื่อนลงพร้อมกับ “วัตถุ” เป็นรายการแรกของรายการ หากคุณหาไม่พบคุณสามารถเลือก View> Utilities> Show Object Library.
จากเมนูแบบเลื่อนลงของ Object Library ให้ค้นหาและเลือก Windows & Bars. ตอนนี้คลิกที่ แถบนำทาง, ลากไปยังหน้าต่างมุมมองและวางตำแหน่งโดยตรงภายใต้สีดำ แถบสถานะ (พร้อมไอคอนแบตเตอรี่) เราสามารถปรับแต่งคำอธิบายชื่อของบาร์ได้ทันที ดับเบิลคลิกที่ข้อความที่อ่านอยู่ “หัวข้อ“, และคุณจะเห็นป้ายกำกับชื่อ “หัวข้อ” ในบานหน้าต่างโปรแกรมอรรถประโยชน์ซึ่งคุณสามารถเปลี่ยนคำอธิบายชื่อเรื่องเป็น “ทดสอบ” จากที่นั่น. ตี “เข้าสู่” เพื่อเป็นสักขีพยานการเปลี่ยนแปลง.
อีกครั้งในแผง Windows & Bars เลื่อนลงเพื่อค้นหา แถบแท็บ, จากนั้นลากไปที่หน้าต่างมุมมองแล้ววางไว้ที่ด้านล่างสุดของแอพของคุณ โดยค่าเริ่มต้นองค์ประกอบเหล่านี้ 2 ดูยอดเยี่ยม.
ตอนนี้บางทีคุณต้องการให้แถบไล่ระดับสีของแถบนำทางตรงกับแถบแท็บที่ด้านล่างและเพื่อทำสิ่งนี้คุณสามารถคลิกที่แถบนำทางและมองไปทางขวาที่ แอตทริบิวต์ แผงในบานหน้าต่างยูทิลิตี้ ตัวเลือกแรกที่เรียกว่า สไตล์, ซึ่งถูกตั้งค่าเป็นค่าเริ่มต้น เปลี่ยนสไตล์จากค่าเริ่มต้นเป็น ทึบแสงสีดำ และเราจะมีชุดสีที่ตรงกัน!
ลองเพิ่มปุ่มแท็บอื่นในแถบด้านล่างของแอพด้วย เลื่อนเคอร์เซอร์เมาส์ไปที่แผง Windows & Bars อีกครั้งแล้วเลื่อนลงไปที่ รายการแถบแท็บ, ใต้ Tab Bar โดยตรง ลากสิ่งนี้ลงในหน้าต่างแอปของคุณและวางไว้ตรงกลางปุ่ม Tab Bar ที่มีอยู่ 2 อัน หากคุณดับเบิลคลิกที่ปุ่มใหม่นี้คุณจะเห็นตัวเลือกเพิ่มเติมบางอย่างในบานหน้าต่างยูทิลิตี้คุณจะเปลี่ยนรายการ ภาพ และ หัวข้อ จากที่นั่น. ตัวอย่างเช่นฉันได้เปลี่ยนชื่อเป็น “ที่คั่นหนังสือ” สำหรับรายการ Tab Bar ที่เพิ่งเพิ่มเข้าไป.
ดังนั้นนี่คือแบบฝึกหัดสั้น ๆ เกี่ยวกับการออกแบบมุมมองภายใน Xcode ไม่ใช่กระบวนการที่ยากมาก แต่จะต้องใช้เวลาอีกเล็กน้อยในการทำความคุ้นเคยกับส่วนต่อประสาน เล่นกับองค์ประกอบเพิ่มเติมเล็กน้อยถ้าคุณรู้สึกสะดวกสบายและคุณสามารถมุ่งหน้าไปยังแหล่งพัฒนา iOS ของ Apple สำหรับแหล่งข้อมูลการเรียนรู้ที่มากขึ้น!
คอยติดตามตอนที่ II
สรุปส่วนแรกของคู่มือการออกแบบและพัฒนาแอพ iPhone ในส่วนถัดไปเราจะเจาะลึกลงไปอีกเล็กน้อยใน Objective-C และ Cocoa Touch และในที่สุดคุณจะได้เรียนรู้วิธีสร้างแอป iPhone ที่ใช้งานได้!
iOS Design Gallery
สำหรับนักออกแบบฉันยังหวังที่จะนำแรงบันดาลใจมาให้คุณดังนั้นฉันจึงรวมรายการมุมมองแอพ iPhone ที่ยอดเยี่ยมไว้ด้านล่าง รายการมีองค์ประกอบแอพที่สร้างแรงบันดาลใจมากมายซึ่งคุณอาจไม่เคยสังเกตเห็นมาก่อน รู้สึกอิสระที่จะแบ่งปันความคิดมุมมองแอพหรือคำถามของคุณในส่วนความคิดเห็นด้านล่างขอบคุณ!
Race Splitter
ความพึงพอใจจากระยะไกล
Tweetbot สำหรับ iPhone
รีดเดอร์
foursquare
MailChimp
Joystiq
Piictu
ความมืด
