Hướng dẫn cho người mới bắt đầu phát triển iOS Giao diện - Phần I
Apple đã là một ngành công nghiệp hàng đầu trong thế giới di động trong nhiều năm qua với loạt iPhone và iPad. Bất chấp sự cường điệu mà nó có thể tạo ra với mỗi bản phát hành chính thức, nó cũng đang nắm giữ một phần lớn thị phần trong nền tảng di động và đây có lẽ là lý do mà hầu hết khách hàng sẽ muốn ứng dụng của họ tồn tại trong kho ứng dụng của Apple; do đó trở thành lý do để các nhà phát triển tìm hiểu và xây dựng ứng dụng iPhone.
Tin vui là, phát triển ứng dụng iPhone không khó như bạn tưởng và bài đăng này tồn tại như một hướng dẫn toàn diện để hướng dẫn bạn toàn bộ quá trình xây dựng ứng dụng cho iPhone.
Chúng ta sẽ thảo luận về lý do, giai đoạn và công cụ để phát triển ứng dụng và cuối cùng bạn sẽ làm theo hướng dẫn dễ dàng để thiết kế ứng dụng iPhone cơ bản bằng Xcode.
Vì vậy, cho dù bạn đang học kinh doanh hay bạn chỉ có một ý tưởng ứng dụng tuyệt vời có thể khiến bạn trở thành triệu phú, hãy bắt đầu xây dựng ứng dụng iPhone đầu tiên của bạn!
Lưu ý: Bạn sẽ cần một máy tính có Hệ điều hành Macintosh (Mac OS) để cài đặt Xcode, phát triển ứng dụng và gửi ứng dụng, không có cách nào bạn có thể làm điều đó trên Windows một cách hợp pháp.
Tại sao phát triển cho Apple?
Tôi thấy câu hỏi này được hỏi thường xuyên vì vậy tôi muốn giải thích lý do tại sao bạn nên quan tâm đến việc phát triển iPhone. Giống như tôi đã nói trong phần giới thiệu, iPhone hiện tại nắm giữ một phần lớn thị phần trong nền tảng di động.
Tôi nghĩ lý do này đủ để bạn học cách phát triển ứng dụng iPhone vì dù bạn đang phát triển cho chính mình hay khách hàng, hầu hết mọi người có thể hy vọng ứng dụng của họ có thể được truy cập bởi nhiều người trên thế giới.
Từ quan điểm phát triển, Apple thích những thứ đơn giản, và điều này áp dụng cho các sản phẩm và khuôn khổ của họ. iOS là hệ điều hành cung cấp năng lượng cho tất cả các thiết bị di động của Apple. Chúng bao gồm iPod Touch, iPhone và iPad. Vì vậy, hãy ghi nhớ khi bạn phát triển ứng dụng cho iPhone, bạn có thể phát triển cho tất cả các thiết bị khác với iOS!
Bên cạnh đó, điều làm cho tính năng trên thậm chí còn lớn hơn là công việc mã hóa có thể được lưu bao nhiêu. Khi bạn viết mã cho ứng dụng iPhone, bạn sử dụng cùng một ngôn ngữ lập trình cho tất cả các thiết bị máy tính của Apple. Điều đó có nghĩa là khi bạn đang phát triển ứng dụng iPhone, ứng dụng này sau đó có thể được tích hợp vào iPad và thậm chí cả Mac.
Mục tiêu-C là ngôn ngữ lập trình cốt lõi cung cấp năng lượng cho tất cả các khung của họ. Cùng với Objective-C, bạn cũng sẽ phát triển ứng dụng iPhone với Ca cao cảm ứng, khung lập trình thúc đẩy tương tác người dùng trên iOS.
Đây chỉ là một chút thông tin để giúp bạn bắt đầu phát triển ứng dụng iPhone. Sự phát triển là một quá trình khá phức tạp nhưng hãy thư giãn, hãy thực hiện nó từ từ. Vì vậy, lý do là ở đây, và quyết định là của bạn. Cho dù câu trả lời là có hay không, bạn luôn có thể nhảy ngay vào chủ đề tiếp theo: thiết kế ứng dụng cho iPhone.
Lập kế hoạch cấu trúc ứng dụng iPhone của bạn
Trong hệ tư tưởng tiêu chuẩn tạo ứng dụng iPhone, bạn sẽ muốn trải qua một vài giai đoạn. Giai đoạn đầu bao gồm lập kế hoạch và phác thảo.
Trước hết bạn cần có một ý tưởng cho ứng dụng của bạn sẽ làm gì. Tại sao mọi người muốn tải xuống? Và bạn muốn bao gồm những tính năng nào? Đây là giai đoạn quan trọng nhất vì nếu bạn làm đúng, bạn sẽ tiết kiệm rất nhiều nhầm lẫn và rắc rối trong giai đoạn mã hóa.
Tệ nhất, nó khiến bạn quay lại bảng vẽ.
Tôi khuyên bạn nên phác thảo một số ý tưởng sơ bộ cho một vài trang (hoặc lượt xem) của ứng dụng của bạn. Chỉ cần vẽ một hình chữ nhật, có thể 5 hoặc 6 hình trên một tờ giấy, sau đó vẽ các tính năng bạn muốn trên mỗi chế độ xem của ứng dụng của bạn.
Bạn có thể nghĩ về lượt xem như các trang khác nhau trong một trang web. Mỗi chế độ xem sẽ cung cấp các chức năng khác nhau như biểu mẫu đăng nhập, danh sách liên hệ hoặc bảng dữ liệu.
Dưới đây tôi đã xây dựng một bộ sưu tập ngắn gọn về các thành phần thanh UI khác nhau:
- Thanh trạng thái - Hiển thị mức pin hiện tại của thiết bị, kết nối 3G, thanh tiếp nhận, nhà cung cấp điện thoại và nhiều hơn nữa. Bạn nên bao gồm các yếu tố này.
- Thanh điều hướng - Cung cấp cho người dùng của bạn tùy chọn để điều hướng giữa các phân cấp trang. Điều này thường bao gồm một nút ở phía bên trái của thanh để cho phép người dùng quay lại chế độ xem ứng dụng trước đó.
- Thanh công cụ - Xuất hiện ở dưới cùng của ứng dụng iPhone. Điều này sẽ giữ một vài biểu tượng gắn liền với một số chức năng như Chia sẻ, Tải về, Xóa bỏ, v.v..
- Thanh Tab - Rất giống với thanh công cụ, ngoại trừ bây giờ bạn đang làm việc với các tab. Khi người dùng nhấp vào biểu tượng tab, nó sẽ tự động được tô sáng và nó sẽ hiển thị trạng thái di chuột bóng. Thanh này được sử dụng để chuyển đổi giữa các chế độ xem thay vì cung cấp chức năng trực tiếp.
Danh sách này chỉ chứa các thanh công cụ bạn có thể tìm thấy trong hầu hết các ứng dụng. Có một số quan điểm và phong cách khác để xem xét, mà bạn có thể tìm thấy chúng trong Nguyên tắc sử dụng thành phần giao diện người dùng iOS của Apple. Tôi đặc biệt khuyên bạn nên tham khảo tài liệu này khi bạn nghi ngờ về các yếu tố UI của iPhone.
Theo thời gian, tôi sẽ không mô tả mọi yếu tố UI. Có quá nhiều yếu tố để xem xét và cuối cùng bạn sẽ không sử dụng tất cả chúng trong ứng dụng của mình. Nhưng khi bạn phác thảo quan điểm của mình, bạn có thể lấy cảm hứng từ các hướng dẫn được đề xuất ở trên và các ứng dụng iPhone khác bạn đã thích sử dụng chúng.
Thiết kế mô hình Photoshop
Tôi cho rằng hầu hết các bạn đều khá thoải mái khi làm việc với Adobe Photoshop. Đây là phần mềm ra mắt để tạo đồ họa cho trang web, biểu ngữ, logo và mockup di động. Thiết kế đồ họa cho web là một quá trình khá đơn giản, nhưng nó phức tạp hơn một chút khi nói đến thiết kế ứng dụng iPhone.
Nếu bạn đang tìm cách xây dựng một ứng dụng bạn thực sự nên tạo các thiết kế mockup hoàn hảo pixel ngay từ đầu.
Để bắt đầu, chúng ta nên thảo luận về cài đặt Photoshop. Vì chúng tôi đang thiết kế cho iPhone, chúng tôi cần xem xét 2 phong cách thiết kế khác nhau. Các Màn hình iPhone thông thường là 320 x 480 pixel. Tuy nhiên, iPhone 4 bao gồm một màn hình retina nhân đôi số lượng pixel trong cùng kích thước màn hình. Bạn nên làm điều đó tăng gấp đôi độ phân giải lên 640 x 960 pixel và thiết kế bố trí của bạn theo tiêu chuẩn này.
Điều này có nghĩa là bạn cũng sẽ cần phải tạo 2 bộ biểu tượng cho mockup của bạn. Ban đầu các biểu tượng sẽ là đặt thành 163ppi nhưng bạn sẽ cần phải bao gồm các biểu tượng với 326ppi cho iPhone 4. Các biểu tượng được đánh dấu theo truyền thống với @ 2 lần ở cuối tên tập tin của họ, chẳng hạn như “[email protected]“.
Bây giờ hãy tối ưu hóa cài đặt tài liệu mới của chúng tôi. Trước tiên, chúng tôi sẽ cần chỉnh sửa một số tùy chọn, vì vậy hãy truy cập vào Photoshop> Chỉnh sửa> Tùy chọn> Hướng dẫn, lưới và lát. Cũng được thiết lập Gridline của chúng tôi mỗi 20px với các phân vùng ở 2. Khi thiết kế cho màn hình võng mạc Dòng 2px sẽ hiển thị 1 điểm trên màn hình. Đây là một quy tắc quan trọng bạn cần ghi nhớ để thu nhỏ ứng dụng của bạn.
Tôi có xu hướng thấy dễ dàng hơn khi xây dựng các thiết kế của mình với độ phân giải cao hơn sau đó thu nhỏ chúng xuống, nhưng bạn có thể thử cả hai phương pháp và xem cái gì phù hợp với bạn nhất. Chúng tôi đang sử dụng 640 x 960 pixel ở mức 326ppi - lưu cái này làm giá trị đặt trước tùy chỉnh nếu bạn nghĩ rằng bạn sẽ sử dụng nó thường xuyên.
Xây dựng với các yếu tố mẫu
Bây giờ bạn có thể sử dụng Photoshop để tự tạo bố cục pixel hoàn hảo, nhưng điều này chứng tỏ đây là một công việc rất mệt mỏi và tẻ nhạt.
Đây là một tập tin khổng lồ với quá nhiều yếu tố. Để làm cho mọi thứ dễ dàng hơn, bạn có thể nhấn v kích hoạt Công cụ di chuyển và bấm vào “Tự động lựa chọn” trên thanh tùy chọn của nó, sau đó chọn “Lớp” hơn là “Nhóm”. Với các cài đặt, bạn có thể nhấp vào bất kỳ yếu tố nào và Photoshop sẽ đưa bạn đến lớp tương ứng của nó!
Hãy chơi xung quanh với mockup, hoặc thậm chí bạn có thể tạo nguyên mẫu của ứng dụng của mình từ mockup. Tùy thuộc vào ứng dụng của bạn, bạn có thể bao gồm một loạt các tính năng trong khu vực cốt lõi, nhiều tính năng bạn có thể tìm thấy trong tệp PSD này. Cũng có thể đi đến các lớp của các thành phần này và chỉnh sửa phông chữ, màu gradient và các kiểu thiết kế khác. Chỉ đảm bảo bạn không thay đổi kích thước bất cứ điều gì vì tất cả các thanh và thành phần UI được đặt thành kích thước tiêu chuẩn mặc định.
Phát triển ứng dụng trong Xcode
Công cụ phát triển cho lập trình iOS và Mac OS X được đặt tên là Xcode. Nếu bạn đang chạy OS X Lion, bạn có thể tìm thấy Xcode và tất cả các gói áp dụng miễn phí trong Cửa hàng ứng dụng Mac.
Sau khi cài đặt hoàn tất, khởi chạy Xcode và màn hình chào mừng của nó sẽ xuất hiện. Từ đây bạn có thể tải một dự án cũ hơn hoặc chọn để thực hiện một dự án mới. Bây giờ bạn cần phải bấm “Tạo một dự án Xcode mới“, sau đó cửa sổ mẫu sẽ đưa ra một vài tùy chọn. Trong Ứng dụng iOS>, nhấp vào “Ứng dụng Xem đơn” va đanh “Kế tiếp”. Bạn có thể đặt tên cho ứng dụng mới, nhu la Kiểm tra (tốt nhất là không có khoảng trắng), sau đó trên Định danh công ty, gõ bất kỳ từ nào như công ty của tôi, và cuối cùng chọn một thư mục và nhấn “Tiết kiệm”.
Xcode sẽ xây dựng thư mục tệp và gửi bạn vào một cửa sổ mới để làm việc. Bạn sẽ thấy rất nhiều tùy chọn tập tin được liệt kê, nhưng thư mục được đặt tên theo ứng dụng của bạn là trọng tâm chính.
Với Xcode, bạn có hai tùy chọn để thiết kế các phần tử giao diện người dùng. Cổ điển xib / ngòi định dạng là tiêu chuẩn cho các ứng dụng Mac OS X và iOS, yêu cầu bạn phải thiết kế chế độ xem trang mới mỗi lần. Tuy nhiên, khi bạn đang tạo nhiều lượt xem hơn trong một ứng dụng, số lượng tệp nib có thể trở nên quá nhiều, vì vậy một cái mới bảng phân cảnh tệp giữ tất cả các chế độ xem nib của bạn trong một khung soạn thảo duy nhất. Từ đây bạn có thể loại bỏ và thêm các yếu tố và tính năng UI dễ dàng.
Ngoài ra, bạn sẽ đi qua .h và .m các tập tin trong cùng một nhóm thư mục. Đây là những tên tập tin ngắn cho tiêu đề và thực hiện mã. Các tệp này là nơi bạn viết tất cả các hàm và biến Objective-C cần thiết để ứng dụng của bạn chạy. Có thể là một ý tưởng tốt để giải thích cách Xcode hoạt động với MVC (Model, View, Trình điều khiển), đó là lý do chúng tôi cần 2 tệp cho mỗi bộ điều khiển.
Phân cấp lập trình MVC
Để hiểu cách ứng dụng hoạt động, bạn cần hiểu kiến trúc lập trình của nó. Với Mô hình, Chế độ xem, Bộ điều khiển (MVC) làm nền tảng, Xcode có thể tách tất cả các màn hình và mã giao diện khỏi logic và chức năng xử lý của bạn và thực sự không có lựa chọn nào khác để chọn. MVC lúc đầu có vẻ khó hiểu nhưng nếu bạn cố gắng hiểu nó và bắt đầu xây dựng một vài ứng dụng cơ bản, bạn sẽ yêu thích cấu trúc này.
Để dễ hiểu hơn, tôi đã trình bày từng đối tượng trong danh sách dưới đây:
- Mô hình - Giữ tất cả logic và dữ liệu cốt lõi của bạn. Điều này bao gồm các biến, kết nối với nguồn cấp dữ liệu RSS bên ngoài hoặc hình ảnh, chức năng chi tiết và số giòn. Lớp này tách rời hoàn toàn khỏi chế độ xem của bạn để bạn có thể dễ dàng thay đổi chế độ xem mà vẫn có cùng dữ liệu hoạt động.
- Lượt xem - Một màn hình hoặc kiểu hiển thị trong ứng dụng của bạn. Một danh sách bảng, trang hồ sơ, trang tóm tắt bài viết, trình phát âm thanh, trình phát video, đây là tất cả các ví dụ về lượt xem. Bạn có thể thay đổi kiểu của chúng và xóa các thành phần nhưng bạn vẫn sẽ làm việc với cùng một dữ liệu trong Mô hình của mình.
- Bộ điều khiển - Hành vi như một trung gian giữa hai người kia. Bạn kết nối các đối tượng trong chế độ xem của mình với ViewContoder để truyền thông tin đến và từ Mô hình của bạn. Vì vậy, theo cách này, có thể có một người dùng chạm vào một nút và đăng ký điều này trong mô hình của bạn. Sau đó chạy một chức năng đăng xuất và thông qua cùng một bộ điều khiển truyền thông báo “đăng xuất thành công!”.
Về cơ bản là của bạn mô hình chứa tất cả các thông tin và chức năng rằng bạn sẽ cần hiển thị ở đâu đó trên màn hình. Nhưng các mô hình không thể tương tác với màn hình, chỉ có thể xem. Lượt xem chủ yếu là tất cả các hình ảnh và nó chỉ có thể kéo dữ liệu qua ViewContoder. Các Bộ điều khiển thực sự là một cách tinh tế hơn nhiều để ẩn dữ liệu mặt sau của bạn khỏi thiết kế mặt trước. Bằng cách này, bạn có thể cải tạo thiết kế nhiều lần trong khi không mất bất kỳ chức năng nào.
Với kiến thức này, thật khó để bắt đầu xây dựng một vài ứng dụng đầu tiên của bạn. Như đã đề cập trước đây, Mục tiêu-C là ngôn ngữ lập trình cốt lõi mà bạn sẽ sử dụng để phát triển ứng dụng. Nó được xây dựng trên ngôn ngữ C với cú pháp cập nhật và một vài mô hình bổ sung. Bạn sẽ cần rất nhiều thời gian để làm quen với ngôn ngữ, nhưng đối với bài học dành cho người mới bắt đầu, tôi khuyên bạn nên sử dụng loạt bài hướng dẫn từ MobXLuts+.
Xem thiết kế với Storyboards
Bây giờ chúng ta đã xem xét các khía cạnh kỹ thuật của một ứng dụng, chúng ta nên dành một chút thời gian để thiết kế giao diện. Tôi cho rằng bạn đã giữ “Bảng phân cảnh” Tùy chọn kiểm tra khi tạo dự án, có nghĩa là bạn có thể tìm thấy một MainStoryboard_iPhone.storyboard tập tin ở đâu đó trong nhóm thư mục nằm ở bên trái của cửa sổ. Bấm vào tập tin để chọn nó và mở xem.
Một thanh bên mới sẽ xuất hiện trực tiếp bên phải của nhóm thư mục. Điều này được gọi là Đề cương tài liệu và đó là một phương pháp xem trước nhanh để kiểm tra tất cả các chế độ xem có sẵn trong bảng phân cảnh này.
Chúng tôi muốn bắt đầu bằng cách thêm chỉ một vài thành phần trang vào bộ điều khiển xem của chúng tôi. Chúng ta cần hai yếu tố khác nhau: a Thanh điều hướng và một Thanh Tab. Trước khi chúng tôi lấy chúng, hãy truy cập vào Thanh tra thuộc tính (Xem> Tiện ích> Hiển thị Trình theo dõi Thuộc tính) ở bên phải của cửa sổ, sau đó tìm kiếm Thanh trạng thái nhãn. Theo mặc định, nó được đặt thành Suy ra Sử dụng màu trạng thái chuẩn của iPhone, nhưng bạn cũng có thể chọn Đen hoặc là Màu đen mờ nếu thiết kế ứng dụng của bạn phù hợp với màu sắc tốt hơn.
Thư viện đối tượng
Nếu Tiện ích cửa sổ ở bên phải của cửa sổ không hiển thị, bạn có thể bật nó bằng cách truy cập vào Xem> Tiện ích> Hiển thị Tiện ích. Trên ngăn Tiện ích, hãy nhìn vào phía dưới để biết bảng điều khiển có tên Thư viện đối tượng. Nó có một menu thả xuống với “Các đối tượng” là mục đầu tiên của danh sách. Nếu bạn không thể tìm thấy nó, bạn có thể chọn Xem> Tiện ích> Hiển thị Thư viện Đối tượng.
Từ menu thả xuống của Thư viện đối tượng, tìm và chọn Windows & Bars. Bây giờ bấm vào Thanh điều hướng, kéo nó vào cửa sổ xem và đặt nó trực tiếp dưới màu đen Thanh trạng thái (có biểu tượng pin). Chúng tôi có thể tùy chỉnh mô tả tiêu đề của thanh bây giờ. Nhấp đúp chuột vào văn bản hiện đang đọc “Chức vụ“, và bạn sẽ thấy một nhãn có tên “Chức vụ” trên ngăn Tiện ích, bạn có thể thay đổi mô tả tiêu đề thành “Kiểm tra” từ đó. Đánh “Đi vào” chứng kiến sự thay đổi.
Một lần nữa trong bảng điều khiển Windows & Bars, cuộn xuống để tìm Thanh Tab, sau đó kéo nó vào cửa sổ xem và đặt nó ở dưới cùng của ứng dụng của bạn. Theo mặc định, 2 yếu tố này trông tuyệt vời.
Bây giờ có lẽ bạn muốn độ dốc của Thanh điều hướng khớp với thanh tab ở dưới cùng và để thực hiện việc này, bạn có thể nhấp vào Thanh điều hướng và nhìn sang bên phải tại Thuộc tính bảng điều khiển trong khung Tiện ích. Tùy chọn đầu tiên được gọi là Phong cách, được đặt thành Mặc định. Thay đổi kiểu từ mặc định thành Màu đen đục và chúng ta sẽ có một bộ màu phù hợp!
Chúng ta cũng hãy thêm một nút tab khác trong thanh dưới cùng của ứng dụng. Di chuyển con trỏ chuột đến bảng điều khiển Windows & Bars một lần nữa và cuộn xuống Mục thanh, trực tiếp bên dưới Tab Bar. Kéo cái này vào cửa sổ ứng dụng của bạn và đặt nó ở giữa 2 nút Tab Bar hiện có. Nếu bạn nhấp đúp chuột vào nút mới này, bạn có thể thấy một số tùy chọn bổ sung trong ngăn Tiện ích, bạn thay đổi mục hình ảnh và chức vụ từ đó. Ví dụ, tôi đã thay đổi tiêu đề thành “Đánh dấu trang” cho mục Tab Bar mới được thêm vào.
Vì vậy, đây là một hướng dẫn ngắn gọn về thiết kế các khung nhìn trong Xcode. Đây không phải là một quá trình khó khăn khủng khiếp, nhưng nó sẽ cần thêm một chút thời gian để làm quen với giao diện. Chơi với một vài yếu tố nữa nếu bạn cảm thấy thoải mái, bạn cũng có thể tìm đến Tài nguyên phát triển iOS của Apple để có thêm tài nguyên học tập, không bao giờ là điều xấu khi khám phá thêm!
Tiếp tục theo dõi phần II
Điều này kết thúc phần đầu tiên của chúng tôi về hướng dẫn thiết kế & phát triển ứng dụng iPhone. Trong phần tiếp theo, chúng ta sẽ tìm hiểu sâu hơn một chút về Objective-C và Ca cao cảm ứng, và cuối cùng bạn sẽ học cách xây dựng một ứng dụng iPhone hoạt động, hãy theo dõi!
Thư viện thiết kế iOS
Đối với các nhà thiết kế ngoài kia, tôi cũng hy vọng sẽ mang lại cho bạn một nguồn cảm hứng, vì vậy tôi đã bao gồm một danh sách các lượt xem ứng dụng iPhone tuyệt vời bên dưới. Danh sách có nhiều yếu tố ứng dụng truyền cảm hứng mà bạn có thể chưa bao giờ nhận thấy trước đây. Hãy chia sẻ ý tưởng, lượt xem ứng dụng hoặc câu hỏi của bạn trong phần bình luận bên dưới, cảm ơn bạn!
Race Splitter
Hài lòng từ xa
Tweetbot cho iPhone
Sậy
Foursquare
MailChimp
Niềm vui
Piictu
Bóng tối
