2. Giới thiệu về các công cụ trong UI Elements

 Trước khi bắt đầu bài giới thiệu về UI Element, tôi khuyên bạn nên xem qua các bài viết trước đây của tôi, đặc biệt là bài viết : hello word

Trong bài này chúng ta sẽ biết được tên các công cụ thường xuyên sử dụng, tác dụng của nó, và trông nó ra làm sao ??

Danh sách các công cụ thường được sử dụng trong thiết kế giao diện trên IOS

STT	Tên gọi	Chức năng
1	Text Fields	1 công cụ này cho phép người dùng nhấp dữ liệu vào
2	Input types - TextFields	Dùng kiểm soát bán phím, loại bỏ các phím không cần thiết hoặc không mong muốn khi thao tác trên Text Fields
3	Buttons	Được sử dụng để xử lý các hành động của người dùng.
4	Label	Được sử dụng để hiển thị các nội dung tĩnh, đoạn text
5	Toolbar	Được sử dụng khi muốn thao tác với cái gì đó thường được sử dụng nhất. Ví dụ như quản lý mail, các button trên Tool thường được người dùng sử dụng như xóa mail, trả lời, yêu thích…
6	Status Bar	Được sử dụng dể hiển thị các thông tin quan trọng của điện thoại: pin, mạng, thời gian, nhà cung cấp
7	Navigation Bar	Được sử dụng để điều khiển quản lý nhiều chồng màn hình
8	Tab bar	Nó được sử dụng để chuyển đổi giữa màn hình
9	Image View	Được sử dụng để hiển thị một hình ảnh nào đó
10	Scroll View	Được sử dụng để hiện thị nội dung có kích thước lớn hơn màn hình
11	Table View	Được sử dụng để hiện thị danh sách dữ liệu với nhiều hàng
12	Split View	Được sử dụng để chứa điều khiển ra làm 2, ở bên trái hoặc bên phải của nội dung
13	Text View	Hiển thị nội dung văn bản trong phạm vi thanh cuộn
14	View Transition	Được sử dụng khi cần một hiệu ứng khi chuyển đổi màn hình
15	Pickers	Được sử dụng để hiện thị dữ liệu ra một danh sách, mà kiểu hiển thị cuộn tròn danh sách dữ liệu đó
16	Switches	Được sử dụng để thể hiện hành động bật hoặc tắt các tính năng khác nhau
17	Sliders	Được sử dụng để cho phép người dùng tùy chỉnh giá trị trong khoảng cho phép
18	Alerts	Được sử dụng để thông báo tới người dùng thông tin quan trọng cần được xác nhận. Sau khi tùy chọn trong giao diện thông báo, người dùng mới có thể tiếp tục sử dụng ứng dụng
19	Icons	Được sử dụng để mô tả hành động hay một cái gì đó liên quan tới ứng dụng bằng việc sử dụng hình ảnh

Tài liệu tham khảo

http://www.tutorialspoint.com/ios/ios_ui_elements.htm

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556-CH1-SW1

1. Xây dưng giao diện ứng dụng trong XCode "Hello World"

-       Trước khi bạn tạo 1 ứng dụng demo hello world, tôi khuyên bạn nên xem qua nhưng bài viết khác của tôi về xcode :

