อีกเรื่องคือฝากประชาสัมพันธ์ด้วยนะครับ ผมรับงานเขียนโปรแกรมสำหรับ iOS ด้วยนะครับ ใครที่สนใจสามารถติดต่อมาได้จ้า
เข้าเรื่องกันดีกว่าครับ สำหรับในบทความนี้จะเป้นการแนะนำการใช้งาน Navigation Bar ที่เรียกได้ว่ามีการใช้งานบ่อยมากๆ อย่างนึงเลยทีเดียว
รู้จักกับ Navigation Bar
- New Project เลือก Master-Detail Application เลือก Device เป็น iPhone และไม่เลือกส่วนเสริมทั้งหมด
หลังจากนั้นให้ลองทดสอบโดยการ Build & Run โปรแกรมดูเลยครับ
จากรูปจะสังเกตได้ว่า แถบด้านบนนั้นคือ Navigation Bar นั่นเองครับ แล้วใน Navigation Bar ยังมีปุ่มอีกสองปุ่มด้วยกัน คือปุ่ม Edit และ ปุ่ม + นั่นเอง ให้ลองกดปุ่ม + ดูครับจะสังเกตว่าใน Table View ของเราจะมีการเพิ่มข้อความขึ้นมาครั้งละ 1 บรรทัด
และถ้าหากลองกดปุ่ม Edit จะสามารถลบแถวที่ต้องการออกไปได้ครับ
และถ้าหากเราเลือกที่ข้อมูลในแถวใดๆ ก็ตามข้อมูลนั้นก็ยังจะไปแสดงใน View ถัดไปด้วย
 |
