 |
| หน้า Master View จ้า |
 |
| หน้า Detail View ครับ |
เพื่อจะให้เข้าใจในการใช้งาน NavigationController และเป็นการทบทวนบทความที่ผ่านมาทั้งหมด เพราะฉะนั้นเนื้อหาในบทความนี้อาจจะไม่ได้ละเอียดนะครับ
เริ่มกันเลยดีกว่า !!
- สร้าง Project SingleView Application
- แก้ไข Code ใน Delegate.h ให้เป็นดังนี้
 |
มีการสร้าง Object NavigationController เพิ่มขึ้นมาครับ
|
 |
นำ NavigationController ไปรวมกับ ViewController แล้วกำหนดให้เป็น RootView ( rootViewController คือ View แรกที่ทำการแสดงผลในขณะที่โปรแกรมทำการ Run )
- เลือก .xib file แล้วทำตามขึ้นตอนตามรูป
เป็นการกำหนดขอบเขตการแสดงผลของ View ให้กันพื้นที่ด้านบนไว้ให้ Navigation Bar เพื่อที่เวลาแสดงผลจะได้ไม่ไปซ้อนทับกันกับ View อื่นๆที่แสดงผลด้วยครับ
เคยผ่านมาหมดแล้วครับ คงไม่ต้องอธิบายอะไร
สร้างข้อมูลสำหรับ Pokemon 1 ตัว ถ้าต้องการได้ 3 ตัวเหมือนตัวอย่างก็ทำเพิ่มนะครับ สำหรับข้อมูล Pokemon ที่ผมนำมาใช้ผมนำข้อมูลมาจาก กดที่นี่ นะครับ ( อย่าลืมนำรูปมาใส่ใน Project ด้วยนะครับ )
แสดงผลในแนวนอนได้ / จำนวนแถวเท่ากับข้อมูลใน Array และสร้าง Object NSDictionary มาดึงข้อมูลจาก Array แล้วนำมาแสดงในแต่ละ Cell
อย่าลืมไปเพิ่ม TableView ใน .xib file แล้ว Set Delegate และ Outlet ด้วยนะครับ
ถึงตรงนี้ให้ลอง Build & Run ดูนะครับเราจะได้ View แรกเหมือนตัวอย่างด้านบนสุดแล้วนะครับ
- เพิ่ม File Objective - C Class with xib file แล้วไปที่ xib ลาก Object มาวางตามรูป ( อย่าลืม Set Navigation Bar ด้วยนะครับ ) ของผมตั้งชื่อเป็น detailView นะครับ
 |
| เลือกให้ไม่มีเส้นระหว่างแถวเพื่อความสวยงามครับ |
- แก้ไข Code ใน detailView.h ให้เป็นดังนี้
 |
| สร้าง Object ต่างๆ และ Method |
- แก้ไข Code ใน detailView.m ให้เป็นดังนี้
## อธิบาย Code ## ใน Method viewDodLoad
NSString *imageName = [self.detailDictionary objectForKey : @"Image"];
สร้าง Object NSString เก็บข้อความจาก DetailDictionary
ที่ได้รับข้อมูลมาจาก tempDictionary ใน Method
[ didSelectRowAtIndexPath ] ใน viewController.m นั่นเอง โดยเก็บข้อความที่สัมพันธ์กับ Key Image
self.pokeImageView.image = [UIImage imageNamed : imageName];
Set Image ปกติครับ
[self initialKeyArray];
เรียกใช้งาน Method initialKeyArray
## อธิบาย Code ##
สร้าง Object ใน Array ให้มีชื่อเหมือนชื่อ Key ที่เราได้สร้างข้อมูลไว้ใน NSDictionary ใน viewController.m ครับ เพื่อที่จะได้เรียกใช้งานข้อมูลใน detailDictionary ได้
## อธิบาย Code ##
NSString *keyString = [self.keyArray objectAtIndex : indexPath.row];
cell.textLabel.text = keyString;
สร้าง NSString มาเก็บข้อความจาก Array แล้วนำมาแสดงผลใน textLabel
cell.detailTextLabel.text = [self.detailDictionary objectForKey : keyString];
นำข้อมูลจาก detailDictionary มาแสดงใน detailTextLabel โดยอ้างอิงข้อมูลจาก keyString
cell.accessoryType = UITableViewCellAccessoryNone;
กำหนดให้ไม่มี accessoryType ( ปุ่มด้านหลังแต่ละแถว )
cell.selectionStyle = UITableViewCellSelectionStyleNone;
กำหนดให้ไม่สามารถทำการเลือก Cell ในตารางได้
จากนั้นกลับไปยัง MasterView.m แล้วเพิ่ม Method didSelectRowAtIndexPath ตามด้านล่างนี้ลงไปครับ
## อธิบาย Code ##
NSDictionary *tempDictionary = [[ self.pokeArray objectAtIndex : indexPath.section ] objectAtIndex : indexPath.row];
สร้าง NSDictionary มาเก็บข้อมูลใน Array ที่ได้สร้างไว้โดยอ้างอิงจาก Section และ Row ครับ
DetailViewController *detailViewController = [[ DetailViewController alloc ] initWithNibName : @"DetailViewController" bundle : nil ];
สร้าง Object ของ DetailViewController Class
detailViewController.detailDictionary = tempDictionary;
นำข้อมูลใน tempDictionary ไปเก็บไว้ใน detailDictionary ของ detailViewController Class
detailViewController.title = [tempDictionary objectForKey : @"Name"];
กำหนด Title หน้า detailView ตามข้อความใน tempDictionary โดยใช้ Key @"Name"
[self.navigationController pushViewController : detailViewController animated : YES];
[detailViewController release];
เลื่อน View โดยให้ DetailView มาแสดงผล
สุดท้ายให้ลอง Build & Run ดูครับหากทำถูกต้องทั้งหมดจะได้โปรแกรมตามตัวอย่างครับ
บทความนี้เรียกได้ว่าเป็นการทบทวนบทความทั้งหมดที่ผมได้เขียนมาเลยก็ว่าได้นะครับหากมีความเข้าใจในบทความก่อนๆทั้งหมดน่าจะเข้าใจได้ไม่ยากครับ สำหรับบทความนี้คงหมดแค่นี้ครับ หากใครมีปัญหา Run ไม่ผ่านหรือมีข้อสงสัยใดๆ ก็ให้ Post ทิ้งไว้นะครับแล้วผมจะมาตอบให้ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น