Tạo dạng xem cuộn với Swift: 9 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

Một vài tháng trước, tôi không biết sự tồn tại của swift và Xcode. Hôm nay, tôi đã có thể phát triển một phần nhỏ của ứng dụng mà tôi muốn tạo. Tôi đã có thể tạo ra một thứ gì đó thú vị mà tôi muốn chia sẻ với bạn.

Trong hướng dẫn này, tôi sẽ đưa bạn qua quá trình xây dựng cảnh xem cuộn, trong đó người dùng sẽ được chuyển hướng khi họ muốn đăng ký một tài khoản mới. Trên đường đi, tôi đảm bảo sẽ cung cấp cho bạn một số giải thích lý thuyết về những việc chúng tôi làm, để bạn thực sự có thể hiểu chúng tôi đang làm gì.

Trước khi chúng ta làm điều đó, hãy nói về Swift và Xcode là gì:

1. Swift là một ngôn ngữ lập trình trực quan và mạnh mẽ dành cho macOS, iOS, watchOS và tvOS. Viết mã Swift tương tác và thú vị, cú pháp ngắn gọn nhưng diễn đạt và Swift bao gồm các tính năng hiện đại mà các nhà phát triển yêu thích. Mã Swift được thiết kế an toàn nhưng cũng tạo ra phần mềm chạy nhanh như chớp. Nó được thiết kế để hoạt động với các khuôn khổ Cocoa và Cocoa Touch của Apple và phần lớn mã Objective-C hiện có được viết cho các sản phẩm của Apple. Nó được xây dựng với khung trình biên dịch LLVM mã nguồn mở và đã được đưa vào Xcode kể từ phiên bản 6, phát hành vào năm 2014. Trên nền tảng của Apple, nó sử dụng thư viện thời gian chạy Objective-C cho phép chạy mã C, Objective-C, C ++ và Swift. trong một chương trình.

2. Xcode là một môi trường phát triển tích hợp (IDE) dành cho macOS chứa một bộ công cụ phát triển phần mềm do Apple phát triển để phát triển phần mềm cho macOS, iOS, watchOS và tvOS.

Bước 1: Tải xuống Xcode

Xcode 10 bao gồm mọi thứ bạn cần để tạo ra các ứng dụng tuyệt vời cho tất cả các nền tảng của Apple. Giờ đây, Xcode và Instruments trông tuyệt vời trong Chế độ tối mới trên macOS Mojave. Trình chỉnh sửa mã nguồn cho phép bạn chuyển đổi hoặc cấu trúc lại mã dễ dàng hơn, xem các thay đổi kiểm soát nguồn cùng với dòng liên quan và nhanh chóng nhận được chi tiết về sự khác biệt của mã ngược dòng. Bạn có thể xây dựng công cụ của riêng mình với trực quan hóa tùy chỉnh và phân tích dữ liệu. Swift biên dịch phần mềm nhanh hơn, giúp bạn cung cấp các ứng dụng nhanh hơn và tạo các tệp nhị phân thậm chí còn nhỏ hơn. Các bộ thử nghiệm hoàn thành nhanh hơn nhiều lần, làm việc với nhóm đơn giản và an toàn hơn, và hơn thế nữa.

Xcode 10 bao gồm Swift 4.2, giúp biên dịch phần mềm của bạn nhanh hơn, giúp bạn cung cấp các ứng dụng nhanh hơn và tạo các tệp nhị phân thậm chí còn nhỏ hơn. So với Swift 4.0, trình biên dịch Swift mới nhất có thể tạo các ứng dụng lớn nhanh hơn gấp đôi. * Kết hợp với hệ thống xây dựng mới Xcode mới, quy trình chỉnh sửa, xây dựng và kiểm tra hàng ngày của bạn nhanh hơn nhiều. Được tối ưu hóa cho phần cứng Mac đa lõi mới nhất, Xcode và Swift tạo nên một nền tảng phát triển nhanh như chớp.

Bước 2: Bắt đầu

Vì vậy, những gì chúng ta sẽ làm là vào Xcode và tạo một dự án mới. Khi chúng tôi nhấp vào một dự án mới, ứng dụng của chúng tôi sẽ là một ứng dụng xem duy nhất. Đối với những người chưa biết, một ứng dụng xem duy nhất có nghĩa là bạn sẽ cần phải bắt đầu mọi thứ từ đầu và sẽ có một chế độ xem duy nhất mà chúng tôi có thể lập trình.

