iOS/iPhone Collection View and Master Detail (Objective-C, iPhone, iPad) |
iOS/iPhone Collection View and Master Detail (Objective-C, iPhone, iPad) บทความนี้เป็นภาคต่อของ Collection View เป็นการแสดงข้อมูลแบบ Collection แบ่งออกเป็นหลาย ๆ Column และในตัวอย่างนี้จะมีการเพิ่มฟีเจอร์เป็นแบบ Master Detail คือสามารถคลิกในรายการของแต่ล่ะ Item และแสดงรายละเอียดต่าง ๆ ใน View ที่เป็น Detail หรือรายละเอียด
iOS/iPhone Collection View and Master Detail
สำหรับตัวอย่างนี้ เป็นการแสดง Master Detail จาก Collection View จะเป็นการเขียนต่อจากบทความที่แล้ว เพราะฉะนั้นถ้าจะให้เข้าใจ แนะนำให้ไปดูบทความก่อนหน้านี้ ตามลิ้งค์นี้
iOS/iPhone Collection View (UICollectionViewController) Multiple Column Item (iPhone, iPad)
จกาตัวอย่างก่อนหน้านี้ เราได้ออกแบบ Collection View และ Collection View Cell บน Storyboard
ให้เราสร้าง Navigation Controller ให้กับ Collection View โดยการเลือกที่ Editor -> Embed in -> Navigation Controller
จะได้ Navigation Controller ดังรูป
ใส่ชื่อ Title Bar ให้กับ View โดยตั้งชื่อเป็น Master Page
สร้าง View Controller ขึ้นมาอีก 1 ตัว เราจะเรียกว่า View 2
ทำการเชื่อมโยง Action จาก Collection View Cell มายัง View 2
Selection Segue แบบ push
ใน View 2 จะได้ Navigation Controller เช่นเดียวกัน เปลี่ยนชื่อ Title ให้เป็น Detail Page
ตอนนี้บน Storyboard ทั้งหมดจะได้ดังรูป
ทำการสร้าง Object ของ Image View และ Label บน View 2
ให้ทำการ New File.. ขึ้นมา 1 ชุด เราจะสร้าง Class ให้กับ View 2
เลือกเป็นแบบ Objective-C class
ตั้งชื่อเป็น DetailViewController และเลือก Subclass เป็น UIViewController
ได้ไฟล์ Class ขึ้นมา 1 ชุด
กำหนด Custom Class ของ View 2 เป็น DetailViewController
คลิกที่เส้นของ Segue ให้กำหนดชื่อ identifier เป็น showDetail
เสร็จแล้วให้ทำการสร้าง IBOutlet ดังรูป
ส่วนที่เหลือจะเป็น Code ทั้งหมด
CustomColumnCell.h
//
// CustomColumnCell.h
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface CustomColumnCell : UICollectionViewCell
@property (nonatomic, strong) IBOutlet UIImageView *displayImage;
@property (nonatomic, strong) IBOutlet UILabel *displayDetail;
@end
CustomColumnCell.m
//
// CustomColumnCell.m
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import "CustomColumnCell.h"
@implementation CustomColumnCell
@synthesize displayImage = _displayImage;
@synthesize displayDetail = _displayDetail;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
}
*/
@end
MasterViewController.h
//
// MasterViewController.h
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface MasterViewController : UICollectionViewController
@end
MasterViewController.m
//
// MasterViewController.m
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import "MasterViewController.h"
#import "CustomColumnCell.h"
#import "DetailViewController.h"
@interface MasterViewController ()
{
// A array Object
NSMutableArray *myObject;
// A dictionary object
NSDictionary *dict;
// Define keys
NSString *images;
NSString *detail;
}
@end
@implementation MasterViewController
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
// Define keys
images = @"Images";
detail = @"Detail";
myObject = [[NSMutableArray alloc] init];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img1.png", images,
@"Picture 1", detail,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img2.png", images,
@"Picture 2", detail,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img3.png", images,
@"Picture 3", detail,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img4.png", images,
@"Picture 4", detail,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img5.png", images,
@"Picture 5", detail,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img6.png", images,
@"Picture 6", detail,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img7.png", images,
@"Picture 7", detail,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img8.png", images,
@"Picture 8", detail,
nil];
[myObject addObject:dict];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
@"img9.png", images,
@"Picture 9", detail,
nil];
[myObject addObject:dict];
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return myObject.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CustomColumnCell *myCell = [collectionView
dequeueReusableCellWithReuseIdentifier:@"myCell"
forIndexPath:indexPath];
NSDictionary *tmpDict = [myObject objectAtIndex:indexPath.row];
UIImage* theImage = [UIImage imageNamed:[tmpDict objectForKey:images]];
myCell.displayImage.image = theImage;
myCell.displayDetail.text= [tmpDict objectForKey:detail];
return myCell;
}
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
if ([[segue identifier] isEqualToString:@"showDetail"]) {
NSIndexPath *IndexPath = [[self.collectionView indexPathsForSelectedItems] objectAtIndex:0];
NSDictionary *tmpDict = [myObject objectAtIndex:IndexPath.row];
[[segue destinationViewController] setImageItem:[tmpDict objectForKey:images]];
[[segue destinationViewController] setDetailItem:[tmpDict objectForKey:detail]];
}
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
DetailViewController.h
//
// DetailViewController.h
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface DetailViewController : UIViewController
{
IBOutlet UIImageView *imgViewImage;
IBOutlet UILabel *lblViewDetail;
}
@property (strong, nonatomic) id sImage;
@property (strong, nonatomic) id sDetail;
-(void) setImageItem:(id) newImage;
-(void) setDetailItem:(id) newDetail;
@end
DetailViewController.m
//
// DetailViewController.m
//
// Created by Weerachai on 11/3/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import "DetailViewController.h"
@interface DetailViewController ()
@end
@implementation DetailViewController
@synthesize sImage;
@synthesize sDetail;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
UIImage* theImage = [UIImage imageNamed:[sImage description]];
imgViewImage.image = theImage;
lblViewDetail.text = [sDetail description];
}
- (void)setImageItem:(id)newImage
{
sImage = newImage;
}
- (void)setDetailItem:(id)newDetail
{
sDetail = newDetail;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)dealloc {
[imgViewImage release];
[lblViewDetail release];
[super dealloc];
}
@end
สำหรับ Code ทั้งหมดเป็นการ Apply มาจากการส่งค่าระหว่าง View สามารถดูแล้วเข้าใจได้โดยไม่ยาก
iOS/iPhone Passing Data Between View (Objective-C,iPhone,iPad)
iOS/iPhone Storyboard and Passing Data Between View (Objective-C,iPhone)
Screenshot
แสดงหน้าแรกของ App บน Collection View ซึ่งแบ่งเป็น Column ต่าง ๆ
แสดง Detail ของแต่ล่ะ Item
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
|
|
|
Create/Update Date : |
2012-11-07 10:37:09 /
2017-03-25 23:52:51 |
|
Download : |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|