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

HOME > Mobile > [iOS/iPhone] Tutorials - สอนเขียน iPhone App ฟรี เขียน iPad App เรียน iPhone เขียนโปรแกรม iPhone > การเขียน Coding ด้วยภาษา Objective-C กับการแสดงผลง่าย ๆ บน iOS (iPhone,iPad)



Clound SSD Virtual Server

การเขียน Coding ด้วยภาษา Objective-C กับการแสดงผลง่าย ๆ บน iOS (iPhone,iPad)

การเขียน Coding ด้วยภาษา Objective-C กับการแสดงผลง่าย ๆ บน iOS (iPhone,iPad) บทความนี้จะเริ่มต้น Programming จริงกับการเขียน iOS ผ่าน Coding ทำงานร่วมกับ iPhone และ iPad โดยการใช้ภาษา Objective-C สั่งให้หน้าจอแสดงผลข้อความบน Label และ Textbox แบบง่าย ๆ ตามที่ต้องการ ก่อนการเขียนโปรแกรมจะอธิบายรูปแบบการเขียนโปรแกรมด้วยภาษา Objective-C ก่อนว่า ผมเองก็ยังใหม่นักในภาษานี้ และสิ่งที่เราจะพบเห็นได้คือภาษา Objective-C เป็นภาษาที่มีเข้าใจยากพอสมควรสำหรับมือใหม่ เพราะก่อนหน้านี้เขียน VB.NET , C# หรือ Java ภาษาเหล่านี้ล้วนมี Syntax ที่ง่าย ๆ แต่พอมาเขอกับเจ้า Objective-C ถึงกับมึบตึบไม่น้อย แต่คิดว่าถ้าเราได้เรียนรู้กับมันบ่อย ๆ ซะพักก็จะเริ่มคุ้นกับมันได้ในไม่ช้า และสิ่งที่เราคิดว่ายาก สุดท้ายก็อาจจะง่าย ๆ เมื่อเราเริ่มคล่องกับมัน

iOS Objective-C Show Text iPhone iPad

iOS iPhone Test Example


เพื่อความเข้าใจง่าย ๆ ผมจะใช้ภาษาที่เข้าใจง่ายในการอธิบายและเขียนบทความนี้ ก่อนอื่นจะอธิบายรูปแบบการทำงานของการ Application อื่น ๆ ที่เคยเขียนมา และจะเป็นข้อเปรียบเทียบภาษาต่าง ๆ ให้เข้าใจง่ายยิ่งขึ้น สำหรับมือใหม่ในการทำความเข้าใจ

PHP และ ASP
ภาษา PHP และ ASP เราสามารถเขียนทุกอย่างไว้ใน .php ทั้ง HTML / PHP,ASP Code หรือถ้าเราใช้พวก Framework เราอาจจะแยก Design กับ Coding ไว้คนล่ะส่วนกัน

ASP.NET
เป็นครั้งแรกที่ผมที่ได้เขียนโปรแกรมแยกส่วนของ Design กับ Coding ไว้คนล่ะส่วนในรูปแบบของ Code Behind คือแยกระหว่าง .aspx กับ .aspx.vb เช่น ใน 1 Webpage จะประกอบด้วย webpage.aspx และ webpage.aspx.vb (.aspx คือหน้า Design และ .aspx.vb คือ coding)

Android
ในการเขียน Android จะแยกการเขียนเช่นเดียวกันโดยใช้ .xml เป็นหน้า Design และ .java เป็นส่วนของ coding ต่าง ๆ ที่จะสั่งให้หน้าจอ Design ทำงาน เช่น activity_main.xml จะใช้ activity_main.java โดยไฟล์ทั้ง 2 นี้ทำงานคู่กัน

Windows Phone
เนื่องจาก Windows Phone ใช้ .NET Framework ในการพัฒนาเฉพาะฉะนั้นจะใช้การเขียนไม่ต่างอะไรกับ ASP.NET คือแยกเป็น 2 ส่วนด้วยกันคือ Design กับ Coding


