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 |  
              | 
         
        
                        | 
          
		  
		   | 
         
         
          |             
		  
	
      
     | 
     
 
 
		  
         | 
		
          
		   
		  
              
      
     |