Swift Tutorial: Ứng dụng nhận diện khuôn mặt đơn giản (Phần 1)

Hôm nay sẽ ngồi viết bài tutorial hoàn chỉnh đầu tiên :)
Tại sao lại là chủ đề này, chả là vì trước Tết mình ngồi code một cái app chụp ảnh đồng thời nhận dạng khuôn mặt và tự động gắn râu dê đúng vị trí (Năm Mùi mà). Tranh thủ cũng ngồi học Swift luôn.
View app

Bài hướng dẫn này bao gồm cả những kiến thức cơ bản và nâng cao về iOS. Vì thế mình dự định sẽ chia làm 3 phần:

Bước 1: Setup project và cocoapods

Trước hết nói qua về Cocoapods. Cocoapods là tiện ích hỗ trợ lập trình viên iOS và Mac trong việc quản lý mã nguồn thư viện ngoài (3rd lib). Trước đây khi sử dụng thư viện ngoài thì chúng ta thường download file mã nguồn hoặc file framework về và tự thêm vào project, sau đó cập nhật build setting tuỳ thuộc từng loại thư viện. Sau đó mỗi khi lib có version mới thì lại phải down lại thư viện và add lại vào project, làm lại theo hướng dẫn, rất mất thời gian và dễ lỗi. Rồi sang chảnh hơn thì có thể tích hợp thư viện ngoài bằng git submodule, nhưng vẫn phải tự thêm file và update build setting. Cocoapods sẽ làm tất cả những việc đó hộ bạn. Có thể tìm hiểu thêm về Cocoapods và cách cài đặt tại trang chủ http://cocoapods.org

Ai ngại quá thì bật Terminal lên gõ dòng này:

sudo gem install cocoapods --pre

Setup một cái Universal app, kiểu Single View Application sử dụng Swift Language, bỏ chọn Core Data. Đặt tên project là "GoatCamera". Đường dẫn tới thư mục chứa project của mình là: "~/Projects/Tutorials/GoatCamera/".
Bật Terminal, gõ

cd ~/Projects/Tutorials/GoatCamera/
pod init

Câu lệnh "pod init" sẽ tạo ra một file có tên "Podfile" trong thư mục project. File này sẽ chứa thông tin về các lib mà bạn muốn sử dụng.
Mở file Podfile bằng text editor. Cập nhật nội dung như sau:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '7.0'
inhibit_all_warnings!

xcodeproj 'GoatCamera.xcodeproj'

