Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone





Clound SSD Virtual Server

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

iOS/iPhone Collection View and Master Detail


สำหรับตัวอย่างนี้ เป็นการแสดง Master Detail จาก Collection View จะเป็นการเขียนต่อจากบทความที่แล้ว เพราะฉะนั้นถ้าจะให้เข้าใจ แนะนำให้ไปดูบทความก่อนหน้านี้ ตามลิ้งค์นี้

iOS/iPhone Collection View (UICollectionViewController) Multiple Column Item (iPhone, iPad)


iOS/iPhone Collection View and Master Detail

จกาตัวอย่างก่อนหน้านี้ เราได้ออกแบบ Collection View และ Collection View Cell บน Storyboard

iOS/iPhone Collection View and Master Detail

ให้เราสร้าง Navigation Controller ให้กับ Collection View โดยการเลือกที่ Editor -> Embed in -> Navigation Controller








iOS/iPhone Collection View and Master Detail

จะได้ Navigation Controller ดังรูป

iOS/iPhone Collection View and Master Detail

ใส่ชื่อ Title Bar ให้กับ View โดยตั้งชื่อเป็น Master Page

iOS/iPhone Collection View and Master Detail

สร้าง View Controller ขึ้นมาอีก 1 ตัว เราจะเรียกว่า View 2

iOS/iPhone Collection View and Master Detail

ทำการเชื่อมโยง Action จาก Collection View Cell มายัง View 2

iOS/iPhone Collection View and Master Detail

Selection Segue แบบ push

iOS/iPhone Collection View and Master Detail

ใน View 2 จะได้ Navigation Controller เช่นเดียวกัน เปลี่ยนชื่อ Title ให้เป็น Detail Page

iOS/iPhone Collection View and Master Detail

ตอนนี้บน Storyboard ทั้งหมดจะได้ดังรูป

iOS/iPhone Collection View and Master Detail

ทำการสร้าง Object ของ Image View และ Label บน View 2

iOS/iPhone Collection View and Master Detail

ให้ทำการ New File.. ขึ้นมา 1 ชุด เราจะสร้าง Class ให้กับ View 2

iOS/iPhone Collection View and Master Detail

เลือกเป็นแบบ Objective-C class

iOS/iPhone Collection View and Master Detail

ตั้งชื่อเป็น DetailViewController และเลือก Subclass เป็น UIViewController

iOS/iPhone Collection View and Master Detail

ได้ไฟล์ Class ขึ้นมา 1 ชุด

iOS/iPhone Collection View and Master Detail

กำหนด Custom Class ของ View 2 เป็น DetailViewController

iOS/iPhone Collection View and Master Detail

คลิกที่เส้นของ Segue ให้กำหนดชื่อ identifier เป็น showDetail

iOS/iPhone Collection View and Master Detail

เสร็จแล้วให้ทำการสร้าง 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

iOS/iPhone Collection View and Master Detail

แสดงหน้าแรกของ App บน Collection View ซึ่งแบ่งเป็น Column ต่าง ๆ

iOS/iPhone Collection View and Master Detail

แสดง Detail ของแต่ล่ะ Item

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-11-07 10:37:09 / 2017-03-25 23:52:51
  Download : Download  iOS/iPhone Collection View and Master Detail (Objective-C, iPhone, iPad)
 Sponsored Links / Related

 
iOS/iPhone Page Control (UIPageControl) and ScrollView (UIScrollView) (iPhone, iPad)
Rating :

 
iOS/iPhone Hide Input Keyboard and Validate Text Field (Password, Number, URL, E-Mail, Phone Number)
Rating :

 
iOS/iPhone AD BannerView (iAd Framework)
Rating :

 
iOS/iPhone Table View Show Enable Edit / Delete Cell (Swipe To Delete) (UITableView)
Rating :

 
iOS/iPhone Search Data from Web Server (URL,Website)
Rating :

 
iOS/iPhone Edit Update Data on Web Server (URL,Website)
Rating :

 
iOS/iPhone Delete Remove Data on Web Server (URL,Website)
Rating :

 
iOS/iPhone Register Form and Send Data to Web Server (PHP & MySQL)
Rating :

 
iOS/iPhone Login Username and Password from Web Server (PHP & MySQL)
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   







Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่