Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > Mobile > [iOS/iPhone] Tutorials - สอนเขียน iPhone App ฟรี เขียน iPad App เรียน iPhone เขียนโปรแกรม iPhone > iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) Example (iPhone,iPad)



Clound SSD Virtual Server

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)

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) Example


เรามาทำความรู้จักความหมายของ Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) และพื้นฐานการใช้งานของ Object ทั้ง 3 ตัวนี้แบบง่าย ๆ

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ความหมาย
  • 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)

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

เริ่มต้นด้วยการสร้าง Project บน Xcode แบบ Single View Application

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

เลือกและไม่เลือกดังรูป

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ตอนนี้หน้าจอ View ของเราจะยังเป็นหน้าว่าง ๆ

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ทางขวาจะเป็นรายการ Object ของ Interface Builder ซึ่งจะมีอยู่หลายตัว แต่ในตัวอย่างนี้เราจะใช้แค่ Label(UILabel) , Text Field(UITextField) และ Round Rect Button(UIButton)

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ในการสร้าง Object บนหน้าจอ Interface เราจะใช้การ Drag and Drop หรือ ลาก ไปยังตำแหน่งที่ต้องการ

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ในการแก้ไขข้อความใน Object เราจะใช้การ Double Click (ดับเบิ้ลคลิก) แล้วใช้การแก้ไข หรือจะแก้ไขที่ Inspector ก็ได้เช่นเดียวกัน

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ใน Inspector เราสามารถทำการแก้ไขคุณสมบัติต่าง ๆ ของ Object เช่น ขนาด (Size) , สี (Color) และคุณสมบัติอื่น ๆ ของ Object นั้น ๆ

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ทดสอบลาก Object อื่น ๆ มาให้ในหน้าจอ Interface ดังรูป

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

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ในตัวอย่างเราจะเชื่อมบน Class ของ .h ดังรูป โดย Textbox เป็นช่องรับข้อมูล , Label (Result) เป็นที่สำหรับแสดงข้อมูล , Button (Submit) เป็น Event สำหรับ Click

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ในกรณีที่เราเชื่อม IBOutlet และ IBAction ผ่านการ Drag and Drop เมื่อกลับมาที่ Class ของ .m จะมีการสร้าง Method ให้อัตโตมัติ รวมทั้งการ dealloc ของ Object ต่าง ๆ

Quote:
dealloc คือ เป็นการปล่อย หรือเคลียร์ค่า Object นั้น ๆ เมื่อไม่ได้ใช้งานแล้ว เป็นการเขียนเพื่อจัดการ Memory ให้เกิดประสิทธิภาพสูงสุด


iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

เราสามารถใส่คำสั่งง่าย ๆ ดังรูป การ 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

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

แสดงผลลัพธ์บน Simulator

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ทดสอบการทำงาน ได้ผลลัพธ์ตามต้องการ

เพิ่มเติม

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ปรับแต่งให้ Textbox และข้อความอยู่ตรงกลาง

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

ทดสอบการทำงาน ได้ผลลัพธ์ตามต้องการ

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton)

นอกจากนี้ยังสามารถปรับแต่งคุณสัมบัติอื่น ๆ ของ Object ได้ตามความต้องการ

จากบทความนี้เราจะได้ทำความเข้าใจพื้นฐานการใช้งาน Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) กันบ้างแล้ว ซึ่งปกติแล้วการใช้งาน Object ทั้ง 3 ตัวนี้ก็ไม่มีอะไรที่ซับซ้อน และสามารถนำไป Apply ได้กับโปรแกรมที่มีความซับซ้อนขึ้นได้เช่นเดียวกัน


.

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-11-13 16:46:21 / 2017-03-25 23:00:54
  Download : Download  iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) Example (iPhone,iPad)
 Sponsored Links / Related

 
Objective-C กับการสร้าง Event และ Action (IBAction) โต้ตอบ บน iOS (iPhone,iPad)
Rating :

 
Objective-C และ Outlet (IBOutlet) Action(IBAction) แบบง่าย ๆ ผ่าน Xcode (iPhone,iPad)
Rating :

 
รู้จัก IBOutlet และ IBAction กับ Interface Builder (iOS , iPhone , iPad)
Rating :

 
สุดยอดการใช้ Object Library เครื่องมือ สร้างออกแบหน้าจอ Interface Builder ในรูปแบบต่าง ๆ ของ iOS ทั้งหมด
Rating :

 
iOS/iPhone Text View (UITextView) Display Multiline Text Region (Objective-C, iPhone, iPad)
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่