khomkrit | Objective-C, iOS

JSON บน iOS 5

2011-11-20T09:05:00.001+07:00

ปัจจุบันเราคงปฏิเสธไม่ได้ว่าเราใช้ JSON กันบ่อยขึ้น และในวงกว้างขึ้นเรื่อยๆ

เดิมหากจะทำอะไรกับ JSON เราก็จะมักจะต้องพึ่งพา third party library อยู่เสมอ แต่เมื่อมาถึงยุคของ iOS 5 Apple ก็ได้เพิ่ม JSON library เข้ามาให้เราพร้อมใช้ได้ง่ายๆ แล้ว

ทำให้เราสามารถแปลง Object อย่าง NSString, NSNumber, NSArray หรือ NSDictionary ให้กลายเป็น JSON ได้ง่ายๆ โดยไม่จำเป็นต้องพึ่งพา third party library อีกต่อไป

พระเอกของงานนี้ก็คือ NSJSONSerialization เราจะใช้มันช่วยในการแปลง Object ให้กลายเป็น JSON และแปลงจาก JSON กลับมาเป็น Object ได้ ดังนี้

แปลง JSON Data ให้กลายเป็น Object

// สมมติว่าเราได้รับ data มาจากอินเทอร์เน็ต

NSData* data = [NSData dataWithContentsOfURL: [NSURL URLWithString: urlString]];

// แปลงเป็น Object ด้วยพระเอกของเรา

NSDictionary* json = [NSJSONSerialization JSONObjectWithData: data

options: kNilOptions

error: &error];

สำหรับ options ของการแปลง JSON ให้กลายเป็น Object นั้น จะเกี่ยวกับเรื่องการความต้องการให้สิ่งที่แปลงออกมามีลักษณะเป็นอย่างไรในลักษณะของ Mutable หรือ Immutable และอยากจะให้ top level object แยกกันเป็น array หรือ dictionary หรือไม่ อ่านรายละเอียด options ได้ที่นี่

แปลง Object เป็น JSON Data

// เริ่มจากเรามี Object ที่ต้องการแปลงเป็น JSON

NSDictionary* objectInfo = ...

// แปลงเป็น JSON ด้วยพระเอกของเรา

NSData* jsonData = [NSJSONSerialization dataWithJSONObject: objectInfo

options: NSJSONWritingPrettyPrinted

error: &error];

// ลองดูหน้าตาของ JSON ที่เราแปลงได้

NSString *jsonString = [[NSString alloc] initWithData:jsonData

encoding:NSUTF8StringEncoding];

กรณีนี้ถ้าหากเราต้องการส่งข้อมูลไปที่อื่นๆ เช่นส่งไปยัง server เราสามารถกำหนด option เป็น kNilOptions ได้ เพื่อตัดอักขระส่วนที่ไม่จำเป็นออกไป แต่ที่เรากำหนด options เป็น NSJSONWritingPrettyPrinted ก็เพื่อให้เราสามารถอ่านได้ง่ายนั่นเอง

เพียงเท่านี้เราก็สามารถทำงานร่วมกับ JSON ได้อย่างมีความสุขแล้ว

พักผ่อนที่ The Living Hill Resort

2011-11-11T16:46:00.000+07:00

เคยไปพักผ่อนมาหลายๆ ที่ แต่ที่ The Living Hill Resort นี่ต้องเขียนถึงสักหน่อย เนื่องจากเป็นรีสอร์ทที่มีประวัติโชกโชนอยู่ในเว็บไซต์ชื่อดังหลายเว็บ ลองหาดูจะพบว่าชื่อเสียงในทางลบจะค่อนข้างเยอะนิดนึง ชวนให้คนไม่กล้าไปพักกันสักเท่าไหร่

คำชม

พนักงานพูดจาดีมาก บริการก็ดีมากเลย ดูเป็นกันเองคอยช่วยเหลือนู่นนี่ โทรมาถามไถ่เป็นห่วงว่าเราจะหารีสอร์ทไม่เจอด้วยล่ะ (แหงล่ะ ทางไปซับซ้อนมาก)
เงียบสงบ ที่พักคนน้อยดี (อาจเพราะไปวันที่คนน้อย) มีที่นั่งชิลๆ ตากลมเย็นๆ สบายดีจัง มีดาดฟ้าให้นอนดูดาวตอนกลางคืนด้วยถ้าโชคดีไปวันที่ฟ้าเปิด
ที่พักอยู่บนยอดเนินเขาสูง มองไปเห็นวิวรอบๆ ตัวเป็นแนวเขายาวล้อมรอบ มีลมพัดเย็นตลอด
ไม่ได้แย่อย่างที่ในเว็บส่วนใหญ่ที่หาเจอบ่นๆ กัน
ถ้าไม่มีดีลคงไม่ไป ห้องแพงเกิน แต่ถ้า 2 พันเหมือนเดิมมีโอกาสอาจไปพักอีกสัก 2-3 วัน
สัญญาณ truemove ชัดเจนใช้ได้ ทำให้ผมมี Google Map นำทางไปจนถึงจนได้ ไม่งั้นหลงชัวร์
ระหว่างทางแวะกินสเต๊กและไอติมอร่อยๆ ที่ร้าน Dairy Home
รูป

คำติ:

โทรศัพท์ติดต่อรีสอร์ทติดยากมาก (ดังคนเขาว่า) ถ้าเทียบกับรีสอร์ทที่อื่นๆ ที่เคยไปพัก
ตอนเช้างง ไม่รู้ว่าอาหารเช้าไปเอาตรงไหน ที่ไหนได้เดินลงมาแล้วจะมีพนักงานมาถามว่าห้องไหน แล้วจะมีคนเอามาเสริฟให้เลยถึงที่
แผนที่ในเว็บ thelivinghill.com การเดินทางไปไม่ชัดเจน เขียนแค่นั้นใครจะเดินทางไปถูก -_-" หลงได้ง่ายๆ เลย เส้นทางก็วกวนซับซ้อน ผมโชคดีที่คนรู้จักไปพักมาก่อน แล้วบันทึก location ไว้เลยเปิด Google Map ตามไปได้ไม่ยาก (ลองเทียบแผนที่จากในเว็บ กับแผนที่ใน Google Map ดูสิ ว่ามันช่างต่างกันมากเหลือเกิน)
หาที่นี่ไม่เจอใน Google Map

View Larger Map แผนที่ The Living Hill Resort จากแยกบางพลัด กรุงเทพ ไปถึงทางเข้า The Living Hill Resort

แสดงตำแหน่ง วิธีการเดินทางไป และสถานที่ตั้งของ The Living Hill Resort
ถึงจุด B แล้วให้เลี้ยวขวาไปครับ จะเป็นทางดิน ขึ้นเนินชันมาก

ลาก่อน สตีฟ จ็อบส์

2011-10-06T22:26:00.001+07:00

สู่สุขติเถิด ลาก่อนสตีฟ จ็อบส์

He changed them. He changed us. He changed you.

วาดกราฟใน iOS ด้วย CoreGraphic

2011-10-06T21:12:00.001+07:00

เห็นหลายๆ App มีการวาดกราฟสวยๆ กัน โดยเฉพาะ App เกี่ยวกับหุ้นเช่น App ของ Bloomberg เป็นต้น จึงลองวาดเล่นดูสักหน่อย ถือเป็นการทบทวนทักษะทางด้าน CoreGraphic ก็แล้วกัน เพราะตั้งแต่ทำงานมาแทบไม่ได้ใช้ทักษะทางด้านนี้เลย

โดยรูปเป้าหมายที่ต้องการ จะมีหน้าตาดังนี้

หลักการการวาดรูปต่างๆ ลงไปก็คือเราจะเข้าไป override method - (void)drawRect:(CGRect)rect ของ UIView และสั่งวาดสิ่งต่างๆ ข้างใน method นี้

เมื่อเราต้องการวาดอะไรลงไปก็ตาม เราต้องการสิ่งที่เรียกว่า context และเพื่อให้เข้าใจได้ง่ายๆ ให้มองว่า context ตัวนี้ก็คือผืนผ้าใบที่เราจะวาดสิ่งต่างๆ ลงไปนั่นเอง ดังนั้นเมื่อเราจะเริ่มทำอะไร เราต้องได้ context มาก่อน เพื่อเอาไว้ใช้อ้างอิงในภายหลัง ว่าเราจะทำอะไร จะวาดอะไรลงไปใน context (ผืนผ้าใบ) อันนี้ (context เป็น stateful ซึ่งแปลว่าหากเรากำหนดค่าอะไรให้มันไปแล้ว มันก็จะยังคงค่านั้นเสมอ จนกว่าเราจะเปลี่ยนแปลงค่าให้มันเองในภายหลัง) ดังนี้

// get current context

CGContextRef context = UIGraphicsGetCurrentContext();

เริ่มจากการวาดเส้นประ (dash) ที่เป็นพื้นหลังของกราฟก่อน เริ่มวาดเส้นประ (dash) โดยกำหนดความกว้างของเส้น สีที่จะวาด ลักษณะของเส้นประ ดังนี้

// draw bg line

CGContextSaveGState(context);

CGContextSetLineWidth(context, 1.0);

CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);

CGFloat dashArray[] = {4,4,4,4};

CGContextSetLineDash(context, 3, dashArray, 4);

เมื่อเรากำหนดลักษณะของเส้นที่จะวาดเรียบร้อยแล้ว ต่อไปก็กำหนดเส้นที่จะวาด ว่าจะวาดเส้นโดยเริ่มจากจุดไหน ไปถึงจุดไหนดังนี้

for(int i = 50; i <= 300; i += 50){

CGContextMoveToPoint(context, i, 200);

CGContextAddLineToPoint(context, i, 480);

CGContextMoveToPoint(context, 0, 200 + i);

CGContextAddLineToPoint(context, 320, 200 + i);

}

เมื่อกำหนดเส้นที่จะวาดเรียบร้อยแล้ว ก็สั่งให้วาดลงไปใน context (ผืนผ้าใบ) ด้วยฟังก์ชั่น CGContextStrokePath(context) ได้เลย

CGContextStrokePath(context);

CGContextRestoreGState(context);

สำหรับความหมายของ CGContextSaveGState(context) และ CGContextRestoreGState(context) ให้อ่านได้จากบทความนี้ สั้นๆ ก็คือมันเป็นการบันทึกสถานนะของการกำหนดค่าต่างๆ ให้กับ context หลังจากนั้นเมื่อเราทำอะไรเสร็จแล้ว เราก็จะย้อนกลับไปสถานะของ context ก่อนหน้าที่เราจะทำอะไรกับมันด้วยการ restore context นั่นเอง เมื่อเราสั่งให้วาดเส้นประแล้วเราจะได้ผลลัพธ์ดังนี้

ถ้าหากเราสั่ง gradient ลงไปใน context ตอนนี้ เราจะได้ gradient เต็มหน้าจอเนื่องจาก context ของเราจะมีรูปร่างเป็นสี่เหลี่ยมผืนผ้าเต็มหน้าจอนั่นเอง แต่ที่เราต้องการจริงๆ ก็คือเราต้องการให้ gradient เฉพาะพื้นที่ใต้กราฟเท่านั้น ซึ่งเทคนิคที่เราจะใช้ก็คือ เราจะสร้าง shape ที่เป็นพื้นที่ใต้กราฟ จากนั้นเราจะ clip context ให้เป็นรูปเดียวกับ shape ที่เราวาดขึ้นมา จากนั้นจึงจะวาด gradient ลงไปใน context ที่ clip แล้ว

สมมติว่าเรามีข้อมูลอยู่ 40 ชุด โดยเราสามารถ generate ข้อมูล 40 ชุดขึ้นมาได้ดังนี้ก่อน

// generate 40 data, each limited to 150

int r = 0;

int array[40];

for(int i = 0; i <= 40; i ++){

r = arc4random() % 150;

array[i] = r;

}

เก็บ data ไว้ในตัวแปร array ขนาด 40 ต่อไปเราจะวาด Shape ที่ที่เป็นพื้นที่ใต้กราฟโดยอิงจากข้อมูล 40 ชุดที่เรามี ดังนี้

// draw graph by points stored in array

CGContextSaveGState(context);

CGContextMoveToPoint(context, 0, array[0] + graphBase);

for(int i = 0; i <= 40; i ++){

CGContextAddLineToPoint(context, i * 8, array[i] + graphBase);

}

// wrap it as a shape

CGContextAddLineToPoint(context, 320, 480);

CGContextAddLineToPoint(context, 0, 480);

CGContextAddLineToPoint(context, 0, array[0] + graphBase);

CGContextSetLineWidth(context, 3);

CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

CGContextStrokePath(context);

CGContextRestoreGState(context);

เหมือนกับการวาดเส้นประในตอนแรก โดยเราจะวนลูปวาดเส้นไปทีละจุดๆ ใน array เมื่อวาดครบทุกจุดแล้วเราจะวาดย้อนกลับมายังจุดเริ่มต้นใหม่อีกครั้งให้เป็น Shape ปิด และเมื่อเราทดลองวาดเส้นเพื่อตรวจสอบ Shape ที่เราวาดขึ้นมา เราจะได้ Shape หน้าตาดังนี้

Shape ถูกวาดเส้นด้วยสีแดง ต่อไปเราจะทำการ clip Context ด้วย Shape ที่เราวาดขึ้นมาโดยใช้ฟังก์ชั่น CGContextClip(context) และเอาโค้ดในการวาดเส้นสีแดงให้ Shape ออกไป ทำให้จากโค้ดด้านบนเราจะเหลือแบบนี้

// wrap it as a shape

CGContextAddLineToPoint(context, 320, 480);

CGContextAddLineToPoint(context, 0, 480);

CGContextAddLineToPoint(context, 0, array[0] + graphBase);

CGContextSetLineWidth(context, 3);

CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

CGContextClip(context);

ต่อไปจะวาด Gradient ลงไปใน context ที่เหลือจากการถูก clip โดยเริ่มจากการนิยาม Gradient ก่อนว่าจะให้มีลักษณะเป็นอย่างไร

// gradient definition

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGFloat locations[] = { 0.55, 1.0};

CGColorRef endColor = [UIColor colorWithRed:0.0f

green:153.0f/256.0f

blue:249.0f/256.0f

alpha:1.0].CGColor;

CGColorRef startColor = [UIColor colorWithRed:1

green:1

blue:1

alpha:0.5].CGColor;

NSArray *colors = [NSArray arrayWithObjects:(id)startColor, (id)endColor, nil];

CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef) colors, locations);

CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));

CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

โค๊ด เป็นการกำหนด color space (ส่วนใหญ่แทบทั้งหมดจะใช้ RGB) กำหนดตำแหน่งของสีที่จะใช้วาด gradient กำหนดสีเริ่มต้น และสีปลายของ gradient กำหนดจุดเริ่มต้นของ gradient และจุดปลายของ gradient

วาด gradient ลงไปใน context ที่ clip ไปแล้ว และ restore state เดินกลับมาแบบนี้

CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

CGContextRestoreGState(context);

จะได้ผลลัพธ์ดังนี้

เราได้ gradient ใต้กราฟมาแล้ว ต่อไปเราจะวาดเส้นกันล่ะ โดยจะวนลูปวาดเส้นจากข้อมูลทั้ง 40 จุดที่เรามี ดังนี้

// draw graph line

CGColorRef graphColor = [UIColor colorWithRed:0.0f

green:153.0f/256.0f

blue:249.0f/256.0f

alpha:1].CGColor;

CGContextSaveGState(context);

CGContextSetStrokeColorWithColor(context, graphColor);

CGContextSetLineWidth(context, 3);

CGContextMoveToPoint(context, 0, array[0]);

for(int i = 0; i <= 40; i ++){

CGContextAddLineToPoint(context, i * 8, array[i]);

}

CGContextStrokePath(context);

CGContextRestoreGState(context);

กำหนดสีที่จะวาด จากนั้นลูปวาดเส้นตามจุดต่างๆ ตามข้อมูลทั้ง 40 จุดที่เรามี เราก็จะได้กราฟหน้าตาแบบนี้ออกมาแล้ว

ส่วนการวาด text หรือข้อความลงไปด้วย CoreGraphic นั้น ถ้าหากเราสั่งวาดแบบปกติลงไป เราจะได้ข้อความที่กลับหัว ต้อง transform มันด้วยโดยการกำหนด text matrix ก่อนการสั่งวาด ดังนี้

// draw text

char* text ="Apple API";

CGContextSelectFont(context, "Helvetica", 16, kCGEncodingMacRoman);

CGContextSetTextDrawingMode(context, kCGTextFill);

CGContextSetRGBFillColor(context, 1, 1, 1, 1);

CGAffineTransform xform = CGAffineTransformMake(1.0, 0.0,

0.0, -1.0,

0.0, 0.0);

CGContextSetTextMatrix(context, xform);

CGContextShowTextAtPoint(context, 120, 450, text, strlen(text));

ซอสโค้ดของตัวอย่างนี้ดาวโหลดได้ที่นี่ หรือดาวน์โหลดจาก GitHub ก็ได้

อ้างอิง:
An iOS 4 iPad Graphics Drawing Tutorial using Quartz 2D
Quartz 2D Programming Guide

Clipping to a Path

Stackoverflow

สั่งให้ UIView เคลื่อนที่แนวโค้ง

2011-09-24T22:39:00.001+07:00

การสั่งให้ UIView ทั้งหลายแหล่เคลื่อนที่เป็นแนวเส้นตรงนั้นไม่ยาก เพียงแต่กำหนดจุดเริ่มต้น กับจุดปลายผ่านบล็อค beginAnimations:context: และ commitAnimations เท่านั้น

สำหรับการเคลื่อนที่ของ UIView เป็นเส้นโค้งนั้น หลักการก็คือเราจะกำหนดเส้นทางการเคลื่อนที่ให้มัน จากนั้นกำหนด animation ให้กับ layer ของ UIView ที่ต้องการให้เคลื่อนที่

ค้นหาเส้นทางการเคลื่อนที่

เราจะกำหนดเส้นทางการเคลื่อนที่ แบบเดียวกับการวาดเส้นโค้งอย่าง Bézier curve ซึ่งเจ้า Bézier curve นี้ก็จะประกอบด้วยจุดเริ่ม จุดปลาย และจุดควบคุมหรือ control point (อ่านรายละเอียดเกี่ยวกับลักษณะของ Bézier curve ที่นี่)

ผมจะวาดเส้นโค้งขึ้น จากขอบทางซ้าย ไปทางขวาของจอ iPad ผมสามารถกำหนดเส้นโค้งได้ประมาณนี้

CGMutablePathRef curvedPath = CGPathCreateMutable();

CGPathMoveToPoint(curvedPath, NULL, 0, 512);

CGPathAddQuadCurveToPoint(curvedPath, NULL, 768/2, 0, 768, 512);

ซึ่งขนาดความโค้งว่าจะโค้งมากหรือน้อย โค้งขึ้นหรือโค้งลง สามารถกำหนดได้ที่จุดควบคุม จากโค๊ดด้านบนลองวาดออกมาเป็นเส้นดูจะได้เส้นหน้าตาแบบนี้

ส่วนวิธีการวาดนั้น สามารถทำได้ดังนี้

//Create a bitmap graphics context, you will later get a UIImage from this

UIGraphicsBeginImageContext(CGSizeMake(768,1024));

CGContextRef ctx = UIGraphicsGetCurrentContext();

//Set variables in the context for drawing

CGContextSetLineWidth(ctx, 1.5);

CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);

CGContextMoveToPoint(ctx, 0, 512);

CGContextAddQuadCurveToPoint(ctx, 768/2, 0, 768, 512);

//Draw the line

CGContextDrawPath(ctx, kCGPathStroke);

//Get a UIImage from the current bitmap context we created at the start and then end the image context

UIImage *curve = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

//With the image, we need a UIImageView

UIImageView *curveView = [[UIImageView alloc] initWithImage:curve];

//Set the frame of the view - which is used to position it when we add it to our current UIView

curveView.frame = CGRectMake(0, 0, 768, 1024);

curveView.backgroundColor = [UIColor clearColor];

[self.view addSubview:curveView];

เมื่อดูจากเส้นที่วาดออกมาแล้ว พบว่าเป็นเส้นทางการเคลื่อนที่ในแนวโค้งที่เราต้องการ เราก็เอาจุดที่นิยาม Bézier curve นี้แหละมาใช้งาน

กำหนดเส้นทางการเคลื่อนที่

เราจะใช้ CAKeyframeAnimation ในการกำหนดเส้นทางการเคลื่อนที่ โดยการกำหนดค่าต่างๆ ให้กับ CAKeyframeAnimation ดังนี้

//Prepare the animation - we use keyframe animation for animations of this complexity

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

pathAnimation.fillMode = kCAFillModeForwards;

pathAnimation.removedOnCompletion = NO;

pathAnimation.duration = 5.0;

//Lets loop continuously for the demonstration

pathAnimation.repeatCount = 1000;

จากโค๊ดจะบอกว่าให้เล่น animation นี้ 5 นาทีต่อ 1 รอบ กำหนดให้เล่น 1000 รอบ สำหรับรายละเอียดของ property ตัวอื่นๆ ที่ไม่ได้กล่าวถึงแต่ละตัวสามารถอ่านได้จากที่นี่เลย

ต่อไปก็กำหนดเส้นทางเดินให้ animation ตัวนี้ล่ะ โดยใช้เส้นที่เราได้เลือกแล้วดังกล่าวไปข้างต้น ดังนี้

CGMutablePathRef curvedPath = CGPathCreateMutable();

CGPathMoveToPoint(curvedPath, NULL, 0, 512);

CGPathAddQuadCurveToPoint(curvedPath, NULL, 768/2, 0, 768, 512);

pathAnimation.path = curvedPath;

CGPathRelease(curvedPath);

เมื่อ animation และเส้นทางการเคลื่อนที่พร้อมแล้ว เราก็กำหนดเส้น animation นี้ให้กับ UIView ที่ต้องการได้เลย ดังนี้

[myView.layer addAnimation:pathAnimation forKey:@"position"];

เราก็จะได้การเคลื่อนที่เป็นเส้นโค้งจากจุดต้นของเส้นทางซ้ายสุด ไปจุดปลายของเส้นทางขวาสุดสมใจ

แอบเอาโค๊ดมาจากที่นี่

ใส่รูปเป็น Background ให้ UINavigationBar

2011-09-21T18:11:00.000+07:00

ในเมื่อ UINavigationBar มันทำงานไม่ถูกใจเรา ดังนั้นเราก็สร้าง Category ให้ UINavigationBar ใหม่ แบบนี้

@implementation UINavigationBar (UINavigationBarCategory)

- (void)drawRect:(CGRect)rect {

UIColor *color = [UIColor orangeColor];

UIImage *img = [UIImage imageNamed: @"nav_bar.png"];

[img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];

self.tintColor = color;

[super drawRect: rect];

}

@end

override method drawInRect: ให้มันวาดรูปที่เราต้องการลงไปแทน และกำหนดสีให้ property tintColor เพื่อให้ปุ่ม back ใน Navigation bar มีสีเข้ากับรูปที่เราวาดลงไปเป็น background

ปัญหาจะตามมาอีกนิดนึงคือ title ที่อยู่บน Navigation bar อาจมีสีไม่เหมาะสมกับรูปที่เราวาดลงไปเป็น background วิธีแก้ไขก็คือเราจำเป็นต้องไปกำหนดสี และฟอนต์เอง ดังนี้

CGRect frame = CGRectMake(0, 0, 200, 44);

UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];

label.backgroundColor = [UIColor clearColor];

label.font = [UIFont systemFontOfSize:18];

label.textAlignment = UITextAlignmentCenter;

label.textColor = [UIColor blackColor];

self.navigationItem.titleView = label;

label.text = @"First View";

เท่านี้เราก็จะได้ UINavigationBar หน้าตาดังรูปนี้

กำหนดขนาดให้ UILabel มีขนาดพอดีกับข้อความ

2011-09-10T21:16:00.001+07:00

Developer หลายคนมักเคยเจอปัญหาในเรื่องของการกำหนดข้อความยาวๆ ให้กับ UILabel แล้วก็ไม่รู้ว่าจะต้องกำหนดขนาดให้ UILabel เป็นเท่าไหร่ดี? เนื่องจาก UILabel นั้นมันไม่ยอมขยายขนาดให้ฟิตพอดีกับปริมาณของข้อความ หรือ text ที่เราจะเอามากำหนดค่าให้มัน

จริงๆ แล้วที่เห็นปัญหาได้ชัดเจนกว่า UILabel ก็คือการกำหนดขนาดให้กับ Cell ในตารางของ UITableView ที่เรามักจะน้ำข้อมูลมาใส่ในตาราง และแต่ละ cell ของตารางก็บังเอิญมีขนาดเท่าๆ กันหมดด้วยสิ ทำให้การหาขนาดความสูงของ cell ให้มีขนาดเหมาะสมกับ content ที่จะวางลงไปในตารางจึงเป็นเรืองที่หลีกเลี่ยงแทบไม่ได้เลย

ดังนั้นเราจำเป็นต้องกำหนดขนาดให้กับ UILabel ให้พอดีกับปริมาณข้อความเอง ซึ่งวิธีหาขนาดที่เหมาะสมให้กับ UILabel สามารถหาได้ดังนี้

CGSize size = [label.text sizeWithFont: label.font

constrainedToSize: CGSizeMake(300, 5000)

lineBreakMode: UILineBreakModeWordWrap];

ถ้าโค๊ดเต็มๆ สำหรับนำไปใช้งานก็จะมีหน้าตาประมาณนี้

UILabel *label = [[UILabel alloc] init];

label.text = @"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).";

label.numberOfLines = 0;

label.backgroundColor = [UIColor whiteColor];

label.font = [UIFont fontWithName:@"Helvetica"size:14];

CGSize size = [label.text sizeWithFont: label.font

constrainedToSize: CGSizeMake(300, 5000)

lineBreakMode: UILineBreakModeWordWrap];

label.frame = CGRectMake(10, 10, 300, size.height);

[self.view addSubview:label];

[label release];

เท่านี้เราก็จะได้ UILabel ที่มีขนาดเปลี่ยนไปตามปริมาณของข้อความแล้ว

ปล. text ตัวอย่างเอามาจากเว็บนี้

เพ่ิมฟอนต์ให้ iOS

2011-09-10T18:36:00.000+07:00

นอกจากฟอนต์ที่มีให้ใช้อยู่แล้ว เราสามารถเพิ่ม font ที่เราต้องการลงไปได้โดยมีขั้นตอนดังนี้

import ฟอนต์ที่ต้องการเข้ามาในโปรเจ็ค
เพิ่มค่า property ลงในไฟล์ info.plist โดยให้เพิ่มลงใน key ที่ชื่อ UIAppFonts (ถ้าไม่มีให้สร้างใหม่) ซึ่งค่านี้จะมีชนิด value เป็น Array จากนั้นกำหนดชื่อฟอนต์ที่ต้องการ (ใส่นามสกุลด้วย เช่น .ttf)
เอาไปใช้ได้เลย โอยอ้างอิงเช่นเดียวกับ iOS system font ตามปกติ

UIFont *font = [UIFont fontWithName: @"TH Charmonman" size: 60];

_textLabel.font = font;

หน้าตาออกมาก็จะเป็นแบบนี้

ปล. จากตัวอย่างใช้ฟอนต์ชื่อ TH Charmonman เป็น 13 ฟอนต์เทพแห่งชาติ สามารถดาวน์โหลดได้จากเว็บของ SIPA เลย หรือจะลองดูหน้าตาของฟอนต์ต่างๆ ก่อนตัดสินใจดาวน์โหลดก่อนได้ที่นี่

แถม: iOS Fonts

:)

GeekTool ลง Mac App Store แล้ว

2011-09-06T00:27:00.002+07:00

ในที่สุด GeekTool ก็ลง Mac App Store แล้ว

แต่เดิมผมไม่ได้สนใจมันเท่าไหร่ แต่ไหนๆ มันก็ลง Mac App Store แล้วก็เลยเอามาเล่นสักหน่อย ทำแบบรีบๆ ได้ Desktop หน้าตาแบบนี้มาดูเล่นล่ะ

หลักๆ แล้วการใช้ GeekTool จะเป็นการเอารูป และ output ของการรัน command ต่างๆ มาแปะไว้บน Desktop ที่นิยมก็เช่น วันที่ เวลา ปฏิทิน การใช้เมมโมรี่ และสถานะ CPU เป็นต้น

สำหรับการนำรูปมาแปะสามารถเลือกรูปในเครื่องเราได้เลย และสามารถตั้งค่าให้มันเปลี่ยนรูปไปเรื่อยๆ ได้

ยกตัวอย่างเช่นรูปรายงานสภาพอากาศนั้นผมไปดึงรูปมาจาก Yahoo Weather โดยมีขั้นตอนดังนี้

1. ไป Yahoo Weather แล้วกำหนดสถานที่เป็น Bangkok Thailand จะได้ URL มาของสภาพอากาศมา
2. เปิด GeekTool แล้วแปะ Shell ลงไป จากนั้นตรงช่อง command ให้ใส่คำสั่งดังนี้

curl --silent "WEATHER_URL" | grep "forecast-icon" | sed "s/.*background\\:url(\\'\$.*\$\\')\\;\\ _background.*/\\1/" | xargs curl --silent -o /tmp/wpicture.png

ให้แทน WEATHER_URL ด้วย url ของสภาพอากาศที่ได้มา

จากคำสั่งจะเป็นการดึง HTML จาก URL ของสภาพอากาศที่ได้มาจากนั้นแกะเอาแต่ชื่อภาพของสภาพอากาศและสั่งเซฟลงไปที่ /tmp/wpicture.png

และให้กำหนดให้มัน refresh ทุกๆ เวลาเท่าไหร่ก็ได้ อาจจะสัก 1 ชั่วโมงต่อครั้ง (การสั่ง refresh ที่ว่านี้จะเป็นการกำหนดให้คำนั่งที่เรากำหนดไว้ทำงานทุกๆ เวลากี่วินาที)

3. ไปที่ GeekTool แล้วแปะ Image ลงไป ตรงค่า URL ของรูปนั้นให้ใส่เป็น file:///tmp/wpicture.png พร้อมทั้งกำหนดให้มัน refresh รูปด้วย (ประมาณ 1 ชม. ต่อครั้งก็ได้)

เท่านี้รูปสภาพอากาศก็จะเปลี่ยนแปลงไปเรื่อยๆ แล้ว

4. สำหรับอุณหภูมิและสภาพอากาศนั้นให้ใช้คำสั่งดังนี้

curl --silent "http://xml.weather.yahoo.com/forecastrss?p=THXX0002&u=c" | grep -E '(Current Conditions:|C<BR)' | sed -e 's/Current Conditions://' -e 's/<br \/>//' -e 's/<b>//' -e 's/<\/b>//' -e 's/<BR \/>//' -e 's/<description>//' -e 's/<\/description>//' -e 's/,//' | tail -n1

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

ตัวอย่าง Desktop สวยๆ ที่เอา GeekTool ไปใช้:
http://desktopspotting.com/25/awesome-geektool-mac-os-x-desktop/
http://tjdyo.deviantart.com/art/My-Desktop-with-Geektool-195121469
http://www.fuelyourinterface.com/making-your-desktop-look-awesome-again/
http://www.stumbleupon.com/su/2NzrKf/smokingapples.com/software/15-geektool-desktop-inspirations-for-the-weekend
และอันนี้เซ็ตใหญ่จาก flickr ครับ http://www.flickr.com/photos/tags/geektool/interesting/

ใช้ Mail.app ใน Lion แล้วส่งเมลล์ออกไม่ได้

2011-09-02T02:54:00.001+07:00

พยายามส่ง e-mail โดยใช้โปรแกรม Mail.app ที่ติดมากับ Mac OS X Lion อยู่หลายที ไม่เคยจะส่งออกได้สักที ลอง google ดูพบว่าแทบทุกที่ให้ทำตามนี้กันหมดเลย แล้วมันจะทำให้เราส่ง e-mail ได้!

Quit mail.app
Go to https://www.google.com/accounts/DisplayUnlockCaptcha
Unlock the captcha
Launch mail
Done!

สร้าง Object จากชื่อคลาส

2011-08-31T05:50:00.000+07:00

เราสามารถสร้าง Object แบบกำหนดชื่อคลาสได้ดังนี้

id *object = [[NSClassFromString(@"MyClassName") alloc] init];

ประโยชน์ก็คือในบางกรณีเราไม่สามารถรู้ได้ตั้งแต่ตอนเขียนโปรแกรมว่าจังหวะนี้ควรจะโหลด Object ของคลาสไหน จนกว่าจะถึงตอนที่ต้องใช้จริงๆ

บังคับให้ UI Orientation เปลี่ยน

2011-08-29T11:34:00.003+07:00

เราสามารถบังคับให้ User Interface Orientation ใน iOS Device เปลี่ยนได้

ยกตัวอย่างการ toggle ไปมาระหว่ง UI แนวตั้งกับแนวนอน สามารถทำได้ดังนี้

if(UIInterfaceOrientationIsPortrait(self.interfaceOrientation)){

[[UIDevice currentDevice] setOrientation:UIInterfaceOrientationLandscapeRight];

}else{

[[UIDevice currentDevice] setOrientation:UIInterfaceOrientationPortrait];

}

Exception กับ @try, @catch และ @finally

2011-08-24T12:08:00.000+07:00

ผมไม่ค่อยเห็นใครใช้การดักจับ Exception โดย try...catch บล็อคสักเท่าไหร่ในการเขียนโปรแกรมด้วยภาษา Objective-C เท่าที่เห็นจะเป็นการโยน NSError เข้าไป และอ้างถึงมันในภายหลัง หรือไม่ก็มี delegate message back กลับมาบอกว่ามันมีการทำงานผิดพลาดอย่างไร

ในภาษา Object-C การดักจับ Exception ให้ทำดังนี้

// 1 สร้าง Array เปล่าๆ ขึ้นมาก่อน

NSArray *array = [[NSArray alloc] init];

@try {

// 2 อ้างถึง element ใน Array ที่ไม่ได้มีอยู่จริง

NSLog(@"object = %@", [array objectAtIndex: 0]);

}@catch (NSException *exception) {

// เมื่อเกิดข้อผิดพลาดขึ้นโค๊ดข้างในนี้จะถูกเรียกให้ทำงาน

NSLog(@"Exception name = %@", exception.name);

NSLog(@"Exception reason = %@", exception.reason);

}@finally {

// โค๊ดในบล็อคนี้จะถูกเรียกให้ทำงานเสมอ

NSLog(@"finally");

[array release];

}

จากโค๊ด เป็นการยกตัวอย่างการเข้าถึง Element ใน Array ที่ไม่มีอยู่จริง โดยเริ่มจากสร้าง Array เปล่าๆ ขึ้นมาก่อน จากนั้นในจุดที่ 2 จะพยายามอ้างถึง Element ที่ 0 ของ Array ที่สร้างขึ้นมา ซึ่งไม่ได้มีอยู่จริง และทำให้เกิดข้อผิดพลาดเกิดขึ้น เมื่อใดก็ตามที่โค๊ดในบล็อค @try เกิดข้อผิดพลาดขึ้น มันจะหยุดทำงานทันทีและโค๊ดในบล็อค @catch จะเริ่มทำงานต่อ ส่วน @finally นั้นจะทำงานเสมอไม่ว่าจะเกิด Exception ขึ้นหรือไม่ก็ตาม

ส่วนผลลัพธ์ที่ได้จะเป็นดังนี้

Exception name = NSRangeException

Exception reason = *** -[NSArray objectAtIndex:]: index 0 beyond bounds for empty array

finally

การโยน Exception ออกจามาจาก function ที่เรียกใช้

