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

HOME > บทความจากสมาชิก > Beginner Guide iOS 5 Development : UITextFields



 
Clound SSD Virtual Server

Beginner Guide iOS 5 Development : UITextFields

การใช้งาน Object ของ UITextField สำหรับบทเรียน iOS Development สำหรับผู้เริ่มต้นในตอนนี้ ผมจะละในส่วนของการติดตั้ง XCode และ หลักการของภาษา Objective C ออกไป จะเน้นไปที่การใช้ UI และ Outlet สำหรับพัฒนาแอพพลิเคชันบน iPhone แบบรวดเร็ว อ่านง่าย ซึ่งในบทเรียนนี้จะเป็นการพาผู้พัฒนาไปรู้จัก Object Control อีกตัวที่น่าจะเป็นเครื่องมือที่ถูกเรียกใช้มากที่สุดนั่นคือ ช่อง TextBox หรือที่เรียกว่า UITextField นั่นเอง ซึ่งตัว UITextField นั้นจะมีหน้าที่รับค่าที่ผู้ใช้งานพิมพ์ข้อมูลเข้ามาเก็บไว้ในตัวระบบ แล้วค่อยนำค่าดังกล่าวไป แสดงผลอีกทีซึ่งอาจจะเป็นการนำ Object Label มารับค่าแล้วแสดงผลก็ได้

เริ่มต้นพัฒนาแอพพลิเคชันด้วย UITextField
เปิดโปรแกรม Xcode IDE ขึ้นมาแล้วทำการสร้าง New Project ใหม่โดยเลือกไปที่ "Single View Application” ตกแต่ง และเตรียมความพร้อมให้เรียบร้อย

เลือก New Project เป็น Single View Application

เลือก New Project เป็น Single View Application

ทำการเลือก UITextField มาวางไว้ พร้อมสร้าง Round Rect Button

ทำการเลือก UITextField มาวางไว้ พร้อมทั้งสร้าง Round Rect Button ขึ้นมาเพื่อกดส่งค่า

ออกแบบหน้าจอของแอพพลิเคชันขึ้นมา โดยใช้ Object Label ประกอบกับ UITextField และ Round Rect Button โดยสามารถยึดหลักตามตัวอย่างที่ปรากฏข้างต้นได้

ในตัวอย่างนี้จะทำการสร้าง Object Label มาเพิ่มอีกหนึ่งตัว โดยไม่พิมพ์ข้อความอะไรลงไป ซึ่งผมจะนำ Label ดังกล่าวไว้ใช้แสดงผล รับค่าจาก UITextField นั่นเอง

สร้าง Label ขึ้นมา แล้วเคลียร์ค่าที่ปรากฏบน Object Label

สร้าง Label ขึ้นมา แล้วเคลียร์ค่าที่ปรากฏบน Object Label ออกให้เป็นค่าว่าง

กดปุ่ม Control ค้างไว้แล้วทำการลาก Object Label ที่สร้างขึ้นไปวางไว้ที่ไฟล์ ViewController.h ตั้งชื่อใหม่ขึ้นมาว่า "label” สำหรับรับค่าจาก UITextField

สร้างตัวแปล "label” ขึ้นมาหลังจากลาก Object Label ไปวางไว้ที่ไฟล์ ViewController.h

สร้างตัวแปล "label” ขึ้นมาหลังจากลาก Object Label ไปวางไว้ที่ไฟล์ ViewController.h

ทำการประกาศคำสั่ง สำหรับให้ปุ่ม Round Rect Button มีการโต้ตอบโดยการเพิ่มฟังก์ชันลงไปใน ViewController.h ดังนี้

ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *label;
@property (weak, nonatomic) IBOutlet UITextField *txt_name;

-(IBAction)Submit_Command:(id)sender;
@end


