iPhone: วิธีการใช้งาน Xcode สำหรับการพัฒนาแอพพลิเคชั่นบนไอโฟน (3)


iPhone: วิธีการใช้งาน Xcode สำหรับการพัฒนาแอพพลิเคชั่นบนไอโฟน ตอนที่ 3 การสร้าง User Interface ด้วย Interface Builder, Organizer และ Debug Area

เมื่อเรากดที่ไฟล์ .xib (มักอ่านกันว่า “ดอทนิปไฟล์”) โปรแกรม Xcode จะแสดงหน้า Interface Builder ขึ้นมา ซึ่ง Interface Builder เป็นโปรแกรมหนึ่งที่ให้เราสามารถตกแต่งรูปแบบหน้าตาของแอพพลิเคชั่นได้อย่างง่ายดาย เพียงลาก UI ที่โปรแกรมได้เตรียมไว้ให้ทางด้านขวามือมาใส่ View ที่เป็นกรอบสี่เหลี่ยมตรงกลางเท่านั้นเอง ก่อนอื่นเรามารู้จักส่วนประกอบของ Interface Builder ก่อนว่าโปรแกรมนี้ประกอบด้วยส่วนไหนบ้าง

โปรแกรม Interface Builder ประกอบด้วย 4 ส่วนหลักๆ คือ ส่วนที่แสดง Placeholders และ Objects จะอยู่ด้านซ้าย ส่วนแสดงผลตัวอย่างหน้าจอจะอยู่ตรงกลาง ส่วนแสดงรายละเอียดของ UI ต่างๆและ UI ที่ทาง Interface Builder เตรียมเอาไว้จะอยู่ด้านขวามือ ดังรูปด้านล่าง

จากรูปด้านบนหมายเลข 1 เป็นส่วนของ Placeholders ซึ่งจะเป็นส่วนที่ติดต่อไฟล์ซอสโค้ด จะประกอบด้วย File’s Owner และ First Responder อีกส่วนหนึ่งจะเป็นส่วนของ Objects จะเป็นส่วนที่แสดง UI ที่ใช้ใน .xib นั้นๆ โดยจะแสดงในรูปแบบกราฟต้นไม้ ให้เราเห็นว่า UI ตัวไหนถูกบรรจุอยู่ใน UI ตัวไหนด้วย

หมายเลข 2 เป็นส่วนของการแสดงผล UI ต่างๆ ที่เราลากเข้ามาตกแต่งหน้าตาแอพพลิเคชั่น ในส่วนนี้เราสามารถลาก UI เพื่อเปลี่ยนตำแหน่งได้ตามต้องการ และจัดลำดับการแสดงผลบนล่างได้จากส่วนของ Objects (หมายเลข 1)

หมายเลข 3 เป็นส่วนเป็นส่วนของการปรับแต่งค่าต่างๆ ของ UI แต่ละตัว เพื่อให้มีคุณสมบัติตามที่เราต้องการโดยที่ไม่ต้องเขียนโปรแกรมเพิ่มเติม ในส่วนที่ 3 นี่เรียกว่า Inspector ซึ่งจะประกอบด้วย File, Quick Help, Identity, Attribute, Size และ Connector ตามลำดับ ซึ่งตัวหลักๆ ที่เราจำเป็นต้องรู้ได้แก่การปรับแต่ง Attribute, Size และ Connector ดังนี้

Attribute ใช้ปรับแต่งหน้าตาและคุณสมบัติพื้นฐานของ UI เช่น การจำลองหน้าตาโปรแกรมให้มี status bar, Navigation Bar, Bottom Barบน Viewการเปลี่ยนตัวหนังสือที่แสดงบน Label Button TextField เป็น การเปลี่ยนขนาดตัวหนังสือ การเปลี่ยนสีพื้นหลัง การกำหนดลักษณะการเลื่อนของ scrollbar ใน TableView ScrollView TextView เป็นต้น

Size ใช้ปรับแต่งขนาดและตำแหน่งของ UI ถ้าหากเป็น TableView จะให้กำหนดขนาดของแถวแต่ละแถว และระยะห่างระหว่างกลุ่มได้ด้วย

Connector ใช้เชื่อม UI กับตัวแปร IBOutlet ในไฟล์คลาสของ File’s Owner ใช้เชื่อม delegate และ datasource และการเชื่อม Event Function กับไฟล์คลาสของ File’s Owner

หมายเลข 4 เป็นส่วนของ UI พื้นฐานที่ UIKit Frameworks มีไว้ให้นักพัฒนาได้นำไปใช้ตกแต่งหน้าตาโปรแกรมของตนเอง โดยวิธีใช้ก็แสนง่ายคือการลาก UI จากส่วนหมายเลข 4 มาใส่ใน View ของเราแล้วปรับแต่งตำแหน่งตามต้องการเท่านั้นเอง

1.4 Organizer

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

Organizer ประกอบด้วยโปรแกรมย่อยๆ 5 โปรแกรมคือ Devices, Repositories, Projects, Archives และ Documentation รายละเอียดเบื้องต้นดังต่อไปนี้

1) Devices บอกรายละเอียดของเครื่อง iOS ที่ใช้เชื่อมต่อกับ Xcode และข้อมูลเกี่ยว Developer Profile, Provisioning Profile

2) Repositories เกี่ยวกับการตรวจสอบเวอร์ชั่นของซอสโค้ด

3) Projects แสดงรายชื่อโปรเจค Xcode ที่เคยได้สร้างไว้

4) Archives เกี่ยวกับการทำไฟล์ adhoc (.ipa) และการอัพเข้า app store

5) Documentation คู่มือและเอกสารอ้างอิงเพื่อช่วยเหลือในการพัฒนาโปรแกรม

1.5 Debug Area

Debug Area เป็นส่วนที่นักพัฒนาทุกคนจำเป็นต้องใช้เพื่อตรวจสอบความถูกต้องของแอพพลิเคชั่นและการเขียนโปรแกรมของตนเอง การเปิด/ปิดการใช้งาน Debug Area ใน Xcode4 กดคีย์ลัดคือ Command+Shift+Y โดย Debug Area แบ่งเป็น 2 ส่วนคือ Variable View และ Console View ซึ่งทั้งสองส่วนสามารถเลือกดูส่วนใดส่วนหนึ่งได้ หรือเลือกดูทั้งสองส่วนพร้อมกันได้ ด้วยการเลือกโหมดการดูที่มุมขวาบนของ Debug Area ตามรูปด้านล่าง

บทความที่เกี่ยวข้อง

adaydesign :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on สิงหาคม 28, 2011, in [Dev] iOS and tagged , . Bookmark the permalink. 1 ความเห็น.

  1. ขอบคุณมากๆสำหรับสิ่งดีๆที่ได้ให้ไว้

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: