iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) Example (iPhone,iPad) |
iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) Example (iPhone,iPad) ในการเขียน iOS App บน iPhone และ iPad สิ่งที่เราจะได้ใช้บ่อยที่สุดก็คือ Label (UILabel) รองลงมาก็คือ Text Field(UITextField) และ Button(UIButton) โดย Object ทั้ง 3 ตัวนี้ของ Interface Builder เป็น Object ที่สามารถง่าย ๆ โดยสามารถใช้ได้ทั้งแบบการเขียน Code หรือผ่านการ Drag and Drop และบทความเรามารู้จักกับ Label , Text Field และ Button รวมทั้งการใช้งานพื้นฐานของมัน
iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) Example
เรามาทำความรู้จักความหมายของ Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) และพื้นฐานการใช้งานของ Object ทั้ง 3 ตัวนี้แบบง่าย ๆ
ความหมาย- Label (UILabel)
Label เป็น Object ที่ใช้สำหรับแสดงข้อความออกทางหน้าจอ โดย Label จะใช้งานร่วมกัน Class ของ UILabel ผ่าน IBOutlet
- Text Field (UITextField)
Text Field หรือ Textbox เป็น Object ที่ใช้สำหรับรับข้อความ Input จากผู้ใช้ในรูปแบบต่าง ๆ โดย Text Field จะใช้งานร่วมกัน Class ของ UITextField ผ่าน IBOutlet
- Round Rect Button (UIButton)
Round Rect Button หรือสั้น ๆ Button เป็น Object สร้างเหตุการณ์ Event ผ่านการ Click หรือ Event ในรูปแบบอื่น ๆ โดย Round Rect Button จะใช้งานร่วมกัน Class ของ UIButton ผ่าน IBOutlet และ IBAction
โดย Object ทั้ง 3 ตัวนี้ เราสามารถใช้งานมันได้ง่าย ๆ ผ่าน Interface Builder ด้วยการ Drag and Drop ลงบนในหน้าจอ Interface ได้ทันที แต่ในกรณีที่ต้องการใช้งานร่วมกับภาษา Objective-C และการทำงานที่ซับซ้อนที่เกิดขึ้นในช่วง Runtime (โปรแกรมกำลังทำงาน) เราจะต้องทำการเชื่อม IBOutlet และ IBAction บน Class ของ .h และ .m ซึ่งสามารถอ่านได้จากบทความนี้
รู้จัก IBOutlet และ IBAction กับ Interface Builder (iOS , iPhone , iPad)
Method และ Property สำหรับการ Get หรือ Set ค่า สำหรับ Object ทั้ง 3 ตัวนี้เราสามารถทำการ Get ค่า หรือ Set ค่าได้เหมือน ๆ กับ โดยรูปแบบบดังนี้
Get ค่า Text
IBOutlet UITextField *txtName;
IBOutlet UILabel *lblResponse;
IBOutlet UIButton *btnSubmit;
txtName.text;
lblResponse.text;
btnSubmit.text
//or
[txtName text];
[lblResponse text];
[btnSubmit text];
Set ค่า Text
IBOutlet UITextField *txtName;
IBOutlet UILabel *lblResponse;
IBOutlet UIButton *btnSubmit;
txtName.text = @"string";
lblResponse.text = @"string";
btnSubmit.text = @"string";
//or
[txtName setText:@"string"];
[lblResponse setText:@"string"];
[btnSubmit setText:@"string"];
จากตัวอย่างทั้ง 2 ตัวเป็นการ Get ค่าและ Set ค่าสำหรับ Text ของ Label , Text Field และ Button
Example ตัวอย่างการใช้งาน Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)
เริ่มต้นด้วยการสร้าง Project บน Xcode แบบ Single View Application
เลือกและไม่เลือกดังรูป
ตอนนี้หน้าจอ View ของเราจะยังเป็นหน้าว่าง ๆ
ทางขวาจะเป็นรายการ Object ของ Interface Builder ซึ่งจะมีอยู่หลายตัว แต่ในตัวอย่างนี้เราจะใช้แค่ Label(UILabel) , Text Field(UITextField) และ Round Rect Button(UIButton)
ในการสร้าง Object บนหน้าจอ Interface เราจะใช้การ Drag and Drop หรือ ลาก ไปยังตำแหน่งที่ต้องการ
ในการแก้ไขข้อความใน Object เราจะใช้การ Double Click (ดับเบิ้ลคลิก) แล้วใช้การแก้ไข หรือจะแก้ไขที่ Inspector ก็ได้เช่นเดียวกัน
ใน Inspector เราสามารถทำการแก้ไขคุณสมบัติต่าง ๆ ของ Object เช่น ขนาด (Size) , สี (Color) และคุณสมบัติอื่น ๆ ของ Object นั้น ๆ
ทดสอบลาก Object อื่น ๆ มาให้ในหน้าจอ Interface ดังรูป
จากรูปจะเห็นว่าเราสามารถสร้าง Object ต่าง ๆ ลงบนหน้าจอได้ในทันที ซึ่ง Object เหล่านั้นสามารถแสดงผลเมื่อทำการรันได้โดยไม่ต้องทำอะไรเพิ่ม แต่ในกรณีที่เราต้องการเขียนเงื่อนอื่น ๆ ในขณะที่โปรแกรมทำงานแล้ว เช่น การคลิก การรับค่า การแสดงผล เราจะต้องทำการเชื่อม IBOutlet และ IBAction ให้กับ Object นั้น ๆ โดยการเชื่อม IBOutlet และ IBAction เราจะเชื่อมเฉพาะ Object ที่ต้องการที่จะใช้เท่านั้น ส่วน Object ที่เป็น Static Content ก็ไม่ต้องทำอะไรกับมัน
ในตัวอย่างเราจะเชื่อมบน Class ของ .h ดังรูป โดย Textbox เป็นช่องรับข้อมูล , Label (Result) เป็นที่สำหรับแสดงข้อมูล , Button (Submit) เป็น Event สำหรับ Click
ในกรณีที่เราเชื่อม IBOutlet และ IBAction ผ่านการ Drag and Drop เมื่อกลับมาที่ Class ของ .m จะมีการสร้าง Method ให้อัตโตมัติ รวมทั้งการ dealloc ของ Object ต่าง ๆ
Quote:dealloc คือ เป็นการปล่อย หรือเคลียร์ค่า Object นั้น ๆ เมื่อไม่ได้ใช้งานแล้ว เป็นการเขียนเพื่อจัดการ Memory ให้เกิดประสิทธิภาพสูงสุด
เราสามารถใส่คำสั่งง่าย ๆ ดังรูป การ Get ค่าและ Set ค่า
- (IBAction)btnSubmit:(id)sender {
[lblResult setText:[txtName text]];
// or
//lblResult.text = txtName.text;
}
Code ของ Objective ทั้ง .h และ .m ที่ได้
ViewController.h
//
// ViewController.h
// labelTextButtonApp
//
// Created by Weerachai on 11/10/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
IBOutlet UITextField *txtName;
IBOutlet UILabel *lblResult;
}
- (IBAction)btnSubmit:(id)sender;
@end
ViewController.m
//
// ViewController.m
// labelTextButtonApp
//
// Created by Weerachai on 11/10/55 BE.
// Copyright (c) 2555 Weerachai. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (IBAction)btnSubmit:(id)sender {
[lblResult setText:[txtName text]];
// or
//lblResult.text = txtName.text;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)dealloc {
[txtName release];
[lblResult release];
[super dealloc];
}
@end
Screenshot
แสดงผลลัพธ์บน Simulator
ทดสอบการทำงาน ได้ผลลัพธ์ตามต้องการ
เพิ่มเติม
ปรับแต่งให้ Textbox และข้อความอยู่ตรงกลาง
ทดสอบการทำงาน ได้ผลลัพธ์ตามต้องการ
นอกจากนี้ยังสามารถปรับแต่งคุณสัมบัติอื่น ๆ ของ Object ได้ตามความต้องการ
จากบทความนี้เราจะได้ทำความเข้าใจพื้นฐานการใช้งาน Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) กันบ้างแล้ว ซึ่งปกติแล้วการใช้งาน Object ทั้ง 3 ตัวนี้ก็ไม่มีอะไรที่ซับซ้อน และสามารถนำไป Apply ได้กับโปรแกรมที่มีความซับซ้อนขึ้นได้เช่นเดียวกัน
.
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
|
|
|
Create/Update Date : |
2012-11-13 16:46:21 /
2017-03-25 23:00:54 |
|
Download : |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|