Feeds:
เรื่อง
ความเห็น

The iOS Design Cheat Sheet

The iOS Design Cheat Sheet

The iOS Design Cheat Sheet

Image & Input

จาก 2 บท ที่ผ่านมา เรามีแต่ แสดงผลข้อความ แถมยังแสดงผลอย่างเดียวไม่มีการรับ Input จากผู้ใช้อีกต่างหาก ก่อนอื่นพูดถึงการใช้รูปภาพ ( Image ) กันบ้าง

รูปภาพ

ก่อนอื่นก็มา สร้าง Project กันเช่นเดิม

รูปภาพ

ต่อมาก็ Add Image เข้ามาใน Project โดยทำการ Right Click ที่ Group แล้วเลือก Add New File

รูปภาพ

แล้วก็เลือก File ที่ต้องการ

รูปภาพ

ต่อมาเราก็สร้าง TestViewController แล้ว Set rootViewController เสียให้เรียบร้อย

@interface TestViewController : UIViewController

@end

@implementation TestViewController

– (void) loadView

{

[super loadView];

self.view.backgroundColor = [UIColorblackColor];

}

@end

@implementation AppDelegate

– (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

self.window = [[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];

// Override point for customization after application launch.

self.window.backgroundColor = [UIColorwhiteColor];

self.window.rootViewController = [[TestViewControlleralloc] init];

[self.window makeKeyAndVisible];

return YES;

}

….

รูปภาพ

ต่อมาก็เป็นการ Load Image จาก File แล้วนำมาแสดงผล ซึ่งในที่นี้ เราใช้ UIImage และเมื่อเราจะแสดงผล เราก็จะสร้าง UIImageView โดยใช้ UIImage แล้วเพิ่มเข้าไปเป็น Sub View ใน TestViewController ดังนี้

@interface TestViewController : UIViewController {

UIImageView* imgView;

}

@end

@implementation TestViewController

– (void) loadView

{

[super loadView];

self.view.backgroundColor = [UIColor blackColor];

UIImage *img = [UIImage imageNamed:@”Apple_Prirate.png”];

imgView = [[UIImageView alloc] initWithImage:img];

imgView.center = self.view.center;

[self.view addSubview:imgView];

}

@end

รูปภาพ

เราก็จะได้ App ที่แสดงผล Image ที่กลางจอ

รูปภาพ

ถ้าแสดงผลเฉยๆก็ไม่มีอะไร เรามาเพิ่มส่วนรับ Input จากการ Touch ดูบ้าง โดยเราจะทำให้ เมื่อมีการ Touch แล้ว ตัว Image จะวิ่งไปจุดที่เรา Touch

ซึ่งการรับ Touch Input ใน iOS นั้น ทันทีที่มีการ Touch ใน View นั้น Method ขื่อ

– (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event ก็จะถูกเรียก สิ่งที่เราต้องทำคือการทำการ Override Method ดังกล่าว โดยการ ประกาศ Method ที่ว่าใน ViewController ของเรา

– (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event

{

CGPoint touchPoint = [[touches anyObject] locationInView:self.view];

[UIView animateWithDuration:0.7f animations:

^(){imgView.center = touchPoint;}];

}

รูปภาพ

จาก Code ข้างบน App นี้เมื่อมีการ Touch แล้ว Image ก็จะวิ่งไปที่ตำแหน่งนั้นๆ ภายในเวลา 0.7 วินาที
โหลด Sourcecode ได้ที่นี่ครับ >>

ImageAndInput.zip

“It’s better to…

“It’s better to be pirates than to join the navy” – Steve Jobs

Clock iOS

จากบันทึกครั้งที่แล้ว เรามี App แสดงผล Hello อย่างเดียวซึ่งดูไม่มีประโยชน์อะไร ทีนี้เรามาสร้าง App ที่มีประโยชน์ขึ้นอีกนิดดีกว่าคือ

Clock iOS ซึ่งก็ตามชื่อ เป็น App ใช้แสดงเวลาปัจจุบันของเครื่อง

รูปภาพ

ซึ่งเราก็ยังคงสร้าง Empty Project เหมือนเดิม

รูปภาพ

แล้วก็ไปเพิ่ม ViewController เช่นเดิม

@interface TestViewController : UIViewController {

UILabel *timeDisplay;

}@end

@implementation TestViewController

– (void) loadView{

[super loadView];

self.view.backgroundColor = [UIColor blackColor];

timeDisplay = [[UILabel alloc] initWithFrame:CGRectMake(0,0,0,0)];

[timeDisplay setFont:[UIFont fontWithName:@”DBLCDTempBlack” size:128.0]];

[timeDisplay setText:[self timeClockString]];

[timeDisplay sizeToFit];

[timeDisplay setCenter:[self.view center]];

[timeDisplay setTextColor:[UIColor redColor]];

[timeDisplay setBackgroundColor:[UIColor blackColor]];

[self.view addSubview:timeDisplay];

[NSTimer scheduledTimerWithTimeInterval:(1.0) target:self      selector:@selector(time) userInfo:nil repeats:YES];

}

-(NSString*) timeClockString {

NSDate* now = [NSDate date];

NSCalendar *gregorian = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];

return  [NSString stringWithFormat:@”%02d:%02d:%02d ”

, [gregorian components:NSHourCalendarUnit fromDate:now].hour

, [gregorian components:kCFCalendarUnitMinute fromDate:now].minute

, [gregorian components:kCFCalendarUnitSecond fromDate:now].second];

}

-(void)time

{

[timeDisplay setText:[self timeClockString]];

[timeDisplay sizeToFit];

}

@end

รูปภาพ

ใน TestViewController นี้เราเพิ่ม Class member ขึ้นมาตัวหนึ่ง คือ  timeDisplay เป็น UILable เช่นเดิม ซึ่งใช้แสดงผล “Hello” ครั้งนี้เราให้มันแสดงผลเวลาปัจจุบันแทน

ครั้งที่แล้วนั้นเราให้มันแสดงผลครั้งเดียวและไม่มีการเปลี่ยนแปลงใดๆอีก จึงประกาศ UILable ใน Method และเมื่อ เพิ่มเข้าไปใน SubView แล้วก็ไม่มีการอ้างอิงอีก สิ่งที่แตกต่างจากครั้งทีแล้วคือเราต้องมีการเปลี่ยนแปลงมันทุกวินาที ครั้งนี้จึงต้องประกาศมันเป็น Class Member เพื่อที่ส่วนอื่นๆใน Class จะสามารถอ้างอิงตัวมันได้

สิ่งที่ทำเพิ่มต่อมาคือ รูปแบบ และ ขนาดของตัวอักษร เพราะครั้งที่แล้วเล็ก และดูไม่ค่อยเป็น นาฬิกาที่คุ้นตานัก ซึ่งครั้งนี้เรากำหนดให้เป็น Font “DBLCDTempBlack” โดยมีขนาด 128 pt และเราก็เปลี่ยนสี Font ให้เป็นสีแดง และสีพื้นเป็นสีดำ

ส่วนข้อความนั้นเรากำหนดให้แสดงเวลาปัจจุบันเราก็สร้าง Method ชื่อ  timeClockString โดยมีการคืนค่าเป็น NSString ของเวลาปัจจุบันมา

ต่อมาเราก็กำหนดให้ Class นี้จะต้องถูกเรียกทุกๆ 1 วินาทีเพื่อเปลี่ยนแปลงค่าเวลาปัจจุบัน โดยใช้ Class NSTimer ซึ่งมี Method scheduledTimerWithTimeInterval เพื่อทำการนี้อยู่  โดย Method ดังกล่าวนี้เป็น Static Method เป็นผลให้เราสามารถเรียกใช้งานได้โดยตรงโดยไม่จำเป็นต้องสร้าง Class NSTimer เป็น Object ขึ้นมาก่อนแต่อย่างใด

ซึ่งการใช้งานจะเป็น

[NSTimer scheduledTimerWithTimeInterval:(1.0) target:self      selector:@selector(time) userInfo:nil repeats:YES];

ค่า (1.0) คือช่วงเวลาเป็นวินาที ที่เราต้องการให้ถูกเรียก ส่วนเมื่อเรียกแล้วจะไปทำงานที่ Method ใดนั้น ก็สามารถกำหนดได้ที่ selector: นั่นเอง ซึ่งในที่นี้เรากำหนดให้ไปเรียก Methods ชื่อ time  ส่วน userInfo: นั้นเรายังไม่ใช้เลยให้ค่า nil ซึ่งมีความหมายเป็นว่างเปล่า ส่วน repeats: นั้นเป็นการบอกว่าจะเรียกซ้ำทุกๆ  วินาทีหรือไม่ ซึ่งกรณีนี้คือใช่ ก็กำหนดเป็น YES

ใน Method time นั้นเราก็ให้ UILable ที่ชื่อ timeDisplay ทำการ update ค่าเวลาปัจจุบัน

หลังจากสร้าง Class TestViewController แล้ว ก็อย่าลืม ไปกำหนดให้มันเป็น rootViewController ที่  AppDelegate ด้วยนะครับ

รูปภาพ

Download Source ที่นี่ครับ Source Clock iOS

“The shadow pro…

“The shadow proves the sunshine.”
― Switchfoot

Hello iOS

สำหรับการพัฒนา iOS Software นั้นจำเป็นอย่างยิ่งต้องมี คอมพิวเตอร์ที่สามารถ Run OSX ได้ ซึ่งที่จำหน่ายอย่างเป็นทางการในท้องตลาดก็คือ พวกเครื่อง Macintosh ทั้งหลายนั่นเอง

หลังจากนั้นก็จัดหาชุดพัฒนา Software ชื่อ XCode ซึ่งสามารถ Download ได้ฟรีผ่าน Apple App Store

หลังจากติดตั้ง XCode แล้วก็มาเริ่ม Project แรกกัน ซึ่งตามธรรมเนียมนั้น การเริ่มต้นใน Platform ใดๆ เรามักจะเริ่มด้วยการทำ App ง่ายๆอย่าง “Hello World”

ก่อนอื่นเราก็ทำการ New Project ใน XCode ก่อน  โดยเลือกที่ File -> New

รูปภาพ

จากนั้นก็เลือก Template สำหรับ iOS ซึ่งในที่นี้เราเลือก Empty Project เพื่อเริ่ม Code ตั้งแต่เบื้องต้น

รูปภาพ

จากนั้นก็มาตั้งชื่อให้ Project ซึ่งในที่นี้ใช้ชื่อ Hello.iOS

รูปภาพ

เมื่อได้ Project มาแล้วลอง Run ดู โดย Click ที่ปุ่ม Run

รูปภาพ

โดยผมได้เลือก iPad Simulator ไว้ ก็จะได้หน้าจอ iPad Simulator หน้าขาวๆว่างๆ

รูปภาพ

ทีนี้ลองไปดู Code ที่ File AppDelegate.m ซึ่ง XCode ได้สร้างขึ้นมาให้เรา ซึ่งจะมี Method ต่างๆมากมาย แต่ในครั้งนี้ให้เราสนใจแต่ที่ Method

– (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

รูปภาพ

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

{

self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

// Override point for customization after application launch.

self.window.backgroundColor = [UIColor whiteColor];

[self.window makeKeyAndVisible];

return YES;

}

ซึ่ง Method นี้จะทำงานเมื่อตัว OS จัดการ Launching สิ่งที่จำเป็นในการใช้งาน App เสร็จสิ้นหมดแล้ว โดยในที่นี้จะสร้าง Window ขึ้นมา 1 อัน เป็น Window หลักของ App ตัวนี้ พร้อมกำหนดให้สืพื้นเป็นสีขาว แล้วสั่งให้มันแสดงผล

จาก Code ที่ XCode สร้างมาให้ จะเห็นว่า ตอนนี้ยังทำอะไรแทบไม่ได้ ซึ่งจุดประสงค์ของทำ App แรกนี้ขึ้นมาเราก็ต้องการจะให้มันมันแสดงผล “Hello World” ขึ้นมา เราก็ต้องมาสร้างส่วนแสดงผลให้กับ Window ก็คือ View  นั่นเอง

สำหรับโครงสร้างใน iOS นั้น Window จะไม่เรียกใช้ View โดยตรงแต่จะผ่านตัวกลางเรียกว่า View Controller ตามลักษณะของ Design Pattern ที่ชื่อว่า MVC ( Model – View – Controller) ซึ่งจะพูดถึงกันภายหลังต่อไป

เราจึงต้องประกาศ Class TestViewController ขึ้นมาเพื่อนำไปใช้กับ Window ต่อไป

@interface TestViewController : UIViewController

@end

@implementation TestViewController

– (void) loadView

{

[super loadView];

self.view.backgroundColor = [UIColor whiteColor];

UILabel *aLabel = [[UILabel alloc] initWithFrame:CGRectMake(0,0,0,0)];

[aLabel setText:@”Hello iOS”];

[aLabel sizeToFit];

[aLabel setCenter:[self.view center]];

[self.view addSubview:aLabel];

}

@end

รูปภาพ

จากนั้นกำหนดให้ rootControllerView ของ Window หลัก ให้เป็น Object จาก Class TestViewController ที่เราพึ่งประกาศไว้

รูปภาพ

แล้ว Run ดูจะพบ ข้อความอยู่กลางจอภาพรูปภาพ

ดาวน์โหลด Source ที่นี่ครับ Hello iOS

สวัสดีปีมังกร