- (void) testException{

if(YES){

// สร้าง Exception และโยนมันออกไปจากตรงนี้

NSException *exception = [NSException exceptionWithName: @"Exception"

reason: @"There are someting wrong"

userInfo: nil];

@throw exception;

}

เมื่อมีการใช้งาน method - (void) testException และเกิดข้อผิดพลาดขึ้น เราสามารถโยน Exception ออกจาก function ได้ตามโค๊ดด้านบน

ลองเอา function ที่จะมีการ throw exception ออกมามาใช้งานใน @try บล็อค

@try {

[self testException];

}@catch (NSException *exception) {

NSLog(@"Exception name = %@", exception.name);

NSLog(@"Exception reason = %@", exception.reason);

}@finally {

NSLog(@"finally");

[array release];

}

จากนั้นลองรันโปรแกรมดูใหม่ ผลจะออกมาดังนี้

Exception name = Exception

Exception reason = There are someting wrong

finally

เดินทางจากกรุงเทพฯ มาพะเยากับ truemove

2010-12-30T09:46:00.000+07:00

เดินทางไปภาคเหนือคราวนี้ผมเปิดโปรแกรม track เส้นทางตลอด และเปิด cellular data ตลอดทางไปกับสัญญาณของ truemove อันโด่งดัง เพื่อเทียบกับปีก่อนๆ

ผลที่ออกมาก็คือสัญญาณ truemove ดีขึ้นกว่าที่เคยรู้สึกมาก ไม่รู้ว่าคิดไปเองไหม หรือว่าเป็นแบบนี้มาตั้งแต่ต้นอยู่แล้ว แต่รวมๆแล้ว ถือว่าพอใจมากกับสัญญาณเน็ตที่ไปด้วยกันแทบจะตลอดเส้นทาง มีบางที่เท่านั้น ที่ไม่มีสัญญาณ แต่ก็ถือว่าน้อยมากๆ

แผนที่ด้านล่างแสดงเส้นทางที่ผมใช้เดินทางขึ้นไปภาคเหนือ และจุดที่แหว่งๆ หายๆ ก็คือจุดที่ไม่มีสัญญาณ truemove นั่นเอง! (1 จุดที่กระโดดไปแถวๆ เชียงราย กับ 1 จุดข้างล่างเชียงคำ นั้น gps + โปรแกรม มันทำงานผิดพลาดเอง)

มี 2 จุดใหญ่ๆ ที่เป็นปัญหากับสัญญาณ truemove มาก จุดแรกคือจุดที่เริ่มตั้งแต่ทางแยกระหว่างทางไป อ. งาว และ อ. สอง ดังรูปข้างล่าง (ถ้าดูรูปด้านบนจะเห็นว่าเป็นช่วงที่เว้นไปเยอะพอสมควร)

หลังจากเข้าทางแยกมาแล้ว พบว่าไม่มีสัญญาณ truemove ตลอดทางเลย และนานมากๆ กว่าจะมีสัญญาณอีกที และก็เป็นจุดนี้ทุกๆ ที ทุกๆ ปีที่ผ่านมา เป็นจุดที่ truemove อ่อนแอ ไม่รู้ว่าทาง true เค้าจะรู้ไหม

ส่วนจุดที่สองที่สัญญาณ truemove อ่อนแอมากๆ ก็คือที่หมู่บ้านผมเอง เป็นแบบนี้มาหลายปีแล้ว เข้ามาใกล้ๆ หมู่บ้านทีไร สัญญาณ truemove ก็หายวับดับไปทันทีทุกที

ผมพยายามจะใช้ truemove ให้ตลอดรอดฝั่ง แต่จนแล้วจนรอดก็ต้องพึ่งซิมของ AIS อยู่ดีสิน่า

Related Link from Roti

เล่น YouTube clip ที่ embed ใน UIWebView ทันทีที่ UIWebView โหลดเสร็จ

2010-10-29T15:39:00.001+07:00

หากเรานำ Embed code จาก Youtube มาเปิดด้วย UIWebView แล้วจะพบว่า Video จะไม่เล่นเลยทันทีที่ UIWebView โหลดเสร็จ ทำให้เราต้องกดปุ่ม Play ที่ overlay อยู่บน clip ก่อนถึงจะเล่นได้

สำหรับการทำให้มันดูเหมือนเล่นทันทีอัตโนมัติหลังจาก UIWebView โหลดเสร็จแล้วเราจะใช้วิธีการส่ง UIControlEventTouchUpInside ไปหาปุ่มที่เราต้องการกดเสมือนกับว่าเรากดเอง

เราจะเริ่มหาปุ่มหลังจากที่ UIWebView โหลดเสร็จแล้ว ใน delegate method ตัวนี้ ดังนี้

- (void)webViewDidFinishLoad:(UIWebView *) webView {

UIButton *b = [self findButtonInView: webView];

[b sendActionsForControlEvents:UIControlEventTouchUpInside];

}

และเขียน method findButtonInView: ดังนี้

- (UIButton *)findButtonInView:(UIView *)view {

UIButton *button = nil;

if ([view isMemberOfClass:[UIButton class]]) {

return (UIButton *)view;

}

if (view.subviews && [view.subviews count] > 0) {

for (UIView *subview in view.subviews) {

button = [self findButtonInView:subview];

if (button) return button;

}

return button;

}

เท่านี้ก็เรียบร้อย

Related Link from Roti

ตรวจสอบว่า Device กำลังต่อ 3G, Edge, Wifi อยู่หรือเปล่า

2010-10-19T08:50:00.000+07:00

ตรวจสอบว่า iPhone/iPad/iPod ต่ออินเทอร์เน็ตได้หรือเปล่ามีคนทำไว้ให้เรียบร้อยแล้ว วิธีใช้ง่ายมาก (ง่ายกว่า Reachability ที่อยู่บนเว็บของ Apple อีกนะ)

if ([Connection isConnected]){

...

}else{

...

}

ก่อนใช้งานอย่าลืม include framework ชื่อ SystemConfiguration กับ libz.1.1.3.dylib ด้วย

ที่มา : xprogress.com
มีคนเอามาทำเป็นไฟล์ให้ download มาใช้ง่ายๆด้วย ที่นี่

Related Link from Roti

Custom UISlider

2010-10-19T07:05:00.005+07:00

เราสามารถเปลี่ยนหน้าตาของ UISlider ให้เข้ากับ UI ของ iOS Application ที่เรากำลังพัฒนาอยู่ได้ด้วยการกำหนดรูปภาพด้านซ้ายของปุ่มเลื่อน ขวาของปุ่มเลื่อน และปุ่มสำหรับเลื่อนให้มันผ่าน method 3 ตัวนี้

- (void)setMaximumTrackImage:(UIImage *)image
   forState:(UIControlState)state
- (void)setMinimumTrackImage:(UIImage *)image
   forState:(UIControlState)state
- (void)setThumbImage:(UIImage *)image
   forState:(UIControlState)state

เริ่มจากกำหนดรูปเหล่านี้ให้กับ UISlider

min.png

max.png

center.png

ดังนี้

UIImage *minImage = [UIImage imageNamed: @"min.png"];

UIImage *maxImage = [UIImage imageNamed: @"max.png"];

UIImage *center = [UIImage imageNamed: @"center.png"];

minImage = [minImage stretchableImageWithLeftCapWidth: 10.0

topCapHeight: 0.0];

maxImage = [maxImage stretchableImageWithLeftCapWidth: 10.0

topCapHeight: 0.0];

UISlider *slider = [[UISlider alloc] init];

[slider setMinimumTrackImage: minImage forState: UIControlStateNormal];

[slider setMaximumTrackImage: maxImage forState: UIControlStateNormal];

[slider setThumbImage: center forState: UIControlStateNormal];

slider.frame = CGRectMake(0, 480/2, 300, 44);

[self.view addSubview: slider];

[slider release];

จะได้ slider หน้าตาใหม่ออกมาแบบนี้ โดยด้านบนเป็น default UI ของ iOS เอง ส่วนด้านล่างเป็นแบบที่ทำขึ้นมาใหม่

เท่านี้เราก็สามารถสร้าง UISlider ที่มี UI เป็นไปในทางเดียวกับ Application ของเราได้แล้ว

ตัวอย่าง

Related Link from Roti

ใช้ Instrument tools ช่วยตามหา EXC_BAD_ACCESS

2010-10-19T06:10:00.002+07:00

Entry ที่แล้วเป็นการตามหาว่าตรงไหนทำให้เกิด EXC_BAD_ACCESS เองจากข้อมูลเพียงน้อยนิดที่ log ออกมาทาง console แต่สำหรับครั้งนี้จะเป็นการใช้ Instrument Tools ช่วยในการตามหาให้ ว่าจุดที่เป็นปัญหาอยู่ตรงไหน

เริ่มจากสั่ง Run -> Run with Performance Tool -> Allocations
หลังจาก Instruments รันขึ้นมาแล้วให้กดหยุดการทำงานทันที (ปุ่มวงกลมมีจุดแดงตรงกลาง) จากนั้นให้กดปุ่ม i ทางด้านขวาของ Allocations จะเห็น popup ปรากฏขึ้นมา ให้เลือก Record reference counts และ Enable NSZombie detection ดังรูป

จากนั้นกดปุ่ม Recrod เพื่อให้โปรแกรมทำงานต่ออีกครั้ง หากโปแกรมทำงานถึงจุดที่เกิด EXE_BAD_ACCESS เราจะเห็น popup ดังรูปด้านล่างแสดงขึ้นมา

ปัญหาก็ตามที่ popup บอก :) ให้กดปุมลูกศรที่อยู่ท้ายข้อความใน popup โปรแกรมจะบอกตัวการที่ทำให้เกิด EXE_BAD_ACCESS (สังเกตว่า Reference counts จะเป็น -1) และด้าน Stack Track ด้านขวามือบอกจุดที่ทำให้เกิดปัญหา ดังรูปด้านล่าง

ให้ Instruments ชี้จุดผิดชัดๆ ได้โดยการ double click ที่จุดผิดใน Stack Track จะพบบรรทัดที่ทำให้ผิดได้เลยทันที ไม่ต้องไล่หาเองแบบครั้งที่แล้วแล้ว

ค้นพบว่ามีคนทำวีดีโอให้ดูวิธีทำกันตัวเป็นๆ ที่นี่ด้วย

Related Link from Roti

ตามหาต้นเหตุของ EXC_BAD_ACCESS

2010-10-02T06:31:00.001+07:00

อาจพูดได้ว่าไม่มี Objective-C programmer คนไหนเลยไม่เคยเจอปัญหา EXC_BAD_ACCESS และปัญหานี้ก็มักตามมากวนใจอยู่เนืองๆ จนบางทีอาจทำให้เราต้องเสียเวลาหาต้นเหตุของปัญหานี้เป็นเวลานานจนน่าหงุดหงิด

เริ่มจากทดลองสร้างโปรแกรมที่ทำให้เกิดปัญหานี้ก่อน โดยเราจะสร้าง 2 method ขึ้นมาดังนี้

- (void) setString{

_myArray = [NSArray arrayWithObject: @"A"];

}

และ

- (void) getString{

NSLog(@"%@", [_myArray objectAtIndex: 0]);

}

กำหนดให้สองเหตุการณ์นี้ทำงานต่อเนื่องกัน เหตุการณ์ละรอบ

เหตุการณ์แรก เมื่อ method setString ทำงานจะสร้าง object ของ NSArray และเก็บไว้ใน instance variable ชื่อ _myArray

เหตุการณ์ที่สอง เมื่อ method getString ทำงาน จะทำการอ่านค่่าจาก _myArray ออกมาแสดง

เมื่อเราสั่งให้โปรแกรมทำงานจะพบ EXC_BAD_ACCESS ออกมาทาง debugger ดังนี้

Program received signal: “EXC_BAD_ACCESS”.

เหตุผลก็เพราะว่า object ที่ได้จาก method setString จะเป็น autorelease object ดังนั้นแน่นอนว่ามันจะถูกส่งเข้าไปอยู่ใน autorelease pool และถูก release ทิ้งไปเมื่อจบรอบแรกโดยอัตโนมัติ ซึ่งเหตุการณ์จริงอาจไม่ได้หาต้นเหตุของปัญหาง่ายแบบนี้ก็ได้

วิธีตามหาต้นตอของ EXC_BAD_ACCESS เราจะกำหนด parameter ให้กับ Executables ที่อยู่ด้านซ้ายของ xcode window ให้ double click และเลือก get info และไปที่ tab Arguments จากนั้นเพิ่ม NSZombieEnabled และกำหนดค่าเป็น YES เข้าไปดังนี้

NSZombieEnabled เป็น parameter ที่ช่วยบอกว่ามี message ไหนส่งไปหา object ที่ถูก deallocate แล้ว

จากนั้นลองรันโปรกรมเดิมใหม่แทนที่จะโดนตอบกลับมาด้วย EXC_BAD_ACCESS (ซึ่งไม่ช่วย hint อะไรเท่าไหร่นัก) อีก ก็จะได้ผลออกมาแบบนี้

*** -[CFArray objectAtIndex:]: message sent to deallocated instance 0x4b1dd80

เท่านี้ก็ทำให้เราพอจะเดาได้ว่า message ตัวไหนที่ทำให้เกิด EXC_BAD_ACCESS

อ่านเพิ่มเติม: Understanding EXC_BAD_ACCESS

Related Link from Roti

อ่านค่า UUID, IMEI, ICCID ของ iPad/iPhone จาก iTunes

2010-09-15T09:18:00.001+07:00

หลายครั้งที่ต้องขอ UUID ของ iPhone/iPad จาก user เพื่อเอามาสร้าง Provisioning profile สำหรับ build application ลงไปในเครื่องของลูกค้า วิธีง่ายๆ ที่จะได้ UUID จากลูกค้าก็คือ ใช้ iTunes

หลังจากเอา iPhone/iPad ต่อเข้ากับ iTunes แล้วเลือกที่ชื่อของเครื่องที่ปรากฏอยู่ใน List ทางซ้ายของ iTunes จากนั้นเราจะเห็นข้อมูลพื้นฐานของ iPad/iPhone ของเรา เช่น ชื่อเครื่อง, Capacity, Serial Number, Phone Number เราสามารถให้มันแสดงข้อมูลอื่นๆ เพิ่มเติมได้

แสดง UUID โดยการ click ที่ Serial Number
แสดง IMEI และ ICCID โดยการ click ที่ Phone Number

Related Link from Roti

ให้ applicationWillTerminate: ทำงานหลังจากกดปุ่ม Home

2010-09-14T14:48:00.001+07:00

ใน iOS4 หากเรากดปุ่ม Home เพื่อปิดโปรแกรมแล้วนั้น โปรแกรมจะถูกส่งไปให้ทำงานใน Background ทำให้เวลาเราเปิดโปรแกรมนั้นขึ้นมาใหม่จะทำให้เปิดได้เร็ว และไม่ต้องรอโหลดนาน

สำหรับนักพัฒนา จะเห็นว่า method ชื่อ applicationWillTerminate: ของ Application Delegate ไม่ทำงานหลังจากกดปุ่ม Home เหมือนอย่างที่เคยทำงานใน iPhone OS 3.x ลงไป ซึ่งวิธีทำให้ method นี้กลับมาทำงานหลังจากกดปุ่ม Home นั้นสามารถทำได้โดยแก้ไขไฟล์ application-info.plist ของโปรเจ็คได้โดยกำหนดค่าดังนี้

Related Link from Roti

ใส่เงาให้ UIView

2010-08-31T11:21:00.001+07:00

เราจะใช้ QuartzCore ช่วยในการใส่เงา หรือ Drop Shadow ให้ UIView ดังนั้นต้อง include QuartzCore.framework เข้ามาในโปรเจ็คก่อน จากนั้นอย่าลืม import QuartzCore เข้ามาก่อนใช้งานด้วย

#import <QuartzCore/QuartzCore.h>

วิธีทำก็คือเราจะไปเล่นกับ layer ที่เป็น property ของ UIView ดังนี้

UIView *view = [[UIView alloc] initWithFrame: CGRectMake(100, 100, 100, 100)];

view.backgroundColor = [UIColor blueColor];

view.layer.shadowColor = [[UIColor blackColor] CGColor];

view.layer.shadowOffset = CGSizeMake(3.0f, 10.0f);

view.layer.shadowOpacity = 0.5f;

view.layer.shadowRadius = 10.0f;

หลังจากกำหนดค่าให้ property ของ layer เสร็จแล้ว แปะ view ลงไปใน container เราก็จะเห็นว่า UIView ของเรามีเงาแล้ว

Related Link from Roti

อ่าน QR Code บน iPhone ด้วย ZBar Barcode Reader

2010-08-13T01:02:00.000+07:00

เพื่อไม่ให้ตก trend ตอนนี้ที่อะไร ๆ ก็มี QR code หรือ 2D barcode ไปแปะกันให้ทั่ว และโชคดีผมมี iPhone ที่พร้อมสำหรับการอ่าน QR code เสมอในทุกที่ที่ผมเจอ

ตามหา QR code reader ที่เป็น library ของ Objective-c พบว่ามีอยู่หลายตัว ตัวหนึ่งที่ลองเล่นแล้วรู้สึกง่ายดีคือ ZBar Barcode Reader

วิธีใช้ไม่ยาก แต่วิธีติดตั้งและ link library ที่จำเป็นต้องออกแรงนิดนึงก่อน

Setup the Library

download และติดตั้ง Mercurial
เปิด terminal ขึ้นมา แล้ว clone zbar จาก repository ลงมาดังนี้

$ hg clone http://zbar.hg.sourceforge.net:8000/hgroot/zbar/zbar myapp/zbar

หลังจาก clone ลงมาเสร็จแล้ว ให้ลองทดสอบ library ด้วยการลองรันโปรแกรมชื่อ readertest และมันต้องใช้งานได้ดีด้วยการ

เปิดไฟล์ zbar/test/iphone/readertest.xcodeproj
ให้เลือก build ลง device จากนั้น Build and Go ได้เลย
ลอง scan QR code ดูหากได้ผลลัพธ์ออกมาถูกต้องแล้วก็ไปขั้นตอนต่อไปได้เลย

Build Settings

ต่อไปเป็นการนำ library เข้ามาใช้ใน project ซึ่งต้องลงไม้ลงมือดังต่อไปนี้

click ขวาที่โปรเจ็คแล้วเลือก Add -> Existing Files... จากนั้น browse ไปที่ zbar/iphone/zbar.xcodeproj
เพิ่ม resource ของหน้า help ลงไปในโปรเจ็ค (ตัว view controller ที่ใช้ในการอ่านภาพ QR code จะมี help ให้ด้วย ซึ่ง help ที่มีให้จะมาอ่าน resource ตรงนี้)

click ขวาที่ Resources แล้วเลือก Add Existing Files... จากนั้น browse ไปที่ zbar/iphone/res/zbar-*.{html,png}
หมายเหตุ* ในกรณีที่เราใช้ help ที่ library มีมาให้ แต่ถ้าจะทำหน้า help เองก็ไม่จำเป็นต้องทำขั้นตอนนี้ก็ได้

expand node zbar.xcodeproj เราจะเห็น libzbar.a อยู่ จากนั้นเปิด node Targets และชื่อ App ของเรา เราจะเห็น Link Binary with Libraries จากนั้นให้ลาก libzbar.a ลงมาใส่ใน Link Binary with Libraries
ใน App target settings

ที่ General Tag ตรง Direct Dependencies ให้กดเพิ่ม zbar เข้าไป
ที่ Linked Libraries ให้เพิ่ม library ต่อไปนี้เข้าไป

QuartzCore.framework
libiconv.dylib
AVFoundation.framework (Weak)
CoreMedia.framework (Weak)
CoreVideo.framework (Weak)

ที่ Build tab, show All Setting for "All Configurations" ให้กำหนด Header Search Path ไปหา directory นี้

zbar/include (not recursive)

ที่ "All Settings" และ "Release" ให้กำหนดที่ Preprocessor Macros ดังนี้

NDEBUG=1

ใน myapp_Prefix.pch ให้เพิ่มบรรทัดนี้ลงไป

#import <zbar/ZBarReaderViewController.h>

ลองสั่ง build ดู หากไม่พบ error หรือ warning อะไรเกิดขึ้นเลยให้ไปต่อได้

ที่ผ่านมาเป็นการกำหนดค่าต่างๆ ที่จำเป็น เพื่อบอก xcode เมื่อเรา build โปรเจ็คว่าต้องไปหาอะไรที่ไหนบ้าง ต่อไปจะเป็นการนำ library ไปใช้ ซึ่งจะได้ code หน้าตาแบบนี้ออกมา

- (IBAction) readQRCode{

ZBarReaderViewController *reader = [ZBarReaderViewController new];

// (optional) to scan from images, replace with:

//ZBarReaderController *reader = [ZBarReaderController new];

reader.readerDelegate = self;

ZBarImageScanner *scanner = reader.scanner;

// TODO: (optional) additional reader configuration here

// EXAMPLE: disable rarely used I2/5 to improve performance

[scanner setSymbology: ZBAR_I25

config: ZBAR_CFG_ENABLE

to: 0];

// present and release the controller

[self presentModalViewController: reader animated: YES];

[reader release];

}

เมื่อเรียก method ด้านบนแล้ว กล้องจะเปิดขึ้นและ scan ภาพที่กล้องกำลังจับอยู่ เมื่อพบว่ามี QR code delegate method ต่อไปนี้จะทำงานทันที

- (void) imagePickerController: (UIImagePickerController*) reader

didFinishPickingMediaWithInfo: (NSDictionary*) info

{

// TODO: (optional) this is the image of the barcode...

//UIImage *image =

// [info objetForKey: UIImagePickerControllerOriginalImage];

// get the results

id <NSFastEnumeration> results = [info objectForKey: ZBarReaderControllerResults];

ZBarSymbol *symbol = nil;

NSLog(@"results = %@", results);

for(symbol in results)

// EXAMPLE: just grab the first barcode

break;

if(!symbol)

// this should not occur, but doesn't hurt to check

return;

// see ZBarSymbol.h for other symbol properties

NSLog(@"result = %@", symbol.data);

// dismiss the controller (NB: dismiss from the *picker*)

[reader dismissModalViewControllerAnimated: YES];

}

อ่านเพิ่มเติม

HOWTO: Add a barcode reader to an iPhone app

Related Link from Roti

แปลง View ให้เป็นรูปภาพ และการทำ Screenshot บน iOS

2010-08-08T18:34:00.000+07:00

วิธีการแปลง View ทั้ง View ให้กลายเป็นรูปภาพหลักการก็คือ เราจะทำการ render View ตัวที่เราต้องการลงไปใน Image Context จากนั้นก็ get รูปภาพจาก Image Context ออกมา และจากหลักการนี้เราจะได้ขั้นตอนดังต่อไปนี้

UIView *view = _myView;

UIGraphicsBeginImageContext(view.frame.size);

[[view layer] renderInContext:UIGraphicsGetCurrentContext()];

UIImage *screenshot = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

วิธีนี้ไม่ใช่การทำ screenshot หน้าจอ แต่จะเป็นการเอา View ทั้งตัวแปลงออกมาให้เป็นรูปภาพ แปลว่าแม้ View นั้นจะไม่ถูกแสดงอยู่บนจอภาพ ก็ยังถูกแปลงออกมาให้เป็นรูปได้อยู่ดี

ไหนๆ ก็กล่าวถึงการ Capture หน้าจอ หรือการทำ Screenshot หรือการ Dump Screen แล้ว ใน Cocoa Touch Framework ก็มี function ที่ช่วยอำนวยความสะดวกในการทำ Screenshot หน้าจอเช่นกัน ดังนี้

UIImage *screenshot = [UIImage imageWithCGImage:UIGetScreenImage()];

เราจะใช้ UIGetScreenImage() เพื่อทำ Screenshot หน้าจอ โดย function นี้จะไม่ทำงานหากเราทดสอบโปรแกรมบน iPhone Simulator ทำให้ต้องทดสอบบน Device จริงเท่านั้นเราจึงจะเห็นผล

Related Link from Roti

เลื่อน UIScrollView ทีละครึ่งหน้า

2010-07-26T15:24:00.001+07:00

หลายครั้งที่เรามักเจอการเลื่อนดูอะไรบางอย่างบน UIScrollView และเมื่อ scroll หยุดวิ่งแล้ว เราจะเห็นเพียงแค่ทีละหน้าเท่านั้น ไม่สามารถเห็น item อันถัดไป หรืออันก่อนหน้าได้ เหตุผลหลักๆก็เนื่องมาจาก scrollview มันเลื่อนทีละหน้า เช่นการดูรูปใน Gallery

สิ่งที่เราต้องการก็คิอ scrollview ที่เลื่อนไปทีละครึ่งหน้า เพื่อให้เห็น item อันถัดไป และอันก่อนหน้าดังรูปต่อไปนี้

วิธีทำนั้นง่ายมากด้วยวิธีต่อไปนี้

1. สมมติว่าผมมีรูปอยู่ 5 รูป ดังนั้นผมสามารถสร้าง scrollview และ content view สำหรับใส่ view ย่อยๆ ให้มีขนาดพอเหมาะกับ iPhone ได้แบบนี้

UIScrollView *scrollView = [[UIScrollView alloc] init];

scrollView.backgroundColor = [UIColor darkGrayColor];

scrollView.frame = CGRectMake(0, 0, 320, 480);

scrollView.contentSize = CGSizeMake(320 * 5, 480);

scrollView.delegate = self;

scrollView.pagingEnabled = YES;

UIView *view = [[UIView alloc] init];

view.frame = CGRectMake(0, 0, 320 * 5, 480);

view.tag = 100;

2. จากนั้นเอา view ย่อยๆ ใส่ลงไป และเอา content view ใส่ลงไปใน scrollview ให้พร้อม และกำหนดตำแหน่งของ view ตามปกติ

UIImageView *imageView = nil;

for(int i = 0; i < 5; i ++){

imageView = [[UIImageView alloc] initWithImage: MY_IMAGE];

imageView.frame = CGRectMake(0, 0, 100, 133);

imageView.center = CGPointMake((320/2) * (i + 1), 480 / 2);

[view addSubview: imageView];

[imageView release];

}

[scrollView addSubview: view];

[view release];

3. ขั้นที่ผ่านมายังไม่มีอะไร เป็นการแค่สร้างและจับ view ใส่ลงไปใน scrollview ธรรมดาๆ จุดสำคัญคือขั้นตอนต่อไปนี้

เราจะจัดการกับ event ที่เรียก delegate method ของ UIScrollViewDelegate ได้ตาม code ด้านล่างนี้

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {

CGFloat offset = scrollView.contentOffset.x/2;

CGAffineTransform transform = CGAffineTransformMakeTranslation(offset, 0);

[[scrollView viewWithTag: 100] setTransform:transform];

}

เท่านี้ก็เป็นอันเรียบร้อย ไม่ยากเลย ^_^

Related Link from Roti

Quick Start: Publishing Feed Stories to Facebook ด้วย Facebook iPhone SDK

2010-07-26T12:17:00.001+07:00

เราจะโพสบางอย่างลงบน Facebook Timeline ด้วยการใช้ Facebook iPhone SDK โดยเริ่มจากการ download Facebook iPhone SDK และ uncompress ให้เสร็จเรียบร้อย จากนั้นให้ link เข้ามาใช้ใน project ของเราดังนี้

ในขณะที่เราเปิดโปรเจ็คของเราอยู่ ให้เปิดไฟล์ชื่อ FBConnect.xcodeproj ซึ่งอยู่ในโฟลเดอร์ชื่อ src ของไฟล์ที่เรา download มา
ลาก group ที่ชื่อ FBConnect ที่อยู่ใน project ที่เรา download มาลงไปใส่ในโปรเจ็คของเรา
click ขวาที่โปรเจ็คของเราแล้วเลือก Get Info, ใน tab Build ให้ไปกำหนดค่าของ User Header Search Paths เป็น path ตำแหน่ง directory ของไฟล์ FBConnect.xcodeproj ที่เราเปิดในข้อ 1 เท่านี้ก็เรียบร้อย

สำหรับการโพสบางอย่างลงไปใน Facebook Timeline อย่างง่าย มีขั้นตอนหลักๆ 4 ขั้นตอนตามลำดับดังนี้

สร้าง facebook session
login เข้า facebook
grant permission เพื่อให้ได้โพสลงไปใน timeline ได้
โพสลงไปด้วย dialog ที่ api เตรียมไว้ให้

เริ่มกันเลย

1. เริ่มจากให้ import FBConnect ดังนี้

#import "FBConnect/FBConnect.h"

จากนั้นสร้าง session ด้วย factory method ของ FBSession โดยใช้ KEY ที่สามารถขอได้จากที่นี่ หากไม่สร้าง session จะไม่สามารถทำอะไรกับ facebook ได้เลย ดังนี้

if(![_session resume]){

_session = [FBSession

sessionForApplication: API_KEY secret: SECRET_KEY delegate:self];

}

สังเกตว่าในการสร้าง session จะมีการกำหนด delegate ด้วย ตัวไหน Xcode จะบอกเอง ;)