จะสังเกตุว่าในการเขียนโปรแกรมหลาย ๆ ภาษาล้วนใช้รูปแบบเดียวกันทั้งสิ้น คือแรกส่วนของ Design กับ Coding ไว้คนล่ะส่วน โดยในหน้า Design UI ด้วย User Interface จะประกอบด้วย Control และ Object ต่าง ๆ ที่ได้ออกแบบไว้ และ Object ต่าง ๆ เหล่านั้นก็จะมีชื่อหรือ id ของแต่ล่ะตัว ที่จะให้ในส่วนของ Coding ทำการเรียกเพื่อควบคุมการทำงานต่าง ๆ


และสำหรับ Objective-C ที่ใช้พัฒนาโปรแกรมบน iOS ก็ใช้หลักการเดียวกัน คือแยกส่วนของ Design ทีเป็น User Interface (UI) ไว้คนล่ะส่วนกับ Coding โดยในหน้า UI จะถูกสร้างด้วย Interface Builder (IB) จาก Object Library ต่าง ๆ เช่น Label, Button ... จะยกตัวอย่างว่า เช่นใน App จำนวน 1 หน้าชื่อว่า ViewController ในที่นี้เราเรียกว่า View จะประกอบด้วยไฟล์ 3 ไฟล์คือ

- ViewController.xib
- ViewController.h
- ViewController.m









อธิบายควาหมายของไฟล์

  • ViewController.xib
    ไฟล์นี้จะเป็นไฟล์สำหรับสร้าง Design หรือ User Interface ด้วย Interface Builder (IB) ซึ่งเราจะมองเห็นเป็นมุมมองของ Graphic สวย ๆ เราสามารถสร้าง Label ,Textbox หรือ Button ลงไป ด้วยการลาก Object Library มาวางไว้ในหน้าจอ และสามารถเห็นผลลัพธ์ได้ทันที (เพิ่มเติมว่าใน iOS จะใช้ XML เข้ามาจัดการในส่วนของ User Interface เช่นเดียวกับ Android และ Windows Phone แต่เราไม่จำเป็นต้องดูที่ XML เพราะสิ่งที่เราเห็นคือ Graphical Design ที่โปรแกรม Xcode จะจัดการให้เราทุกอย่าง หลังจากที่เราได้สร้าง Object ต่าง ๆ)

  • ViewController.h
    ไฟล์นี้สำหรับประกาศ Class , Method หรือ Property ต่าง ๆ ถ้าจะเข้าใจง่าย ๆ คือไว้ประกาศค่าตัวแปร คุณสมบัติของตัวแปร และคลาสต่าง ๆ รวมทั้งรายการ Object ที่เราต้องเรียกใช้ โดยในการเขียน Objective-C เราจะไม่สามารถเรียกรายการ Object (Label,Button,Textbox) ที่อยู่ในหน้าจอ Design ได้โดยตรงและทันที แต่อราจะต้องประกาศชื่อชนิดของ Object ใน ViewController.h และหลังจากนั้นค่อยทำการเชื่อมว่า Object id ที่เราประกาศใน ViewController.h จะเชื่อมกับ Object ตัวไหน ที่อยู่ในหน้า Design (ถ้ายังไม่เข้าใจให้ข้ามไปก่อน เพระาในบทความนี้จะยกตัวอย่างได้เข้าใจและชัดเจนที่สุด)

  • ViewController.m
    หลังจากที่เราประกาศ Class , ตัวแปร ต่าง ๆ ที่ไฟล์ ViewController.h เราสามารถทำการ implement หรือสั่งให้โปรแกรมทำงานกับ Class , Method และ Object ต่าง ๆ ได้ในที่นี้


สรุปความเข้าใจแบบง่าย ๆ
ViewController.xib(ออกแบบหน้าตาโปรแกรม) , ViewController.h(ประกาศคลาส,ฟังก์ชั่น,ตัวแปร) , ViewController.m(สั่งให้โปรแกรมทำงานต่าง ๆ)

จากที่ได้อธิบายในขั้นต้นเราจะพอเข้าใจการทำงานง่าย ๆ ของมันแล้ว ที่นี่เรามาลองเขียนจริงกับ Objective-C โดบเปิด Xcode ขึ้นมาและทำตามทีล่ะ Step ดังนี้

โครงสร้างของ Xcode IDE และ ไฟล์ที่ได้จากการ Create Project บน Xcode (iOS, iPhone, iPad)

สำหรับผู้ที่ยังไม่ได้ศึกษาโครงสร้างของ Xcode แนะนำให้อ่านบทความนี้ซะก่อน เพื่อความเข้าใจ

