Macfeteria

หลังจากที่ได้ลองเล่นกับ action และ event ต่างๆพอสมควร วันนี้เดี๋ยวมาลองการใช้งาน Control ตัวอื่นกันดูบ้าง สำหรับวันนี้ Control ที่เราจะได้ลองกันได้แก่

• UIImageView
• UITextField
• UISwitch
• UISlider
• UIActionSheet
• UIAlertView

หน้าตาโปรแกรมที่เราจะได้ลองทำก็ออกมาประมาณนี้

อธิบายกันก่อนว่าโปรแกรมเราทำอะไร

โปรแกรมที่เราจะทำก็คือ เราจะทดลองเล่นกับ UIImageView โดยเราสามารถ กด on/off เพื่อแสดงรูปหรือไม่แสดง และสามารถปรับค่า alpha (ค่าความโปร่งแสง) ของรูปจาก slider อีกทั้งเราจะได้ทดลองใช้ UIActionSheet และ UIAlertView

Let’s Go

ก่อนอื่นเราก็สร้างโปรเจคขึ้นมาครับ ให้ชื่อว่าอะไรก็ตามใจเลยครับ หลังจากนั้น เราก็ลาก Image View , Slider ,Switch , Label เข้ามาดังรูป

จาก interface ที่เราได้ออกแบบไว้ จะเห็นว่า ผมได้นำ image view วางไว้ตำแหน่งเดียวกัน กับ Label ( Macfeteria ) เลย คือที่ทำอย่างนี้ก็เพื่อว่าอยากจะให้เห็นว่า เมื่อเราปรับค่า Alpha ของรูปแล้ว มันจะโปร่ง และถ้ารูปยิ่งโปร่งมากก็จะเห็นคำว่า Macfeteria มากขึ้น แล้วเราก็ลอง Compile/Run ดูครับ จะเห็นหน้าตาประมาณนี้

จะเห็นว่า UIImageView นั้นได้หายไป ก็เพราะว่าเรายังไม่ได้ใส่รูปให้มันนั่นเอง

ต่อไปเราจะเพิ่มรูปเข้าไปยัง โปรเจคของเราเพื่อนำมาใช้กับ image view วิธีการก็ไม่ยาก เราก็ Click ขวาไปที่ Resource แล้วก็เลือก Add > Existing Files … แล้วก็เลือกไฟล์รูปที่ต้องการ เมื่อเสร็จแล้วจะเห็นว่า ไฟล์ที่เราได้เลือกไป ได้เข้ามาอยู่ใน Resource เรียบร้อยแล้ว

กลับไปยัง Interface builder แล้วก็เลือกที่ UIImageView แล้วก็เปิด Inspector ขึ้นมา จะเห็นว่ามี Attribute ต่างๆให้ปรับ อธิบายทีละอย่างแล้วกัน

• Image เป็นชื่อ file  ที่เราจะต้องการจะแสดงที่ imageview นี้
• Mode การจัดการเกี่ยวกับภาพเป็นต้นว่า ปรับให้พอดีกับขนาด imageview , กำหนดให้ภาพอยู่ตรงกลางของ imageview เป็นต้น
• Alpha ความโปร่งใส ถ้าไม่โปร่งเลยคือ 1.0 ถ้ายิ่งเลขน้อยก็จะยิ่งโปร่งใส
• Tag เป็นค่าคงที่ของ object นี้ ( เดี๋ยวจะได้ใช้ในครั้งหน้า )
• Drawing
  • Opaque บอกให้ uiimageview ไม่ต้องวาด object ที่อยู่ข้างหลัง ( ควรจะใช้ เพราะมันเพิ่มประสิทธิภาพ )
  • Hidden ก็แปลตรงเลยครับว่า จะให้มันซ่อน หรือแสดง
  • Clip Subviews จะทำการตัดขอบให้ไม่เกินขนาดของ view
