Nhật ký học lại iOS của tôi Phần 1

Ý tưởng cho blog này là chia sẻ với bạn những gì tôi đã học được một cách chi tiết nhất có thể và củng cố/trả lời bất kỳ câu hỏi nào tôi đã có khi học từ các hướng dẫn “không-to-anh hùng”.

Trong bài đăng này, tôi sẽ bắt đầu với một thứ CỰC KỲ đơn giản mà một nhà phát triển dày dạn kinh nghiệm có thể mất 5 phút hoặc ít hơn để tạo ra. Nhưng này, tất cả chúng ta đều bắt đầu từ một nơi nào đó vậy tại sao không ở đây

Đây là bản xem trước của những gì chúng tôi sẽ thực hiện ở đây:

Như với bất kỳ truyền thống ngôn ngữ lập trình nào, chúng tôi sẽ tạo một ứng dụng “hello world” mà khi người dùng nhấn vào nút, văn bản trên sẽ hiển thị văn bản “hello world” bằng các ngôn ngữ khác nhau một cách ngẫu nhiên.

Mục tiêu của ứng dụng này là để hiểu những điều cơ bản của:

1. UILable, UIButton và UIImageView của UIKit.
2. Khai báo biến và mảng Swift.
3. IBOutlet và IBActions.

Vậy hãy bắt đầu!

Đầu tiên, hãy mở Xcode của bạn và tạo một Ứng dụng mới như sau:

Đây là phần quan trọng: chọn chạm iOS thay vì chạm Đa nền tảng, nếu không bạn không thể chọn Storyboard sau này và phải hoạt động với SwiftUI.

Bây giờ, bên dưới Tên sản phẩm, hãy nhập “Ứng dụng Hello World” hoặc bất kỳ tên ưa thích nào khác mà bạn có thể muốn gọi nó. Nó thực sự tùy thuộc vào sự sáng tạo của bạn!

Giờ thì Mã định danh Tổ chức là cái quái gì vậy?

Mã định danh tổ chức là tên duy nhất cho ứng dụng của bạn để người khác tìm thấy ứng dụng của bạn trên App Store. Tôi khuyên bạn nên nhập họ của mình sau đó nhập tên vào đây để làm cho mọi thứ đơn giản hơn cho dự án này.

Vì vậy, Mã định danh gói của bạn (ngay bên dưới Mã định danh tổ chức) sẽ giống như sau:

doejohn.Hello-World-App

Một số phiên bản Xcode cũ hơn có thể hiển thị com.doejohn.Hello-World-App. Đây được gọi là tên miền đảo ngược chỉ dành cho thông tin của bạn.

Bây giờ hãy nhấp vào Tiếp theo và lưu dự án của bạn ở đâu đó bạn thích và nhấp vào Tạo và tắt chúng ta đi đến phần thú vị!

Sau khi hoàn thành, Xcode của bạn sẽ trông như thế này:

Vì vậy, hãy lướt qua một cách ngắn gọn những gì chúng ta đang thấy ở đây:

• Phần màu cam là phía Bộ điều hướng của bạn, nơi nó hiện đang hiển thị Bộ điều hướng Dự án của bạn. Tại đây, bạn thấy rằng bạn có Dự án Hello World ở trên cùng với ba thư mục trong đó: Hello World , Hello WorldTest s và Hello WorldUITests . Thư mục Hello World là nơi chúng tôi sẽ thực hiện tất cả các mã hóa và chỉnh sửa của mình. Hello WorldTest s và Hello WorldUITests được tạo tự động cho chúng tôi khi chúng tôi bỏ chọn hộp kiểm Bao gồm các bài kiểm tra khi chúng tôi tạo dự án của mình trong giai đoạn tạo Tên. Tôi sẽ xem xét hai thư mục trong một bài đăng khác, vì vậy hãy chú ý theo dõi!
• Phần màu xanh lá cây là phần về thông tin chung và chỉnh sửa ứng dụng của chúng tôi. Trong phần nhấn Chung ở đây, chúng tôi có thể thấy rằng chúng tôi có Tên hiển thị (tên ứng dụng của chúng tôi), Mã định danh gói (những gì chúng tôi đã thảo luận trước đó về tên miền đảo ngược), phiên bản (như các trò chơi chúng tôi có phiên bản 1.0, 1.1, 2.x… vân vân )
• Thông tin phát triển phần màu tím là nơi tôi muốn dành thêm một chút thời gian để thảo luận ở đây. Hãy đi từ trên xuống dưới ở đây.
• Ở trên cùng, chúng tôi có iOS 15.2 với iPhone và iPad đã được kiểm tra nhưng Mac Catalyst. Điều này là do khi chúng tôi tạo dự án của mình, chúng tôi đã chọn “iOS” chứ không phải “đa nền tảng”, do đó nói rằng “chúng tôi chỉ muốn ứng dụng của mình chạy trên thiết bị iOS”. Phần iOS 15.2 có nội dung “Phiên bản iOS tối thiểu để chạy ứng dụng của chúng tôi”. Bạn có thể nhấp vào nó và chọn một phiên bản iOS khác mà ít nhất bạn muốn người dùng của mình sử dụng. Hãy cẩn thận để kiểm tra xem các chức năng bạn muốn chạy có được hỗ trợ trong phiên bản tối thiểu mà bạn muốn người dùng của mình chạy trên đó hay không. Đối với ứng dụng này, bạn sẽ ổn thôi. Định hướng thiết bị cho biết rằng ứng dụng của bạn chỉ chạy trên Chân dung, Lộn ngược, Ngang trái hoặc Ngang phải như bạn có thể tưởng tượng giống như một số trò chơi sẽ chỉ cho phép người chơi chơi theo một hướng nhất định. CácThanh trạng thái là nơi bạn có thể đặt kiểu hiển thị cho thanh trạng thái của mình. Bạn có thể thử với nó và xem bạn muốn ứng dụng của mình trông như thế nào. Đối với ứng dụng này, chúng tôi sẽ chỉ giữ mọi thứ ở cài đặt mặc định để giữ mọi thứ đơn giản.
• Phần màu vàng là nơi thanh tra viên của bạn đang ở. Vì vậy, những thứ như tên Ứng dụng của bạn, đường dẫn đầy đủ đến tệp của bạn, v.v. đều có thể được tìm thấy trong phần đó. Nó sẽ trở nên tiện dụng hơn khi chúng tôi phát triển ứng dụng của mình với Storyboard.

Bây giờ tôi muốn bạn nhấp vào nút mà tôi đã đánh dấu bằng hình vuông màu vàng. Điều này sẽ cho phép chúng tôi chia phần giữa của Xcode thành hai bên: Một bên để hiển thị tệp Chính và bên còn lại chúng tôi sẽ hiển thị tệp ViewController của chúng tôi.

Màn hình của bạn có thể trông như thế này lúc đầu, nhưng bạn có thể dễ dàng nhấp vào bất kỳ bên nào bạn muốn thay đổi để hiển thị ViewController và nhấp vào ViewController trên Phần điều hướng, sau đó nó sẽ thay đổi.

Màn hình của bạn sẽ trông như thế này khi bạn hoàn thành. Bây giờ chúng ta hãy lướt qua một lần nữa ý nghĩa của các dòng mã mà chúng ta đang thấy trong ViewController:

Ở trên cùng, chúng ta thấy dòng nhập UIKit có nội dung “này, chúng tôi muốn nhập khung/thư viện này để sử dụng trong tệp ViewController này!” Trong trường hợp này, chúng tôi muốn làm việc với UIKit, do đó chúng tôi nhập nó vào đây. Chúng tôi sẽ nhập thêm trong tương lai, chẳng hạn như Firebase của Google hoặc một số thư viện hoạt hình giao diện người dùng mà bạn muốn thêm!

Tiếp theo, chúng ta có lớp ViewController: UIViewController{} điều này nói rằng chúng ta có một lớp gọi là ViewController và nó kế thừa từ UIViewController. Kế thừa trong lớp có nghĩa là lớp con (ViewController) của chúng tôi muốn có thể sử dụng tất cả các phương thức, thuộc tính và các đặc điểm khác từ siêu lớp (UIViewController).

Bên trong Lớp ViewController của chúng tôi, chúng tôi có những điều sau đây:

Đây được gọi là một chức năng. Chức năng cụ thể này cho biết điều gì sẽ xảy ra khi chế độ xem này tải lần đầu. Chẳng hạn, nếu chúng ta muốn biến Star luôn bằng 0 khi chế độ xem này được tải, chúng ta sẽ có var star = 0 ở đây.

Bây giờ tôi muốn bạn nhìn vào phần giữa của Xcode của bạn, ở thanh trên cùng sẽ có dấu + như sau:

Nhấp vào đó và chúng ta sẽ thấy một danh sách các đối tượng mà chúng ta có thể kéo và thả vào Bảng phân cảnh chính của mình.

Như bạn thấy trong Xcode, chúng tôi có tất cả các đối tượng được xác định trước này sẵn sàng để sử dụng cho chúng tôi. Vì vậy, chúng ta hãy kéo các đối tượng Nhãn và Nút vào Bảng câu chuyện chính của mình.

Như bạn có thể thấy khi lần đầu tiên chúng tôi thả Đối tượng Nhãn vào bảng phân cảnh của mình, chúng tôi có thể thả nó ở bất cứ đâu chúng tôi muốn, tuy nhiên chúng tôi muốn lớn như thế nào. Vì vậy, hãy mở rộng nhãn của chúng ta rộng bằng các đường chấm màu xanh lam đầu tiên ở cả hai bên trái và phải. Những dòng đó là những gì Xcode đang cho chúng ta biết “vùng an toàn” để các đối tượng của chúng ta tồn tại. Đồng thời, chúng ta hãy thay đổi văn bản từ Nhãn thành Hello World bằng cách nhấp đúp vào Đối tượng Nhãn.

Bây giờ trước đó, tôi muốn chúng ta nhìn vào phần hình vuông màu vàng trong hình trên. Đây được gọi là Trình kiểm tra thuộc tính nơi chúng ta có thể thay đổi những thứ như màu văn bản, phông chữ, cỡ chữ, v.v. cho Đối tượng đã chọn của mình. Ở đây chúng tôi sẽ thay đổi Kích thước phông chữ thành 50 và văn bản từ Nhãn thành Hello World như chúng tôi thấy bên dưới.

Tiếp theo, chúng ta sẽ làm điều tương tự với đối tượng Button. Tôi sẽ tiết kiệm thời gian và giao cho bạn làm (chắc chắn không phải là lười biếng ở đây )

Kết quả cuối cùng, bạn sẽ có một cái gì đó trông như thế này. Bây giờ chúng tôi (phần nào) an toàn khi nói rằng phần giao diện người dùng của chúng tôi đã hoàn tất! Tự thưởng cho mình một cái vỗ nhẹ vào lưng

Bây giờ, đây là câu hỏi lớn: làm thế nào để ứng dụng tuyệt vời của chúng tôi biết phải làm gì khi người dùng nhấn vào nút? Hoặc nó nên làm gì khi người dùng chạm vào nút? Hoặc Ứng dụng nên làm gì khi phát hiện người dùng của chúng tôi đang gặp phải một số khủng hoảng hiện sinh như người viết?

Chà, câu hỏi cuối cùng có lẽ nằm ngoài phạm vi của hướng dẫn này, nhưng này, chúng ta có thể giải quyết hai câu hỏi đầu tiên mà không gặp vấn đề gì.

Xcode đã giúp chúng tôi và thực hiện việc này cực kỳ đơn giản: Control + Nhấp vào Obecjt và kéo tệp đó vào tệp ViewController như sau:

Hãy cẩn thận KHÔNG kéo nó vào phương thức viewDidLoad().

Một hộp thoại sẽ xuất hiện giống như những gì chúng ta thấy trong phần ô vuông màu vàng và Xcode sẽ hỏi bạn tên cho Nhãn này, hãy gọi nó là helloWorldText . Quy ước đặt tên này được gọi là Camel Casing.

Bây giờ chúng ta đã kết nối Nhãn với mã của mình! Chúng tôi có thể lập trình yêu cầu nó thực hiện đấu thầu của chúng tôi! Muwahahaha!

Lưu ý rằng bạn có thể thấy vòng tròn được lấp đầy bởi dòng mã IBOutlet ở đó. Nó có nghĩa là Đối tượng này được kết nối với thứ gì đó trong Bảng phân cảnh.

Bây giờ đối với Nút, chúng ta sẽ làm điều tương tự nhưng hơi khác một chút; chúng tôi muốn nút của mình là một Hành động, thứ mà chúng tôi có thể tương tác chứ không chỉ để hiển thị. Vì vậy, chúng tôi sẽ làm như sau

Đảm bảo rằng bên dưới Kết nối, Hành động được chọn. Chúng ta có thể đặt tên nó là HelloWorldAction tại đây. Trong phần Sự kiện là nơi chúng ta định nghĩa điều gì sẽ xảy ra khi người dùng làm điều gì đó tại đây. Ở đây chúng tôi đã chọn Touch Up Inside, có nghĩa là khi người dùng chạm (chạm và buông) nút.

Giờ đây, chúng tôi có thể biết ứng dụng của mình nên làm gì khi người dùng chạm vào nó theo chương trình! Kinh hoàng

Được rồi, hãy chuyển sang phần thú vị của ứng dụng của chúng tôi. Hãy thêm hai dòng mã dưới UILabel của chúng tôi:

var helloTextNumber = 0

var helloTextArray = ["hello world", "Hej Verden!", "Hallo Wereld!", "Ciao mondo!", "Hei Verden!", "你好世界!"]

Hãy thảo luận một chút về hai biến này là gì.

helloTextArray là Mảng chúng tôi muốn sử dụng để chọn “Xin chào thế giới” bằng ngôn ngữ khác ở đây. Ở đây chúng ta có một mảng Chuỗi gồm 6 Chuỗi (Chuỗi chỉ là một loại có “” trong đó.) Giống như nhiều ngôn ngữ khác, Mảng bắt đầu bằng 0, không phải 1! Vì vậy, hãy cẩn thận khi bạn lặp qua Mảng Swift!

Vì vậy, helloTextArray[0] sẽ là “hello world”, helloTextArray[3] là “Ciao mondo”, và helloTextArray[5] là “你好世界! ”

Đây là liên kết đến tài liệu Swift của Apple về Array. Bạn có thể đọc sâu hơn về nó ở đây:

Như chúng ta đã thấy ở trên, để lấy một phần tử từ ngoài hellTextArray, chúng ta cần cho nó biết chúng ta muốn đánh số nào (vì vậy, đầu tiên chúng ta nói helloTextArray[0], thứ hai helloTextArray[1], thứ ba helloTextArray[2] … v.v.) nhưng chúng ta không thể chỉ nhập từng số theo cách thủ công và chúng ta cũng không nên mong người dùng nhập số cho mình ( luôn mong đợi ít nhất từ ​​người dùng. Một nguyên tắc mà tôi đã học được.) Vậy chúng ta phải làm gì?

Đây là helloTextNumber. helloTextNumber là biến Số nguyên (Int) mà chúng tôi muốn sử dụng làm trình giữ chỗ cho phần tử nào của mảng mà chúng tôi muốn hiển thị. Chúng ta sẽ có một phương thức tạo ra một Số nguyên ngẫu nhiên trong khoảng từ 0 đến 5 và sử dụng helloTextNumber để giữ số đó cho chúng ta. Vì vậy, chúng tôi có thể hiển thị một phần tử từ helloTextArray của chúng tôi một cách ngẫu nhiên. Nếu bạn hơi bối rối về phần này, đừng lo lắng, nó sẽ sáng tỏ trong phần tiếp theo.

Đây là mã tôi muốn bạn thêm:

Hãy xem bên trong khối mã hellowWorldAction của chúng ta làm gì.

Ở đây, chúng tôi đã đặt helloTextNumber thành Int.random(in:0…5). Ý nghĩa của dòng mã này là chúng ta muốn helloTextNumber của mình là một Số nguyên được tạo ngẫu nhiên từ 0 đến 5 (có nghĩa là bao gồm 5).

Đây là một cái gì đó tôi muốn đi xa hơn một chút nữa. Hãy nói về dòng tiếp theo

helloWorldText.text = helloTextArray[helloTextNumber]

Trong Swift ký hiệu dấu chấm này tuân theo quy tắc của

Ai.Cái gì = Giá trị

mà phá vỡ để:

“Ai cần được thay đổi”

"chấm"

"Những gì cần phải được thay đổi"

“bằng”

"những gì nó nên được thay đổi thành."

Vì vậy, với mã của chúng tôi, chúng tôi đang nói rằng:

Chúng tôi muốn văn bản của helloWorldText (ai) (cái gì) được thay đổi thành phần tử helloTextNumber của helloTextArray.

Vì vậy, khi chúng tôi chạy dòng mã này, chúng tôi sẽ thay đổi helloWorldText để hiển thị bất kỳ phần tử nào trong helloWorldTextArray số được tạo ngẫu nhiên Phương thức Int.random() được tạo cho helloWorldTextNumber của chúng tôi.

Bây giờ khi chúng tôi chạy trình giả lập của mình ( commnad + r hoặc nút ▶️ trên thanh trên cùng của Xcode ), khi chúng tôi nhấp vào nút của mình, văn bản của chúng tôi sẽ thay đổi bất cứ khi nào chúng tôi tab nút!

Kinh hoàng! Chúng ta đã hoàn thành phần mã hóa ứng dụng của mình!