Đặt tên cho sản phẩm của bạn là TutorialApp. Nếu bạn là một nhà phát triển có kinh nghiệm xuất bản ứng dụng trong App Store, bạn có thể sẽ có một nhóm, nhưng nếu bạn là người mới và bạn chưa có bất kỳ ứng dụng nào được xuất bản, bạn có thể bỏ qua trường này. Trong tên tổ chức, bạn có thể viết tên công ty trong trường hợp bạn có, trong trường hợp của tôi, tôi sẽ chỉ giữ lại MacBook Pro. Sau đó, Mã định danh tổ chức được coi như một mã định danh duy nhất cho dự án của bạn, do đó, bạn có thể viết bất cứ điều gì bạn muốn. Ngôn ngữ chắc chắn sẽ nhanh chóng.

Vì vậy, hãy nhấn tiếp theo và hãy lưu dự án trên màn hình để có thể dễ dàng truy cập.

Dự án mới bao gồm ba tệp, AppDelegate.swift, ViewController.swift và ngôi sao của hướng dẫn này: Main.storyboard. Under Deployment Info> Device Orientation trong Cài đặt chung của dự án, đặt Thiết bị thành iPhone. Vì đây là ứng dụng chỉ dành cho ảnh dọc, hãy bỏ chọn các tùy chọn Ngang Trái và Ngang Phải. Mở Main.storyboard trong trình điều hướng dự án để xem nó trong Trình tạo giao diện:

Chúng tôi sẽ không thực hiện bất kỳ thay đổi nào trong cấu hình và chúng tôi sẽ đi thẳng đến bảng phân cảnh chính. Vì chúng tôi đã tạo một ứng dụng xem duy nhất, nên chúng tôi đã tạo một chế độ xem đơn giản, trống, đơn giản. Đây là điều chúng tôi cần phải làm việc.

Bước 3: Làm việc trong giao diện người dùng

Thuật ngữ bảng phân cảnh chính thức cho bộ điều khiển chế độ xem là "cảnh", nhưng bạn có thể sử dụng các thuật ngữ này thay thế cho nhau. Một cảnh tượng trưng cho một bộ điều khiển chế độ xem trong bảng phân cảnh.

Ở đây bạn thấy một bộ điều khiển chế độ xem duy nhất chứa một chế độ xem trống. Mũi tên trỏ đến bộ điều khiển chế độ xem từ bên trái cho biết đó là bộ điều khiển chế độ xem ban đầu sẽ được hiển thị cho bảng phân cảnh này. Thiết kế bố cục trong trình chỉnh sửa bảng phân cảnh được thực hiện bằng cách kéo các điều khiển từ Thư viện đối tượng (xem góc trên bên phải) vào bộ điều khiển chế độ xem của bạn.

Để biết cách hoạt động của trình chỉnh sửa bảng phân cảnh, hãy kéo một số điều khiển từ Thư viện đối tượng vào bộ điều khiển chế độ xem trống như trong video.

Khi bạn kéo các điều khiển vào, chúng sẽ hiển thị trong Đường viền tài liệu ở bên trái.

Bạn có thể tạo Giao diện Người dùng mà bạn muốn. Trong trường hợp của tôi, tôi đã sử dụng cái mà bạn thấy trong hình.

Bước 4: Phát triển một Bộ điều khiển Chế độ xem thứ hai và Bắt đầu Segues (chuyển tiếp)

Vì vậy, trong ứng dụng của tôi, khi người dùng nhấn nút "Đăng ký tài khoản mới", tôi muốn anh ta được chuyển hướng đến trang đăng ký tài khoản. Vì vậy, với mục đích đó, mỗi trang là một cảnh mới, một màn hình mới. Vì lý do đó, chúng ta phải tạo bộ điều khiển dạng xem thứ hai, bạn có thể tìm thấy bộ điều khiển này trong thư viện đối tượng.