• Interaction
  • User Interaction Enabled ถ้าเปิด option นี้ก็จะทำให้ object  นี้สามารถตอบสนองต่อ event ต่างๆได้
  • Multiple Touch ก็เปิดให้ใช้งาน multiple touch ได้นั่นเอง

เมื่อเราได้ใส่รูปภาพเข้าไปแล้ว ถ้าลอง complie / run ก็จะเห็นรูปปรากฏยัง uiimageview ของเราเรียบร้อยแล้ว

Implement Controller Class

เมื่อเราได้ออกแบบหน้าตาของโปรแกรมเราเรียบร้อยไปแล้วส่วนหนึ่ง ต่อไปก็คือ การเขียน code นั่นเอง กลับไปที่ xcode และเริ่มเปิด controller class ของเรา หลังจากนั้นก็เขียน code ในส่วนของ interface ตามนี้ครับ

@interface GUIViewController : UIViewController
{
	IBOutlet UIImageView *m_imageView;
	IBOutlet UISlider *m_slider;
	IBOutlet UISwitch *m_switch;
	IBOutlet UITextField *m_textField;
}
@property (nonatomic,retain) UIImageView* m_imageView;
@property (nonatomic,retain) UISlider* m_slider;
@property (nonatomic,retain) UISwitch* m_switch;
 
-(IBAction) adjustAlpha:(id) sender;
-(IBAction) imageVisible:(id) sender;
@end

และส่วน implement ก็เป็นแบบนี้ครับ

@implementation GUIViewController

aa

@implementation GUIViewController
@synthesize m_imageView;
@synthesize m_slider;
@synthesize m_switch;
 
-(IBAction) adjustAlpha:(id) sender
{
	float value = [m_slider value];
	[m_imageView setAlpha:value];
}
 
-(IBAction) imageVisible:(id) sender
{
	if ( [m_switch isOn] == YES )
		[m_imageView setHidden:NO];
	else
		[m_imageView setHidden:YES];
}
@end

จาก code ข้างบน function ที่ชื่อ adjustAlpha เราจะไป link เข้ากับ slider เพื่อที่ว่า เมื่อเราเลื่อน slider ค่าของ alpha ก็จะเปลี่ยนไป และเราก็มี imageVisible ที่คอยเปิดปิด imageView ของเรา คิดว่าไม่น่ายากนะครับ

และหลังจากนั้น เราก็จะเชื่อม code ที่เราได้เขียนไปกับ interface ที่เราได้ออกแบบไว้

เราก็ลาก link เชื่อมกับ image view , slider , switch กับ m_imageView , m_slider , m_switch ตามลำดับ

หลังจากเสร็จแล้ว เราก็เชื่อม method ที่ชื่อว่า adjustAlpha เข้ากับ slider และ imageVisible เข้ากับ swich ให้เรียบร้อย  เมื่อเสร็จแล้ว click ขวาที่ File’s Owner ดูก็จะเห็นว่า object ต่างๆ ได้เชื่อมเข้าด้วยกันเรียบร้อยแล้ว

อย่าลืมปรับค่า max , min ของ slider ด้วยนะครับ เพราะ alpha ของ image มีแค่ 0 – 1.0 เราก็เปิด inspector ขึ้นมาแล้วก็ปรับ ค่า max ,min ให้เรียบร้อยดังรูป

เมื่อเสร็จแล้วก็ Compile / Run ดูครับ แล้วลองเลื่อน slider ไปมาดูครับว่า ถ้าเราเลื่อนซ้ายรูปเราได้จางจนมองเห็นคำว่า macfeteria และเมื่อเลื่อนไปด้านขวารูปก็จะชัดขึ้นตามไปด้วยหรือเปล่า

Action Sheet

