Có thể các bạn đã biết progress view của Apple nó khá là đơn giản và ýt thuộc tính để chúng ta có thể sử dụng cũng như thay đổi để phù hợp với thiết kế. Trong dự án gần đây mình đã có cơ hội để động vào nó. Trong thời gian đầu mình tự mày mò thì progress bar không hỗ trợ việc như vậy. Vì vậy mình viết bài này để chia sẻ về cách mình đã custom lại progress này. Hi vọng nó giúp các bạn gặp khó khăn với việc custom lại progress bar.
Vấn đề cần giải quyết: Làm thế nào để bo tròn góc của progress bar
Đây là progress view mình cần đạt được:
Đây là progress bar mặc đinh của apple:
Phân tích
Khi thử đọc tài liệu về UIProgressView. Không có thuộc tính nào giúp mình có thể đạt được điều mình muốn.
Để bo tròn cả progressview thì ta có thể dùng layer.cornerRadius, nhưng để bo tròn thằng progress chạy bên trong thì sao? Chúng ta cần tìm được cái view đó và bo nó lại.
Giải quyết bài toán
Bước 1: Chúng ta cần tạo constraint height cho progressView
Chúng ta có 2 cách để tăng height cho ProgressView: 1. Sử dụng Transform Scale: Nó sẽ làm cornerRadius chạy không đúng 2. Sử dụng constraint height: Nên chúng ta chon cách này
Tuy rằng chúng ta đã constraint height của nó bằng 16 nhưng thực tế height của progressView vẫn = 2. Vì vậy khi set cornerRadius chúng ta không thể sử dụng frame.height/2 được mặc dù đó là cách tốt nhất đối với các view khác.
if let sublayers = progressBar.layer.sublayers, sublayers.count > 1 {
sublayers[1].cornerRadius = 8.0
}
progressBar.subviews[1].clipsToBounds = true
Nếu để ý kĩ các bạn sẽ thấy progress bar này gồm 2 view chồng lên nhau đó là Progress View và track view. Và theo thứ tự trong lập trình thì thằng đầu tiên là thằng nằm dưới có index = 0. Chúng ta nhìn thấy progress view vì nó nằm trên Track View -> nó có index = 1
Lưu ý: Nó chỉ đúng khi chúng ta không thêm subview, sublayer cho ProgressView. Vậy nên trong trường hợp này chúng ta sẽ ổn.
If let giúp chúng ta handle trường hợp crash app, khi các layer của progress bị remove. (nó thường k xảy ra, nhưng vì an toàn chúng ta nên thêm dòng này)
sublayers[1]: là layer của track view subviews[1]: là trackView
Kết quả thu được thật mỹ mãn 😀
Ngoài ra các bạn có thể sử dụng image cho progress view cũng như trackView để có 1 progress đẹp hơn.
Static Type Checking và Runtime Type Checking là hai thuật ngữ ban đầu cảm giác có vẻ không quen thuộc cho nhưng nó lại lai thứ có lẽ các bạn đang dùng hàng ngày. Như các bạn biết thì JavaScript là ngôn ngữ định kiểu động, nghĩa là kiểu dữ liệu chỉ được xác định tại thời điểm thực thi. Do đó khi lập trình chúng ta không cần xác định kiểu dữ liệu cho biến. Điều này vô hình chung làm cho mã nguồn của chúng ta trở nên khó đọc hơn và khó debug hơn nữa. Chính vì vậy việc xác định kiểu dữ liệu giúp cho chúng ta kiểu soát và debug dễ dàng hơn. Trong bài viết này tôi sẽ chia sẻ với các bạn cách công đồng đang làm để hỗ trợ hai kiểu kiểm tra kiểu dữ liệu này.
Static Type Checking là gì?
Hiện nay có hai xu hướng để kiểm tra kiểu dữ liệu tĩnh là Flow và TypeScript. Static Type Checking sẽ phân tích mã nguồn tĩnh trước khi biên dịch mã nguồn sang mã JavsScript(ES5) là mã nguồn mà trình duyệt có thể đọc được. Vậy thì chúng khác nhau ở điểm nào?
Flow
Flow là một phần mở rộng của Babel cung cấp cho bạn việc kiểm tra kiểu dữ liệu tĩnh bằng cách sử dụng các chỉ thị bằng comment mà bạn thêm vào mã nguồn.
Ví dụ cách sử dụng flow như bên dưới:
// @flow
function square(n: number): number {
return n * n;
}
square('2'); // Error!
TypeScript
TypeScript là ngôn ngữ dựa trên JavaScript được Microsoft phát triển. TypeScript khác với Flow là nó không phân tích mã nguồn dự trên các chỉ thị bằng comment. Kiểu dữ liệu được hỗ trợ từ trong ngôn ngữ luôn. Dữ liệu được kiểm tra tại thời điểm phân tích cú pháp của chương trình dịch. Ngoài ra thì TypeScript hỗ trợ rất mạnh OOP nên nó rất phù hợp với các bạn quen thuộc với các ngôn ngữ định kiểu như Java và C#.
Khi sử dụng Static Type Checking bạn được hỗ trợ việc kiểm soát dữ liệu tại thời điểm viết mã nguồn, tất cả việc gán hoặc gọi hàm với kiểu dữ liệu không phù hợp sẽ được phát hiện tại thời điểm này.
IDE hỗ trợ việc kiểm soát kiểu dữ liệu giúp bạn viết code nhanh hơn và sai sốt ít hơn.
Mã nguồn dễ đọc hơn cho người mới.
Bạn mất gì khi sử dụng Static Type Checking?
Static Type Checking mang những lợi ích nhất định trong việc kiểm soát kiểu dữ liệu, tuy nhiên nó cũng có những nhiểm điểm:
Bạn phải viết code nhiều hơn thì mới kiểm soát được kiểu dữ liệu, việc này đương nhiên sẽ tốn công sức. Tuy nhiên so với việc mất thời gian vào debug thì có lẽ nó vẫn tốt hơn.
Bạn vẫn không kiểm soát được kiểu dữ liệu tại thời điểm chạy chương trình, lý do là nếu chương trình của bạn có liên kết với API thì không có gì đảm bảo kiểu dữ liệu của bạn chạy đúng với backend cả. Đương nhiên cái này là vấn đề không thể giải quyết được rồi. Tôi sẽ hướng dẫn các bạn giải quyết vấn đề này trong bài viết Runtime Type Checking sau nhé.
Kết luận
Đây chỉ là kết luận mang tính cá nhân của mình :). Các bạn tự suy ngẫm để đưa ra lựa chọn phù hợp nhé.
Việc viết theo Flow có cảm giác không tự nhiên lắm, thường xuyên phải thêm comment khiến bạn khá mất thời gian. Thêm một vấn đề nữa là lúc viết code sử dụng Flow khá tốn tài nguyên của máy. Về vấn đề này thì mình thấy TypeScript có vẻ ổn hơn.
TypeScript không đơn giản là một sự mở rộng của JavaScript, Microsoft đã thêm vào nhiều thứ hơn thế và nó cũng không dựa trên các tiêu chuẩn của ES6, ES7, … (có support ES6, ES7, … nhưng có những thêm vào nhiều thứ khác nữa). Về điểm này thì Flow có vẻ tốt hơn.
Sau sự ra đời của React Hooks thì mọi thế mạnh của TypeScript gần như không còn nữa so với Flow, bản thân mình cũng không dùng TypeScript nữa.
Một điểm quan trong nữa là cả TypeScript và Flow đều không thể xác mình kiểu dữ liệu lúc thực thi nên bạn vẫn cần Runtime Type Checking.
Các bạn có dùng Static Type Checking không? Mình thì đã không dùng nữa và chuyển sang xác mình toàn bộ bằng Runtime Type Checking rồi. Thời gian tốn cho debug cũng không phát sinh nhiều so với việc phải viết mã nguồn xác định kiểu dữ liệu.
Cảm ơn các bạn đã theo dõi bài viết. Các bạn cùng chờ bài viết mình hướng dẫn về Runtime Type Checking nhé.
Bước 1: Đăng nhập vào App store connect App store connect là trang quản lý ứng dụng của bạn trên store của apple. Để truy cập vào trang này chúng ta đăng nhập tài khoản Apple ID vào App store connect Đăng nhập thành công chúng ta sẽ có giao diện như hình dưới:
Bước 2: Chọn My Apps để sang màn hình quản lý ứng dụng của bạn.
Bước 3: Chọn + sau đó chọn New App
Bước 4: Điền đầy đủ thông tin liên quan đến ứng dụng của bạn.
Platforms: Ứng dụng bạn tạo chạy trên nền tảng nào?
Name: Đây là tên ứng dụng của bạn
Primary language: Ngôn ngữ mặc định mà người dùng nhìn thấy là gì? Nếu ứng dụng của các bạn chỉ phát hành 1 ngôn ngữ cho 1 quốc gia thì bạn chọn ngôn ngữ mà Ứng dụng đang sử dụng. Nếu ứng dụng của bạn phát hành trên toàn thế giới, mình nghĩ bạn nên chọn là Tiếng Anh vì khi ngôn ngữ máy của người dùng không nằm trong danh sách ngôn ngữ các bạn hỗ trợ nó sẽ hiển thị Tiếng Anh.
Bundle ID: Đây là bundle ID của ứng dụng của bạn. Nó phải khớp với Bundle ID bạn sử dụng trong XCode.
SKU: Viết tắt của Stock-Keeping Unit nó giúp apple quản lý kho ứng dụng của họ khi bạn upload ứng dụng của bạn lên store. Nó phải là duy nhất nên mình hay dùng trùng với Bundle Id.
User Access: Quyền truy cập vào quản lý ứng dụng này
Điền đầy đủ thông tin và bấm vào nút Create để tạo mới ứng dụng.
Bước 4: Chọn loại ứng dụng Bạn hãy chọn category đúng với ứng dụng của bạn
Cập nhật thông tin ứng dụng cho phiên bản mới
Bước 1: Chọn tab iOS App > 1.x Prepare for Submission > Cập nhật thông tin phiên bản mới (nếu đây không phải là bản đầu tiên)
Bước 2: Cập nhật bộ ảnh giới thiệu ứng dụng của bạn. Ảnh phải có định dạng là JPG hoặc PNG. và sử dụng dạng màu RGB. Video Preview chỉ chấp nhận định dạng M4v, MP4 hoặc MOV và không vượt quá 500MB
Apple yêu cầu bạn phải có ýt nhất 5 ảnh giới thiệu về ứng dụng của bạn. Nếu ứng dụng của bạn chỉ hỗ trợ Iphone thì bạn cần chuẩn bị 5 hình cho Iphone 6.5 Display và 5 hình cho Iphone 5.5 Display. Nếu có hỗ trợ Ipad thì cần thêm 5 hình cho Ipad 12.9 Display Cụ thể kích thước các bạn xem ở link này.
Bước 3: Nhập thông tin ứng dụng của bạn
Promotional text: là đoạn text quảng cáo cho phép bạn thông báo tới người dùng truy cập App store của mình về bất cứ tính năng ứng dụng nào mà không yêu cầu gửi cập nhật. Nó sẽ xuất hiện phía trên mô ta của bạn trên appstore và chỉ dành cho khách hàng sử dụng iOS 11 trở lên và macOS 10.13 trở lên.
Keywords: Là chuuỗi những từ khóa mà bạn muốn người dùng tìm thấy ứng dụng của bạn.
Description: Mô tả về ứng dụng của bạn.
Support URL: Link hỗ trợ
Bước 4: Cập nhật thông tin chung của ứng dụng
App store icon: Đây là icon ứng dụng của bạn yêu cầu kích thước 1024×1024
Copyright: Thường là tên cty
sign-in required: Nếu ứng dụng của bạn yêu cầu Login mới sử dụng được hãy tích vào và điền thông tin USername password để nhân viên apple review.
Bước 5: Chọn dạng release
Bạn có thể chọn tự động release ứng dụng khi nhân viên của Apple chấp thuận ứng dụng của bạn. Hoặc chọn ngày để release
Bước 6: Bấm save – Bước quan trọng nhất =))
Bước 7: Chọn file build cho phiên bản này để nhân viên của apple review.
Bâm dấu + để chọn bản build mà bạn muốn apple review
Bản build mà bạn chọn cho apple review chính là bản được xuât hiện trên store.
Nếu bạn chưa up bản nào lên thì hãy đọc tiếp bước dưới đây.
Cách tạo file build trên XCode
Chuẩn bị trước khi Archive:
Bạn cần tăng version của app nếu đây là bản release tiếp theo của bản trước đó: Ví dụ: Nếu bản trên store đang là 1.0 thì version của bản này phải > 1.0
Bạn cần tăng bản build của version app: Với mỗi 1 version apple yêu cầu các build version mới phải > build version cũ. Ví dụ: Nếu Bản testflight của bạn đang là 1.0 (1) thì bạn cần tăng build cho nó lớn hơn(1)
Nếu không để ý các bước chuẩn bị, khi upload lên xcode sẽ thông báo lỗi và lúc đó các bạn sẽ phải archive lại từ đầu. Sẽ mất rất nhiều thời gian nên hãy cẩn thận ở bước này.
Để thay đổi version và build version của app bạn chọn App Target > General
Để Archive ứng dụng bạn chọn Product > Archive Lưu ý: Archive bị disable khi sử dụng device là similator(máy ảo) vì vậy bạn cần chọn máy thật hoặc chọn Generic iOS Device
Khi Archive thành công sẽ hiển thị popup quản lý file Archive. Nếu bạn lỡ tay tắt pop up thì có thể mở lại bằng cách Chọn Window > Organizer
Ở đây bạn chọn Automatically manage signing để xcode tự động tạo hoặc update certificate cho bạn. > Next Hoặc bạn cũng có thế chọn bằng tay
Màn hình review file ipa của bạn được hiển thị ra: Lúc này bấm > Upload
Chờ đợi apple verify file ipa của bạn. Khi này có thể xảy ra 2 trường hợp
Apple trả về lỗi: Copy lỗi paste lên google là có ng trả lời giúp nhé
Apple trả về thành công: Bạn đã đẩy được file lên testflight và phải chờ khoảng 15 phút để file ipa đó có thể hoạt động được. Khi nào file ipa sẵn sàng sẽ có thông báo tới các tài khoản test được đăng ký ở Testflight.
Lúc này bạn quay lại trang App Store connect để kiểm tra trạng thái.
Lúc này hãy đi pha 1 tách trà và chờ đợi. Uống xong trà là nó sẽ xong ấy mà :)). Bao giờ nó chuyển sang Ready to test thì bạn có thể sử dụng để đẩy lên store.
Tuy nhiên để đảm bảo an toàn cho từng bản build, với mỗi bản build này bạn cần xây dụng một file checklist để kiểm tra 1 loạt các tính năng chính của ứng dụng trước khi Submit to review
Tiếp theo bạn quay lại bước 7 ở trên. Chọn file vừa mới upload lên.
Vậy là hoàn tất các bước chuẩn bị. Giờ chúng ta bấm Submit for Review
Vậy là các bạn đã hoàn tất việc đẩy ứng dụng lên store.
Sau 1 khoảng thời gian từ 1 -> x ngày để apple review ứng dụng của ban. Nếu cuối tuần nó sẽ lâu hơn vì cuối tuần là ngày nghỉ nhân viên nó k làm việc Lúc này sẽ có 2 trường hợp xảy ra
Apple reject bản build của bạn: Vì có thể bạn vi phạm chính sách nghiêm ngặt mà apple đã đặt ra. Hãy đọc bài App Store Review Guideline để không bị reject.
Apple Approve bản build của bạn: Xin chúc mừng bạn đã đẩy lên store thành công.
Tổng kết
Vậy là mình đã hướng dẫn các bạn upload thành công 1 ứng dụng lên store. Chúc các bạn thành công!
Như các bạn đã biết App store là chợ ứng dụng của Apple, nơi chứa tất cả những ứng dụng trên toàn thế giới được apple công nhận. Tất cả những ứng dụng muốn đưa lên Appstore đều phải trải qua những bước kiểm duyệt nghiêm ngặt của Apple. Mà trong các công ty chỉ 1 số người có quyền có thể upload ứng dụng lên store thôi. Vì vậy mình muốn viết bài này để chia sẻ cho tất cả các anh em cùng biết.
Giải thích các thuật ngữ
Trước khi đi vào chi tiết mình muốn các bạn nắm rõ các thuật ngữ trước, để đảm bảo các bạn hiểu rõ vấn đề và giúp mọi việc trở nên dễ dàng hơn
.ipa (iOS App store Package) là file lưu giữ ứng dụng iOS. Nó chỉ có thể được cài đặt trên thiết bị iOS.
Archive: Là hành động tạo file để upload lên app store.
Apple ID: là tài khoản của người dùng được Apple cung cấp để đăng nhập trên các sản phẩm của Apple. Đối với lập trình viên chúng ta cần sử dụng tài khoản thông qua trang App Developer. Để có thể thành apple developer bạn phải nâng cấp tài khoản Apple ID của mình. Và chi phí cho tài khoản cá nhân là 99$/năm. Hoặc nếu bạn làm việc trong công ty bạn cũng có thể yêu cầu người có quyền mời bạn vào dự án và cấp quyền cho bạn.
Certificate: Đây là chứng chỉ của Apple. Apple dùng nó để xác nhận xem app đó có thể hoặc còn hoạt động được nữa hay không. Thường thời hạn của các Certificate sẽ là 1 năm. Có 2 kiểu certificate đó là: – Development certificate: Nó giúp bạn build app trên thiết bị thật đã được đăng ký(Giới hạn 100 devices) – Distribution certificate: Nó giúp XCode xác nhận và có thể đẩy file .ipa lên app store connect.
Bundle ID: Nó là duy nhất và định danh ứng dụng của bạn
Device identifiers: là những device được đăng kí sử dụng trong môi trường phát triển(development)
Provisioning profiles: Nó cho phép cài đặt ứng dụng trên môi trường Development và Distribution. Nó bao gồm cả signing certificates, device identifiers và bundle ID. – Development: Nó giúp bạn có thể cài ứng dụng trên các Device đã được đăng kí – Distribution: Nó dùng để đưa app lên Itunes connect -> đưa lên store
App store connect: Đây là trang quản lý ứng dụng của bạn. Đây là nơi mà bạn chuẩn bị các tài liệu, hình ảnh(metadata) và các thông tin liên quan tới ứng dụng của bạn. Nó giúp bạn gửi thông tin này đến bên kiểm duyệt ứng dụng của apple và cho biết trạng thái ứng dụng của bạn.
Các bước chuẩn bị
Để tải ứng dụng lên App store connect chúng ta cần phải chuẩn bị các thông tin liên quan đến ứng dụng như: App ID, Certificates, Provisioning profile …
Bước 1: Chuẩn bị một tài khoản apple id đã được nâng cấp lên Apple Developer.
Để có thể tải ứng dụng lên Store. Apple yêu cầu người dùng phải có tài khoản Developer. Để trở thành Apple Developer chúng ta có 2 cách:
Nâng cấp tài khoản Apple Id thường với giá 99$/năm cho tài khoản cá nhân.
Sử dụng tài khoản Apple Developer của người khác mời vào dự án đang làm.
Sau khi hoàn tất công việc trên chúng ta đăng nhập vào trang Apple Developer
Nếu bạn đung sử dụng XCode có version >= 11 thì chọn Apple Distribution, nêu không thì chọn iOS Distribution( App store Ad Hoc). Sau đó bấm tiếp tục.
Đến đây Apple bắt chúng ta phải tải lên file Certificate signing request. Để tạo file này chúng ta cần mở ứng dụng Keychain Access để tạo.
Một popup sẽ hiện ra, bạn hãy điền đầy đủ thông tin như dưới hình và chọn Save to disk
Điền đầy đủ thông tin như hình và bấm Continue(tiếp tục). Lúc này nó sẽ hiện popup cho chúng ta lưu file này. Lưu ý: Bạn nên tạo các thư mục để quản lý các file certificate cho mỗi một ứng dụng. Nhằm mục đích sau này có thể cần đến.
Bây giờ hãy quay lại trang web và chọn file Certificate signing request vừa tạo. Và bấm Continue( tiếp tục). Vậy là ta đã tạo được Distribution Certificate. Với các Certificate khác, các bạn cũng làm tương tự.
Tiếp theo chúng ta cần mở certificate vừa tạo để tải certificate về cài đặt trên Keychain Access của máy đang sử dụng.
Bấm vào Download để tải về certificate này. Tải về xong bạn bấm double click để cài đặt nó vào Keychain Access.
Lưu ý: Bạn nên export private key của certificate này và lưu nó cẩn thận. Nếu không có private key các device khác sẽ không sử dụng được Certificate này.
Bước 3: Tạo App ID
Với mỗi một ứng dụng trên store đều phải có một App Id nhằm định danh cho nó khi ở trên Store.
Mở tab Identifiers > Bấm dấu +
Một trang mới xuất hiện, bạn chọn App IDs và bấm Continue(Tiếp tục)
Trang đăng ký App ID xuất hiện Bạn hãy điền các thông tin ứng dụng của bạn vào các ô trống và bấm Continue (Tiếp tục) để hoàn thành việc tạo App ID.
Bước 4: Tạo Provisioning Profile – Distribution
Mở tab Profiles > Chọn dấu + để tạo mới provisioning profile
Lúc này màn hình Register A New Provisioning profile được hiển thị. Bạn muốn tạo loại profile nào thì tích vào mục đó. Trong trường hợp này chúng ta cần tạo profile để upload app lên store vì vậy chúng ta sẽ chọn mục Distribution – App Store như hình dưới và bấm Continue(Tiếp tục):
Màn hình Generate A Provisioning Profile được hiển thị: Bạn muốn tạo Profile cho ứng dụng nào thì chọn AppID của ứng dụng đó và bấm Continue
Tiếp đến bạn cần chọn Distribution certificate mà bạn đã tạo ở Bước 2. Trong trường hợp bạn tạo nhiều distribution Certificate nó sẽ hiển thị dưới dạng list cho bạn chọn. Chọn certificate và bấm Continue
Vậy là bạn đã tạo thành công profile cho distribution phục vụ cho việc tải ứng dụng lên App store connect.
Tải về profile bạn vừa tạo và bấm double click để cài đặt.
Tổng kết
Trong bài viết này mình đã giúp các bạn làm quen với một số keywords và cách để tạo các file certificates, app id, profile …. Đó là những bước đầu để chuẩn bị cho việc đưa ứng dụng của các bạn lên store.
Giao diện người dùng(User Interface) của một ứng dụng hiện đại là một cấu trúc phức tạp. Nó liên quan đến các thành phần UI, bố cục và bản thiết kế dẫn đến quá trình gỡ lỗi(debugging) trở nên khá phức tạp. Việc biết các công cụ có sẵn giúp bạn giảm hàng giờ ngồi gỡ lỗi và làm cho việc tìm ra vấn đề trở nên đơn giản hơn.
Trong bài viết này mình sẽ giới thiệu về các công cụ gỡ lỗi giao diện do Apple cung cấp.
View hierarchy debugger cung cấp khả năng kiểm tra và hiểu hệ thống phân cấp UI. Các thông tin bao gồm Phân cấp ứng dụng(app’s hierarchy), các view, các ràng buộc và view controller được hiển thị dưới dạng danh sách phân cấp. Object inspector và size inspector và thậm chí là mô hình 3D có thể tương tác được. Xịn sò vl 😀
Nó được đặt ở thanh debug. Để mở tính năng này bạn bấm vào biểu tượng được khoanh đỏ hình dưới đây. Khi ở chế độ này XCode sẽ dừng ứng dụng của bạn ở trạng thái hiện tại.
Mở debug view hierarchy
Tính năng này có thể sử dụng được cho iOS, tvOS, macOS, máy ảo(simulator) và thiết bị thật.
2. lldb
Nếu bạn thích console hơn là các công cụ trực quan thì UIKit cũng cung cấp các APIs logging rất ổn. Có một vấn đề nhỏ đó là những APIs private. Nhưng chúng ta cũng không dùng debug cho các bản release.
Nó sẽ hiển thị các thông tin bố cục, bản vẽ, CALayer và các trường cụ thể bổ sung.
-[UIViewController _printHierarchy]
Tương tự UIViewController cũng hiển thị các thông tin như dưới đây:
(lldb) po [viewController _printHierarchy]
<UISplitViewController 0x7fb23a605920>, state: disappeared, view: <UILayoutContainerView 0x7fb23d80dc60> not in the window
| <UINavigationController 0x7fb23b817000>, state: disappeared, view: <UILayoutContainerView 0x7fb23d80e280> not in the window
| | <MasterDetailTemplate.MasterViewController 0x7fb23a606140>, state: disappeared, view: <UITableView 0x7fb23b05ac00> not in the window
+ <UINavigationController 0x7fb23b01d600>, state: appeared, view: <UILayoutContainerView 0x7fb23a503150>, presented with: <_UIFullscreenPresentationController 0x7fb23d808f20>
| | <MasterDetailTemplate.ModalViewController 0x7fb23a409660>, state: appeared, view: <UIView 0x7fb23a51dfc0>
| là biểu tượng cho biết các child view controllers
+ đại diện cho Modal presentation
_printHierarchy là phương thức đặc biệt hữu ích khi được gọi triên rootViewCOntroller của UIWindow:
po [[[UIWindow keyWindow] rootViewController] _printHierarchy]
Các phương thức ở trên đều dành cho Objective-C. Nếu bạn đang sử dụng swift thì cần tạo một số extension như sau:
#if DEBUG
extension UIWindow {
class var key: UIWindow {
let selector: Selector = NSSelectorFromString("keyWindow")
let result = UIWindow.perform(selector)
return result?.takeUnretainedValue() as! UIWindow
}
}
extension UIView {
var recursiveDescription: NSString {
let selector: Selector = NSSelectorFromString("recursiveDescription")
let result = perform(selector)
return result?.takeUnretainedValue() as! NSString
}
}
extension UIViewController {
var printHierarchy: NSString {
let selector: Selector = NSSelectorFromString("_printHierarchy")
let result = perform(selector)
return result?.takeUnretainedValue() as! NSString
}
}
#endif
Khi tạo xong các extension này chúng ta có thể sử dụng nó ở console bằng cách:
po view.recursiveDescription
po UIWindow.key.rootViewController!.printHierarchy
3. Instruments – Core Animation
Kiểm tra cấu trúc UI để tối ưu hóa hiệu suất. Điều đầu tiên chúng ta cần làm là đo khung hình mỗi giây. Con người có cảm nhận ứng dụng chạy mượt khi nó có thể hoạt động ở ~ 60FPS (Frames per second). Và đó chính là mục đích của chúng ta.
Lưu ý: Nó không hoạt động trên Simulator
Để mở chúng ứng dụng này chúng ta sử dụng tính năng search(command + space) đánh từ khóa Instruments:
Mở ứng dụng Instruments lên và chọn core animation
Core Animation đo hiệu năng đồ họa của ứng dụng. Trong ví dụ này, mình chỉ tập trung vào rendering performance. Ứng dụng của mình hiện tại là một UITableView với các custom cell. Bây giờ nó chỉ hiển thị section và row.
Khi cuộn mình nhận thấy nó hơi giật. Cấu hình ứng dụng với Instruments cho thấy hiệu suất cách xa mức 60 FPS. Khi cuộn (từ giây thứ 4->23) hiệu suất giảm xuống còn ~44 FPS giảm 16 so với mục tiêu đặt ra.
Tôi nghi ngờ vấn đề ở đây liên quan đến cell rendering. Với tính năng Color Blended Layers debug được bật, ta có thể hiểu rõ hơn về những gì đang xảy ra.
Color blended layer chỉ ra các view layers đang được vẽ chiingf lên nhau.
Để hiểu tại sai nó lại là vấn đề, chúng ta cần biết hình ảnh cuối cung được tạo ra như thế nào. Pixel cuối cùng mà người dùng nhìn thấy là một bố cục pha trộn các pixel trên cùng và bên dưới cùng tọa độ. Nó có nghĩa là mọi view layer phải được render để tạo hình ảnh cuối cùng. Khi view layer mờ đục, blending(Pha trộn) có thể được tối ưu hóa bằng cách không vẽ các layer bên dưới.
Để bẻ cong góc và đổ bóng cho View, tôi sử dụng CALayer properties:
Điều này làm cho các phần view của tôi có các layer trong suốt, nó gây ra việc blending không cần thiết. Bởi vì background color được tô, nên rendering có thể được tối ưu. Ta sẽ set một solid background cho View của mình và sử dụng hình nên mà không có alpha:
let cardView = UIImageView(image: UIImage(named: "cardBackground"))
Đây là một thủ thuật đơn giản giúp chúng ta giải quyết việc bị blending.
Lúc này hiệu suất của ứng dụng đã tốt hơn, cho cảm giác cuộn rất mượt.
Bạn cũng có trể truy cập nhanh vào Color Blended Layers từ iOS Simulator.
4. Pixie
Pixie giúp bạn thực hiện thiết kế một cách hoàn hảo. Công cụ này cho phép bạn kiểm tra từng pixel của ứng dụng theo đúng nghĩa đen.
Pixie có thể được tải từ website của Apple. XCode > Open Developer Tool > More Developer Tools… trong công cụ bổ xung cho XCode.
Tổng kết
Mình hi vọng bài này giúp các bạn có thể giúp các bạn tận dụng tool debug của apple để làm việc tốt hơn 😀
Chắc hẳn ai cũng biết tới nguyên lý đầu tiên của SOLID đó là trách nhiệm đơn nhất. Nghĩa là mỗi một đối tượng chỉ làm một nhiệm vụ duy nhất. Đơn giản vì với tính đơn nhất chúng ta sẽ dễ dàng kiểm soát mã nguồn hơn (cho cả người code lần người review). Chưa kể tới việc với tính đơn nhất thì mã nguồn của bạn cũng trở nên trong sáng hơn. Với anh em lập trình React cũng vậy, bài toán khá đau đầu là làm sao tách logic ra khỏi phần mã nguồn kết xuất HTML. Cách làm như vậy giúp chúng ta thay vì viết một React Component để là cả hai việc thì bây giờ chúng ta sẽ viết hai React Component để làm hai nhiệm vụ khác nhau. Trong bài viết này tôi sẽ hướng dẫn các bạn sử dụng mấu container để làm việc đó.
Container component là gì?
Chúng ta không có một định nghĩa chính xác nào về container component cả, container component đơn giản là một React Component làm nhiệm vụ goi API để lấy dữ liệu và sau đó truyền nó xuống một React Component để kết xuất mã HTML.
Định nghĩa container
Để các bạn dễ hình dung tôi sẽ viết thử một container, container này sẽ thực hiện lấy thông tin của octocat
src/containers/OctocatContainer.jsx
import React, { useState, useEffect } from 'react';
import { Octocat } from '../components/Octocat';
export function OctocatContainer() {
const [octocat, setOctocat] = useState(null);
useEffect(() => {
async function getOctocat() {
// gọi hàm fetch với phướng thực mặc định là GET
const response = await fetch('https://api.github.com/users/octocat');
const body = await response.json();
// sử dụng React Hook để thông tin octocat vào state
setOctocat(body);
}
getOctocat();
}, []); // tham số mảng rỗng thể hiện hàm effect không phụ thuộc vào đối tượng nào, nó tương đương với hàm componentDidMount
return <Octocat {...octocat} />;
}
Trong ví dụ trên tôi có sử dụng thêm JSX spread attributes để tránh việc phải khai báo props cho Octocat component. Mẫu này đặc biệt có ý nghĩa đối với các component mà bạn cần khai báo nhiều props.
Định nghĩa component để kết xuất mã HTML
Sau khi có dữ liệu rồi thì chúng ta sẽ kết xuất nó ra HTML như sau:
src/components/Octocat/Octocat.jsx
import React from 'react';
export function Octocat(props) {
const { login, avatar_url, name } = props;
return (
<ul>
<li>{login}</li>
<li>{name}</li>
<li>
<img src={avatar_url} alt={login} />
</li>
</ul>
);
}
Như các bạn thấy, component trên chỉ làm nhiệm vụ bind dữ liệu lên màn hình mà thôi.
Cách 2: Trong trường hợp bạn tạo 1 bản ghi mới đầy đủ các trường của bảng ghi, thì k cần liệt kê cụ thể tên các trường như cách 1:
Để thực hiện truy vấn INSERT vào table Book ở bài viết trước, việc đầu tiên là viết 1 câu truy vấn:
let query = "insert into Book (name, author, price) values ('Kill the mockingbird', 'HarperLee', 85000)"
Đây là 1 câu truy vấn thực hiện sự thay đổi đến database, nên ta vẫn sử dụng lệnh executeUpdate(…) để thực hiện câu query:
Ở đây, vì table Book được khởi tạo với thuộc tính id tự động tăng, nên ta có thể bỏ qua việc khai báo id.
func insertBook() {
if openDatabaseConnectionAtPath(path: getDatabasePath()) {
let query = "insert into Book (name, author, price) values ('Kill the mockingbird', 'HarperLee', 85000)"
do {
try database.executeUpdate(query, values: nil)
} catch let err {
print("Insert failed, error: \(err.localizedDescription)")
}
}
database.close()
}
Ở đây, table Book có cả 4 trường đều khác nil, tuy nhiên trường id và price có thuộc tính default nên có thể không cần khai báo trong câu lệnh insert, nhưng nếu bạn insert thêm 1 bản ghi mà không có trường name hay author thì FMDB sẽ trả về lỗi và không thể insert được.
Note: Bạn có thể thực hiện nhiều câu truy vấn cùng 1 lúc, bằng cách gộp chúng vào 1 câu truy vấn chung, mỗi câu truy vấn nhỏ ngăn cách nhau bằng 1 dấu ;
Ngoài ra, còn có 1 cách thực hiện câu lệnh executeUpdate thuận tiện hơn bằng cách sử dụng thuộc tính values như sau:
Ở đây, name và author không được cụ thể ngay từ câu truy vấn, mà được để 1 dấu ? có tác dụng như 1 placeholder để truyền trường name, author vào sau.
Khi thực hiện lệnh executeQuery, điền lần lượt các giá trị muốn truyền tương ứng vào các dấu ? vào thuộc tính values.
Truy vấn SELECT:
Câu truy vấn này dùng để lấy các bản ghi từ table.
Cách viết câu truy vấn Select:
+ SELECT column1, column2,… FROM table_name; // Lấy 1 vài trường cụ thể
+ SELECT * FROM table_name; // Lấy tất cả các bản ghi
+ Ngoài ra có thể kết hợp thêm Where, Order by,… vào câu truy vấn để lọc các bản ghi
Ví dụ thực hiện câu truy vấn lấy tất cả các sách trong table Book:
Lấy tất cả các bản ghi và sắp xếp theo giá tăng dầnLấy tất cả các tên tác giả mà có trường id = 2
Câu truy vấn select k làm thay đổi DB, nên sử dụng lệnh executeQuery(…) để thực hiện.
Câu truy vấn này trả về 1 tập dữ liệu FMResultSet, từ đó convert về kiểu dữ liệu mà ta mong muốn.
Truy vấn DELETE
Dùng để xóa bản ghi đang có trong table.
Cách viết câu truy vấn delete: DELETE FROM table_name WHERE condition;
Ví dụ thực hiện câu truy vấn delete:
Truy vấn UPDATE:
Dùng để thay đổi giá trị của bản ghi đang có trong table.
Cách viết câu truy vấn:
UPDATE table_name
SET column1 = value1, column2 = value2, …
WHERE condition;
Ví dụ thực hiện câu truy vấn:
Kết luận:
Nên define các trường thành Constant để tránh gõ nhầm khi viết câu truy vấn.
Sử dụng lệnh executeUpdate để thực hiện thay đổi DB, dùng lệnh executeQuery để thực hiện việc lấy các bản ghi.
Các câu lệnh có thể gộp vào với nhau, nhưng ngăn cách với nhau bằng dấu ;.
Luôn đóng liên kết tới DB sau khi thực hiện xong câu truy vấn.
UIScrollView là một view tạo constraint khá là phức tạp và khó hiểu với người mới. Thật không may là nó lại được sử dụng trong khá nhiều trong ứng dụng của bạn. Nhưng nó sẽ trở nên đơn giản hơn nếu bạn hiểu được bản chất của nó.
UIScrollView là một view mà nó cho phép cuộn và phóng to nội dung của nó.
Khi tạo constraint cho scroll view bạn cần tạo constraint cho 2 bước: – Bước 1 là cần phải tạo các constraints cố định khung(kích thước và vị trí) của scroll view so với super view của nó. – Bước 2 là cần phải tạo các constraint cho các view trong scrollview.
1.1 Tạo constraint cho UIScrollView không sử dụng Content Layout Guide
Sử dụng trong trường hợp bạn sử dụng bản XCode version < 11 hoặc bạn sử dụng XCode 11 nhưng không muốn dùng Content Layout Guide của UIScrollView.
Giờ chúng ta kéo 1 scrollView vào và tạo constraint nó với superview như hình dưới:
Vậy là ta đã hoàn thành bước 1: tạo constraint xác định vị trí, kích thước của Scroll View. Trong trường hợp này mình đang để scrollview có kích thước bằng kích thước của màn hình.
Tiếp theo chúng ta đến bước 2 tạo constraint cho các view trong scroll view. Chúng ta cần kéo vào 1 UIView để chứa tất cả các View. Lúc này chúng ta sẽ tạo constraint cho View này bằng cách kéo chuột phải từ view đó vào scrollview và giữ Shift để add nhiều constraint như hình dưới:
Việc Fix equal height, equal width với scroll view giúp các bạn xác định vị trí cũng như kích thước của nội dung scrollview.
Giờ chúng ta có thể kéo các View mình muốn vào trong view này và sắp xếp chúng theo ý muốn. Ở trường hợp này mình muốn kéo vào 1 label và 1 button. Nên mình sẽ constraint theo như hình phía dưới.
Tiếp theo, do trong trường hợp này mình làm scrollview cuộn theo chiều dọc nên mình sẽ bỏ constraint equal height của view với scrollview đi. Khi đó ta cần sửa lại chỉ số constraint bottom của button sao cho phù hợp với thiết kế, giả sử trường hợp này mình sẽ để là 40 points. Ta sẽ được kết quả như hình:
Tiếp đến các bạn cần tìm constraint bottom của View Content và sửa lại giá trị của nó về giá trị mình mong muốn( thường sẽ để là 0) Constraint này đại diện cho khoảng cách bottom giữa scrollview và contentview khi mà content view có size lớn hơn size của scroll view.
Vậy là xong. Bước cuối cùng chúng ta test lại scroll view bằng cách set 1 đoạn text dài cho Label. kết quả sẽ được như hình dưới:
1.2 Tạo constraint cho UIScrollView với Content Layout Guide
Từ XCode 11 trở đi Apple đã cho thêm 1 thuộc tính Content Layout Guide cho UIScrollView giúp mọi người tạo constraint cho nó 1 cách dễ dàng hơn. Khi bạn kéo vào 1 UIScrollView ở XCode 11 nó sẽ mặc định được bật tính năng này. Khi này bên trong scroll view sẽ có 2 layout guide là Content Layout guide và Frame Layout Guide
Nó khác với cách tạo 1.1 là thay vì nó constraint trực tiếp với ScrollView thì nó lại constraint với các Layout guide của scroll view.
Content Layout guide: Chọn ContentView sử dụng chuột phải kéo vào Content layout guide và tạo các constraint ContentView với content layout guide leading, top, trailing, bottom như sau:
Frame Layout guide: Chọn content View sử dụng chuột phải kéo vào Frame Layout guide và tạo các constraint equal width nếu muốn cuộn dọc hoặc equal height nếu muốn cuộn ngang.
Còn lại chúng ta vẫn làm giống ở mục 1.1.
2. UILabel
Thông thường 1 UILabel chỉ cần 2 constraint để xác định được vị trí cũng như kích thước của nó. Thế nên rất nhiều bạn khi tạo constraint cho UILabel thường bị thiếu constraint, dẫn đến trường hợp khi build app lên bị vỡ layout.
2.1 Nên tạo ít nhất 4 Constraint cho UILabel
UILabel là view có thể tự thay đổi kích thước của nó dựa trên content size (text, font ..) của nó. Vì vậy nếu bạn không tạo đủ constraint cần thiết cho UILabel trong một số trường hợp nội dung của UILabel sẽ không hiển thị đúng như mong đợi.
Nếu bạn chỉ sử dụng 2 constraint sẽ dẫn đến trường hợp khi nôi dung của label dài ra nó sẽ bị tràn ra ngoài màn hình.
2.2 Nên set thêm constraint height cho các UILabel nếu nó làm nhiệm vụ giữ trục phát triển View
Trong trường hợp UILabel làm nhiệm vụ giữ trục của view mà nó được gán giá trị empty sẽ dẫn đến trường hợp bị vỡ layout vì khi UILabel có text = “” (empty) height của nó sẽ = 0 vì thế ta cần tạo constraint cho nó và để giá trị là greater than or equal (>=). Khi đó các label giữ trục của view sẽ không làm vỡ layout nữa vì giá trị height nhỏ nhất của nó hiện tại không phải là 0 nữa.
Các bạn theo dõi sự khác nhau của 2 hình dưới đây.
Có set height >=Không set height
3. UIButton
UIButton cũng là một View có thể tự thay đổi kích thước dựa trên nội dung của nó. Vì vậy chúng ta cũng cần lưu ý khi tạo constraint cho nó. Đối với buton chúng ta chỉ cần 2 constraint là có thể xác định vị trí cũng như kích thước của nó. Nhưng để nó có thể hiển thị đúng trong nhiều trường hợp thì chúng ta cần nhiều hơn 2 constraint.
Không nên set width cho button có chứa text
Vì UIButton nó sẽ tự thay đổi kích thước theo nội dung bên trong, nên khi text dài ra hoặc ngắn đi nó sẽ tự thay đổi kích thước của button cho phù hợp. Nếu chúng ta gán constraint width cho nó thì dễ dẫn đến trường hợp khi text dài ra button sẽ hiển thị mất chữ. Vì vậy thay vì các bạn set constraint width cho UIButton để đạt được kết quả như file design thì chúng ta sẽ sửu dụng thuộc tính insets để căn chỉnh khoảng cách nội dung của UIButton.
Ở đây mình sử dụng content insets để căn khoảng cách của nội dung button với các cạnh của nó.
4. Priority: Độ ưu tiên khi các View
Với mỗi view đều có 2 loại Priority đó là: – Content Hugging Priority (Vertical, horizontal) – Content Compression Resistance Priority (Vertical, horizontal)
Content Hugging Priority
Là độ ưu tiên ôm nội dung của View. View nào có độ ưu tiên của nó lớn hơn thì nó sẽ ưu tiên nội dung của view đó hiển thị đúng với các chỉ số. Các view lân cận có độ ưu tiên nhỏ hơn sẽ phải tự dãn content để lấp dầy khoảng trống còn lại theo chiều ngang hoặc dọc. Nó sẽ hoạt động nếu nội dung của các chiều đang không lấp đầy khoảng trống có sẵn trong super view.
Theo dõi hình ảnh dưới đây để hiểu rõ hơn:
Hình này Label có Hugging priority lớn hơn của Button. Vì vậy nó sẽ ưu tiên ôm nội dung của Label và dãn button.Trường hợp này thì Button có Hugging priority lớn hơn của Label. Nên nó sẽ ưu tiên ôm nội dung của Button và dãn Label.
NOTE: Nếu Priority của 2 View bằng nhau nó sẽ sảy ra lỗi constraint. Vì vậy các bạn cần xác định được View nào cần độ ưu tiên cao hơn ở các trường hợp khác nhau.
Tuy nhiên nó chỉ đúng khi nội dung của các view không chiếm hết khoảng không còn lại ở super view theo chiều của priority. Khi nội dung của các view vượt quá khoảng không có sẵn thì chúng ta cần sử dụng Content compression resistance priority để giải quyết.
Content compression resistance priority
Đây là thuộc tính thể hiện độ ưu tiên chống lại việc nén nội dung của View. Có nghĩa là View nào có priority lớn hơn sẽ được ưu tiên hiển thị nội dung của nó để lấp khoảng trống còn lại trong super view trước, sau đó nếu còn khoảng trống thì các view còn lại có priority nhỏ hơn sẽ được lấp vào, nếu hết khoảng trống nó có thể sẽ biến mất nếu không có constraint.priority lớn hơn(Priority của các constraint mặc định là 1000). Priority này sẽ hoạt động khi nội dung của các view được lấp đầy hoặc vươti quá size của super view.
Theo dõi hình dưới đây để hiểu rõ hơn:
Độ ưu tiên chống nén của UILabel cao hơn Button nên nội dung của button sẽ không hiển thị đầy đủ Trong trường hợp này độ ưu tiên chống nén nội dung của UILabel thấp hơn nên Nội dung của button được hiển thị đầy đủ, còn UILabel trong trường hợp này sẽ mất chữ nếu có line = 1. Vì vậy ở đây mình để line = 0 để label tự co dãn
Tổng kết
Mình hi vọng bài viết sẽ giúp cho các bạn có thêm 1 chút tự tin khi làm việc với Auto Layout 😀
Với các ứng dụng hiện nay, việc giao tiếp giữa client và server phổ biến đang sử dụng Rest API. Trong một số trường hợp việc phải để client đợi xử lý là điều không thể chấp nhận được. Do đó để giải quyết vấn đề này thì phần lớn cách giải quyết là sử dụng batch process, nghĩa là tại thời điểm đó chúng ta sẽ trả lại dữ liệu cho client ở trạng thái đang xử lý(tránh xảy ra tình trạng timeout). Tuy nhiên ngay tại thời điểm đó một batch process sẽ được khởi động để thực thi tiếp các công việc còn lại. Trong bài viết này tôi sẽ hướng dẫn các bạn viết batch process bằng AWS Lambda bằng cách sử dụng DynamoDB Streams.
DynamoDB Streams
DynamoDB Streams là một tính năng trong DynamoDB cho phép bạn lắng nghe thay đổi trên một bảng dữ liệu nào đó và thực hiện các tác vụ đáp ứng yêu cầu nghiệp vụ trong ứng dụng của bạn. Mỗi khi có sự thay đổi DynamoDB sẽ ghi các bản ghi gần như ngay lập tức là dòng dữ liệu mà các ứng dụng đang lắng nghe.
Với DynamoDB Streams để giải quyết vấn đề timeout của API chúng ta chỉ gần ghi dữ liệu vào bảng trong DynamoDB sau đó dữ liệu được ghi lên dòng dữ liệu mà batch process của chúng ta đang lắng nghe rồi tiếp tục thực hiện nhiệm vụ còn lại.
Các bạn tham khảo link sau để cài đặt DynamoDB ở local nhé.
# -*- coding: utf-8 -*-
import os
from datetime import datetime
import boto3
dynamodb = boto3.client(
"dynamodb",
endpoint_url="http://localhost:8000",
region_name="us-east-1",
aws_access_key_id="test",
aws_secret_access_key="test",
)
def create_orders():
try:
dynamodb.delete_table(TableName="dev_orders")
except Exception as exp:
print(exp)
response = dynamodb.create_table(
TableName="dev_orders",
AttributeDefinitions=[
{"AttributeName": "id", "AttributeType": "S"},
{"AttributeName": "status", "AttributeType": "S"},
],
KeySchema=[{"AttributeName": "id", "KeyType": "HASH"}],
ProvisionedThroughput={"ReadCapacityUnits": 1, "WriteCapacityUnits": 1},
GlobalSecondaryIndexes=[
{
"IndexName": "statusGSIndex",
"KeySchema": [{"AttributeName": "status", "KeyType": "HASH"}],
"Projection": {"ProjectionType": "ALL"},
"ProvisionedThroughput": {
"ReadCapacityUnits": 1,
"WriteCapacityUnits": 1,
},
},
],
# bắt buộc phải có khai báo này để sử dụng DynamoDB Streams cho bảng này
StreamSpecification={
"StreamEnabled": True,
"StreamViewType": "NEW_AND_OLD_IMAGES",
},
)
print(response)
create_orders()
Kiểm tra bảng được tạo bằng NoSQL Workbench for Amazon DynamoDB
Các bạn chú ý giá trị bôi vàng nhé. Đây là dòng dữ liệu sẽ được DynamoDB ghi lên đó. Khi ứng dụng của bạn lắng nghe dòng dữ liệu này thì bất kỳ hành động nào xảy ra trên bảng sẽ được ghi lên dòng dữ liệu và ứng dụng của chúng ta sẽ phát hiện được điều đó.
Định nghĩa Lambda lắng nghe dòng dữ liệu từ DynamoDB
Để lắng nghe dòng dữ liệu từ DynamoDB Streams bạn cần thêm serverless-offline-dynamodb-streams và cấu hìn serverless.yml như sau:
Trong bài viết này, dể thực hiện lắng nghe dòng dữ liệu, bạn định nghĩa hàm Lambda trong Serverless như sau:
jobs_order:
handler: src.jobs.order.lambda_handler
events:
- stream:
enabled: true
type: dynamodb
# đây là giá trị màu vàng tôi có đề cập ở trên
arn: arn:aws:dynamodb:ddblocal:000000000000:table/dev_orders/stream/2020-03-15T07:59:46.532
batchSize: 1
Thử viết Rest API ghi dữ liệu vào bảng và kiểm tra DynamoDB Streams
Bài viết này mình sẽ giới thiệu với các bạn về một trường hợp đặc biệt trong Auto Layout đó là Stack View. Stack view là một công cụ mạnh mẽ để giúp bạn nhanh chóng cũng như dàng thiết kế giao diện người dùng của bạn.
Stack view cho phéo bạn tận dụng sức mạnh của Auto Layout, tạo giao diện người dung có thể tự động thích ứng với hướng của thiết bị(Device’s orientation), kích thước màn hình, và mọi thay đổi trong không gian có sẵn. Stack view quản lý layout của tất cả các Views trong nó bằng thuộc tính arrangedSubviews. Độ chính xác của layout phụ thuộc vào các thuộc tính của nó như là: Axis, alignment, distribution, spacing và các thuộc tính khác.
Hình ảnh mô tả các thuộc tính đặc trưng của stack view
Các thuộc tính của stack view
Axis: Định nghĩa trục phát triển của stack view. Có 2 kiểu stack view đó là Vertical và horizontal.
Alignment: Định nghĩa việc căn chỉnh của các View được sắp xếp vuông góc với trục của stack view. Nó có các giá trị như sau:
UIStackView.Alignment.fill: Làm cho các View bên trong stack view lấp đầy khoảng trống có sẵn trong stack view.
UIStackView.Alignment.top: Dùng cho horizontal stack view, nó căn chỉnh cạnh trên của các View trong stack view theo cạnh trên của của nó.
UIStackView.Alignment.leading: Dùng cho vertical stack view. Nó căn chỉnh các cạnh trái của các view trong stack view với cạnh trái của nó.
UIStackView.Alignment.firstBaseline: Dùng trong horizontal stack view. Nó căn chỉnh các view trong stack view dựa trên đường baseline đầu tiên của chúng.
UIStackView.Alignment.lastBaseline: Dùng cho horizontal stack view. Nó căn chỉnh các view trong stack view dưa trên đường baseline cuối cùng của chúng.
UIStackView.Alignment.center: Nó căn giữa các view trong stack view theo chiều của nó.
UIStackView.Alignment.trailing: Dùng cho vertical stack view, căn các cạnh phải của view trong stack view với cạnh phải của stack view.
UIStackView.Alignment.bottom: Dùng cho horizontal stack view. Căn chỉnh các view trong stack view với cạnh dưới của nó.
Distribution: là thuộc tính xác định bố cục của các view được sắp xếp theo chiều của stack view.
Các thuộc tính của nó như sau:
UIStackView.Distribution.fill: Nó giúp các view trong stack view lấp đầy không gian có sẵn trong stack view. Khi các view không xếp vừa stack view, nó sẽ thu nhỏ các view dựa trên độ ưu tiên của kháng nén của chúng (Compression resistance priority). Nếu các views được sắp xếp không lấp đầy được stack view, nó sẽ kéo dài các view theo hugging priority của chúng.
UIStackView.Distribution.fillEqually: Thay đổi kích thước các view bên trong stack view sao cho tất cả các view có cùng kích thước theo chiều của nó và lấp đầy không gian có sẵn theo chiều của stack view. Ví dụ: Horizontal stack view thì các view sẽ bằng nhau về chiều rộng, vertical stack view thì bằng nhau về chiều cao.
UIStackView.Distribution.fillProportionally: Thay đổi kích thước của các view trong stack view sao cho chúng lấp đầy các không gian có sẵn theo trục của stack view. Các view được thay đổi kích thước theo tỉ lệ dựa trên kích thước nội dung bên trong của chúng dọc theo chiều của stack view.
UIStackView.Distribution.equalSpacing: Các view trong stack view sẽ được sắp xếp sao cho khoảng cách giữa chúng bằng nhau. Nếu các view được sắp xếp không vừa stack view nó sẽ thu nhỏ các View dưa trên độ ưu tiên kháng nén của chúng(Compression resistance priority).
UIStackView.Distribution.equalCentering: Làm cho các view strong stack view được sắp xếp sao cho chúng có khoảng cách từ trung tâm bằng nhau theo chiều của stack view. Trong khi duy trì thuộc tính spacing(khoảng cách) giữa các view. Nếu các view được sắp xếp không vừa stack view, nó sẽ thu hẹp khoảng cách cho đến khi đạt khoảng cách tối thiểu được xác định bới thuộc tính khoảng cách của nó. Nếu các view vẫn không phù hợp, stack view sẽ thu nhỏ các view bên trong nó dựa trên thuộc tính Compression resistance priority.
Spacing: Là thuộc tính định nghĩa khoảng cách các cạnh liền kề của các view trong stack view.
Để làm việc với stack view hiệu quả các bạn cần hiểu các thuộc tính của nó. Khi bạn thành thạo nó rồi sẽ giúp bạn tiết kiệm khá nhiều thời gian khi auto layout.
2. Ví dụ đơn giản về Stack View
Ở ví dụ này mình sử dụng stack view bố trí layout theo hàng dọc để xắp xếp Label, ImageView và Button.
2.1 Mô tả Views và Constraints
Sử dụng Interface Builder và kéo vào một vertical stack view. Sau đó các bạn kéo các Label, Image View và Button vào trong stack view đó như hình dưới.
Lúc này stack view của chúng ta chưa có constraint nên chúng ta cần gán constraint cho stack view như sau:
Stack View.Leading = Superview.LeadingMargin
Stack View.Trailing = Superview.TrailingMargin
Stack View.Top = Top Layout Guide.Bottom + Standard
Bottom Layout Guide.Top = Stack View.Bottom + Standard
Việc này giúp cho stack view của chúng ta xác định được vị trí và kích thước của nó. Trong trường hợp này stack view của bạn sẽ có kích thước full màn hình.
2.2 Cài đặt các thuộc tính cho stack view
Mở tab Attributes Inspector và set các thuộc tính cho stack view như sau:
Stack
Axis
Alignment
Distribution
Spacing
Stack view
Vertical
Fill
Fill
8
Axis: Đại diện cho chiều hướng của stack view, Vertical(xếp theo chiều dọc)
Alignment: Đại diện cho việc căn chỉnh, Fill(Điền đầy stack view theo chiều của nó)
Distribution: Đại diện cho phân chia các view trong stack view. Ta gán giá trị Fill cho nó nhằm mục đích làm các view được lấp đầy các khoảng trống của stack view.
Spacing: Giá trị được gán = 8 nhằm tạo khoảng cách giữa các View trong stack view cách đều nhau 1 khoảng = 8 points
Tiếp đến chúng ta cần set thuộc tính của image view như sau:
View
Attribute
Value
Image View
Image
Chọn ảnh mà bạn muốn
Image View
Mode
Aspect fill
Cuối cùng chúng ta mở Size inspector lên để gán lại các giá trị Priorities cho Image View:
Name
Vertical hugging
Vertical registance
Image view
249
749
Vì chúng ta sử dụng distribution = Fill nên nó sẽ thu nhỏ các View dựa trên độ ưu tiên kháng nén(Compression registance priority) của chúng. Đó là lí do tại sao chúng ta phải giảm độ ưu tiên theo chiều dọc của Image View.
Vậy là ta đã có được kết quả giống như trong hình ở trên. Để tạo được kết quả như trên mà không dùng stack view chúng ta sẽ phải tạo các constraint cho cả 3 view là label, image view và button. Nhưng với stack view mọi chuyện đã đơn giản hơn nhiều :D.
![[React] Static Type Checking là gì? Flow và TypeScript, bạn chọn cách nào?](https://s3.ap-southeast-1.amazonaws.com/techover.storage/wp-content/uploads/2020/03/01093924/luke-chesser-LG8ToawE8WQ-unsplash.jpg)
![[React] Sử dụng mẫu container trong React như thế nào?](https://s3.ap-southeast-1.amazonaws.com/techover.storage/wp-content/uploads/2020/03/17154428/frank-mckenna-tjX_sniNzgQ-unsplash.jpg)
![[AWS] Lambda và DynamoDB Streams không còn khó nữa!](https://s3.ap-southeast-1.amazonaws.com/techover.storage/wp-content/uploads/2020/02/29150018/hitesh-choudhary-D9Zow2REm8U-unsplash.jpg)
