Animated Custom Segues in iOS 8

Từ khi phiên bản IOS 5 được ra mắt , thì Apple đã giới thiệu một điều mới lạ cho lập trình IOS , một cuộc cách mạng trong thiết kế giao diện , đó là Storyboard, trước đây chúng ta quen với Interface Builder, được biết như là file .nib hoặc là .xib, và ý tưởng đơn giản là giao diện mỗi ViewController sẽ tương ứng với một file .xib, nhưng nó cũng có bất cập là chỉ thấy được giao diện ở mỗi file mà họ thiết kế , và tất nhiên sẽ không nhìn tổng quan giao diện toàn bộ ứng dụng được . Và từ đây , Storyboard ra mắt, và nó đã đưa nib và xib thành ... lịch sử, và cách mới này đã được sử dụng bởi đa số các nhà phát triển, Storyboard có 3 lợi thế hơn so với xib và nib:

  • Người thiết kế giao diện chỉ cần dùng duy nhất 1 file, tổng số lượng file trong dự án là giảm đi đáng kể , đặc biệt với một dự án có kích thước lớn , sử dụng file mở rộng nib là tuỳ chọn và nó cho phép tạo phụ trợ với xib.
  • Người phát triển có một cái nhìn tổng quan toàn bộ ứng dụng của họ , trong lúc thiết kế giao diện ,
  • Các giao diện hiển thị rõ ràng , định nghĩa chính xác , rất tuyệt với cho phát triển ứng dụng. Storyboard

Từ tất cả các vấn đề phía bên trên, quá trình chuyển đổi giữa các scenes trong ứng dụng, và chúng chủ yếu được biết đến như segues.

Một segue là liên quan chặt chẽ với nhau, để điều hướng và xử lý của một ứng dụng, vì nó xác định các chi tiết việc di chuyển khi di chuyển từ một màn hình ViewController sang một Controller khác. Những chi tiết này chỉ định xem animation nên được áp dụng hay không, những loại hình ảnh động, và tất nhiên, việc chuẩn bị và thực hiện quá trình chuyển đổi thực tế. Nhưng không chỉ có vậy. Một segue cũng có thể được sử dụng để truyền dữ liệu cho các Controller (đó là về để được hiển thị),

Từ quan điểm một người lập trình, một segue là một đối tượng của lớp UIStoryboardSegue, mà nó được giới thiệu trong-iOS 5 như đã nói. Không giống như các đối tượng của các lớp khác, một đối tượng như vậy không thể được tạo ra và sử dụng trực tiếp. Tuy nhiên, các tính chất của một segue có thể được chỉ định, vì vậy chúng được áp dụng khi segue sắp được thực hiện trong các ứng dụng đang chạy. Tầng UIKit cung cấp một số segues xác định trước với mặc định chuyển động, trong đó có lựa chọn cho trường hợp đơn giản. Chúng bao gồm push segues (Mặc định khi push ra một ViewController khác), segues phương thức với các tùy chọn hình ảnh động, và segues popover. Đối với những trường hợp cao hơn mặc dù, các segues mặc định của iOS SDK có thể không đủ, vì vậy các nhà phát triển phải thực hiện segues tùy chỉnh riêng của họ.

Tạo một segue tùy chỉnh không phải là khó khăn cả, vì nó bao gồm các kỹ thuật lập trình tiêu chuẩn trong iOS. Điều gì đang thực sự chỉ cần thiết, là để phân lớp lớp UIStoryboardSegue và override một phương thức, tên thực hiện. Trong phương pháp này, các animation logic tùy chỉnh phải được thực hiện. Kích hoạt các quá trình chuyển đổi từ một ViewController xem để khác và ngược lại cũng phải được lập trình được thực hiện bởi các nhà phát triển, nhưng đây là một cách làm hoàn toàn theo tiêu chuẩn.

Mục tiêu của tôi trong hướng dẫn này là để cho bạn làm thế nào để thực hiện segues tùy chỉnh, trình bày tất cả các khía cạnh của khái niệm này thông qua một bài viết đơn giản nhưng đi thẳng vào các ứng dụng demo. Biết làm thế nào để tạo ra segues tùy chỉnh là một kỹ năng có thể đưa bạn đến sự phát triển của các ứng dụng đẹp hơn. Ngoài ra, cuối cùng có thể dẫn đến trải nghiệm người dùng tối đa, ứng dụng bắt mắt.