จริงๆแล้ว action sheet ก็คล้ายๆกับ message box นะครับ คือจะเป็น message ขึ้นมาพร้อมกับ ปุ่มให้เราเลือกว่าจะ ok , cancel ประมาณนี้ และเราก็จะได้ลองใช้งานกัน สิ่งต่อไปที่เราจะทำเพิ่มเติมในโปรแกรมของเราก็คือ เราจะมี text field และ button อย่างละอัน โดยเมื่อกดไปที่ปุ่ม ก็จะมีหน้าต่าง action sheet ขึ้นมา ถ้ากด ok ก็จะมี alert ขึ้นมา บอกว่า Hello อะไรประมาณนี้

ก่อนอื่นเราก็ไปเพิ่ม button และ text field ให้กับ interface ของเราดังรูป

เมื่อเราได้วาง text field ลงไปยัง interface ของเราแล้วต่อไปเราจะมาทำความรู้จัก attribute ต่างๆของ text fields เพิ่มเติมกันอีกสักนิดว่ามีอะไรบ้าง

• Text Field
  • PlaceHolder คือข้อความลางๆ ( สีเทาๆ ) เวลาที่ไม่มีอะไรอยู่ใน text field เลย
  • Clear When Editing Begins จะลบข้อความเก่า ทุกครั้งที่แก้ไข text field
  • Adjust To Fit ปรับขนาดตัวหนังสือให้พอดี แต่ไม่ตำ่ว่า ขนาดที่เรากำหนด
• Text Input Traits
  • Capitalize เลือกว่าจะให้ตัวหนังสือเป็นตัวพิมพ์ใหญ่ หรือพิมพ์เล็ก โดยอาจจะแบ่งเป็นคำๆ หรือประโยค
  • Correction โปรแกรมจะตรวจความถูกต้องให้ด้วยว่า พิมพ์ถูกหรือไม่
  • Type แป้นพิมพ์เป็นแบบไหน ( ตัวหนังสือ , ตัวเลข , url ,เบอร์โทร )
  • Appearance ( Default , Alert ) ถ้าปรับเป็น alert แป้นพิมพ์จะโปร่งใสนิดๆ
  • Return Key ( Go , Done , etc ) ตรงนี้เราปรับ return key ให้ กับ keyboard อย่างตัวอย่างรูปข้างล่าง ผมปรับให้เป็น Yahoo!
    

ต่อไปก็คือเราจะเพิ่ม outlet เข้าไปยัง controller class ของเรา

// Outlet
IBOutlet UITextField *m_textField;
 
// Action
-(IBAction) saySomeThing:(id) sender;
-(IBAction) endEdit:(id) sender;

และในส่วน implement endEdit ก็มีดังนี้

- (IBAction ) endEdit:(id) sender
{
	[sender resignFirstResponder];
}

จาก code ข้างบน [sender resignFirtResponder] เราจะนำไป link เข้ากับ text field ของเราเพื่อที่ว่า เมื่อ user พิมพ์ข้อความเข้าไปยัง text field แล้ว เมื่อกด return ก็ให้เปลี่ยน first responder ไปยัง object อื่น เพราะถ้าหาก เราไม่ resign firstponder แล้วละก้อ แป้น keyboard ก็จะค้างอยู่แบบนั้น

เสร็จแล้วเราก็ link เข้ากับ event ที่ชื่อว่า Did End On Exit

และส่วน source code ของ saySomeThing ก็ได้ประมาณนี้

// Outlet
-(IBAction) saySomeThing:(id) sender
{
	UIActionSheet *actionSheet = [[UIActionSheet alloc]
			initWithTitle:@"คนไทยหรือเปล่า ?"
			delegate:self
			cancelButtonTitle:@"ไม่อ่ะ"
			destructiveButtonTitle:@"เป็นสิครับ"
			otherButtonTitles:nil];
	[actionSheet showInView:self.view];
	[actionSheet release];
}

จาก code ข้างบนจะอธิบาย คร่าวๆก็คือ เราได้ประกาศ Action Sheet ขึ้นมาและกำหนดค่าต่างๆให้กับ sheet เป็นต้นว่า ข้อความต่างๆ และส่วนที่สำคัญมากคือ delegate:selft