2. แปะปุ่มสำหรับ login เข้า facebook ลงไปบน view และเราจะใช้ปุ่มนี้เพื่อให้ผู้ใช้ login เข้าใช้งาน facebook

FBLoginButton* button = [[[FBLoginButton alloc] init] autorelease];

[view addSubview:button];

หลังจาก login เสร็จแล้ว delegate method ที่นิยามไว้ใน FBDialogDelegate ตัวนี้จะทำงาน

- (void)session:(FBSession*)session didLogin:(FBUID)uid {

}

3. หลังจาก user login แล้ว เราจะ Grant permission เพื่อให้เราสามารถโพสบางอย่างลงไปใน timeline ได้ ด้วยการแสดง dialog ให้ผู้ใช้ยืนยันสิทธิ์ดังนี้

FBPermissionDialog* dialog = [[[FBPermissionDialog alloc] init] autorelease];

dialog.delegate = self;

dialog.permission = @"status_update";

[dialog show];

จะมี dialog ขึ้นมาให้ผู้ใช้ยืนยันว่าอนุญาติให้ application ที่กำลังใช้งานอยู่มีสิทธิ์โพสบางอย่างลงไปใน timeline ของตัวเองได้หรือไม่

โดยที่ dialog ที่แสดงขึ้นมาจะมี event อยู่ 2 แบบคือ ตกลง กับ ยกเลิก ซึ่งแต่ละ event จะมีการ call delegate 2 ตัวนี้

- (void)dialogDidSucceed:(FBDialog*)dialog {

}

และ

- (void)dialogDidCancel:(FBDialog*)dialog {

}

4. เมื่อเราได้ permission สำหรับการโพสบางอย่างลงไปใน timeline แล้ว เราสามารถทดลองโพสด้วยการใช้ FBStreamDialog ได้เลยทันที ดังนี้

FBStreamDialog *streamDialog = [[[FBStreamDialog alloc] init] autorelease];

streamDialog.delegate = self;

streamDialog.userMessagePrompt = @"Dialog Prompt";

streamDialog.attachment = attachment;

[streamDialog show];

property ชื่อ attachment ของ FBStreamDialog จะเป็นการกำหนด content ที่เราจะโพสลงไปบน wall ด้วย JSON format ตามที่ได้อธิบายไว้ที่นี่ ซึ่งหากเรากำหนด attatchment เป็นดังนี้

NSString *attachment = @"{\"name\":\"Facebook iPhone SDK\","

"\"href\":\"http://developers.facebook.com/connect.php?tab=iphone\","

"\"caption\":\"Caption\","

"\"description\":\"Description\","

"\"media\":[{\"type\":\"image\","

"\"src\":\"http://img40.yfrog.com/img40/5914/iphoneconnectbtn.jpg\","

"\"href\":\"http://developers.facebook.com/connect.php?tab=iphone/\"}],"

"\"properties\":{\"another link\":{\"text\":\"Facebook home page\","

"\"href\":\"http://www.facebook.com\"}}}";

เราจะได้ dialog หน้าตาแบบนี้หลังจากที่เราสั่งให้ dialog show ขึ้นมาให้เรากรอกค่าอะไรบางอย่างลงไป

และเมื่อกด Publish เราจะได้หน้าตาของสิ่งที่โพสลงไปบน wall ดังนี้

เท่านี้ก็เป็นอันเรียบร้อย

entry นี้ถือเป็น Quick Start Guide ดังนั้นรายละเอียดการเล่นกับ SDK ตัวนี้จะเขียนอธิบายใน entry ต่อๆ ไปครับ :)

ที่มา: Facebook iPhone SDK

Related Link from Roti

Lazy Load Objects in Nib file

2010-06-19T11:46:00.001+07:00

การออกแบบ View ต่างๆ แล้วเก็บลง Nib file เป็นเรื่องที่ทำให้นักพัฒนาสะดวกในการออกแบบ UI มาก แต่หากใน Nib file นั้นมี Object ต่างๆ เยอะเกินไป หรือใน Nib file เดียว มี object ของทั้ง Application บรรจุอยู่ ก็จะทำให้เสียเวลาในการโหลด Nib file นานมาก เนื่องจากเมื่อ Nib file ถูกโหลด object ต่างๆที่อยู่ใน Nib file จะถูกโหลดให้มีชีวิตด้วย ดังนั้นเราควรแยก object ต่างๆใน Nib file ออกจากกันจากนั้นค่อยๆทยอยโหลดเข้ามาใช้เมื่อจำเป็นต้องใช้จริงๆเท่านั้น

ด้วยวิธีนี้ ทำให้เราจำเป็นต้องมี Nib file มากกว่า 1 file ใน Application Bundle ส่วนวิธีแยก Nib file ที่น่าจะได้รับความนิยมมากก็คือ 1 Nib file ต่อ 1 View Controller (สังเกตจากเวลาที่เรากำลังจะสร้าง file ที่เป็น Sub class ของ UIViewController ใน Xcode จะมี check box ให้เลือกว่าจะให้สร้าง Nib file ให้ด้วยเลยไหม)

แต่การแบ่งดังที่กล่าวมาอาจยังไม่เพียงพอ หากใน 1 View Controller นั้น มี object มากมายก่ายกองที่ถูกสร้างขึ้นใน Nib file ซึ่งก็แปลว่าแม้จะแยกออกมาเป็น Nib file เดียวต่อ View Controller แล้ว ก็อาจยังโหลดช้าอยู่ดี ดังนั้นใน entry นี้จะแนะนำวิธีการโหลด object จาก Nib file มากกว่า 1 Nib file มาใช้งานนั่นเอง

วิธีการดังนี้

สมมติว่าเรามี view controller subclass ชื่อ MainViewController ที่สร้างมาพร้อมกับ Nib file (check ในช่อง With XIB for user interface ตอนจะสร้างไฟล์) และในนั้นมี property ดังนี้

@interface MainViewController : UIViewController {

IBOutlet UIToolbar *_toolbar;

IBOutlet UIView *_complexView;

}

_toolbar จะเป็น Outlet ที่อยู่ใน Nib เดียวกันกับ MainViewController.xib ดังนั้นเมื่อเราโหลด MainViewController.xib ขึ้นมา เราสามารถอ้างถึง _toolbar เพื่อใช้งานได้เลยทันที

_complexView คือ UIView ที่เราไม่ได้สร้างให้มันอยู่ใน MainViewController.xib (ประกาศไว้เฉยๆ) ดังนั้นเมื่อเราโหลด MainViewController.xib ขึ้นมา เราจะไม่สามารถอ้างถึง _complexView เพื่อนำมาใช้งานได้ และเมื่อลอง log ออกมาดูดังนี้

- (void)viewDidLoad {

[super viewDidLoad];

NSLog(@"MainViewController - viewDidLoad: complexView = %@", _complexView);

}

จะพบว่าผลที่ได้คือ

MainViewController - viewDidLoad: complexView = (null)

ต่อไปเราจะสร้าง Nib file อีกไฟล์หนึ่ง ชื่อ AnotherNib.nib ในนั้นบรรจุ UIView ซึ่งมีหน้าตาดังนี้

ใน AnotherNib.xib ให้กำหนด File's Owner เป็น MainViewController และเมื่อ click ขวาที่ File's Owner จะพบ Outlets ที่เราได้ประกาศไว้ใน MainViewController.h ให้เราเชื่อมตัวแปร _complexView เข้าไปกับ View ใน AnotherNib.xib ซึ่ง View ตัวนี้แหละ ที่เรากำหนดจะโหลดมันเข้าไปใน MainViewController

หลังจากนั้น ทดลองโหลด View ใน AnotherNib.xib เข้ามาเก็บไว้ใน _complexView ได้ดัังนี้

[[NSBundle mainBundle] loadNibNamed: @"AnotherNib" owner: self options: nil];

จากโค๊ด เป็นการโหลด Nib file ที่ชื่อ AnotherNib ให้กับ self (object ที่เรียก method นี้ซึ่งก็คือ MainViewController) หลังจากโหลดเสร็จแล้ว _complexView จะมีชีวิตพร้อมใช้งานทันที และเมื่อ log ออกมาดูดังนี้

NSLog(@"MainViewController - viewDidLoad: complexView = %@", _complexView);

ก็จะเห็นว่า _complexView มีชีวิตแล้ว

MainViewController - viewDidLoad: complexView = <UIView: 0x391e830; frame = (0 250; 320 100); autoresize = RM+BM; layer = <CALayer: 0x3909410>>

ตัวอย่าง

Related Link from Roti

How to Crop an Image

2010-06-09T18:28:00.003+07:00

พระเอกของการ crop รูปก็คือ CGImageCreateWithImageInRect วิธีการใช้งาน function นี้ให้ใส่ parameter เพียงสองตัวเท่านั้น คือ

UIImage คือ รูปที่เราต้องการ crop
CGRect คือ ตำแหน่งที่เราต้องการ crop

ตัวอย่างการใช้งาน

UIImage *image = [UIImage imageNamed: @"witch.png"];

CGRect cropRect = CGRectMake(0, 0, 160, 115);

CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], cropRect);

UIImage *newImage = [UIImage imageWithCGImage: imageRef];

UIImageView *newImageView = [[UIImageView alloc] initWithImage: newImage];

[window addSubview: newImageView];

เพียงเท่านี้ เราก็จะได้รูปที่ crop แล้ว

รูปด้านบนคือรูปต้นฉบับ รูปด้านล่างคือรูปที่ถูก crop แล้ว

ที่มา: How to Crop an Image

Related Link from Roti

ใช้ Tab Bar ใน iPhone OS

2010-05-14T07:53:00.001+07:00

อีกครั้งกับ entry ง่ายๆ สำหรับผู้เริ่มต้นด้วยการใช้ Tab bar ใน iPhone, iPad

การใช้ Tab Bar ถือเป็นวิธีการหลักอันหนึ่ง ที่มักถูกเลือกมาใช้ช่วยในการจัดกลุ่ม content ของโปรแกรมออกเป็นกลุ่ม ซึ่งพบเห็นได้ทั่วไปในโปแกรมหลักๆ บน iPhone

เราจะใช้ UITabBarController ในการสร้าง Tab Bar ขึ้นมาใช้งาน ซึ่งใจความหลักแล้ว UITabBarController จะเก็บ Array ของ view controller และแสดงมันออกมานั่นเอง หรือให้มองว่ามันเป็น Array ของ View Controller ไปเลยก็ได้เหมือนกัน

หากเราเป็น reference ของ UIViewController ดูแล้วจะพบว่ามันมี property ชื่อ tabBarItem ให้เราด้วย ซึ่งนั่นทำให้เราพอจะมีขั้นตอนการสร้าง Tab Bar ขึ้นมาใช้งานในโปแกรมของเราได้คร่าวๆดังนี้

สร้าง UIViewController มากกว่า 1 อัน และเก็บมันลงใน Array สำหรับนำมาใส่ใน UITabBarController
กำหนด tab bar item ให้กับ UIViewController แต่ละอัน (ขั้นตอนนี้ไม่จำเป็นต้องทำก็ได้ แต่ควรทำ)
สร้าง UI TabBarController และกำหนด viewControllers ให้กับมันด้วยการนำ Array ของ UIViewController มากำหนดค่าให้

เริ่มจากสร้าง UIViewController และกำหนด UITabBarItem ให้

UIViewController *firstViewController = [[UIViewController alloc] init];

firstViewController.view.backgroundColor = [UIColor redColor];

UITabBarItem *firstTabBarItem = [[UITabBarItem alloc] initWithTabBarSystemItem: UITabBarSystemItemFeatured tag: 0];

firstViewController.tabBarItem = firstTabBarItem;

จากนั้นสร้าง UIViewController อันอื่นๆ เพิ่มอีกในลักษณะเดียวกัน (ตามตัวอย่างจะสร้าง secondViewController และ thirdViewController เพิ่มขึ้นมา) และนำมาเก็บลงไปใน NSArray ดังนี้

NSArray *viewArray = [[NSArray alloc] initWithObjects:

firstViewController,

secondViewController,

thirdViewController,

nil];

สร้าง UITabBarController ขึ้นมา และกำหนด viewArray ที่เราได้สร้างขึ้นให้กับมัน พร้อมทั้งใส่ tab bar ลงไปใน window

UITabBarController *tabBarController = [[UITabBarController alloc] init];

tabBarController.viewControllers = viewArray;

[window addSubview: tabBarController.view];

เท่านี้ก็เรียบร้อย

จะเห็นได้ว่าหากเราจะสร้าง Tab Bar ขึ้นมาใช้เอง เราไม่จำเป็นต้องพึ่ง Interface Builder (IB) ช่วยเลยแม้แต่น้อย ซึ่งสำหรับบางคนหากมองว่าการใช้ IB ช่วยมันซับซ้อนก็อาจใช้วิธีนี้แทนก็ได้ และใช้ IBแค่การ design content ใน view เป็นหลักอย่างเดียวเลยก็ได้

Related Link from Roti

การใช้ UIScrollView

2010-05-13T23:32:00.002+07:00

ปกติแล้วเราจะใช้ UIScrollView ช่วยในการแสดง content ที่มีขนาดใหญ่กว่าพื้นที่แสดงผล วิธีใช้งานโดยทั่วไปมีหลักการดังนี้

สร้าง UIScrollView
กำหนดขนาดของ content ที่จะแสดง (โดยมากมักใหญ่กว่าขนาดของ UIScrollView)
เอา view ใส่ลงไปใน UIScrollView

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// Override point for customization after application launch

UIImage *image = [UIImage imageNamed: @"ipad.jpg"];

UIImageView *imageView = [[UIImageView alloc] initWithImage: image];

[imageView setTag: 100];

// Step 1

_scrollView = [[UIScrollView alloc] init];

_scrollView.frame = CGRectMake(0, 0, 320, 480 - 20);

// Step 2

_scrollView.contentSize = image.size;

// Step 3

[_scrollView addSubview: imageView];

[imageView release];

UIViewController *mainViewController = [[UIViewController alloc] init];

[mainViewController.view addSubview: _scrollView];

[_scrollView release];

[window addSubview: mainViewController.view];

[mainViewController release];

[window makeKeyAndVisible];

return YES;

}

_scrollView เป็น ivar เอาไว้อ้างถึงในภายหลัง เท่านี้เราก็จะได้ scrollview ที่เลื่อน content ข้างในไปมาได้แล้ว

จากตัวอย่างด้านบน เราใช้ UIScrollView เพื่อแสดงรูป ถึงตรงนี้ เรายังไม่สามารถใช้ 2 นิ้วซูมรูป (zoom) เข้า/ออก เพื่อย่อขยายรูปได้อย่างที่เคยทำได้ใน Photo Gallery เพื่อที่จะทำแบบนั้นได้ ให้เพิ่ม code ลงไปดังนี้

เริ่มจากกำหนด delegate ให้กับ _scrollView ก่อน

_scrollView.delegate = self;

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

float minScale = [_scrollView frame].size.width / [imageView frame].size.width;

_scrollView.minimumZoomScale = minScale;

_scrollView.maximumZoomScale = 10;

และ implemente delegate method ดังนี้

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {

UIView *view = nil;

if (scrollView == _scrollView) {

view = [_scrollView viewWithTag:100];

}

return view;

}

จาก code เราจะ return view ที่เราจะย่อ/ขยายมันกลับออกไป โดยเรียก view นั้นอิงจาก tag ที่เราแปะไว้ให้ในตอนแรก เท่านี้ก็เป็นอันเรียบร้อย

ตัวอย่าง

Related Link from Roti

รูปถ่ายเมื่อปีที่แล้ว

2010-05-13T11:32:00.003+07:00

