Title & Subtitle on Image View

คราวที่แล้วเขียนไว้เกี่ยวกับการใช้ ImageBrowser แสดงรูปภาพที่ถูกเก็บอยู่ใน CoreData ไปแล้ว

ImageBrowser ยังมีลูกเล่นอีกอย่างนึง นั่นก็คือการแสดงชื่อของรูปภาพ(Title) และข้อมูลของรูปภาพ(Subtitle)ไว้ใต้รูป แบบนี้

เราสามารถเลือกได้ว่าจะให้ตัว Image Browser แสดง Title หรือ Subtitle หรือไม่ จากการปรับใน Inspector ของ Image Browser ใน IB(interface builder) ได้เลย

…เกริ่นกันมานานพอดูแล้ว เริ่มทำกันเลยดีกว่า

การทำให้ Image Browser แสดง Title หรือ Subtitleที่ถูกเก็บใน Core Data นั่น ทำโดยการตั้งชื่อ Attribute ใน Entity ที่ใช้เก็บรูปภาพให้มีชื่อว่า

- imageTitle สำหรับชื่อรูปภาพ type เป็น string และ
- imageSubtitle สำหรับรายละเอียดใต้ภาพ type เป็นสตริง เช่นกัน

จากนั้น เราก็เก็บข้อมูลชื่อรูปภาพและรายละเอียดต่างๆลงไปใน Attribute ที่เรากำหนดไว้ เพียงแค่นี้ เราก็สามารถสร้างคำบรรยายใต้ภาพและคำบรรยายใต้ภาพได้แล้วหล่ะครับ

Image Browser With Core Data

หลังจากเพียรพยายามมานาน ก็ทำได้ซะทีObject รูปภาพแต่ละรูปที่ Image Browser จะนำไปแสดงผล จะต้องเป็น Object ที่มี 3 Methods นี้รวมอยู่ด้วย- (NSString *)imageRepresentationType- (NSString *)imageRepresentation- (NSString *)imageUID ถ้าเป็นการเขียนด้วย Class เราก็กำหนดให้เป็น Methods ของ Object ได้ แต่ถ้าเป็นใน Core Data เราก็ Add Attribute ให้ Entity ลงไปตามชื่อ Method ของมันเลย ก็จะได้ดังนี้

 

 Attribute ของทั้ง 3 methods เป็น String นะครับ จากนั้นกำหนดค่าของแต่ละ Attribute โดยให้

imageRepresentationType มีค่าเป็น IKImageBrowserPathRepresentationType

imageRepresentation และ imageUID มีค่าเป็น path ของรูปภาพ

อาจจะกำหนดตอน Add รูปภาพเช่น

if(addObject && [self isImageFile:path]) {

NSManagedObjectContext *context = [[NSApp delegate] managedObjectContext];

NSManagedObject *imageEntity = nil;

NSString *imageName = [[path lastPathComponent] stringByDeletingPathExtension];

imageEntity = [NSEntityDescription insertNewObjectForEntityForName:@"Image"

      inManagedObjectContext:context];

[imageEntity setValue:path forKey:@"imageUID"];

[imageEntity setValue:IKImageBrowserPathRepresentationType forKey:@"imageRepresentationType"];

[imageEntity setValue:path forKey:@"imageRepresentation"];

[imageEntity setValue:imageName forKey:@"imageName"];  

}  

 

จากนั้น ทำการ binding กับ Image Array ของ Core data ซะ โดยการกำหนดให้เป็น 

จากนั้นก็แค่กำหนด Datasorce ของ image Browser เป็น Image Array ของ Core Data เท่านี้ก็เรียบร้อยครับ