| View ของ Detail View ครับ |
คราวนี้เราลองมาดูว่าใน Code เค้าให้อะไรมาบ้างนะครับ เริ่มจาก Delegate.h เลยนะครับ
Delegate.h มีการเพิ่มบรรทัดนี้เข้ามา
## อธิบาย Code ##
เป็นการ ประกาศว่าจะมีการใช้งาน NavigationController แค่นั้นครับ
เรามาดูที่ Delegate.m กันต่อนะครับ
## อธิบาย Code ##
ใน Method นี้เป็น Method ที่จะเรียกใช้งานแทบจะทันทีที่เรา Run Program เลยครับ แล้วข้างในมันมีอะไรบ้าง ?
self.window = [[[UIWindow alloc] initWithFrame : [[UIScreen mainScreen] bounds]] autorelease] ;
เป็นการกำหนดขนาดขอบเขตของการแสดงผลแบบเต็มจอที่ทาง xcode ให้มาครับ ในตอนนี้ยังไม่ต้องไปสนใจก็ได้ครับ
Delegate.h มีการเพิ่มบรรทัดนี้เข้ามา
## อธิบาย Code ##
เป็นการ ประกาศว่าจะมีการใช้งาน NavigationController แค่นั้นครับ
เรามาดูที่ Delegate.m กันต่อนะครับ
## อธิบาย Code ##
ใน Method นี้เป็น Method ที่จะเรียกใช้งานแทบจะทันทีที่เรา Run Program เลยครับ แล้วข้างในมันมีอะไรบ้าง ?
self.window = [[[UIWindow alloc] initWithFrame : [[UIScreen mainScreen] bounds]] autorelease] ;
เป็นการกำหนดขนาดขอบเขตของการแสดงผลแบบเต็มจอที่ทาง xcode ให้มาครับ ในตอนนี้ยังไม่ต้องไปสนใจก็ได้ครับ
MasterViewController *masterViewController = [[[ MasterViewController alloc ] initWithNibName: @"MasterViewController" bundle:nil] autorelease];
เป็นการสร้าง Object masterViewController ที่มีการใช้งาน .xib file
self.navigationController = [[[ UINavigationController alloc ] initWithRootViewController : masterViewController] autorelease];
สร้าง Object ของ Navigation bar แล้วบอกให้เรียกใช้งานรวมกับ masterViewController ครับ
self.window.rootViewController = self.navigationController ;
เป็นการกำหนด View เริ่มต้นที่จะแสดงผลเป็น View ที่มี NavigationController กับ masterViewController ตามที่ได้ตั้งค่าไว้ในบรรทัดด้านบนครับ
[ self.window makeKeyAndVisible ];
เป็นการแสดงผล View ขึ้นมาครับ ส่วนนี้ทาง xcode ก็มีมาให้ครับผม
คราวนี้ลองมาดูในส่วนของ masterViewController.h นะครับ
จะสังเกตว่ามีการเพิ่มขึ้นมาบรรทัดเดียวคือ
@property (strong, nonatomic) DetailViewController *detailViewController;
หากใครยังจำกันได้ Code นี้จะ เป็นการสร้าง Object ของ DetailViewController เพื่อที่จะนำมาใช้งานนั้นเองครับ
ต่อไปมาดูในส่วนของ masterViewController.m ครับ เนื่องจากมันเยอะเลยจะขอแบ่งเป็นทีละ Method นะครับ
Method นี้ทำงานเพียงตั้งค่า Title ที่อยู่ตรง NavigationController ให้เป็นคำว่า "Master" แค่นั้นเองครับ เราสามารถสามารถลบ Method นี้ทั้งหมดทิ้งได้ แล้วนำ code นี้ไปใส่ใน Method viewDidLoad ก็จะแสดงผลเหมือนกันครับ
self.title = @"Master"
ในส่วนของ Method viewDidLoad นั้น จะเป็นการเพิิ่มปุ่ม Edit และปุ่ม Add นั่นเองครับ ส่วนตรงนี้สำคัญผมจะอธิบายโดยละเอียดให้นะครับ
## อธิบาย Code ##
self.title = @"Master"
ในส่วนของ Method viewDidLoad นั้น จะเป็นการเพิิ่มปุ่ม Edit และปุ่ม Add นั่นเองครับ ส่วนตรงนี้สำคัญผมจะอธิบายโดยละเอียดให้นะครับ
## อธิบาย Code ##
self.navigationItem.leftBarButtonItem = self.editButtonItem;
ความหมายตรงๆเลยครับ คือ เป็นการเพิ่มปุ่ม Edit ให้อยู่ทางด้านซ้ายของ Navigation Bar นั่นเองครับ
UIBarButtonItem *addButton = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem :
UIBarButtonSystemItemAdd target:self action : @selector (insertNewObject:)] autorelease ];
เป็นการสร้างปุ่มสำหรับใช้ใน Bar และกำหนดให้เป็นปุ่มรูป + และเมื่อกดปุ่มจะเป็นการเรียกใช้งาน Method insertNewObjects นั่นเองครับ
self.navigationItem.rightBarButtonItem = addButton;
กำหนดให้ปุ่มที่สร้างขึ้นมาอยู่ทางขวาของ Navigation Bar ครับ
Method insertNewObject
if (!_objects) {
_objects = [[NSMutableArray alloc] init];
}
เป็นการตรวจสอบว่า Array _object ได้ถูก alloc แล้วหรือไม่ ถ้าไม่ให้ทำการ Alloc ครับ
[_objects insertObject : [NSDate date] atIndex : 0 ];
เพิ่ม Object ที่เป็น วันที่และเวลาลงไปใน Array _object
NSIndexPath *indexPath = [ NSIndexPath indexPathForRow : 0 inSection : 0 ];
สร้าง indexPath ที่ชี้ไปยัง Section 0 row 0
[ self.tableView insertRowsAtIndexPaths:@[indexPath] withRowAnimation : UITableViewRowAnimationAutomatic ];
นำ indexPath ที่สร้างขึ้นไปเก็บไว้ใน tableView
กำหนด Section เท่ากับ 1 และจำนวนแถวเท่ากับจำนวนข้อมูลใน Array _object
สร้าง Object NSDate มาเก็บข้อมูลใน Array _object แล้วนำไปแสดงในแต่ละแถวของ tableView
Method canEditRowAtIndexPath ใช้บอกว่าสามารถแก้ไขข้อมูลใน tableView ได้
Method commitEditingStyle โดยปกติจะใช้คู่กับ Method ด้านบนเป็นการบอกว่าเมื่อทำการเลือก Edit แล้วจะให้ทำงานอย่างไร โดยเงื่อนไขใน if else คือตรวจสอบว่า editingStyle แบบไหน ( Delete หรือ Insert ) หากว่าเป็นการ Delete ก็ทำการลบข้อมูลออกจาก Array _object และลบแถวนั้นออกจากการแสดงผลใน tableView
Method didSelectRowAtIndexPath เป็นการสร้าง Object ของ detailView และ NSDate แล้วให้ข้อมูลของ NSDate ไปเก็บใน Object ID ที่ชื่อว่า detailItem ของ detailView พร้อมทั้งเปลี่ยน View นั่นเองครับ
สุดท้ายลองมาดูใน DetailViewController กันครับว่ามีอะไรบ้าง
เริ่มกันที่ DetailViewController.h ครับ
ประกาศตัวแปร 1 ตัวเป็นชนิด ID (ID คือ ชนิดข้อมูลใดๆครับ) และสร้าง Object Label 1 Object ครับ
DetailViewController.m ต่อเลยนะครับ
เมื่อโหลด View ขึ้นมาแล้วให้ใช้งาน Method configureView
นำข้อมูล detailItem ที่ส่งมาจาก masterView มาแสดงใน Object Label ที่สร้างขึ้น
สอง Method ด้านบนมีการทำงานต่างกันแต่ผมออกมาเหมือนกันน่ะครับ สามารถเลือกใช้อย่างใดอย่างนึงก็ได้ครับ ( ลอง Comment Method ใดซัก Method หนึ่งแล้วลอง Run ดูครับผลที่ได้จะออกมาเหมือนเดิม )
Method viewDidUnload จะทำให้ข้อมูล Label ออกไปหาก View ถูก Unload ครับ ( สำหรับโปรแกรมนี้ Method จะทำงานเมื่อเปลี่ยน View กลับไปยัง masterView นั่นเอง )
Method setDetailItem เป็นการตรวจสอบมาข้อมูลที่ส่งมาใหม่กับข้อมูลเดิมตรงกันหรือไม่ครับ หากไม่ตรงก็จะทำการลบข้อมูลเดิมทิ้งไปแล้วเรียกใช้งาน Method configureView ต่อไปครับ
สามารถใช้งานการหมุนของตัวเครื่องได้ อยากรู้ว่าเป็นอย่างไรลอง Run แล้วเลือกที่ Simulator หลังจากนั้นกด Alt ค้างไว้แล้วกด ลูกศรซ้ายขวาดูครับ
บทความนี้ก็จะเป็นการทำความเข้าใจอย่างเดียวไม่มีเขียน code เองนะครับ ส่วนบทความหน้าเราจะมาลองเขียนให้ใช้งาน NavigationController ของเราเองดูนะครับ
สุดท้ายลองมาดูใน DetailViewController กันครับว่ามีอะไรบ้าง
เริ่มกันที่ DetailViewController.h ครับ
ประกาศตัวแปร 1 ตัวเป็นชนิด ID (ID คือ ชนิดข้อมูลใดๆครับ) และสร้าง Object Label 1 Object ครับ
DetailViewController.m ต่อเลยนะครับ
เมื่อโหลด View ขึ้นมาแล้วให้ใช้งาน Method configureView
นำข้อมูล detailItem ที่ส่งมาจาก masterView มาแสดงใน Object Label ที่สร้างขึ้น
สอง Method ด้านบนมีการทำงานต่างกันแต่ผมออกมาเหมือนกันน่ะครับ สามารถเลือกใช้อย่างใดอย่างนึงก็ได้ครับ ( ลอง Comment Method ใดซัก Method หนึ่งแล้วลอง Run ดูครับผลที่ได้จะออกมาเหมือนเดิม )
Method viewDidUnload จะทำให้ข้อมูล Label ออกไปหาก View ถูก Unload ครับ ( สำหรับโปรแกรมนี้ Method จะทำงานเมื่อเปลี่ยน View กลับไปยัง masterView นั่นเอง )
Method setDetailItem เป็นการตรวจสอบมาข้อมูลที่ส่งมาใหม่กับข้อมูลเดิมตรงกันหรือไม่ครับ หากไม่ตรงก็จะทำการลบข้อมูลเดิมทิ้งไปแล้วเรียกใช้งาน Method configureView ต่อไปครับ
สามารถใช้งานการหมุนของตัวเครื่องได้ อยากรู้ว่าเป็นอย่างไรลอง Run แล้วเลือกที่ Simulator หลังจากนั้นกด Alt ค้างไว้แล้วกด ลูกศรซ้ายขวาดูครับ
 |
| สามารถใช้งานในแนวนอนได้ด้วย ! |
บทความนี้ก็จะเป็นการทำความเข้าใจอย่างเดียวไม่มีเขียน code เองนะครับ ส่วนบทความหน้าเราจะมาลองเขียนให้ใช้งาน NavigationController ของเราเองดูนะครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น