-       Phím tắt trong xcode (http://learn-ios-objective-c.blogspot.com/2013/06/gioi-thieu-ve-xcode-part-1.html)

-       Giới thiệu các vùng trên xcode (http://learn-ios-objective-c.blogspot.com/2013/06/gioi-thieu-ve-xcode-part-2.html )

-       Hướng dẫn cách debug và giới thiệu về emulator (http://learn-ios-objective-c.blogspot.com/2013/06/gioi-thieu-ve-xcode-part-3.html )

-       Và bạn cũng nên xem loạt bài về giới thiệu ngôn ngữ Objective-C (http://learn-ios-objective-c.blogspot.com/2013/06/lap-trinh-objective-c-part-1.html )

-       Chắc bạn đã từng học qua 1 ngôn ngữ lập trình, nên bạn sẽ biết hello world là 1 bài học đầu tiên của mọi ngôn ngữ lập trình, mục đích đơn giản là để xuất ra đoạn text “hello world” và tác dụng khác :

o   Giúp cho bạn có cái nhìn tổng quan về cấu trúc và cú pháp của ngôn ngữ Objective-C.

o   Giúp có bạn biết qua về môi trường xcode, biết cách tạo ra 1 project trong xcode.

o   Giúp cho bạn biết về cách biên dịch build, debug, test xem kết quả của mình sau khi hoàn thành.

o   Giúp bạn thấy được làm 1 ứng dụng ios vô cùng đơn giản, không khó khăn. (vạn sự khởi đầu nan mà

-       Nói nhiều quá rồi, bây giờ chúng ta bắt đầu nhé

a. Tạo dự án:

-       Chọn biểu tượng Xcode

-       Sau khi khởi động xcode sẽ hiển thị màn hình hộp thoại, chọn “Create a new Xcode project” để bắt đầu 1 project mới.

-        Lúc này xcode sẽ hiển thị danh sách các mẫu project khác nhau để  chọn lựa, ở demo này tôi chọn “Single View Application” và nhấp “Next”.

-        Bạn cần nhập các thông tin cần thiết của project của bạn vào.

o   Product Name: HelloWorld – đây là tên ứng dụng của bạn

o   Company Identifier: com.tinhnq – đây là 1 tên miền của bạn, được viết kiểu ngược lại “tinhnq.com”

o   Class Prefix: HelloWorld – đây là tên tiền tố, đặt tên lớp tự động, bạn có thể không nhập cũng được. ở bài này tôi nhập là HelloWorld

o   Device Family: iPhone – bài hướng dẫn này là tạo ứng dụng trên Iphone nên tôi chọn Iphone

o   Use Storyboards: sử dụng lớp giao diện có sẵn, tôi không chọn

o   Use Automatic Reference Counting:  tự động sử dụng các quản lý bộ nhớ (ARC), tôi chọn vào cái này

o   Include Unit Tests: bao gồm các chức năng kiểm thử đơn vị, tôi cũng không chọn

-       Sau đó nhấp “Next” để tiếp tục, xcode sẽ hỏi bạn muốn lưu dự án của bạn vào thư mục nào. Sau đó nhấp “Create” để tiếp tục.

-       Xcode đã tạo ra thành 1 project HelloWorld mới dự theo những tiêu chí của bạn đưa ra, như ở trên :

b. Giới thiệu sơ về không gian làm việc của xcode:

-       tài liệu tham khảo : http://learn-ios-objective-c.blogspot.com/2013/06/gioi-thieu-ve-xcode-part-2.html

c. Chạy ứng dụng:

-       chỉ cần nhấn vào button “Run” sau đó xcode sẽ tự động build ứng dụng và hiển thị lên simulator

-       Bạn có thấy màn hình trống không đúng không? Chưa viết gì mà

-       Muốn dừng ứng dụng lại bạn nhâp nút “Stop”

d. Code chương trình demoHelloWorld

-       Bạn vào khu vực Navigator của dự án

-        Chọn “HelloWorldViewController.xib”

-       Xcode sẽ hiển thị ra màn hình giao diện Builder có view trống rỗng

-       Bạn có thấy từ khu vực thư viện có nhiều đối tượng như label, button… trong demo này, tôi chọn 1 button sau đó tôi kéo button đó vào trong khu vực màn hình view, và thả ra.

-       Kích đúp chuột vào button và thay đổi text từ “button” -> “Hello World”

-       Ok, bây giờ chạy lại ứng dụng demo Hello World lần nữa, sẽ cho ra kết quả trên simulator

 

 -       Đã hiển thị Button “Hello World” còn khi nhấp vào button thì không có gì hết. Bây giờ chúng ta sẽ tiếp tục tới phần xử lý sự kiện khi click vào button

-        Quay trở lại khu vực navigator chọn file HelloWorldViewController.h, toàn bộ source code của file được chọn sẽ hiển thị tại khu vực Editor.

Thêm dòng mã sau trước “@end”

- (IBAction) ShowMessage;

-       giống như trong hình

-        chọn tiếp file HelloWorldViewController.m, Thêm dòng mã này trước “@end”

- (IBAction)showMessage
{
    UIAlertView *helloWorldAlert = [[UIAlertView alloc]
                                    initWithTitle:@"My First App" message:@"Hello, World!" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
 
    // Display the Hello World Message
    [helloWorldAlert show];
}

-       Đoạn code này mục đích hiển thị 1 popup chứa đoạn message “hello word”

-       giống như trong hình

-       kết nối đoạn đoạn code với hành động click vào button “Hello World” và message popup. Quay trở lại khu vực navigator chọn “HelloWorldViewController.xib” và quay trở lại giao diện builder. Nhấp phím “control” đồng thời dung chuột kích vào button “Hello World”, giữ chuột và kéo vào “File’s Owner”, giống như thế này

-       Sau đó sẽ thấy popup “Sent Events” xuất hiện, trong đó có “showMessage”, chọn showMessage để có sự kết nối giữa button và hành động “showMessage”.

-       Và đây là kết quả

-       Chúc mừng bạn đã có được 1 ứng dụng iOS đầu tiên chạy trên Iphone. Đơn giản đúng không?

Các bài viết tham khảo

http://developer.apple.com/library/ios/#documentation/iphone/conceptual/iphone101/Articles/01_CreatingProject.html

http://www.appcoda.com/hello-world-build-your-first-iphone-app/