Przewodnik dla początkujących na temat rozwoju systemu iOS Interfejs - część I
Apple od lat jest wiodącą branżą w świecie telefonii komórkowej dzięki serii iPhone i iPad. Pomimo szumu, jaki może wywołać przy każdym oficjalnym wydaniu, posiada również dużą część udziałów w rynku platformy mobilnej i jest to prawdopodobnie powód, dla którego większość klientów chce, aby ich aplikacja istniała w sklepie z aplikacjami Apple; dzięki temu programiści mogą się uczyć i budować aplikację na iPhone'a.
Dobrą wiadomością jest to, że tworzenie aplikacji na iPhone nie jest tak trudne, jak mogłoby się wydawać, a ten post istnieje jako obszerny przewodnik, który poprowadzi Cię przez cały proces tworzenia aplikacji na iPhone'a.
Omówimy powody, etapy i narzędzia do tworzenia aplikacji, a ostatecznie zapoznasz się z prostym samouczkiem, aby zaprojektować podstawową aplikację na iPhone'a za pomocą Xcode.
Niezależnie od tego, czy uczysz się w biznesie, czy po prostu masz niesamowity pomysł na aplikację, który może uczynić cię milionerem, zacznijmy od zbudowania pierwszej aplikacji na iPhone'a!
Uwaga: Do instalacji Xcode, tworzenia aplikacji i przesyłania aplikacji potrzebny jest komputer z systemem operacyjnym Macintosh (Mac OS), nie ma możliwości, aby można to było legalnie wykonać w systemie Windows.
Dlaczego warto opracować dla Apple?
Widzę to pytanie często, więc chcę wyjaśnić, dlaczego warto zainteresować się rozwojem iPhone'a. Tak jak powiedziałem we wstępie, iPhone obecnie posiada dużą część udziałów w rynku platformy mobilnej.
Myślę, że ten powód powinien wystarczyć, aby nauczyć się rozwijać aplikację na iPhone'a, niezależnie od tego, czy rozwijasz ją dla siebie, czy dla klientów, większość ludzi prawdopodobnie ma nadzieję, że wiele osób na świecie uzyska dostęp do ich aplikacji.
Z punktu widzenia rozwoju, Apple lubi rzeczy proste, dotyczy to ich produktów i ram. iOS to system operacyjny, który zasila wszystkie urządzenia mobilne Apple. Należą do nich iPod Touch, iPhone i iPad. Więc miej na uwadze, gdy tworzysz aplikacje na iPhone'a, możesz być rozwijanie dla wszystkich innych urządzeń z systemem iOS!
Poza tym to, co sprawia, że powyższa funkcja jest jeszcze większa, to to, jak można zapisać pracę kodowania. Kiedy piszesz kod dla aplikacji na iPhone, jesteś przy użyciu tego samego języka programowania dla wszystkich urządzeń komputerowych Apple. Oznacza to, że podczas tworzenia aplikacji na iPhone'a aplikacja może być później zintegrowana z iPadem, a nawet z komputerem Mac.
Cel C to podstawowy język programowania zasilający wszystkie ich struktury. Wraz z Objective-C będziesz także rozwijać aplikację na iPhone'a za pomocą Cocoa Touch, ramy programowania sterujące interakcją użytkownika na iOS.
To tylko trochę informacji, które pomogą Ci rozpocząć tworzenie aplikacji na iPhone'a. Rozwój jest dość skomplikowanym procesem, ale zrelaksuj się, powoli. Powody są tutaj, a decyzja należy do ciebie. Niezależnie od tego, czy odpowiedź brzmi tak czy nie, zawsze możesz przejść do następnego tematu: projektowanie aplikacji na iPhone'a.
Planowanie struktury aplikacji na iPhone'a
W standardowej ideologii tworzenia aplikacji na iPhone'a będziesz chciał przejść przez kilka faz. Pierwsza faza obejmuje planowanie i szkicowanie.
Przede wszystkim musisz mieć pomysł na co zrobi Twoja aplikacja. Dlaczego ludzie chcieliby go pobrać? I jakie funkcje chcesz uwzględnić? Jest to najważniejsza faza, tak jakbyś zrobił to dobrze zaoszczędź dużo zamieszania i kłopotów w fazie kodowania.
Najgorsze, to wraca do deski kreślarskiej.
Polecam nakreślić kilka szorstkich pomysłów na kilka stron (lub widoków) twojej aplikacji. Wystarczy narysować prostokątny kształt, może 5 lub 6 kształtów na arkuszu papieru, a następnie narysować funkcje, które chcesz na każdym widoku aplikacji.
Możesz myśleć o widokach takich jak różne strony w witrynie. Każdy widok oferuje różne funkcje, takie jak formularz logowania, lista kontaktów lub tabela danych.
Poniżej skonstruowałem krótką kolekcję różnych elementów paska interfejsu użytkownika:
- Pasek stanu - Wyświetla aktualny poziom naładowania baterii urządzenia, połączenie 3G, paski odbioru, operatora telefonu i wiele więcej. Zaleca się, aby zawsze uwzględniać te elementy.
- Pasek nawigacyjny - Daje użytkownikom możliwość nawigacji między hierarchiami stron. Często zawiera przycisk po lewej stronie paska, aby umożliwić użytkownikowi powrót do poprzedniego widoku aplikacji.
- pasek narzędzi - Pojawia się na dole aplikacji iPhone'a. Będzie to zawierać kilka ikon związanych z niektórymi funkcjami, takimi jak Dzielić, Ściągnij, Kasować, itp.
- Pasek kart - Bardzo podobny do paska narzędzi, ale teraz pracujesz z kartami. Gdy użytkownik kliknie ikonę karty, zostanie automatycznie podświetlona i wyświetli błyszczący stan najechania. Ten pasek służy do przełączania między widokami zamiast oferowania bezpośredniej funkcjonalności.
Ta lista zawiera tylko paski narzędzi, które można znaleźć w większości aplikacji. Istnieje kilka innych widoków i stylów do rozważenia, które można znaleźć w Wytycznych dotyczących korzystania z elementów interfejsu użytkownika systemu iOS firmy Apple. Gorąco polecam odnieść się do tej dokumentacji, jeśli masz wątpliwości co do elementów interfejsu użytkownika iPhone'a.
W interesie czasu nie będę opisywał każdego elementu interfejsu użytkownika. Jest zbyt wiele elementów do rozważenia, a nie wykorzystasz ich wszystkich w jednej aplikacji. Ale kiedy szkicujesz swoje poglądy, możesz czerp inspirację z powyższych wskazówek i innych aplikacji na iPhone'a korzystałeś z nich.
Projektowanie makiet Photoshop
Zakładam, że większość z was pracuje całkiem wygodnie z Adobe Photoshop. Jest to premierowe oprogramowanie do tworzenia grafiki na stronie internetowej, banerach, logo i makietach mobilnych. Projektowanie grafiki dla Internetu jest dość prostym procesem, ale jest nieco bardziej skomplikowane, jeśli chodzi o projektowanie aplikacji na iPhone'a.
Jeśli chcesz zbudować aplikację, którą naprawdę powinieneś od samego początku twórz makietowe projekty idealne dla pikseli.
Na początek powinniśmy omówić ustawienia Photoshopa. Odkąd projektujemy dla iPhone'a, musimy wziąć pod uwagę 2 różne style projektowania. The standardowy wyświetlacz iPhone'a to 320 x 480 pikseli. Jednak iPhone 4 zawiera wyświetlacz siatkówki, który podwaja ilość pikseli w tym samym rozmiarze ekranu. Tak powinieneś podwoić rozdzielczość do 640 x 960 pikseli i zaprojektuj układy do tego standardu.
Oznacza to, że będziesz także musiał utwórz 2 zestawy ikon dla twoich makiet. Pierwotnie byłyby to ikony ustawiona na 163ppi ale musisz dołącz ikony z 326ppi dla iPhone 4. Ikony są tradycyjnie oznaczone @ 2x na końcu nazwy pliku, na przykład “[email protected]“.
Teraz zoptymalizuj nasze nowe ustawienia dokumentów. Najpierw musimy edytować niektóre preferencje, więc dostęp do Photoshopa> Edycja> Preferencje> Przewodniki, siatka i plasterki. Będziemy ustawianie naszej linii siatki co 20 pikseli z podziałami na 2. Podczas projektowania wyświetlacza siatkówki Linia 2px wyświetli 1 punkt na ekranie. Jest to ważna zasada, o której należy pamiętać przy zmniejszaniu liczby aplikacji.
Łatwiej jest budować moje projekty z wyższą rozdzielczością, a następnie je skalować, ale możesz spróbuj obu metod i zobacz, co najbardziej ci odpowiada. Używamy 640 x 960 pikseli przy 326ppi - zapisz to jako niestandardowe ustawienie, jeśli uważasz, że będziesz go często używać.
Budowanie z elementami szablonu
Teraz możesz użyć Photoshopa, aby stworzyć układ idealny dla pikseli, ale okazuje się to bardzo męczącą i żmudną pracą.
To ogromny plik zawierający zbyt wiele elementów. Aby ułatwić sobie pracę, możesz nacisnąć v, aby aktywować Narzędzie do przesuwania i kliknij “Automatyczny wybór” na pasku opcji, a następnie wybierz “Warstwa” zamiast “Grupa”. Dzięki ustawieniom możesz kliknąć dowolny element, a Photoshop przeniesie Cię do odpowiedniej warstwy!
Zapraszam do zabawy z makietą, lub możesz nawet utworzyć prototyp swojej aplikacji z makiety. W zależności od twojej aplikacji, możesz dodać wiele funkcji w obszarze rdzenia, z których wiele można znaleźć w tym pliku PSD. Można również przejść do warstw tych elementów i edytować czcionki, kolory gradientu, a także inne style projektowania. Właśnie upewnij się, że niczego nie zmieniasz ponieważ wszystkie paski i elementy interfejsu użytkownika mają domyślne rozmiary standardowe.
Opracowywanie aplikacji w Xcode
Narzędzie programistyczne dla programów iOS i Mac OS X nosi nazwę Xcode. Jeśli korzystasz z OS X Lion, możesz znaleźć Xcode i wszystkie odpowiednie pakiety za darmo w Mac App Store.
Po zakończeniu instalacji uruchom Xcode i powinien pojawić się ekran powitalny. Z tego miejsca możesz załadować starszy projekt lub wybrać nowy. Na razie musisz kliknąć “Utwórz nowy projekt Xcode“, następnie w oknie szablonu pojawi się kilka opcji. W obszarze iOS> Aplikacja kliknij “Aplikacja Single View” i uderz “Kolejny”. Możesz nadaj nowej aplikacji nazwę, Jak na przykład Test (najlepiej bez spacji), a następnie na Identyfikator firmy, wpisz dowolne słowo, takie jak moja firma, i wreszcie wybierz katalog i naciśnij “Zapisać”.
Xcode zbuduje katalog plików i wyśle do nowego okna do pracy. Powinieneś zobaczyć wiele opcji na liście, ale folder, którego nazwa pochodzi od twojej aplikacji jest głównym celem.
Dzięki Xcode masz dwie opcje projektowania elementów czołowych. Klasyka xib / stalówka Format jest standardem dla aplikacji Mac OS X i iOS, co wymaga zaprojektowania nowego widoku strony za każdym razem. Jednak ponieważ tworzysz więcej widoków w jednej aplikacji, ilość plików nib może stać się zbyt przytłaczająca, więc nowe storyboard plik przechowuje wszystkie widoki końcówek w jednym okienku edytora. Stąd możesz łatwo usuwać i dodawać elementy i funkcje interfejsu użytkownika.
Dodatkowo natkniesz się .h i .m pliki w tej samej grupie folderów. Są to krótkie nazwy plików dla nagłówek i realizacja kod. Te pliki służą do pisania wszystkich funkcji i zmiennych Objective-C wymaganych do uruchomienia aplikacji. Dobrym pomysłem może być wyjaśnienie, jak działa Xcode MVC (model, widok, kontroler), z tego powodu potrzebujemy 2 plików dla każdego kontrolera.
Hierarchia programowania MVC
Aby zrozumieć, jak działa aplikacja, musisz zrozumieć jej architekturę programowania. Z Model, widok, kontroler (MVC) jako fundament, Xcode może oddzielić wszystkie ekrany i kod interfejsu od funkcji logicznych i przetwarzania, a tak naprawdę nie ma innej opcji do wyboru. MVC może wydawać się początkowo mylący, ale jeśli spróbujesz go zrozumieć i zaczniesz budować kilka podstawowych aplikacji, pokochasz tę strukturę.
Aby ułatwić zrozumienie, przedstawiłem każdy obiekt na liście poniżej:
- Model - Zawiera wszystkie dane logiczne i podstawowe. Obejmuje to zmienne, połączenia z zewnętrznymi kanałami RSS lub obrazami, szczegółowe funkcje i przetwarzanie liczb. Ta warstwa jest całkowicie odłączona od Twoich widoków, dzięki czemu możesz łatwo zmieniać widoki i nadal korzystać z tych samych danych.
- Widok - Ekran lub styl wyświetlania w aplikacji. Lista tabel, strona profilu, strona podsumowania artykułu, odtwarzacz audio, odtwarzacz wideo, to wszystkie przykłady widoków. Możesz zmienić ich style i usunąć elementy, ale nadal będziesz pracować z tymi samymi danymi w swoim modelu.
- Kontroler - Działa jako pośrednik między pozostałymi dwoma. Łączysz obiekty w swoim widoku z kontrolerem ViewController, który przekazuje informacje do i z Twojego modelu. W ten sposób możliwe jest, aby użytkownik dotknął przycisku i zarejestrował to w swoim modelu. Następnie uruchom funkcję wylogowania i przez ten sam kontroler przekaż wiadomość “pomyślnie wylogowany!”.
Więc w zasadzie twoja model zawiera wszystkie informacje i funkcje że musisz wyświetlić gdzieś na ekranie. Ale modele nie mogą wchodzić w interakcje z ekranem, tylko widoki mogą. Widoki są w większości obrazami i mogą pobierać dane tylko za pomocą ViewController. The Kontroler jest w rzeczywistości znacznie bardziej wyrafinowanym sposobem ukrywania danych z tylnego panelu przed projektem. W ten sposób możesz kilkakrotnie odnowić projekt, nie tracąc przy tym żadnej funkcjonalności.
Dzięki tej wiedzy nie powinno być trudne rozpoczęcie budowy pierwszych kilku aplikacji. Jak wcześniej wspomniano, Cel C to podstawowy język programowania, którego będziesz używać do tworzenia aplikacji. Jest zbudowany na języku C ze zaktualizowaną składnią i kilkoma dodatkowymi paradygmatami. Będziesz potrzebował dużo czasu, aby poznać język, ale na lekcję dla początkujących polecam serię samouczków z Mobiletuts+.
Widok projektu z serii ujęć
Teraz, gdy przyjrzeliśmy się technicznym aspektom aplikacji, powinniśmy poświęcić trochę czasu na zaprojektowanie interfejsu. Zakładam, że zachowałeś “Storyboard” opcja sprawdzane przy tworzeniu projektu, co oznacza, że możesz znaleźć pojedynczy MainStoryboard_iPhone.storyboard plik gdzieś w grupie folderów znajdującej się po lewej stronie okna. Kliknij plik, aby go wybrać i otworzyć widok.
Nowy pasek boczny powinien pojawić się bezpośrednio po prawej stronie grupy folderów. To się nazywa Zarys dokumentu i jest to rodzaj szybkiej metody podglądu do sprawdzania wszystkich dostępnych widoków w tej serii ujęć.
Chcemy zacząć od dodania tylko kilku elementów strony do naszego kontrolera widoku. Potrzebujemy dwóch różnych elementów: a Pasek nawigacyjny i a Pasek kart. Zanim je złapiemy, dostęp do Inspektor atrybutów (Widok> Narzędzia> Pokaż inspektora atrybutów) po prawej stronie okna, a następnie wyszukaj Pasek stanu etykieta. Domyślnie jest ustawiony na Wnioskowane który używa standardowego koloru statusu iPhone'a, ale możesz także wybrać czarny lub Półprzezroczysty czarny jeśli projekt Twojej aplikacji lepiej pasuje do koloru.
Biblioteka obiektów
Jeśli Narzędzia okienko po prawej stronie okna nie jest widoczne, możesz go włączyć, wybierając Widok> Narzędzia> Pokaż narzędzia. W panelu Narzędzia spójrz na dół, aby zobaczyć panel o nazwie Biblioteka obiektów. Ma menu rozwijane z “Obiekty” jako pierwszy element listy. Jeśli nie możesz go znaleźć, możesz wybrać Widok> Narzędzia> Pokaż bibliotekę obiektów.
Z menu rozwijanego biblioteki obiektów znajdź i wybierz Windows i bary. Teraz kliknij Pasek nawigacyjny, przeciągnij go do okna widoku i umieść bezpośrednio pod czernią Pasek stanu (z ikoną baterii). Możemy teraz dostosować opis tytułu paska. Kliknij dwukrotnie tekst, który aktualnie czyta “Tytuł“, i zobaczysz etykietę o nazwie “Tytuł” w panelu Narzędzia, które można zmienić opis tytułu na “Test” stamtąd. Trafienie “Wchodzić” być świadkiem zmiany.
Ponownie w panelu Windows & Bars przewiń w dół, aby znaleźć Pasek kart, następnie przeciągnij go do okna widoku i umieść na samym dole aplikacji. Domyślnie te 2 elementy wyglądają fantastycznie.
Teraz może chcesz, aby gradient paska nawigacji pasował do paska kart na dole, a żeby to zrobić, możesz kliknąć pasek nawigacji i spojrzeć w prawo przy Atrybuty w panelu Narzędzia. Pierwsza opcja nazywa się Styl, który jest ustawiony na Domyślny. Zmień styl z Domyślny na Czarny nieprzezroczysty i będziemy mieli pasujący zestaw kolorów!
Dodajmy również inny przycisk karty na dolnym pasku aplikacji. Przesuń kursor myszy ponownie do panelu Windows & Bars i przewiń w dół do Element paska zakładek, bezpośrednio pod zakładką Tab. Przeciągnij to do okna aplikacji i umieść je pośrodku 2 istniejących przycisków paska kart. Jeśli klikniesz dwukrotnie ten nowy przycisk, zobaczysz dodatkowe opcje w panelu Narzędzia, zmienisz element obraz i tytuł stamtąd. Na przykład zmieniłem tytuł na “Zakładka” dla nowo dodanego elementu paska kart.
Oto krótki poradnik na temat projektowania widoków w Xcode. To nie jest strasznie trudny proces, ale przyzwyczajenie się do interfejsu będzie wymagało nieco więcej czasu. Zagraj z kilkoma dodatkowymi elementami, jeśli czujesz się komfortowo, możesz także udać się do zasobów programistycznych iOS firmy Apple, aby uzyskać więcej zasobów edukacyjnych, odkrycie więcej!
Bądź na bieżąco z częścią II
To kończy naszą pierwszą część przewodnika na temat projektowania i rozwoju aplikacji na iPhone'a. W następnej części zagłębimy się nieco w Objective-C i Cocoa Touch, a ostatecznie nauczysz się budować działającą aplikację na iPhone'a, bądź na bieżąco!
Galeria projektów iOS
Dla projektantów mam też nadzieję, że przyniosę wam inspirację, więc poniżej przedstawiłem listę niesamowitych widoków aplikacji na iPhone'a. Lista zawiera wiele inspirujących elementów aplikacji, których prawdopodobnie nigdy wcześniej nie zauważyłeś. Dziękuję, dzieląc się swoimi pomysłami, widokami aplikacji lub pytaniami w sekcji komentarzy poniżej!
Rozgrywka wyścigowa
Pilot satysfakcji
Tweetbot dla iPhone'a
Reeder
Foursquare
MailChimp
Joystiq
Piictu
Ciemność
