Bài 7 : Làm quen với các thành phần giao diện trong Swift

VIẾT ỨNG DỤNG: TÊN TIẾNG TRUNG QUỐC CỦA BẠN LÀ GÌ?

Chào các bạn.

Hôm nay, chúng ta sẽ viết ứng dụng cơ bản trên hệ điều hành iOS.
Thông qua đây, chúng ta sẽ tìm hiểu quá trình xây dựng ứng dụng như thế nào, cũng như việc sử dụng các UIKit (đối tượng như Button, Label, TexField, …) như thế nào. Việc liên kết các đối tượng này đối với code ra sao.

Chức năng: Ứng dụng cho phép người dùng nhập tên Tiếng Việt sau đó xuất ra màn hình iPhone tên tiếng Trung Quốc tương ứng.

Bước 1:Tạo file project mới
Mở Xcode 6 > Chọn Create a new Xcode project

Bước 2: Chọn loại dự án 

Vì đây là ứng dụng dành cho iphone nên ta chọn trên cây thư mục iOS > Application.

Với ứng dụng đầu tiên này, bạn chọn Single View Application để bắt đầu dự án với các thành phần căn bản nhất.

Bước 3 : Điền thông tin dự án

Ta có 3 thông tin quan trọng cần phải khai báo là

• Product Name: tên file project, ở đây tôi đặt là “Lession 8”
• Language : Swift
• Devices : iPhone

Sau khi bấm Next , bạn đã tạo thành công project Lession 8. Bạn sẽ thấy bên  cây thư mục ở cột trái một loạt cái file được tạo ra.

Ở đây có 2 files chính mà bạn cần phải chú ý

ViewController.swift : đây là nơi để bạn thực hiện viết code

Main.storyboard : đây là nơi để bạn thiết kế giao diện

Với yêu cầu của ứng dụng này chúng ta chỉ thao tác trên 2 files này để thực hiện project, những files còn lại sẽ được đề cập sau.

Bước 4 : Xây dựng giao diện 

Click vào main.storyboard

Kéo thả đối tượng Label ( nằm trong vùng Object Library ở góc dưới bên phải ) vào giao diện chính đang được hiển thị như một màn hình điện thoại. Đối tượng Label này sẽ có nhiệm vụ hiển thị thông điệp mà ta sẽ gửi từ file ViewController qua.

– Đổi nội dung Label thành: Vui lòng nhập tên bạn vào ô bên dưới:

– Như hình minh bên trên, việc gõ tiếng Việt sẽ gặp lỗi do máy ảo chưa chỉnh kiểu ghõ sang VN. Nếu bạn nào chưa ghõ được Tiếng Việt có thể làm theo các bước sau:

+ Vào System Prefences->KeyBoard->Chọn tab Input Sources

+ Click chọn U.S sau đó remove bằng button – phía góc dưới bên phải cửa sổ.

+ Sau đó Add Tiếng Việt bằng cách click vào button + , chọn ngôn ngữ Tiếng Việt và kiểu ghõ phù hợp.

Sau khi tùy chỉnh hoàn tất, label mình có giao diện như bên dưới.

– Sau đó chúng ta kéo thả 1 text field vào để người dùng nhập Họ và Tên:

– Sau đó chúng ta tùy chình nội dung Text field như hình bên dưới:

– Tiếpt theo cần có 1 button, khi người dùng click vào button ấy màn hình iPhone sẽ xuất ra tên tiếng Trung Quốc tương ứng:

Và cuối cùng là 1 label để Hiển thị tên tiếng Trung Quốc của bạn:

Về giao diện chúng ta sẽ thấy size của giao diện màn hình không giống với iPhone 5. Để tùy chỉnh phù hợp các bạn làm theo thứ tự 1,2,3 như bên dưới:

– Sau khi hoàn tất giao diện chúng ta thực hiện chạy ứng dụng trên Simulator: Click vào button tam giác số 1 như hình bên dưới để Build, button vuông số 2 Stop.

Chú ý: khi build, giao diện Simulator tốt nhất nên scale lại 50% như hình bên dưới là phù hợp:

Vậy là chúng ta đã hoàn thành quá trình xây dựng giao diện. Bây giờ sẽ là lúc hiện thực chương trình bằng cách viết code xử lý.

Bước 4 : Code xử lý, hiện thực hóa chương trình

Như hướng dẫn ở Bài 2: Các bạn Ctrl+Kéo thả button Xác Nhận từ Main Storyboard vào View Controller để xử lý sự kiện khi người dùng click vào Xác nhận

Nhiêm vụ chính của thao tác click vào xác nhận là lấy nội dung của textfield Họ và Tên sau đó xuất ra Label kết quả tên tiếng TQ tương ứng nên ta tương tự chúng ta Ctrl+ kéo thả TextField nhập họ tên và label xuất kết quả vào.

Sau đây là Code trong ViewController:

Bên trên, khi click vào button Xác nhận sẽ gọi hàm Confirm.

Khi đó mình sẽ tạo

– 1 biến fullName chứa nội dung của TextField vừa nhập vào mà mình đặt tên là txtName như ở bên trên

– 1 biến cnName chứa nội dung tên Trung Quốc trả về sau khi gọi function translate như bên dưới:

function translate nhận vào chuỗi Tiếng Việt và trả ra chuỗi tiếng Trung, nhưng do tính chất phức tạp của hàm này nên mình chỉ trả ra 1 chuỗi cố định để các bạn dễ hình dung. Việc xử lý này các bạn nên tự làm thì hơn :D.

Sau khi trả về nội dung cho biến cnName, mình sẽ gắn kết quả trả về cho label lblResult xuất ra giao diện iPhone.