Tổng quan về ứng dụng : Không giống với một vài hướng dẫn trước của tôi, nơi tôi cung cấp cho bạn một demo cuối cùng , trong lần này, chúng ta sẽ tạo ra các ứng dụng từ đầu. Như trước đây tôi đã nói, chúng ta sẽ phát triển một ứng dụng khá đơn giản, trong đó chúng ta sẽ tạo ra hai segues tùy chỉnh. Để giải thích tất cả mọi thứ từ đầu, ứng dụng demo của tôi sẽ có ba ViewController, nghĩa là ba Segue trong Builder Interface và Class tương ứng. Theo mặc định, một trong số đó sẽ được tạo ra bởi Xcode, do đó chúng ta sẽ chỉ cần thêm hai ViewController khác. Các tùy chỉnh segues rằng chúng ta sắp tạo sẽ được sử dụng để di chuyển từ các điểm ViewController đầu tiên vào thứ hai (và ngược lại), và từ quan điểm ViewController đầu tiên vào thứ ba (và ngược lại). Tôi sẽ không thêm bất kỳ kết nối giữa các ViewController thứ hai và thứ ba.

Như tôi đã đề cập, tôi sẽ tạo ra hai segues tùy chỉnh. Đối với mỗi người, chúng ta sẽ tạo ra hai lớp tương ứng (do đó, bốn trong tổng số): Trong giai đoạn đầu, chúng tôi sẽ thực hiện tất cả các logic tùy chỉnh cần thiết để thực hiện các segue từ ViewController xem đầu tiên đến kế tiếp. Trong lần thứ hai, chúng tôi sẽ thực hiện logic để chuyển trở lại để điều khiển xem đầu tiên, hay nói cách khác, chúng tôi sẽ thực hiện các segue. Thông tin thêm về segues chúng ta sẽ thấy sau này; bây giờ chỉ cần ghi nhớ rằng là segues được sử dụng để cho chúng ta quay trở lại ViewController trước đó.

Tất cả trong số chúng ta sẽ có nhãn ghi rõ tên của các ViewController, và mỗi người sẽ có một màu nền khác nhau vì vậy chúng tôi có thể dễ dàng xem các hiệu ứng chuyển tiếp (có, nó sẽ là một ứng dụng nhiều màu sắc). Các ViewController xem đầu tiên và thứ hai cũng sẽ có một nhãn hơn, nơi một thông báo tùy chỉnh thông qua ViewController từ điểm khác sẽ được hiển thị.

Cuối cùng, các segues sẽ được thực hiện khi các hành động sau đây sẽ diễn ra:

Để chuyển từ ViewController xem đầu tiên thứ hai, chúng tôi sẽ sử dụng một swipe lên cử chỉ. Để trở về, chúng tôi sẽ sử dụng một swipe xuống cử chỉ. Tôi sẽ không để mô tả các hình ảnh động, chúng ta sẽ thực hiện, Để chuyển từ ViewController xem đầu tiên đến thứ ba, chúng ta sẽ sử dụng một nút (UIButton). Để trở về, chúng ta sẽ sử dụng một swipe lên cử chỉ. Một lần nữa, tôi sẽ không nói bất cứ điều gì về những hình ảnh động. Tất nhiên, chúng ta sẽ để truyền dữ liệu giữa các bộ điều khiển xem là tốt.

Trước khi chúng ta tiến hành, đây là một bản demo của những gì chúng ta sẽ làm gì, và làm thế nào segues tùy chỉnh của chúng ta sẽ làm việc: Animation

Tạo App Hãy bắt đầu bằng cách mở Xcode. Chọn để tạo ra một dự án. Trong các hướng dẫn xuất hiện, chọn Single ứng dụng như là một khuôn mẫu cho dự án. Nhấn vào nút Next. Trong các Tên sản phẩm: Đặt CustomSegues như tên gọi của dự án. Ngoài ra, hãy chắc chắn rằng các ngôn ngữ lập trình được lựa chọn là Swift, và các thiết bị là iPhone. Create Project

Nhấp vào Next lần nữa. Trong bước này, chọn một chỗ để lưu dự án, và nhấn vào nút Create.

Bây giờ dự án đã sẵn sàng, chọn nhóm tương ứng trong các dự án Navigator. Theo mặc định, các tab General sẽ mở ra, và đây là những gì chúng ta cần. Trong phần Deployment Info, bỏ chọn các tùy chọn Landscape Left và Right trong vùng Orientation Device. Đánh dấu vào tùy chọn Portrait chỉ. Ngoài ra, cảm thấy tự do để thay đổi mục tiêu triển khai từ 8.1 đến bất kỳ phiên bản iOS trước đó, nếu bạn đang đi để thử nghiệm các ứng dụng trong một thiết bị với một hệ điều hành (nhưng tốt nhất là các thiết bị chạy IOS lớn hơn 8).

Tuỳ chỉnh giao diện Bước đầu tiên là để thêm các ViewController mà chúng ta sắp sử dụng trong giao diện. Vì vậy, trong dự án Navigator click vào file Main.storyboard để cho các Interface Builder xuất hiện. Nhưng trước tiên, hãy chắc chắn để thay đổi các Class hiện tại kích thước nhỏ gọn để Width và Height, do đó giao diện phù hợp với iPhone:

Tạm kết phần một ở đây , Trong phần hai , mình sẽ cùng các bạn tìm hiểu phần còn lại , để làm nó hoàn chỉnh .