Nhập bộ điều khiển chế độ xem và đặt nó bên cạnh bộ điều khiển chế độ xem ban đầu của bạn. Cảnh này sẽ do bộ điều khiển chế độ xem thanh ghi chịu trách nhiệm. Việc chuyển hướng đến trang đó có thể được thực hiện theo hai cách:

1. chúng tôi có thể làm điều đó theo cách thủ công khi chúng tôi thực hiện kết nối hành động từ nút với điều khiển chế độ xem khác
2. chúng ta có thể làm điều đó theo chương trình

Những gì tôi chọn làm là làm nó theo cách thủ công. Nó là đơn giản như vậy:

1. Thực hiện một cú nhấp chuột trái vào nút của bạn (trong trường hợp của tôi là Đăng ký Tài khoản Mới)
2. Giữ lệnh và nhấp chuột trái để kéo nó đến cảnh điều khiển đăng ký.
3. Thả nó ở đó và chọn "Trình bày một cách vừa phải"

Bước 5: Tạo lớp học lập trình cho quy trình đăng ký

Vì vậy, bây giờ chúng ta muốn tạo một lớp mã hóa dành riêng cho cảnh mới.

Để làm như vậy, bạn cần thực hiện các bước sau:

• nhấp chuột phải vào thư mục dự án của bạn
• nhấp vào tệp mới có tên là lớp cảm ứng ca cao
• trong lớp ghi: RegisterVC
• RẤT QUAN TRỌNG! Đảm bảo rằng lớp con phải thuộc loại UIViewController
• ngôn ngữ phải nhanh chóng.
• nhấp vào tiếp theo và lưu lớp ca cao của bạn bên trong trong thư mục gốc chính của dự án của bạn.
• Nhấp vào bảng phân cảnh chính và chuyển đến bộ điều khiển chế độ xem mới
• nhấp vào nút màu vàng được đặt phía trên nó
• ở bên phải, chuyển đến thanh tra lớp và tham chiếu đến VC Đăng ký (lớp Costum, lớp = RegisterVC

Bước 6: Tạo Vuốt Ngang của Trang

Trong iOS, chế độ xem cuộn được sử dụng để xem nội dung không vừa hoàn toàn trên màn hình. Chế độ xem cuộn có hai mục đích chính:

Để cho phép người dùng kéo khu vực nội dung họ muốn hiển thị, cho phép người dùng phóng to hoặc thu nhỏ nội dung được hiển thị bằng các cử chỉ chụm. Một điều khiển phổ biến được sử dụng trong các ứng dụng iOS - UITableView - là một lớp con của UIScrollView và cung cấp một cách tuyệt vời để xem nội dung lớn hơn màn hình.

Điều gì sử dụng các trang con khi vuốt ngang?

Chà, nếu tôi tạo 6 trang khác nhau, điều đó có nghĩa là tôi phải tạo một lớp dành riêng cho từng trang đó và việc chuyển thông tin từ lớp này sang lớp khác sẽ không thuận tiện lắm. Ví dụ, khi tôi nhập email của mình và sau đó nhấp vào tiếp theo, nếu tôi có bộ điều khiển chế độ xem khác, tôi sẽ rời khỏi trang đầu tiên của Bộ điều khiển chế độ xem và sau đó trang thứ hai sẽ được hiển thị. Trong trường hợp này, thông tin của bộ điều khiển chế độ xem đầu tiên, phải được chuyển sang bộ điều khiển chế độ xem tiếp theo và sau đó lại đến bộ điều khiển chế độ xem thứ ba, v.v. Khi tôi có tất cả bộ điều khiển chế độ xem tôi cần, tôi sẽ phải thu thập tất cả dữ liệu từ tất cả các trang và gửi chúng đến máy chủ. Vì vậy, điều này sẽ thực sự phức tạp.

Vì vậy, chuyển sang việc tạo bộ điều khiển chế độ xem này, trong trường hợp của tôi, tôi có 5 trang mà tôi muốn tạo:

1. E-mail
2. Họ và tên
3. Mật khẩu
4. Ngày sinh
5. Giới tính

Điều này có nghĩa là bộ điều khiển chế độ xem mà chúng tôi sẽ tạo, phải lớn hơn 5 lần so với bộ điều khiển mà chúng tôi đã tạo trước đó.

Chọn bộ điều khiển chế độ xem của bạn và chuyển đến góc trên cùng, bên phải và nhấp vào biểu tượng thước kẻ và chỉnh sửa Kích thước mô phỏng. Bạn sẽ chọn Freeform để điều chỉnh chiều rộng và chiều cao. Chiều rộng mặc định của màn hình phù hợp với iPhone 8 là 375, vì vậy nếu tôi nhân 375 * 5 = 1875. Và ở đây, bạn có một bộ điều khiển chế độ xem mở rộng.

Tương tự, bạn làm theo quy trình tương tự cho tất cả các điện thoại và kích thước màn hình khác nhau.

Để làm cho chế độ xem cuộn hoạt động, chúng ta cần một đối tượng chế độ xem cuộn. Scroll View cung cấp cơ chế hiển thị nội dung lớn hơn kích thước cửa sổ của ứng dụng. Nhấp vào đối tượng này, kéo nó và đặt nó ở góc trên cùng bên trái của bộ điều khiển chế độ xem và đảm bảo rằng X và Y ở vị trí 0 và độ giãn tương ứng với bộ điều khiển chế độ xem của bạn.

Scroll View chỉ cho phép chúng ta cuộn, không có gì khác. Sau đó, chúng ta cần thêm một chế độ xem nội dung, chế độ này sẽ lưu trữ các chế độ xem khác. Bạn có thể tìm thấy UIView - nó đại diện cho một vùng hình chữ nhật trong đó nó vẽ và nhận các sự kiện - trong thư viện đối tượng. Chỉ cần nhấp và kéo nó vào dạng xem cuộn và một lần nữa, kéo nó ra cho phù hợp.

Chọn chế độ xem cuộn từ bảng điều khiển bên trái và chúng tôi sẽ gọi căn chỉnh 0, 0, 0, 0 và thêm các ràng buộc. Làm điều tương tự đối với chế độ xem nội dung.

Bước 7: Phát triển giao diện người dùng cho các trang con của Vuốt ngang

Trong bước này, bạn phải tạo giao diện người dùng của các trang con của mình. Điều tôi chọn làm là tạo một nguyên mẫu trong Sketch và sau đó xây dựng nó trong Xcode.

Bước 8: Triển khai thiết kế trong Xcode

Bước tiếp theo là thực hiện thiết kế này trong Xcode. Để làm như vậy, bạn phải tạo kết nối đầu ra cho tất cả các trang con và tạo một kết nối khác cho "chế độ xem mẹ", nghĩa là, một kết nối đầu ra cho toàn bộ bộ điều khiển chế độ xem.

Các phần tử trong bảng phân cảnh được liên kết với mã nguồn. Điều quan trọng là phải hiểu mối quan hệ mà bảng phân cảnh có với mã bạn viết.

Trong bảng phân cảnh, một cảnh đại diện cho một màn hình nội dung và thường là một bộ điều khiển chế độ xem. Bộ điều khiển chế độ xem triển khai hành vi của ứng dụng của bạn và quản lý một chế độ xem nội dung duy nhất với hệ thống phân cấp các lần xem phụ của nó. Họ điều phối luồng thông tin giữa mô hình dữ liệu của ứng dụng, bao gồm dữ liệu của ứng dụng và các chế độ xem hiển thị dữ liệu đó, quản lý vòng đời của các chế độ xem nội dung, xử lý các thay đổi hướng khi thiết bị được xoay, xác định điều hướng trong ứng dụng của bạn và triển khai hành vi để phản hồi thông tin đầu vào của người dùng. Tất cả các đối tượng điều khiển chế độ xem trong iOS đều thuộc loại UIViewController hoặc một trong các lớp con của nó.

Bạn xác định hành vi của bộ điều khiển chế độ xem của mình trong mã bằng cách tạo và triển khai các lớp con bộ điều khiển chế độ xem tùy chỉnh. Sau đó, bạn có thể tạo kết nối giữa các lớp và cảnh đó trong bảng phân cảnh của mình để có được hành vi bạn đã xác định trong mã và giao diện người dùng mà bạn đã xác định trong bảng phân cảnh của mình.

Xcode đã tạo một lớp như vậy mà bạn đã xem trước đó, ViewController.swift và kết nối nó với cảnh bạn đang làm việc trong bảng phân cảnh của mình. Khi bạn thêm nhiều cảnh hơn, bạn sẽ tự tạo kết nối này trong Trình kiểm tra danh tính. Trình kiểm tra danh tính cho phép bạn chỉnh sửa các thuộc tính của một đối tượng trong bảng phân cảnh của bạn liên quan đến danh tính của đối tượng đó, chẳng hạn như đối tượng thuộc về lớp nào.

Tạo Outlet cho UI ElementsOutlets cung cấp một cách để tham chiếu đến các đối tượng giao diện - các đối tượng bạn đã thêm vào bảng phân cảnh của mình - từ các tệp mã nguồn. Để tạo một lối thoát, hãy Control-kéo từ một đối tượng cụ thể trong bảng phân cảnh của bạn vào tệp bộ điều khiển chế độ xem. Thao tác này tạo thuộc tính cho đối tượng trong tệp bộ điều khiển chế độ xem của bạn, cho phép bạn truy cập và thao tác đối tượng đó từ mã trong thời gian chạy

1. Mở bảng phân cảnh của bạn, Main.storyboard.
2. Nhấp vào nút Trợ lý trong thanh công cụ Xcode gần góc trên cùng bên phải của Xcode để mở trình chỉnh sửa trợ lý. Nếu bạn muốn có thêm không gian để làm việc, hãy thu gọn bộ điều hướng dự án và khu vực tiện ích bằng cách nhấp vào nút Bộ điều hướng và Tiện ích trong thanh công cụ Xcode.
3. Bạn cũng có thể thu gọn chế độ xem phác thảo.

Trong thanh công cụ chọn trình chỉnh sửa, xuất hiện ở đầu trình chỉnh sửa trợ lý, hãy thay đổi trình chỉnh sửa trợ lý từ Xem trước thành Tự động> ViewController.swift.

Nhấp vào trang con và kéo vào lớp thích hợp trong mã.

Bước 9: Tích hợp Cử chỉ tùy chỉnh

VUỐT CỬ CHỈ

Cử chỉ vuốt xảy ra khi người dùng di chuyển một hoặc nhiều ngón tay trên màn hình theo hướng ngang hoặc dọc cụ thể. Sử dụng lớp UISwipeGestureRecognizer để phát hiện các cử chỉ vuốt.

Thực hiện cử chỉ vuốt

Bước 1: Thêm (các) cử chỉ vuốt trong phương thức viewDidLoad ()

ghi đè func viewDidLoad () {super.viewDidLoad ()

hãy để vuốtLeft = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) vuốtLeft.direction =.left self.view.addGestureRecognizer (vuốtLeft)

hãy để vuốtRight = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) vuốtRight.direction =.right self.view.addGestureRecognizer (vuốtRight)