ปีนี้ไปต่างจังหวัดไม่ได้ถ่ายรูปอะไรเท่าไหร่เลย เพราะอากาศร้อนมาก เลยไม่ได้ออกไปทำกิจกรรมที่เน้นถ่ายรูปเท่าไหร่

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

ตอนที่ไปเก็บภาพเหล่านี้ผมได้เรียนรู้อะไรหลายๆ อย่างที่คนที่อยู่แต่ในเมืองอย่างผม ไม่รู้ ทำไม่เป็น และไม่เคยรู้มาก่อนเลย

จริงๆ อยากหาโอกาสไปลุยทุ่งถ่ายรูปตอนชาวบ้านดำนากันหลังแข็งกลางทุ่ง ตากแดดร้อนๆ บ้างเหมือนกัน

เห็นว่าใน Flickr มัน embed Flash ได้ด้วย เลยลองเอามาแปะดูหน่อย ได้หน้าตาแบบนี้มา

รูปทั้งหมดในเซ็ตนี้ http://www.flickr.com/photos/khomkrit/sets/72157616535986161/

Related Link from Roti

ใช้ Split View ใน iPad

2010-04-26T07:16:00.001+07:00

ใน iPad มี UI แบบใหม่ๆ ที่เราไม่เคยได้ใช้ใน iPhone เพิ่มเข้ามาด้วย หลักๆ ที่เรามักเห็นในโปรแกรมทั่วไปก็คือ Popover และ Split View

Split View ช่วยให้เราแบ่งหน้าจอการทำงานออกเป็น 2 ข้าง โดย panel ทางด้านซ้ายจะมีความกว้างตายตัวคือ 320 pixels ส่วน panel ทางขวา นั้นจะกว้างตามขนาดของหน้าจอที่เหลือ โดยทั่วไปเมื่อหน้าจอเป็น landscape แล้ว split view จะแสดงทั้ง 2 pane (ต่อไปจะเรียก pane ทางซ้ายว่า Master pane และเรียก pane ทางขวาว่า Detail pane) แต่หากเรา rotate หน้าจอเป็น portrait แล้ว master pane ก็จะหายไปเหลือแต่ detail pane ที่ยังอยู่

โดยทั่วไป หากเราต้องการใช้งาน master pane ที่หายไปใน portrait mode จะใช้้วิธีเพิ่มปุ่มลงไปที่ toolbar/navigation bar ของ detail pane และเมื่อกดปุ่มนั้นแล้ว pane ทางซ้ายจะถูกแสดงขึ้นมาใน Popover view ดังรูปด้านล่าง

Popover view จะเป็นหน้าต่างเล็กๆที่จะแสดงขึ้นมาเมื่อเรากดปุ่มอะไรบางอย่าง โดยพบเห็นได้ทั่วไปในโปรแกรมที่มีการใช้ split view อยู่แล้ว

และนี่คือลักษณะโดยทั่วไปของการใช้งาน split view เป็น landscape mode จะแสดงทั้งสอง pane หากเป็น portrait จะแสดงแค่ detail pane และเมื่อมีการกดปุ่มที่ toolbar/navigation bar จะแสดง popover view ออกมา ซึ่งในนั้นบรรจุ master pane อยู่ด้านใน ดังรูปด้านล่าง

สำหรับตัวอย่างของ split pane ให้หาดูได้จากโปรแกรมอย่างเช่น Notes และ Mail ที่ติดมากับ iPad

ลองใช้ Split View กันดีกว่า

หลักการก็คือ สร้าง split view ขึ้นมาจาก UISplitViewController จากนั้นสร้าง view controller อีก 2 ตัว และนำมากำหนดค่าให้กับ viewControllers ซึ่งเป็น peoperty ของ UISplitViewController จากนั้นนำ split view โยนลงไปใน window ก็เป็นอันเสร็จเรียบร้อย

จากขั้นตอนดังกล่าวเราจะได้ code หน้าตาประมาณนี้

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// Override point for customization after application launch

_masterViewController = [[MainViewController alloc] init];

_masterViewController.contentSizeForViewInPopover = CGSizeMake(320.0, 600.0);

_masterViewController.view.backgroundColor = [UIColor lightGrayColor];

_detailViewController = [[DetailViewController alloc] init];

_detailViewController.view.backgroundColor = [UIColor grayColor];

_navigationController = [[UINavigationController alloc] initWithRootViewController: _masterViewController];

_detailNavigationController = [[UINavigationController alloc] initWithRootViewController: _detailViewController];

_splitVC = [[UISplitViewController alloc] init];

_splitVC.viewControllers = [NSArray arrayWithObjects: _navigationController, _detailNavigationController, nil];

_splitVC.delegate = self;

[window addSubview: _splitVC.view];

[window makeKeyAndVisible];

return YES;

}

ดังที่กล่าวมาแล้วว่าโดยทั่วไปหากมีการแสดงผลใน portrait mode แล้ว master pane จะหายไป และควรจะมีปุ่มแปะที่ toolbar/ navigation bar ของ detail pane เพื่อเอาไว้เรียกใช้ master pane ที่หายไปขึ้นมาใช้งานได้ใหม่ ดังนั้นส่วนที่น่าจับตามองก็คือ ส่วนนี้

_masterViewController.contentSizeForViewInPopover = CGSizeMake(320.0, 600.0);

master view จะถูกแสดงขึ้นมาใน popover view และนี่เป็นการกำหนดว่าหาก view นี้ถูกแสดงขึ้นมาด้วย Popover view แล้วจะให้มีขนาดเป็นเท่าไหร่

จังหวะในการเพิ่มปุ่มที่ detail pane เพื่อใช้สำหรับเรียก master view ขึ้นมาเวลาอยู่ใน portrait mode เราจะทำใน split view delegate method 2 method นี้

- (void)splitViewController: (UISplitViewController*)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem*)barButtonItem forPopoverController: (UIPopoverController*)pc {

barButtonItem.title = @"Master List";

[_detailNavigationController.navigationBar.topItem setLeftBarButtonItem:barButtonItem animated:YES];

_popoverController = pc;

}

delegate method ด้านบนจะทำงานเมื่อ pane ทางซ้ามือต้องหายไปใน portrait mode

โดยเราจะได้รับ bar button item ที่พร้อมตอบรับกับการถูกกด และแสดง popover view ขึ้นมาให้ เราเพียงแค่กำหนด title ให้มันเท่านั้นว่าจะให้้มันมี title ว่าอย่างไร

จากนั้นเก็บ pc (popover controller) ที่ถูกส่งเข้ามาไว้ใช้งานต่อไปในเหตุการณ์ด้านล่างนี้

- (void)splitViewController: (UISplitViewController*)svc willShowViewController:(UIViewController *)aViewController invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem {

[_detailNavigationController.navigationBar.topItem setLeftBarButtonItem:nil animated:YES];

_popoverController = nil;

}

delegate method ด้านบนจะทำงานเมื่อการแสดงผลกลับไปสู่ landscape mode และ master pane กำลังกลับมา จากโค๊ดเราจะเอา left bar button item ออกจาก detail pane พร้อมทั้งสั่งกำหนด popover controller ที่เราเคยเก็บไว้ให้เป็น nil ไปซะ

เพียงเท่านี้เราก็จะได้การใช้งาน split view ร่วมกับ popover view มาใช้อย่างง่ายๆแล้ว

อ่านต่อ: Creating a Split View Interface

download source code ตัวอย่าง ได้ที่นี่

Related Link from Roti

แปลง string ให้กลายเป็น NSDate ด้วย NSDateFormatter

2010-04-06T07:11:00.003+07:00

หากเราได้รับ input ของวันที่เข้ามาในรูปของ string ลักษณะนี้

20100405
20100406
20100407

เป็นตัวอักษร 8 หลัก ปี เดือน วัน
แล้วเราต้องการแปลงให้เป็น object ของ NSDate เพื่อให้การนำไปใช้งานสะดวกขึ้น วิธีทำก็คือใช้ NSDateFormatter ช่วย โดยกำหนด format ที่จะนำเข้าให้ date formatter ตาม pattern ที่ของ string ดังนี้

NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
[dateFormat setDateFormat: @"yyyyMMdd"];

NSString *dateString = @"20100405";
NSDate *date = [dateFormat dateFromString: dateString];

จากนั้นลอง print date ออกมาจะได้ผลลัพธ์คือ

2010-04-05 00:00:00 +0700

หากเรายังไม่แปลง string ให้กลายมาเป็น date แล้วล่ะก็ การบวกเวลาเพิ่มเข้าไปอีก 1 วันคงไม่ใช่เรื่องง่ายนัก แต่ด้วยการที่มันอยู่ในรูปของ NSDate เราจึงใช้ method ปกติที่มีได้เลย ในที่นี่จะใช้วิธีบวกวินาทีเพิ่มเข้าไป เช่น

NSDate *tomorrow = [date addTimeInterval: 60 * 60 * 24 * 1];

เราก็จะได้ผลลัพธ์เป็นวันที่ถัดไปอีก 1 วันข้างหน้า

หรือหากต้องการแปลงกลับมาให้เป็น string ใน pattern เดิม ก็ยังสามารถใช้ method stringFromDate: ได้
และหากเราต้องการรู้อีกว่าวันนั้นตรงกับวันอะไร เราสามารถใช้ date formatter ช่วยอีกได้ ดังนี้

[dateFormat setDateFormat: @"E"];
NSString *day = [dateFormat stringFromDate: tomorrow];

ผลลัพธ์ที่ได้คือ

Tue

อ่านวิธีเขียน format string อื่นๆได้จาก ที่นีี่ :)

ขอบคุณ @katanyoo ที่ช่วยหา resource มาให้

Related Link from Roti

Filter ข้อมูลด้วย NSPredicate

2010-04-04T22:36:00.005+07:00

หลายครั้งที่ผมมักเก็บข้อมูลต่างๆ ลง object แล้วนำ object เหล่านั้นเก็บไว้ใน array ก่อนนำมาใช้งาน ปัญหาที่พบก็คือหากต้องการลือก object บางตัวเพื่อนำมาใช้งานต้องเขียนโปรแกรมให้วิ่งเข้าไปวนรอบหาเอง

อีกวิธีหนึ่งที่่ช่วยให้เราไม่ต้องวนรอบหา object ที่ต้องการเองก็คือ ใช้ NSPredicate ช่วย ซึ่งมันจะ filter object ที่ถูกเก็บใน array โดยอิงจาก property ต่างๆของ object แทนเรา

เริ่มจากหากผมมี คลาส Person ที่มีื property ดังนี้

NSString *name;
NSString *department;
NSInteger salary;

และผมมี object ของคลาส Person หลายตัวเก็บอยู่ในตัวแปร array ยาวๆ จากนั้นหากผมต้องการเลือก object ที่มี property name เป็น "Steve Jobs" ผมจะเขียน code ได้ดังนี้

NSPredicate *predicate = [NSPredicate predicateWithFormat: 
    @"name == 'Steve Jobs'"];
[personList filterUsingPredicate: predicate];

เราจะเรียก method ชื่อ predicateWithFormat: พร้อมทั้งใส่ query string ลงไปตาม code ตัวอย่าง เท่านี้ personList ก็จะมีเฉพาะ object ของคลาส Person ที่มี name เป็น Steve Jobs แล้ว

นอกจากนี้เรายังสามารถเขียน predicate format ต่างๆ ที่ซับซ้อนกว่านี้ได้อีก โดยอ่านเพิ่มเติมได้ที่ Predicate Format String Syntax

Related Link from Roti

Exchange data between an Adobe Flash application and a remote service with CocoaAMF

2010-03-30T01:06:00.007+07:00

หลายคนคงไม่คุ้นหู หรือไม่เคยได้ยินคำว่า Action Mesasge Format หรือ AMF และผมได้รับภารกิจให้เขียนโปรแกรมด้วย Objective-C สำหรับติดต่อกับ server ด้วยการ serialize ActionScript objects ไปมาระหว่าง client กับ server

โชคดีที่พบว่ามีคนทำ library ไว้ให้แล้วใน github ใช้ขื่อว่า CocoaAMF ลอง clone ลงมาทันทีพบว่ามีตัวอย่างการใช้งานที่สั่ง build และ run ได้เลย

concept การใช้งานหลัก ๆ ก็เดาได้ไม่ยาก โดยการใช้คลาส AMFRemotingCall เป็นหลัก และกำหนด delegate ให้มัน

AMFRemotingCall *remotingCall = [[AMFRemotingCall alloc] init];
remotingCall.delegate = self;

จากนั้นกำหนด parameter ต่างๆในลักษณะนี้ และสั่ง start

remotingCall.URL = [NSURL URLWithString:@"http://www.nesium.com/amfdemo/gateway.php"];

remotingCall.service = @"ExampleService";
remotingCall.method = @"add";

remotingCall.arguments = [NSArray arrayWithObjects: params1, params2, nil];

[remotingCall start];

หลังการสั่ง start แล้วจะเป็นการส่ง request ไปยัง service ปลายทางแบบ Asynchronous และเมื่อ request เสร็จสิ้นแล้ว 2 delegate method นี้จะทำงาน ค่าที่ได้เราไม่จำเป็นต้อง parse เองเพราะจะถูกเก็บอยู่ในรูปของ dictionary ให้พร้อมใช้อยู่แล้ว

- (void)remotingCallDidFinishLoading:(AMFRemotingCall *)remotingCall 
       receivedObject:(NSObject *)object{

 FlexArrayCollection *f = (FlexArrayCollection*) object;
 NSArray *array = [f source];
 NSDictionary *dict = [array objectAtIndex: 0];

}

- (void)remotingCall:(AMFRemotingCall *)remotingCall didFailWithError:(NSError *)error{

 NSLog(@"error = %@", error);

}

ขอบคุณท่าน nesium มาก ช่วยลดเวลาไปได้เยอะเลยทีเดียว

Related Link from Roti

iPhone App ไหลลื่นด้วย NSOperation

2010-03-05T13:22:00.009+07:00

การทำงานบางอย่างต้องใช้เวลานานกว่าจะเสร็จ เช่น การ download ไฟล์จากอินเทอร์เน็ต หรือการสร้าง object ของ NSString ด้วยคำสั่งอย่าง

[NSString stringWithContentsOfURL: url]

และหากเราทำ operation ดังกล่าวบน main thread แล้ว ปัญหาที่มักพบก็คือ User Interface (UI) จะเกิดอาการ freeze ซึ่งนั่นอาจทำให้ผู้ใช้ (user) เกิดอาการหงุดหงิด และรู้สึกไม่ลื่นไหลอย่างที่ควรจะเป็นได้

วิธีการแก้ไขอย่างง่ายๆก็คือย้าย operation ที่เข้าข่ายว่าจะทำงานนานเกินไปออกไปทำงานนอก main thread และจัดการ thread นั้นด้วยตัวเอง หรืออีกวิธีหนึ่งก็คือใช้ NSOperationQueue ช่วย หลักการมีดังนี้

สร้าง queue ซึ่งเป็น object ของ NSOperationQueue
สร้าง operation ซึ่งเป็น object ของ NSOperation
เอา object ที่สร้างในข้อ 2 ใส่ลงไปใน queue (ที่สร้างในข้อ 1 )
release operation ทิ้ง

จากขั้นตอนดังกล่าวหน้าตา code จะเป็นลักษณะแบบนี้

NSOperationQueue *queue = [NSOperationQueue new];

NSInvocationOperation *operation = [[NSInvocationOperation alloc] initWithTarget:self selector:@selector(loadDataWithOperation) object:nil];

[queue addOperation:operation];
[operation release];

จากตัวอย่างเราจะ init ค่าของ NSInvocationOperation (เป็น subclass ของ NSOperation) ด้วยการกำหนด selector ชื่อ loadDataWithOperation ที่ข้างในนั้นอาจมีการทำงานบางอย่างที่ใช้เวลานาน เช่นการใช้คำสั่งเช่น

[NSString stringWithContentsOfURL: url]

queue จะจัดการ และเรียกใช้ method loadDataWithOperation ให้เราเองหลังจากที่มันถูกใส่ลงไปใน queue แล้วอัตโนมัติ

เท่านี้ UI ก็จะไม่ freeze แล้ว และชีวิตเราก็สบายขึ้น

ตัวอย่าง code เปรียบเทียบปัญหาก่อนหลัง และข้อมูลเพิ่มเติม