ทำการคัดลอกในส่วนของคำสั่ง -(IBAction)Submit_Command:(id)sender; ออกมาแล้วไปวางไว้ที่ไฟล์ ViewController.m ต่อจากนั้นเปลี่ยนเครื่องหมาย ";” ให้เป็น "{ และ }” เข้าไป

ViewController.m
#import "ViewController.h"
@implementation ViewController
@synthesize label;
-(IBAction)Submit_Command:(id)sender{
    
}


กลับไปยังหน้า MainStoryboard สำหรับออกแบบ ให้กดปุ่ม Control แล้วลาก Object ของ UITextField ไปวางไว้ใน ViewController.h เช่นกัน แล้วให้ตั้งชื่อตัวแปลว่า txt_name;

ViewController.h
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *label;
@property (weak, nonatomic) IBOutlet UITextField *txt_name;


หลักการที่เราจะตั้งขึ้นนั้นคือให้ ผู้ใช้งานกรอกข้อมูลจาก TextBox แล้วกดปุ่ม Submit แล้ว Label ที่อยู่ตรงกลางจะแสดงผลข้อมูลที่ผู้ใช้กรอกลงไปออกมา ดังนั้นในฟังก์ชันของ Submit_Command นั้นให้เพิ่ม Code ชุดนี้เข้าไป

ViewController.m
-(IBAction)Submit_Command:(id)sender{
    label.text=txt_name.text;
    [txt_name resignFirstResponder]; 
}


ใน Code หากสังเกตจะมีคำสั่ง [txt_name resignFirstResponder]; ขึ้นมา คำสั่งดังกล่าวคือคำสั่งให้ซ่อน คีย์บอร์ดหลังจากกดปุ่ม Submit แล้วเพราะว่าเดิมตัวระบบจะไม่มีการซ่อนแป้นพิมพ์ของสมาร์ทโฟน

ข้อสังเกต: หากมีการเข้าไปเกี่ยวกับ UITextField แล้วจะไม่สามารถซ่อน คีย์บอดได้นอกจากจะกดปุ่ม Submit ดังนั้นถ้าเราต้องการให้คีย์บอร์ดหายไป ทั้งที่ยังไม่ได้กรอกข้อมูลใดๆ สามารถเพิ่ม Code เข้าไปผ่านฟังก์ชันใหม่ดังนี้

ViewController.m
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    [self.txt_name resignFirstResponder];
}


สร้างฟังก์ชันใหม่ขึ้นมาว่า -(void)touchesBegan ระบบจะทำการ Autocomplete ขึ้นมาให้เราเลือก แล้วเพิ่มบรรทัดของ [self.txt_name resignFirstResponder]; ลงไป หากทำการ "Run” ตัวแอพพลิเคชันแล้ววางนิ้วที่ UITextField แล้วยกเลิกโดยการแตะที่ตำแหน่งไหนก็ได้ แป้นคีย์บอร์ดของ iPhone ก็จะถูกซ่อนออกไป

ทำการ Link ตัว Round Rect Button เข้ากับ Submit_Command

ทำการ Link ตัว Round Rect Button เข้ากับคำสั่ง Submit_Command

เลือกในส่วนของ Touch Up Inside

เลือกในส่วนของ Touch Up Inside

ทดสอบโดยการพิมพ์ข้อมูลลงไป

ทดสอบโดยการพิมพ์ข้อมูลลงไป

คีย์บอร์ดจะซ่อนอัตโนมัติ

ซ่อนคีย์บอร์ดแล้ว

ความรู้ที่ได้จากบทเรียนนี้: การใช้งาน UITextField ร่วมกับการแสดงผลผ่าน Label และวิธีการ Handler ตัว Keyboard

Source Code สามารถดาวน์โหลดได้ที่
http://code.google.com/p/daydev/


Reference : http://www.daydev.com





   
Share
Bookmark.   

  By : Daydev
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2012-09-30
  Download : No files
Sponsored Links
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 00
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 อัตราราคา คลิกที่นี่