เปิดโปรแกรม Xcode

iOS Objective-C Show Text iPhone iPad

เลือก Create a new Xcode project เพื่อเริ่มต้นการสร้าง Project

iOS Objective-C Show Text iPhone iPad

เลือกเป็นแบบ Single View Application

iOS Objective-C Show Text iPhone iPad

กำหนดชื่อ Project Name , และเลือกเป็นแบบ iPhone Devices.

ขั้นที่ 1 หน้าจอบน ViewController.xib

iOS Objective-C Show Text iPhone iPad

เมื่อได้หน้าจอบน Xcode ให้คลิกที่ ViewController.xib ซึ่งเป็นไฟล์ไว้สำหรับออกแบบ Design User Interface ด้วย Interface Builder (IB) ซึ่งตอนนี้เราจะได้หน้าจอว่าง ๆ

iOS Objective-C Show Text iPhone iPad

ให้สร้าง Label และ Text Field จาก Object Library ลงในหน้าจอดังรูป โดยใช้การลากไปวาง

iOS Objective-C Show Text iPhone iPad

ในการปรับแต่ง Object ต่าง ๆ สามารถคลิกที่ Inspector ดังรูป โดยให้คลิกที่ Object ก่อนแล้วค่อยคลิกที่ Inspector


ขั้นที่ 2 หน้าจอบน ViewController.h ให้คลิกเปิดไฟล์ ViewController.h โดยการคลิกครั้งเดียว

iOS Objective-C Show Text iPhone iPad

ให้ประกาศ Object ขึ้นมา 2 ตัว โดย Label จะใช้ UILabel และ Text Field จะใช้ UITextField ชื่อและชนิดดังภาพ ในเริ่มต้นจะยังไม่มี ปิกกา ( } ) ให้เราใส่ {....}

@interface ViewController : UIViewController
{
    IBOutlet UILabel *lblText; // for Label
    
    IBOutlet UITextField *txtInput; // for Txtbox
}









คำอธิบาย
IBOutlet ( Interface Builder Outlet) ประกาศชนิด Object เป็น UILabel ชื่อว่า lblText เพื่อจะไว้เชื่อมกับ Object ที่อยู่ใน Interface Builder ในหน้า Design

iOS Objective-C Show Text iPhone iPad

จากนั้นคลิกที่ไฟล์ ViewController.xib และคลิกที่ Icons ที่เป็นรูปวงกลม ดูภาพประกอบ

iOS Objective-C Show Text iPhone iPad

จะเห็นว่าเราจะเห็นรายการ Object ต่าง ๆ ที่อยู่ในหน้า Design เราเรียกว่า View และรายการ Label , Text Field อยู่ภายใต้ View

ให้เราคลิกที่ File's Owner

iOS Objective-C Show Text iPhone iPad

เลื่อนสายตามาทางด้านขวาเราจะเห็น Outlet ให้คลิกที่วงกลม ตามที่ลูกศรชี้

iOS Objective-C Show Text iPhone iPad

เราจะเห็นว่าจะมีรายการ lblText และ txtInput ตามที่เราได้ประกาศไว้ในไฟล์ ViewController.h ซึ่งขั้นตอนนี้เราจะเชื่อม Object ในหน้า Design กับ ตัวแปรที่เราประกาศไว้

ให้คลิกที่วงกลมแล้วลาก lblText ไปวางไว้ที่ Label (ถ้าไม่สามารถลากได้ แสดงว่า Object กับ Type ที่ประกาศไม่ตรงกัน)

iOS Objective-C Show Text iPhone iPad

ลาก txtName ไปเชื่อมกับ Text Field

หลังจากเสร็จสิ้นขั้นตอนนี้เราจะได้หน้าจอ Design ที่เชื่อมรายการ Object กับ ชนิดตัวแปรเรียบร้อยแล้ว ขั้นตอนถัดไปเราจะสั่งให้โปรแกรมทำงาน

ขั้นที่ 3 หน้าจอบน ViewController.h

iOS Objective-C Show Text iPhone iPad