hãy để vuốtUp = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) vuốtUp.direction =.up self.view.addGestureRecognizer (vuốtUp)

hãy để vuốtDown = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) vuốtDown.direction =.down self.view.addGestureRecognizer (vuốtDown)}

Bước 2: Kiểm tra phát hiện cử chỉ trong phương thức handleGesture () func handleGesture (cử chỉ: UISwipeGestureRecognizer) -> Void {if Cử chỉ.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} else if Cử chỉ.direction == UISwipeGestureRecognizerDirection. left {print ("Swipe Left")} else if scroll.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if scroll.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}

Trong ứng dụng của mình, tôi muốn sử dụng swight, nhưng không muốn sử dụng cái thích hợp hơn cho ứng dụng của bạn.

Bây giờ, hãy triển khai điều này vào mã của chúng ta.

Chúng tôi truy cập registerVC.swift mà chúng tôi đã tạo trước đó và viết mã như bạn có thể thấy trong hình.

GIẢI THÍCH MÃ

hãy để current_x lấy vị trí hiện tại của ScrollView (vị trí ngang) để cho screen_width nhận chiều rộng của màn hình, trừ kích thước này cho new_x từ vị trí hiện tại của scrollview, tôi quay lại theo chiều rộng của màn hình nếu current_x> 0 cho đến khi nó lớn hơn 0 - 0 là trang đầu tiên.

Và chúng tôi đã hoàn thành!

Làm tốt lắm các bạn!