Related Link from Roti

วาดเส้นบน MKMapView (MapKit บน iPhone)

2010-01-22T17:01:00.012+07:00

เนื่องจาก "ตอนนี้" เราไม่สามารถวาดอะไรลงไปใน MKMapView ได้โดยตรง ดังนั้นหากต้องการวาดอะไรลงไป จึงจำเป็นต้องใช้วิธีอ้อมๆเล็กน้อย

หลักการก็คือ วาง UIView ซ้อนลงไปเป็น subview ของ MKMapView และวาดเส้นต่างๆลงไปบน UIView ที่วางลงไปนั้นแทน และหากต้องการวาดเส้น โดยอิงกับจุด latitude, longitude จริงบนแผนที่ด้วยแล้ว เจะใช้ method ของ MKMapView ที่ชื่อ convertCoordinate:toPointToView: ซึ่งผลที่ได้ก็คือเป็นการแปลงจุด latitude และ longitude ในแผนที่ให้กลายมาเป็นจุด x, y จริงบนหน้าจอ

อีกจุดหนึ่งที่ต้องให้ความสนใจก็คือ เมื่อมีการขยับ หรือมีการเปลี่ยนแปลงการแสดงผลบน MKMapView ก็จะให้ UIView ที่วางทับอยู่วาดรูปใหม่อีกครั้ง เนื่องจาก latitude, longitude ที่แสดงบนหน้าจอ ไม่ใช่ x, y เดิมที่เคยวาดไปก่อนที่ MKMapView จะถูกขยับอีกแล้ว และแน่นอน พระเอกของเราคือ MKMapViewDelegate

และเมื่อเรารู้แล้วว่าจุดที่เราต้องการวาดคือ x, y ไหนบนหน้าจอ การวาดอะไรลงไปก็ไม่ยาก

ตัวอย่างขั้นตอนหลักๆมีดังนี้
เริ่มแรกจะมี Array ของ CLLocation ที่บรรจุ latitude และ longitude ไว้พร้อมใช้งาน (ทำจริงๆอาจเก็บไว้ในลักษณะอื่นๆก็ได้แล้วแต่สะดวก)

จุดสำคัญคือจุดที่เราจะสั่งวาดเส้นลงไปบน UIView โดยเราจะใช้วิธี override method ชื่อ drawRect: ของ UIView ให้วาดเส้นลงไปตามจุดที่ต้องการ ดังนี้

- (void)drawRect:(CGRect)rect{

/* สั่งให้วาดเส้นหากมีจุดที่ต้องวาด และวาดเมื่อ UIView นี้ไม่ได้ถูก hidden อยู่เท่านั้น */
if(!self.hidden && nil != self.points && self.points.count > 0){

    CGContextRef context = UIGraphicsGetCurrentContext(); 
    if(nil == self.lineColor)
        self.lineColor = [UIColor blueColor];

    CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
    CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
    CGContextSetLineWidth(context, 2.0);

    //วนรอบอ่าน coordinate ทุกๆอันใน list เพื่อแปลงเป็นจุด x, y บนหน้าจอ และวาดต่อจุดกันไปเรื่อยๆ
    for(int idx = 0; idx < self.points.count; idx++){
        CLLocation* location = [self.points objectAtIndex:idx];

        //แปลง coordinate ที่เก็บไว้ใน list ให้กลายเป็นตำแหน่ง x, y บนหน้าจอ
        CGPoint point = [self.map convertCoordinate:location.coordinate toPointToView:self];

        if(idx == 0){
           CGContextMoveToPoint(context, point.x, point.y);
        }else{
           CGContextAddLineToPoint(context, point.x, point.y);
        }
    }

    CGContextStrokePath(context);

} // end if
} //end drawRect:

อีก 2 delegate method ของ MKMapViewDelegate ที่พลาดไม่ได้ก็คือ
mapView:regionWillChangeAnimated:
mapView:regionDidChangeAnimated:

หากแผนที่เปลี่ยน region ใหม่ หรือกำลังจะถูกย่อ/ขยาย เลื่อนแผนที่ ให้ซ่อน UIView ออกไปก่อน

- (void)mapView:(MKMapView *)mapView 
    regionWillChangeAnimated:(BOOL)animated{

    self.hidden = YES;
}

เมื่อหยุดการกระทำกับแผนที่ไปแล้ว ให้แสดง UIView พร้อมทั้งบอกให้วาดเส้นใหม่ตามจุดต่างๆอีกครั้ง

- (void)mapView:(MKMapView *)mapView 
    regionDidChangeAnimated:(BOOL)animated{

    self.hidden = NO;
    [self setNeedsDisplay];
}

จากตัวอย่าง พบว่ามีการสั่งให้วาดเส้นตามจุดต่างๆใหม่ทุกครั้งที่มีการเปลี่ยน region ขยับ เลื่อน หรือย่อ ขยายแผนที่ทุกครั้งไป :(

หากเราปักหมุดลงไปด้วย แล้วลากเส้นเชื่อมตามลำดับ จะได้หน้าตาออกมาลักษณะนี้

ที่มา: Drawing polyines or routes on a MKMapView (Using Map Kit on the iPhone)
ต้นฉบับ source code Created by Craig

ตัวอย่างโปรเจ็คสามารถดาวน์โหลดได้จากที่นี่

Related Link from Roti

Parse XML ด้วย NSXMLParser

2010-01-21T19:30:00.002+07:00

มี library หลากหลายตัวที่ช่วยให้เราสามารถ parse XML ด้วย Objective-C ได้ ซึ่งคลาสในตระกูล NS* ก็เตรียม NSXMLParser ให้เราได้ใช้อยู่แล้ว

หลักการคร่าวๆของ NSXMLParser จะไม่ใช่การเขียนโปรแกรมวนรอบให้วิ่งไปตาม element ต่างๆที่เจอ แต่จะเป็นการเขียน code เข้าไปแทรกที่จังหวะต่างๆใน delegate method ที่มีให้ ในมุมมองที่ซึ่งตัว parser จะวิ่งไปตาม element ต่างๆให้เราเอง ส่วนเราก็มีหน้าที่วาง code แทรกลงไป ว่าหาก parser วิ่งมาถึงจุดนี้ จะให้มันทำอะไรบ้าง นั่นเอง

สำหรับบันทึกนี้จะเอา code เข้าไปเขียนไว้ในเหตุการณ์ต่างๆดังนี้
เมื่อ parser วิ่งไปเจอ element (เจอ tag เปิด)
เมื่อ parser วิ่งไปเจอ character ระหว่าง element
เมื่อ parser วิ่งออกจาก element (เจอ tag ปิด)
เมื่อ parser วิ่งไปจนจบ document

ทั้ง 4 เหตุการณ์ดังกล่าวจะถูกแทนด้วย delegate method ต่อไปนี้ตามลำดับ

parser:didStartElement:namespaceURI:qualifiedName:attributes:
parser:foundCharacters:
parser:didEndElement:namespaceURI:qualifiedName:
parserDidEndDocument:

ชื่อ method ยาวหน่อย ;)

ครานี้ก็มาถึง code ตัวอย่างการใช้งาน โดยจะใช้ XML ตัวอย่างจาก W3C ไฟล์นี้ โดยเริ่มจากการประกาศตัวแปรต่างเตรียมใช้งานก่อน ซึ่งจากลักษณะของ xml ตัวอย่าง จะได้ตัวแปรต่างๆดังนี้

/* สำหรับเก็บรายชื่อของ food */

NSMutableArray *breakfast_menu;

/* เก็บชื่อของ element ที่ตัว parser วิ่งไปถึง */

NSString *currentElement

/* อาหารแต่ละชนิดจะมี property ของตัวเอง เราจึงเลือกใช้ dictionary */

NSMutableDictionary *currentFood;

/* เอาไว้เก็บค่าชั่วคราว */

NSMutableString *currentName, *currentPrice, *currentDescription, *currentCalories;

จากนั้นเริ่มลงมือ โดยการสร้าง instance ของ NSXMLParser ก่อนด้วย xml ตัวอย่างดังกล่าว พร้อมทั้งกำหนด delegate ให้เรียบร้อย ดังนี้

NSString *path = @"http://www.w3schools.com/XML/simple.xml";

breakfast_menu = [[NSMutableArray alloc] init];

NSURL *xmlURL = [NSURL URLWithString: path];

parser = [[NSXMLParser alloc] initWithContentsOfURL: xmlURL];

[parser setDelegate: self];

NSLog(@"start parsing");

[parser parse];