*** ยังจำ delegate ได้ไหมครับ ? ****
สรุปง่ายๆว่า delegate:self เนี่ย เราได้กำหนดให้คลาสที่จะตอบสนองต่อ delegate method ของ action sheet นี้คือ คนที่สร้างตัวมันเอง ( ในกรณีนี้คือ GUIViewController ) และ delegate method ของ action sheet นี้ก็เช่นว่า  เมื่อกด ok ให้ไปทำอะไร เมื่อกด cancel ให้ไปทำอะไร

แล้วเราก็ link ให้เข้ากับ button ของเรา

เราลอง compile / run แล้วกด Say Something ! ดูครับ

กดแล้วก็ยังไม่เห็นว่ามีอะไรเกิดขึ้น ต่อไปเราจะ implement ส่วนของ delegate ของ action sheet กัน

Delegate

action sheet มี delegate method ต่างๆ ดังนี้

// Called when a button is clicked. The view will be
// automatically dismissed after this call returns
- (void)actionSheet:(UIActionSheet *)actionSheet
			clickedButtonAtIndex:(NSInteger)buttonIndex;
 
// Called when we cancel a view (eg. the user clicks the Home button).
// This is not called when the user clicks the cancel button.
// If not defined in the delegate, we simulate a click in the cancel button
- (void)actionSheetCancel:(UIActionSheet *)actionSheet;
 
// before animation and showing view
- (void)willPresentActionSheet:(UIActionSheet *)actionSheet;
 
// after animation
- (void)didPresentActionSheet:(UIActionSheet *)actionSheet;  
 
// before animation and hiding view
- (void)actionSheet:(UIActionSheet *)actionSheet
			willDismissWithButtonIndex:(NSInteger)buttonIndex;
// after animation
- (void)actionSheet:(UIActionSheet *)actionSheet
			didDismissWithButtonIndex:(NSInteger)buttonIndex;

ผมเลือกใช้

- (void)actionSheet:(UIActionSheet *)actionSheet
			clickedButtonAtIndex:(NSInteger)buttonIndex;

ก็แล้วกันนะครับ และเราก็จะมา implement delegate ตัวนี้กัน โดย code มีดังนี้

- (void)actionSheet:(UIActionSheet *)actionSheet
				clickedButtonAtIndex:(NSInteger)buttonIndex
{
 
	NSMutableString *text
	text = [NSString stringWithFormat:@"สวัสดีครับคุณ%@",[m_textField text] ];
	if ( buttonIndex == [actionSheet destructiveButtonIndex])
	{
		UIAlertView *alert;
		alert = [[UIAlertView alloc] initWithTitle:@"ยินดีนะจ๊ะ"
		message:text delegate:self cancelButtonTitle:@"ตกลง"
		otherButtonTitles:nil];
 
		[alert show];
		[alert release];
	}
}

จาก code ข้างบน ก็คือ ถ้าหาก user กดปุ่ม action sheet เป็นปุ่ม destructive ก็ให้ Alert ขึ้นมา บอกว่า “สวัสดีครับคุณ” พร้อมกับข้อความใน text field ที่ user ได้พิมพ์ลงไป
ลอง compile / run ดูครับ

เมื่อกด Say Something ! ก็จะเห็น action sheet ขึ้นมา ถ้าหากกด “เป็นสิครับ” ก็จะเห็น Alert ขึ้นมาบอกว่า “สวัสดีครับคุณ ปานวาด” ทำนองนี้ ดังเช่นรูปข้างล่าง

เป็นไง บ้างครับ สำหรับวันนี้ ได้ลองใช้งาน UI หลายตัวมากๆ มี คอมเม้น ตำชม แนะนำกันได้ครับ

Download Source

Technorati Tags: cocoa touch, iphone, programming