pod 'AFNetworking', '~> 2.0'
pod 'FCFileManager', '~> 1.0.6'
pod 'FSImageViewer', :git => 'https://github.com/muzix/FSImageViewer.git'
  • FCFileManager là thư viện hỗ trợ các hàm tiện ích quản lý file trong ứng dụng.
  • FSImageViewer là thư viện cung cấp giao diện xem ảnh có zoom, pan, scale (Forked from https://github.com/x2on/FSImageViewer)
  • AFNetworking: thư viện hỗ trợ nhiều thứ về network. (Too mainstream, everybody knew it)

Save lại, sau đó qua Terminal gõ lệnh:

pod install

Cocoapods sẽ tự động download các thư viện trên và tích hợp vào project. Terminal hiển thị như sau:

Analyzing dependencies

CocoaPods 0.36.0.rc.1 is available.
To update use: 'gem install cocoapods --pre'
[!] This is a test version we'd love you to try.

For more information see http://blog.cocoapods.org
and the CHANGELOG for this version http://git.io/BaH8pQ.

Pre-downloading: 'FSImageViewer' from 'https://github.com/muzix/FSImageViewer.git'
Downloading dependencies
Installing AFNetworking (2.5.1)
Installing EGOCache (2.1)
Installing FCFileManager (1.0.7)
Installing FSImageViewer (2.6.3)
Generating Pods project
Integrating client project

[!] From now on use 'GoatCamera.xcworkspace'.

Sau khi xong, sẽ có file Podfile.lock và file workspace GoatCamera.xcworkspace được Cocoapods tạo ra.
File Podfile.lock lưu thông tin version của các lib tích hợp. Có thể commit hoặc backup file này để lưu lại trạng thái version của lib, đề phòng sau này có nhu cầu rollback.
File GoatCamera.xcworkspace là file workspace đã tích hợp project của mình với các thư viện ngoài. Từ giờ trở đi sẽ mở project bằng file này thay vì mở file xcodeproj.

Mở file GoatCamera.xcworkspace. Chọn project GoatCamera trong Project navigator, ở bên phải trong mục Project & targets, chọn project GoatCamera, chọn Tab info, đổi deployment target thành 7.0 (Swift support từ iOS 7.0 trở lên). Project trông như thế này:
project

Bước 2: Tạo giao diện bằng Interface builder (IB) và chức năng Auto-layout (hỗ trợ iOS 6 trở lên)

  • Trong Project Navigator -> select Main.storyboard. Bạn sẽ thấy giao diện Interface builder phía bên phải.
    IB

  • Ban đầu bạn sẽ thấy khung giao diện chính ở giữa sẽ có kích thước vuông vuông chẳng giống ai. Để trở về với kích thước 4 inch quen thuộc, ở bên File Inspector, bỏ chọn option "Use Size Classes" -> Confirm OK.

  • Tiếp theo là import assets.
    Download assets ở đây: Download link

  • Bên Project navigator -> chọn Images.xcassets -> Ở list bên phải hiện ra, right-click -> create new folder -> đặt tên là "assets" -> chọn thư mục vừa tạo
    Kéo tất cả các file ảnh trong thư mục vừa down về vào thư mục assets để import ảnh vào project.
    IB

  • Quay lại file Main storyboard. Trong phần Library, chọn Media Library (icon thứ 4) -> kéo thả image "bg_bar" vào khung View ControllerController -> đặt vào vị trí sát trên cùng (IB sẽ tự động align cho bạn)
    Kéo thêm một bg_bar nữa đặt vào vị trí dưới cùng như hình dưới:
    IB

  • Bên Attribute Inspector (biểu tượng thứ 4), chọn View mode của cả 2 image là Aspect Fill.

Set Auto-layout:

  • Khi làm việc với auto-layout, bạn phải luôn tự hình dung nếu kích cỡ giao diện thay đổi thì các thành phần này sẽ thay đổi theo như thế nào về vị trí, kích thước?
  • Trong trường hợp giao diện này. Về kích thước, mình muốn hai thanh bar trên và dưới có chiều cao không đổi, chiều ngang tự động stretch và vừa bằng bề ngang màn hình. Còn lại tất cả vùng trống ở giữa 2 bar là để hiển thị camera. Về vị trí, thanh bar trên sẽ luôn dính vào cạnh trên màn hình, tương tự thanh bar dưới sẽ luôn dính vào cạnh dưới.

  • Các ràng buộc này được gọi chung là Constraints. Ở góc dưới bên phải khu vực IB có 4 biểu tượng nhỏ lần lượt là: Align, Pin, Resolve auto-layout issues, Resolve behaviorbehavior.

  • Để tạo constraints cho 2 thanh bar như đã mô tả. Chọn bg_bar phía trên -> chọn Pin -> chọn như hình dưới:
    IB

  • Theo như hình trên, mình mô tả lề của cạnh trái,phải và trên của bg_bar so với view ngoài bằng 0 pixel, tức là bg_bar sẽ luôn "dính" vào cạnh trên của view cha, và luôn stretch khít với 2 bên cạnh màn hình. Chọn option height = 71 để mô tả bg_bar luôn có kích thước là 71 đơn vị.
    Với thanh bar dưới, thao tác tương tự, nhưng ngược lại "dính" vào lề dưới.

  • Lưu ý: sau khi add constraints, IB sẽ tự động check tính logic của các constraint, thể hiện ra bằng biểu tượng, nét đứt màu vàng hoặc nét đỏ. Màu vàng tức là constraint đủ và đúng, nhưng có một thành phần nào đó trong giao diện hiện tại đang hiển thị không đúng như constraints mô tả. Bạn có thể chọn icon Resolve auto-layout issues -> chọn Update all frames để tự động cập nhật UI theo đúng mô tả của constraints.
    Nếu gặp chấm đỏ tức là constraint còn thiếu hoặc conflict ở thành phần UI nào đó, cần sửa lại.

  • Để kiểm tra lại auto-layout đã hoạt động đúng như mô tả của mình không. Trên thanh options bar -> chọn Editor -> Canvas -> Tick Live-Autoresizing.

  • Sau đó trong Document Outline chọn View Controller (màu vàng) -> chọn tab Attribute Inspector -> Chọn Size là Freeform. Sau đó sang tab Size inspector -> chỉnh kích thước to nhỏ tuỳ ý. Hai ảnh bar trên và dưới sẽ điều chỉnh kích thước và vị trí đúng như mô tả.

  • Tiếp theo là phần hiện ảnh vừa chụp:

  • Kéo thumb_border image vào góc trái bên dưới.
    Kích thước ảnh này không thay đổi khi resize, lề trái cách mép view ngoài 13 pixel, luôn căn giữa chiều dọc so với bg_bar dưới.

  • Ta tạo constraint như sau:
    Chọn thumb_border -> chọn Pin -> tick vào cả width và height (47 pixel) -> Add constraints
    Chọn thumb_border -> chọn Pin -> bỏ chọn Constraint to margin -> tick vào constraint cạnh trái -> set 13 pixel -> Add constraints
    IB

  • Giữ Shift, chọn cả bg_bar dưới và thumb_border, chọn Align -> tick chọn Vertical Centers -> Add constraints
    IB

  • Nếu thấy những gạch vào vàng trên giao diện, chọn Resolve auto-layout -> Update Frames

  • Tạo nút chụp ảnh:
    Quay lại mục Library, chọn Object Library (icon thứ 3), Gõ UIButton vào ô search, kéo vào và căn chính giữa của bottom bg_bar.
    Chọn tab Attributes Inspector -> chọn type Custom -> xoá text Button -> chọn Background là btn_camera -> set Size 60x60
    Chọn State Config là Hightlighted -> chọn background là btn_camera_press
    Tượng tự với state Selected

  • Auto-layout:
    Nút camera thì luôn ở chính giữa so với bg_bar dưới, kích thước luôn là 60x60. Có thể làm tương tự với thumb_border, chọn cả Horizontal Center và Vertical Center constraint

  • Nút xoay camera: Làm tương tự nút chụp ảnh, đặt ở góc dưới bên phải, cách lề phải 13 pixel.

  • Cuối cùng là phần UIView hiển thị camera ở giữa:

  • Quay lại mục Library, chọn Object Library (icon thứ 3), Gõ UIView vào ô search. Kéo View đó vào vùng ở giữa bg_bar trên và bg_bar dưới. Chỉnh kích thước cho khít toàn bộ vùng trống ở giữa (tương đối cũng được)
    Auto-layout:
    Chọn Pin -> bỏ chọn constraint to margin -> tick cả 4 cạnh là 0 Pixel -> Add constraints

  • Resolve auto-layout issue -> Update frames

=====> Giao diện cuối cùng trông thế này:
{}IB

  • Build ứng dụng và chạy thử.

Kết thúc phần 1. Tóm tắt lại phần này, ta nắm được:

  • Setup project và tích hợp thư viện ngoài bằng Cocoapods.
  • Thao tác cơ bản với Interface builder và Auto-layout tool.

Phần 2 sẽ hướng dẫn code Camera và Face Recognition.

See u soon!

Đăng lại từ blog của tác giả (http://tech.thucdon24.com/face-recognition-in-swift-ios/)

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

HoangPH

4 bài viết.
18 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
15 10
Giới thiệu 1. Stash Chắc hẳn mọi người ai cũng biết tới Github hay Bitbucket như là những dịch vụ lưu trữ , quản lý code và project hữu hiệu. Cả h...
HoangPH viết hơn 2 năm trước
15 10
White
11 4
(Link) (Link) (Link) Ở 2 phần tut trước, mình đã hướng dẫn khá chi tiết cách viết một ứng dụng camera có tích hợp chức năng nhận diện khuôn mặ...
HoangPH viết gần 3 năm trước
11 4
White
7 6
(Link) (Link) (Link) Ở phần 1, ta đã nắm được: Setup project và tích hợp thư viện ngoài bằng Cocoapods. Thao tác cơ bản với Interface buil...
HoangPH viết gần 3 năm trước
7 6
Bài viết liên quan
White
2 3
Xin chào mọi người. Mình xin chia sẽ một UILabel Helper nhỏ dùng trong truờng hợp cần tính chiều cao của UILabel để xác định "Show More" button có ...
DonDinh viết gần 3 năm trước
2 3
White
11 4
(Link) (Link) (Link) Ở 2 phần tut trước, mình đã hướng dẫn khá chi tiết cách viết một ứng dụng camera có tích hợp chức năng nhận diện khuôn mặ...
HoangPH viết gần 3 năm trước
11 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
18 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!