แทรก code เข้าไป เมื่อ parser วิ่งไปเจอ element ใดๆ ในที่นี้จะกำหนดว่าหาก parser วิ่งไปเจอ element ชื่อ food ให้สร้าง object ต่างๆไว้รอเก็บ property ต่างๆของ food ไว้เลย

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName attributes:(NSDictionary *)attributeDict{

if([elementName isEqualToString: @"food"]){

currentFood = [[NSMutableDictionary alloc] init];

currentName = [[NSMutableString alloc] init];

currentPrice = [[NSMutableString alloc] init];

currentDescription = [[NSMutableString alloc] init];

currentCalories = [[NSMutableString alloc] init];

}

และเมื่อ parser วิ่งไปเจอ character ที่อยู่ระหว่าง tag ก็ให้ตรวจสอบดูว่าตอนนี้กำลังอ่านอยู่ใน element ชื่อว่าอะไร จากนั้นให้เอาค่าที่ได้เก็บไว้ในตัวแปรให้ถูกต้อง

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string{

if(![[string stringByTrimmingCharactersInSet: [NSCharacterSet whitespaceAndNewlineCharacterSet]] isEqualToString: @""]){

if([currentElement isEqualToString: @"name"]){

[currentName appendString: string];

}else if([currentElement isEqualToString: @"price"]){

[currentPrice appendString: string];

}else if([currentElement isEqualToString: @"description"]){

[currentDescription appendString: string];

}else if([currentElement isEqualToString: @"calories"]){

[currentCalories appendString: string];

}

และเมื่อ parser วิ่งไปจนจบ element นั้นๆแล้ว ให้นำค่าที่อ่านได้นำไปเก็บไว้ใน food ที่เป็น dictionary object แต่หากพบว่า parser วิ่งออกจาก element ชื่อ food ให้นำตัวแปร currentFood ไปเก็บไว้ใน list ที่เตรียมไว้ตอนแรก

- (void)parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName{

if([elementName isEqualToString: @"name"]){

[currentFood setObject: currentName forKey: @"name"];

}else if([elementName isEqualToString: @"price"]){

[currentFood setObject: currentPrice forKey: @"price"];

}else if([elementName isEqualToString: @"description"]){

[currentFood setObject: currentDescription forKey: @"description"];

}else if([elementName isEqualToString: @"calories"]){

[currentFood setObject: currentCalories forKey: @"calories"];

}else if([elementName isEqualToString: @"food"]){

[breakfast_menu addObject: currentFood];

}

เมื่อ parser วิ่งไปจนจบ document แล้วให้ลอง print ออกมาดู ดังนี้

- (void)parserDidEndDocument:(NSXMLParser *)parser {

NSLog(@"all done!");

NSLog(@"food list array has %d items", [breakfast_menu count]);

NSMutableDictionary *food;

for(int i = 0; i < [breakfast_menu count]; i ++){

food = [breakfast_menu objectAtIndex: i];

NSLog(@"\nname: %@\nprice: %@\ndescription: %@\ncalories: %@\n\n",

[food objectForKey: @"name"],

[food objectForKey: @"price"],

[food objectForKey: @"description"],

[food objectForKey: @"calories"]);

}

code ตัวอย่างดาวน์โหลดได้จากที่นี่

Related Link from Roti

Create Tab Bar Icon for iPhone Application with Gimp

2010-01-12T15:15:00.002+07:00

หลายครั้งที่เราจำเป็นต้งอใช้ tab bar icon ใน iPhone Application ของเราเอง แต่แค่ icon ต่างๆที่ระบบจัดเตรียมมาให้อาจไม่เพียงพอต่อความต้องการ โชคดีที่ยังมีคนใจดีหลายคน แจก tab bar icon ให้เราหา download มาใช้ได้ฟรี เช่นที่นี่ ที่นี่ และ ที่นี่ แต่หลายครั้งที่หาไม่เจอที่ตรงกับที่เราต้องการ หรือไม่ก็อยากจะใช้รูปที่เรามามาทำเป็น tab bar icon เสียเอง ทำให้เราต้องออกแรงทำ tab bar icon ขึ้นมาใช้เองล่ะ

entry นี้จะใช้ Gimp ในการเปลี่ยนรูปที่เรามีอยู่แล้วให้กลายเป็นรูปที่นำมาใช้เป็น tab bar icon ได้

หลังจากมีรูปที่ต้องการนำมาทำเป็น tab bar icon และเปิดด้วย Gimp ขึ้นมาแล้ว ขั้นตอนต่อไปมีดังนี้

1. เปลี่ยนรูปให้เป็นภาพ Grayscale ก่อน ที่เมนู เลือก Image > Mode > Grayscale จากนั้นพิจารณาดูว่าพื้นที่ที่เราต้องการให้แสดงตรงตามต้องการหรือไม่ (พื้นที่สีดำ จะไม่ถูกวาด พื้นที่สีขาวที่เท่านั้นที่เราจะใช้งาน) ถ้ายังให้ลองปรับความเข้าของสีดำ/ขาว หรือไม่ก็ Invert สีดำ/ขาว ก็ได้

2. สร้าง layer ใหม่ขึ้นมาและกำหนด background เป็นสีขาว พร้อมทั้งให้ layer ใหม่ที่สร้างขึ้นอยู่ด้านล่างรูปที่เราจะใช้งาน

3. click ขวาที่ layer ที่สร้างใหม่จากข้อ 2 (layer ด้านล่าง) แล้วเลือก Add Layer Mask... จะมีหน้าต่างเล็กๆขึ้นมา ให้เลือก Black (full transparency) จากนั้นกดปุ่ม Add

4. click เลือก layer รูปของเรา (layer บนสุด) จากนั้นเลือกเครื่องมือ Clone Tool (รูปกล้องถ่ายรูป) และกดปุ่ม Ctrl ค้างไว้ พร้อมกับนำ mouse มา click ที่มุมบนซ้ายของภาพ เพื่อเริ่มต้นการ copy

5. กำหนดให้ layer บนสุด invisible (click ที่รูปตาในหน้าต่าง layer) และเลือก layer ล่าง

6. เลื่อน mouse มาไว้มุมบนขวาสุด (ขณะนี้ pointer ยังเป็น Clone Tool อยู่) ในตำแหน่งเดียวกับที่เรา click มุมบนซ้ายจากข้อ 4

7. ลาก pointer ไปให้ทั่ว จะเห็นภาพที่เราจะใช้ถูก clone ขึ้นมา

เสร็จแล้วจะได้รูปออกมาลักษณะนี้

สังเกตเห็นว่า หากรูปต้นแบบที่เราจะนำมาใช้ไม่ได้ใช้สีที่เข้มมากพอ ผลลัพธ์ที่ได้จะเป็น icon ที่สีของ icon ไม่ค่อยชัดเจน (ดูจางๆ) นั่นเอง

อ่านต่อ: iPhone HIG

Related Link from Roti

Reverse Geocoding (Address Lookup) with Objective-C, iPhone

2010-01-04T15:16:00.003+07:00

การหาที่อยู่จาก latitude และ longitude ที่มี ปัจจุบันมี service ที่ให้เราโยน latitude, longitude เข้าไปแล้วมันจะคืนค่าสถานที่ออกมาหลายที่ ทั้งฟรี และไม่ฟรี เช่น Reverse Geocoding (Address Lookup) ของ Google เป็นต้น

สำหรับ MapKit framework ที่ถูกใช้ใน iPhone กันนั้นก็ใช้ map service จาก Google เช่นเดียวกัน และเราก็สามารถ reverse geocoding ได้จาก service ของ Google ดังกล่าวมาแล้วได้ตามปกติ

วิธีที่กล่าวมาตอนต้น เราจำเป็นต้องส่ง HTTP request ไปเอง และต้องมี API key จาก Google ด้วย สำหรับ map kit framework แล้วง่ายกว่านั้นด้วยการใช้ MKReverseGeocoder นั่นเอง

สำหรับวิธีการใช้งานก็ตรงไปตรงมาคือส่ง latitude, longitude ที่ถูก wrap ให้อยู่ในรูปของ CLLocationCoordinate2D เข้าไป จากนั้นสั่งให้หาที่อยู่ออกมา ผลลัพธ์ที่ได้จะถูกส่งไปยัง delegate method ทั้ง 2 เมื่อ reverse สำเร็จ หรือไม่สำเร็จ ดังนั้นจะได้หน้าตา code ดังนี้

1. wrap latitude, longitude ที่มีไว้ใน CLLocationCoordinate2D ก่อน

CLLocationCoordinate2D coordinate = {

latitude,

longitude

};

2. instantiate และส่ง coordinate เป็นพารามิเตอร์เข้าไป อย่าลืมกำหนด delegate object ด้วย และสั่งให้ทำการ reverse จากนั้นก็รอ ให้เสร็จสิ้นการ reverse

MKReverseGeocoder *reverseGeocoder = [[MKReverseGeocoder alloc] initWithCoordinate: coordinate];

reverseGeocoder.delegate = self;

[reverseGeocoder start];

3. เมื่อการ reverse เสร็จสิ้นแล้ว 1 ใน 2 delegate method นี้จะถูกเรียกให้ทำงาน

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFindPlacemark:(MKPlacemark *)newPlacemark {

NSLog(@"%@", [[newPlacemark.addressDictionary valueForKey:@"FormattedAddressLines"] componentsJoinedByString:@", "]);

}

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFailWithError:(NSError *)error {

NSLog(@"%@", error);

}

ค่าที่จะได้หลังจาก reverse สำเร็จและนำมาใช้งานหลักๆก็คือ instance ของ MKPlacemark นั่นเอง ซึ่งในนั้นจะบรรจุที่อยู่ของสถานที่ที่แปลงได้ ให้เราได้เลือกใช้ได้ว่าจะใช้ค่าไหน เช่น addressDictionary, countryCode, postalCode และ subLocality เป็นต้น

อ่านต่อ: Google Maps Terms of Service

Related Link from Roti

iPhone กับการเขียนและอ่านไฟล์รูปใน document directory

2009-12-16T23:34:00.004+07:00

หลังจากครั้งที่แล้วเมื่อได้รูปแล้วจะเป็นการบันทึก (Save) ไว้ใน photo album แต่ในบางกรณีเราไม่ต้องการบันทึกภาพลงในนั้น แต่ต้องการแค่บันทึกภาพเก็บไว้ และคราวหน้าอาจต้องเอามาใช้งานอีก โดยไม่จำเป็นต้องให้ user เข้าถึงรูปนั้นได้ เราจะบันทึกมันไว้ใน document directory นั่นเอง

จากเดิมหลังจากเลือกรูปเสร็จแล้วเราจะได้ image มาใช้ และเราเลือกที่จะบันทึกไว้ใน photo album ซึ่งหากต้องการเปลี่ยนมาเป็นการบันทึกลงไปใน document directory ก็ทำได้ดังนี้

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];

[UIImagePNGRepresentation(image) writeToFile:
[documentsDirectory stringByAppendingPathComponent: @"myImage.png"] atomically: YES];

ด้านบนเป็นการใช้ function ชื่อ UIImagePNGRepresentation() เพื่อเปลี่ยน image และจากนั้นเขียน image ลงไปตาม path ที่เรากำหนดไว้ ในที่นี้ก็คือใน document directory และกำหนดชื่อไฟล์เป็น myImage.png นั่นเอง

และเมื่อต้องการอ่านไฟล์ที่เราเขียนลงไปมาใช้งาน สามารถทำได้ดังนี้

    if([[NSFileManager defaultManager] fileExistsAtPath: documentsDirectory]){
        NSLog(@"found file");
        uiImageView.image = [UIImage imageWithContentsOfFile: documentsDirectory];

    }else{
        NSLog(@"file not found");
    }

เช่นเดิม ให้อ่านไฟล์ขึ้นมาจาก path ที่เราต้องการ และนำไปแสดงใน image view พร้อมใช้งานในโปรแกรมได้เลย

Related Link from Roti

ใช้ iPhone ถ่ายรูปแล้ว Save ลงเครื่อง

2009-12-15T19:59:00.035+07:00

การเขียนโปรแกรมใน iPhone ให้ถ่ายรูป และบันทึก (Save) รูปนั้นไว้ในเครื่องนั้นสามารถทำได้ง่ายๆผ่าน UIImagePickerController เท่านั้น กระบวนท่ามีดังนี้

UIImagePickerController *picker = [[UIImagePickerController alloc] init];

picker.delegate = self;  picker.allowsEditing = YES;

picker.sourceType = UIImagePickerControllerSourceTypeCamera;  

[self presentModalViewController:picker animated:YES]; 

[picker release];

สร้าง object ของ UIImagePickerController ออกมา จากนั้นกำหนด delegate ให้มัน และแสดง picker ออกมาผ่าน modal view เท่านั้นเอง ซึ่งระหว่างก่อนที่จะแสดง picker ขึ้นมานั้น จะเห็นว่ามี 2 จุดที่เราต้องทำอะไรบางอย่างได้แก่จุดแรก

picker.allowsEditing = YES;

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

picker.sourceType = UIImagePickerControllerSourceTypeCamera;

เป็นการ กำหนดแหล่งที่มาของรูป จากตัวอย่างเป็นการกำหนดแหล่งที่มาของรูปคือ กล้องนั่นเอง ซึ่งนอกจากกำหนดแหล่งที่มาเป็นกล้องได้แล้ว เรายังกำหนดแหล่งที่มาได้อีก 2 แบบ ที่เป็นการเลือกรูปจากในเครื่องของเราเอง ได้แก่

UIImagePickerControllerSourceTypePhotoLibrary
UIImagePickerControllerSourceTypeSavedPhotosAlbum

จากนั้นอย่าลืม implement delegate method ของ picker ด้วย ดังนี้

- (void)imagePickerController:(UIImagePickerController *)picker       didFinishPickingImage:(UIImage *)image      editingInfo:(NSDictionary *)editingInfo {   

   UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), self);

     [picker dismissModalViewControllerAnimated:YES];  

}

หลัง จากเราเลือก รูปเสร็จแล้ว (รวมถึงการถ่ายรูปเสร็จแล้วด้วย) method นี้จะทำงานทันที เราจะได้ reference ของ image จากนั้นก็ทำการ save ทันที โดยกำหนด selector ให้ทำงานหลังจากการ save เสร็จสิ้นไว้ด้วย หน้าตาดังนี้

- (void) image: (UIImage*) image didFinishSavingWithError: (NSError *) error contextInfo: (void *) contextInfo{

NSString *str = @"Saved"; 

   UIAlertView *alert = [[UIAlertView alloc] initWithTitle: @"Saved." message:str delegate:self cancelButtonTitle:nil otherButtonTitles: @"OK", nil]; 

   [alert show];  

   NSLog(@"error = %@", error); 

}

และอีก 1 delegate method ที่จะทำงานเมื่อเรายกเลิกการเลือกรูป ดังนี้

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker { 

   [picker dismissModalViewControllerAnimated:YES]; 

}

เท่านี้ก็เรียบร้อย

UPDATE:
ยัง ไม่เรียบร้อย สิ่งที่ควรเพิ่มเข้ามาสำหรับ application ที่ต้องใช้/สามารถใช้กล้องถ่ายรูปได้ก็คือการตรวจสอบว่าอุปกรณ์ที่ application ทำงานอยู่นั้นมี resource อยู่จริงหรือไม่ เช่นมี photo library หรือมีกล้องพร้อมใช้งานไหม โดยใช้ class method ของ UIImagePickerController ชื่อ isSourceTypeAvailable ดังนี้

if (![UIImagePickerController isSourceTypeAvailable:   UIImagePickerControllerSourceTypeCamera]) { 

   // do something 

}

เท่านี้ก็เรียบร้อย

เปลี่ยน view โดยไม่ใช้ modal view

2009-12-15T13:11:00.009+07:00

หลังจากบันทึกเรื่องเกี่ยวกับการเปลี่ยนไปแสดง view อื่นด้วย modal view ไปแล้ว คราวนี้จะเป็นการสลับ (exchange) ไป view อื่นโดยไม่จำเป็นต้องพึ่งพา modal view

อันที่จริงแล้วการเปลี่ยนไปแสดงอีก view หนึ่งนั้น นอกจากจะใช้ modal view ดังกล่าวแล้ว เรายังสามารถใช้ navigation controller ช่วย push หน้า view เข้ามาแทนหน้า view เดิมก็ได้ (application เหล่านี้มักพบใน application ที่มีการใช้ตาราง เช่น Mail, iPod, Contacts และอื่นๆ เป็นต้น ) ก็ได้ หรือไม่ก็วิธีง่ายๆก็คือใช้ method addSubView: หรือ method จำพวก insertSubview: ก็ได้

สำหรับคราวนี้พระเอกที่จะช่วยในการสลับ view ไปแสดง view อีกอันหนึ่งก็คือ method ชื่อ exchangeSubviewAtIndex:withSubviewAtIndex: ของ UIView นั่นเอง

// begin animation block

CGContextRef context = UIGraphicsGetCurrentContext();

[UIView beginAnimations:nil context:context];

// set animation transition style

[UIView setAnimationTransition: UIViewAnimationTransitionCurlUp forView: myView cache:YES];

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

[UIView setAnimationDuration:1];

// Animations for exchanging subview

[self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];

[UIView commitAnimations];

สำหรับ method setAnimationTransition;forView:cache: จะมี animation type ให้เลือกทั้งหมด 4 แบบ ดังนี้

UIViewAnimationTransitionCurlUp

UIViewAnimationTransitionCurlDown

เป็น animation แบบพลิกกระดาษขึ้น และลง

UIViewAnimationTransitionFlipFromLeft

UIViewAnimationTransitionFlipFromRight

เป็น animation แบบพลิกหน้าจอไปทางซ้าย และขวา

และอีก 1 แบบคือกำหนดว่าไม่ต้องมี animation ใดๆในการ exchange view

UIViewAnimationTransitionNone

ส่วนของ method setAnimationCurve: นั่นเป็นการกำหนดว่าจะให้แสดง animation ในลักษณะให้ค่อยเร็วขึ้นจนจบ หรือว่าให้ค่อยๆช้าตอนจบ ซึ่งหากไม่ได้กำหนดค่าให้ จะมี default เป็น UIViewAnimationCurveEaseInOut

Related Link from Roti

ใช้ MGTwitterEngine ทำ twitter client บน iPhone

2009-11-11T16:44:00.006+07:00

สำหรับการพัฒนา twitter client ด้วย Cocoa ตอนแรกคิดว่าอาจต้องเหนื่อยหน่อย แต่โชคดีที่มี library ชื่อ MATwitterEngine (เขียนด้วย Objective-C) ซึ่ง application ชื่อดังอย่าง Twitterific ก็นำ library ตัวนี้ไปใช้เช่นกัน

ใช้ SVN checkout ได้ที่ http://svn.cocoasourcecode.com/MGTwitterEngine/

ในนั้นจะมีโปรเจ็คตัวอย่างให้เราทดลองเล่นดู ลอง compile และรันพบว่าใช้งานได้จริงๆด้วย! ที่สำคัญยังโชคดีที่มี README.txt ให้อ่านและข้างในยังบอกวิธีนำ library ตัวนี้ไปใช้งานบน iPhone อีกด้วย แต่โชคไม่ดีที่แม้จะทำตามคำแนะนำแล้วก็ยังไม่สำเร็จอยู่ดี

หลังจากทำตามคำแนะนำแล้วโดน compiler ด่ามามากมาย วิธีป้องกันการโดนด่าให้ทำตามขั้นตอนต่อไปนี้

หมายเหตุ** ระหว่างทางอาจต้องตามหา yajl และ CMake ด้วย

1. หลังจากเราสร้าง iPhone app project เสร็จแล้ว ให้เปิดโปรเจ็คตัวอย่างที่ได้มาแล้วลาก folder ชื่อ MGTwitterEngine มาวางไว้ในโปเจคที่จะใช้ library ตัวนี้

2. กด alt+command+E จากนั้นใน tab General ให้เพิ่ม linked library ชื่อ libxml2.dylib เข้าไปในโปรเจ็ค

3. เพิ่ม header search path เข้าไปดังนี้
$SDKROOT/usr/include/libxml2

4. เอาไฟล์ที่อยู่ใน /usr/local/include/yajl/ ทั้งหมดมาวางไว้ในโปรเจ็ค

5. download ไฟล์นี้ compiled YAJL static library for iPhone จากนั้น extract เลือกเอาไฟล์ชื่อ libYAJLIPhone.a มาใส่ใน Frameworks ของเรา

6. ลอง compile และรันโปรเจ็ค จะพบว่าโดนด่ากลับมามากมาย ข้อหาไม่รู้จัก <yajlyajl_parse.h> ให้เราตามไปที่เกิด error ขึ้นแล้วแก้เป็น "yajl_parse.h" จากนั้นทดลอง compile แล้วรันใหม่

7. โดนด่ากลับมาอีกรอบ แต่คราวนี้แค่ 2 ที่ เกี่ยวกับการใช้ yajl_alloc ว่าเราใส่ arguments ไม่ถูกต้อง ให้เราตามไปที่ error แล้วแก้จาก

_handle = yajl_alloc(&callbacks, &cfg, self);

เป็น

_handle = yajl_alloc(&callbacks, &cfg, nil, self);

และแก้จาก

yajl_free_error(errorMessage);

เป็น

yajl_free_error(nil, errorMessage);

8. เปิดไฟล์ MGTwitterEngineGlobalHeader.h ให้แก้

#define YAJL_AVAILABLE 0

เป็น

#define YAJL_AVAILABLE 1

9. ทำตาม code ตัวอย่างที่ MGTwitterEngine มาลองทำตาม โดยกำหนด MGTwitterEngineDelegate และ implement delegate method ของมันให้เรียบร้อย จากนั้นลองส่ง tweet ดูพบว่าใช้งานได้แล้ว!

ที่มา: Setting up MGTwitterEngine with YAJL 1.0.6 for iPhone development
อาจต้องการ: MGTwitterEngine for Iphone SDK errors,

Related Link from Roti

ใช้ Hex value กำหนดค่าสีให้ UIColor

2009-11-09T20:22:00.001+07:00

การกำหนดสีให้กับ UIColor เพื่อใช้งานในโปรแกรม สามารถทำได้ผ่าน method ต่างๆที่กำหนดไว้ในคลาส UIColor ซึ่งมีบางสีเราสามารถสร้างขึ้นมาได้เลยผ่าน Class Methods ที่ UIColor มีไว้ให้ เช่น greenColor, redColor และ blueColor และแน่นอนว่าไม่ได้มี method สำหรับหลายๆสีที่เราต้องการในโลกของ RGB

method ชื่อ colorWithRed:green:blue:alpha: ช่วยให้เรากำหนดค่าสี RGB และ Alpha เองได้ตามต้องการ แต่ใน API Reference กำหนดไว้ว่าให้กำหนดค่าสีเป็น CGFloat ที่สามารถกำหนดค่าได้ตั้งแต่ 0.0 ถึง 1.0 เท่านั้น (กำหนดมากหรือน้อยกว่านั้นก็ได้ แต่จะถูกปัดให้เป็น 0.0 หรือ 1.0 อยู่ดี) ซึ่งบางคนอาจคุ้นเคยกับการกำหนดค่าสี RGB ในรูปของเลขฐานสิบหกมากกว่า

อีกวิธีสำหรับคนที่เคยชินกับการกำหนดสีโดยใช้เลขฐานสิบหาคือ สร้าง macro ดังนี้

#define HEXCOLOR(c) [UIColor colorWithRed:((c>>24)&0xFF)/255.0 \
                                    green:((c>>16)&0xFF)/255.0 \
                                     blue:((c>>8)&0xFF)/255.0 \
                                    alpha:((c)&0xFF)/255.0];

เวลาใช้งานก็แค่

UIColor* c = HEXCOLOR(0xff00ffff);

เท่านั้นเอง

Related Link from Roti