Một điều cuối cùng. Nền của chúng tôi thực sự hơi xấu Chúng tôi muốn thêm một số loại hình nền để nó trông không đơn điệu. Vì vậy, hãy tìm một hình ảnh mà bạn thực sự muốn thêm làm nền cho ứng dụng của mình. Đối với tôi, tôi sẽ sử dụng hình ảnh trái đất (vì đó là xin chào thế giới phải không?).

Bây giờ, hãy nhấp vào 'Assests' trong thư mục Hello World và bạn sẽ thấy một cái gì đó giống như bên dưới. Kéo hình ảnh bạn đã chọn và thả nó vào cột bằng “AccentColor” và “Appicon”. Đây là nơi hình ảnh của chúng tôi sẽ cư trú và được yêu cầu sử dụng.

Bây giờ, hãy quay lại 'Main' và thả một đối tượng Hình ảnh từ thư viện đối tượng (nếu bạn quên cách thực hiện điều đó, hãy cuộn lên để xem nơi chúng ta đã nói về Đối tượng Nhãn và Nút). Tôi muốn bạn mở rộng đối tượng Hình ảnh thật lớn để nó bao phủ toàn bộ màn hình điện thoại của bạn. Bây giờ tôi muốn bạn bấm vào đối tượng Hình ảnh đó và đi tới Thanh tra (bảng bên phải) và tìm cái này:

Trong Chế độ xem hình ảnh, tôi muốn bạn nhấp vào trình đơn thả xuống Hình ảnh và chọn hình nền mà bạn đã thả vào Nội dung trước đó. Đây là nơi chúng ta có thể xác định Đối tượng hình ảnh nào sẽ hiển thị mà không cần phải viết mã bất kỳ thứ gì trong đó. Gọn gàng! Càng ít mã hóa càng tốt!

Bây giờ màn hình của bạn có thể trông giống như thế này:

Đợi một chút… chuyện gì đang xảy ra ở đây vậy? Điều gì đã xảy ra với Nhãn và Nút mà chúng tôi đã dày công tạo ra?

Điều gì đã xảy ra ở đây chỉ đơn giản là một vấn đề lớp. Hãy tưởng tượng chúng ta có một cái đĩa, một quả táo và một quả cam. Những gì chúng tôi đã làm là chúng tôi hiển thị Apple và Orange trước, sau đó chúng tôi đặt cái đĩa lên trên cả hai, do đó chúng tôi chỉ nhìn thấy phần cuối (hình nền) chứ không phải quả táo (nhãn) cũng như màu cam (nút) của chúng tôi. Những gì chúng tôi muốn là đặt đĩa của chúng tôi trước, sau đó là quả táo và quả cam của chúng tôi lên trên.

Vì vậy, làm thế nào để chúng tôi làm điều đó? Có phải chúng ta chỉ cần xóa toàn bộ dự án của mình và làm lại toàn bộ không?

Chà, nếu bạn muốn làm điều đó để củng cố những gì bạn đã học được ở đây thì rất hoan nghênh bạn làm như vậy! NHƯNG Apple đã cho chúng tôi một cách đơn giản hơn nhiều để làm điều đó.

Ở phía bên trái của ảnh chụp màn hình trước, chúng ta thấy 'Xem cảnh điều khiển'. Theo đó, chúng tôi có 'Trình điều khiển xem' và bên dưới đó, chúng tôi có 'Chế độ xem'. Đây là lớp của Chế độ xem hiện tại của chúng tôi với các Đối tượng của chúng tôi trong đó (Nhãn, Nút và Hình ảnh) cùng với 'Khu vực an toàn' mặc định, các đường chấm màu xanh lam mà chúng tôi nhìn thấy khi kéo các Đối tượng của mình.

Bây giờ chỉ cần kéo Đối tượng Hình ảnh từ dưới lên bên phải bên dưới 'Khu vực An toàn' như sau:

Và Voila! Chúng tôi thấy Nhãn và Nút của chúng tôi! Và khi chúng tôi chạy ứng dụng này trong trình mô phỏng của mình, chúng tôi sẽ thấy mọi thứ hoạt động như dự định!

Tôi hy vọng điều này đã giúp bạn có một khởi đầu thuận lợi trong hành trình học iOS của mình. Vui lòng để lại nhận xét và vỗ tay nếu bạn thấy điều này hữu ích

Nhưng tôi sẽ tiếp tục viết nhiều hướng dẫn hơn trong tương lai cho dù thế nào đi chăng nữa thật tệ nếu bạn không thích tôi

Bình yên ✌