ถ้าเราเปิดไฟล์ ViewController.h เราจะเห็นว่ามีคำสั่งที่เป็นค่า Defaultอยู่แล้ว คำสั่งพวกนี้เปรียบเสมือน initialize class คือบางตัวจะคอยตรวจสอบว่าโปรแกรม กำลังโหลด โหลดครั้งแรก หรือโหลดเสร็จสิ้น ซึ่งเราสามารถเขียนคำสั่งแทรกลงไปหลังจาก method พวกนี้ทำงาน

โดย method ที่เราน่าสนใจคือ viewDidLoad() ซึ่งเป็น method ที่จะงานหลังจากที่ View โหลดเสร็จสิ้น (เปรียบได้กับ OnLoad ใน JavaScript)

iOS Objective-C Show Text iPhone iPad

ให้เราเพิ่มคำสั่งที่จะแสดงข้อความบน Label และ Text Field แบบง่าย ๆ ด้วยคำสั่ง

    lblText.text = @"ยินดีต้อนรับเข้าสู่ App ของฉัน";
    txtInput.text = @"www.ThaiCreate.Com";


ทดสอบการทำงาน

iOS Objective-C Show Text iPhone iPad

จะได้ผลลัพธ์แบบง่าย ๆ



Code ทั้งหมดในบทความนี้

ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    IBOutlet UILabel *lblText; // for Label
    
    IBOutlet UITextField *txtInput; // for Txtbox
}

@end


ViewController.m
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    lblText.text = @"ยินดีต้อนรับเข้าสู่ App ของฉัน";
    txtInput.text = @"www.ThaiCreate.Com";
    
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end


เพิ่มเติม
หากคิดว่าวิธีการตามบทความนี้เช่น การประกาศ Object กับเชื่อม Object กับ Outlet นั้นเป็นเรื่องยากและซับซ้อน ผมมีวิธีที่ง่ายกว่านั้น ที่จะช่วยให้การเขียนโปรแกรมบน iOS ง่ายกว่าที่จะมานั่งประกาศค่าตัวแปร มาอ่านบทความนี้ดู

Objective-C การสร้าง Outlet Action แบบง่าย ๆ ผ่าน Tools ของ Xcode (iPhone,iPad)


เพิ่มเติมอีกนิด สำหรับวิธีการเปลี่ยน Background

iOS Objective-C Show Text iPhone iPad

คลิกทีพื้นที่ว่าง ๆ ของ View ไปที่ Inspector แล้วเลือก Background

iOS Objective-C Show Text iPhone iPad

เลือกสีที่ต้องการ

iOS Objective-C Show Text iPhone iPad

ได้ Background ใหม่เรียบร้อย

สำหรับ Code ทั้งหมดดาวน์โหลดได้จากส่วนท้ายของบทความ


.

   
Share


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


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


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-10-14 18:19:04 / 2017-03-25 23:07:42
  Download : Download  การเขียน Coding ด้วยภาษา Objective-C กับการแสดงผลง่าย ๆ บน iOS (iPhone,iPad)
 Sponsored Links / Related

 
iOS/iPhone Dynamic Create Object Dynamically (Objective-C , iPhone)
Rating :

 
Objective-C and Cocoa กับการเขียนโปรแกรมบน iOS สำหรับ iPhone และ iPad
Rating :

 
Objective-C and Variable รู้จักกับตัวแปรในภาษา Objective-C (iOS,iPhone,iPad)
Rating :

 
Objective-C and DataType ชนิดของตัวแปรในภาษา Objective-C (iOS,iPhone,iPad)
Rating :

 
Objective-C and Loop การสร้างลูปและแสดง Loop แบบง่าย ๆ (iOS,iPhone,iPad)
Rating :

 
Objective-C and if , else if , switch Flow Condition Statement (iOS,iPhone,iPad)
Rating :

 
Objective-C and Operator การใช้ Operator บนภาษา Objective-C (iOS,iPhone,iPad)
Rating :

 
Objective-C Property(strong,nonatomic) , Weak , Strong type (iOS, iPhone, iPad)
Rating :

 
Objective-C and Class Object (OOP) การเรียกใช้งาน Class (iOS,iPhone,iPad)
Rating :

 
iOS/iPhone Substring / Split / Replace String (Objective-C)
Rating :

 
iOS/iPhone and Timer (NSTimer, Objective-C)
Rating :

 
iOS/iPhone and Thread (NSThread, Objective-C)
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 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 อัตราราคา คลิกที่นี่