Basic Xcode Programming III : Switching view & more GUI Part I

หลังจากที่ได้เรียนรู้เกี่ยวกับ Interface และ Action พื้นฐานต่างๆไปพอสมควรแล้ว ในบทความนี้จะมาเรียนรู้เพิ่มเติมเกี่ยวกับการทดลองใช้ Interface อื่นๆ รวมไปถึงการเปลี่ยน view กันนะครับ

แน่นอนครับว่าจำเป็นต้องนำ code ที่ได้ทำจากบทความที่แล้วมาทำต่อครับ

วิธีการไหนที่ผมเคยอธิบายไปแล้วในบทความก่อนๆ ผมจะไม่อธิบายซ้ำนะครับ

• เพิ่ม Button ใน ViewController
• สร้าง Method ( เพื่อที่จะกำหนดคำสั่งว่าหลังจากเกิด Action แล้วให้ทำการเปลี่ยน view )
• เชื่อมต่อระหว่าง Method ที่สร้างขึ้นกับ Button ใน Interface Builder

เมื่อมาถึงตรงนี้แล้ว ให้ทำการสร้าง File ใหม่

• คลิกขวาตรง Folder หรือ File ใน Project Organization Panel เลือกคำสั่ง New File

• เลือกหมวด iOS >> Objective-C class >> Next

 

1.  ตั้งชื่อ File
2. เลือก Subclass of เป็น UIViewController
3. เลือก With XIB foe user interface
4. Next

• กด Create

หลังจากที่เราสร้าง File เสร็จแล้ว จะสังเกตได้ว่ามี File เพิ่มขึ้นมา 3 File 

ให้เราทำการเพิ่ม  Code ในส่วนของ ViewController.m ดังนี้

 เพิ่มใน Method ที่เราได้สร้างไว้

## อธิบาย Code เพิ่มเติม

NextViewViewController *switching = [[NextViewViewController alloc] 

                                         initWithNibName:@"NextViewViewController" bundle:nil];

เป็นการสร้าง Object ของ File ที่เราสร้างขึ้นมาใหม่ พร้อมกับกำหนดค่าเริ่มต้นให้

[self presentModalViewController:switching animated:YES];

เป็นการสั่งให้หน้าจอไปแสดงผลใน View ใหม่ที่พึ่งสร้างขึ้นครับ

ถึงตรงนี้แล้วลองกด Build & Run ดูครับ ถ้าหากกดปุ่มที่สร้างขึ้นมาใหม่แล้ว หน้าจอเปลี่ยนไปเป็นสีขาวล้วน แสดงว่ามาถูกทางแล้วครับ ^ ^

ทีนี้เราลองมาดูความสามารถของ User Interface ตัวอื่นๆ ที่ใช้งานบ่อยดูครับ

• เลือก .xib ( Interface Builder ) ของ File ที่เราทำการสร้างขึ้นมาใหม่ให้มีหน้าตาประมาณนี้นะครับ

ประกอบไปด้วย Switch, ImageView, Label, Slider และ Button นะครับ

• ทำการประกาศ Object ต่างๆ ใน File ใหม่เหมือนเดิมครับ

เพิ่มลงใน .m File นะครับ

เพิ่มลงใน .h File ครับ

• เสร็จแล้วก็ไปทำการเชื่อมต่อใน User Interface ได้เลยครับ
• หลังจากนั้นให้หารูปที่ต้องการมาใส่ใน ImageView ครับ

การนำรูปเข้าในใช้ใน Project มีวิธีง่ายๆ ด้วยกัน 2 วิธี ครับ

 วิธีที่ 1

1. คลิกขวาที่ Folder หรือ File ใน Project Organization Panel แล้วเลือกคำสั่ง Add File
2. เลือกรูปที่ต้องการแล้วกด เลือกคำสั่งตามรูปแล้วกด Ass ได้เลยครับ

วิธีที่ 2

1. ลากรูปที่ต้องการมาวางใน Project
2. เลือกคำสั่งเช่นเดียวกับในรูปแล้วกด Finish

• ไปที่ Interface Builder เลือกที่ UIImageView ไปที่หมวด Attributes Inspector เลือกชื่อรูปภาพในช่อง Image

• ทีนี้ลอง Build & Run ดูครับ เมื่อกดปุ่มแล้ว จะมีหน้าตาประมาณนี้ครับ

สำหรับบทความนี้ ก็ได้อะไรไปหลายอย่างอยู่นะครับ เอาไว้แค่นี้ก่อนนะครับ ในบทความหน้าเราจะมาต่อกันให้เสร็จครับ ^ ^

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