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 fromhttps://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 constraintsIB
  • Giữ Shift, chọn cả bg_bar dưới và thumb_border, chọn Align -> tick chọn Vertical Centers -> Add constraintsIB
  • 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 60×60
    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à 60×60. 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.

Comments

comments