Panduan Permulaan untuk Pembangunan IOS Antara Muka - Bahagian I
Apple telah menjadi industri terkemuka di dunia mudah alih selama bertahun-tahun dengan siri iPhone dan iPad. Walaupun gembar-gembur itu boleh dibuat dengan setiap siaran rasmi, ia juga memegang sebahagian besar saham pasaran dalam platform mudah alih, dan ini mungkin sebab kebanyakan pelanggan akan mahu aplikasi mereka wujud di gedung apl Apple; dengan itu menjadi sebab bagi pemaju untuk belajar dan membina aplikasi iPhone.
Berita baiknya adalah, perkembangan aplikasi iPhone tidak begitu keras seperti yang anda fikirkan, dan pos ini wujud sebagai panduan komprehensif untuk memandu anda melalui proses lengkap membina aplikasi untuk iPhone.
Kami akan membincangkan sebab, fasa, dan alat untuk membangunkan aplikasinya, dan pada akhirnya anda akan mengikuti tutorial mudah untuk mereka bentuk aplikasi asas iPhone menggunakan Xcode.
Jadi sama ada anda belajar untuk perniagaan atau anda hanya mempunyai idea aplikasi yang menakjubkan yang mungkin menjadikan anda seorang jutawan, mari kita mulakan untuk membina aplikasi iPhone pertama anda!
Nota: Anda memerlukan komputer dengan Sistem Operasi Macintosh (Mac OS) untuk pemasangan Xcode, pembangunan aplikasi dan penyerahan apl, tidak ada cara anda boleh melakukannya pada Windows secara sah.
Mengapa Dibangunkan untuk Apple?
Saya melihat soalan ini sering ditanya supaya saya ingin menjelaskan mengapa anda harus berminat dengan pembangunan iPhone. Sama seperti yang saya nyatakan dalam pengenalan, iPhone kini memegang sebahagian besar saham pasaran dalam platform mudah alih.
Saya fikir sebab ini sepatutnya cukup untuk anda belajar mengembangkan aplikasi iPhone sebagai sama ada anda membangun untuk diri sendiri atau pelanggan, kebanyakan orang mungkin berharap aplikasi mereka boleh diakses oleh ramai orang di dunia.
Dari sudut pandangan pembangunan, Apple suka perkara mudah, dan ini terpakai kepada produk dan rangka kerja mereka. iOS adalah sistem pengendalian yang menguasai semua peranti mudah alih Apple. Ini termasuk iPod Touch, iPhone dan iPad. Jadi perlu diingat apabila anda sedang membangunkan aplikasi untuk iPhone, anda boleh membangunkan untuk semua peranti lain dengan IOS!
Selain itu, apa yang membuat ciri di atas lebih besar adalah berapa banyak kerja pengekodan boleh disimpan. Apabila anda menulis kod untuk aplikasi iPhone anda menggunakan bahasa pengaturcaraan yang sama untuk semua peranti pengkomputeran Apple. Itu bererti apabila anda membangunkan aplikasi iPhone, aplikasinya kemudian boleh diintegrasikan ke dalam iPad dan juga Mac.
Objektif-C adalah bahasa pengaturcaraan teras yang memberi kuasa kepada semua rangka kerja mereka. Bersama Objektif-C, anda juga akan membangunkan aplikasi iPhone dengan Cocoa Touch, rangka kerja pengaturcaraan interaksi pengguna pada IOS.
Ini hanyalah sedikit maklumat untuk membolehkan anda memulakan pembangunan aplikasi iPhone. Perkembangannya agak rumit tetapi rileks, ambil perlahan-lahan. Jadi alasannya ada di sini, dan keputusan itu adalah milik anda. Sama ada jawapannya ya atau tidak, anda sentiasa boleh melompat terus ke topik seterusnya: merancang aplikasi untuk iPhone.
Merancang Struktur Aplikasi iPhone anda
Dalam ideologi standard mewujudkan aplikasi iPhone yang anda mahu melalui beberapa fasa. Fasa pertama termasuk merancang dan membuat lakaran.
Pertama sekali anda perlu mempunyai idea apa aplikasi anda akan lakukan. Kenapa orang mahu memuat turunnya? Dan ciri-ciri yang ingin anda sertakan? Ini fasa paling penting seolah-olah anda melakukannya dengan betul, anda akan menjimatkan banyak kekeliruan dan masalah dalam fasa pengekodan.
Terburuk, ia akan kembali kepada papan lukisan.
Saya cadangkan lakarkan beberapa idea kasar untuk beberapa halaman (atau pandangan) permohonan anda. Cubalah bentuk segi empat tepat, mungkin 5 atau 6 bentuk pada sekeping kertas, kemudian lukis ciri yang anda inginkan pada setiap pandangan apl anda.
Anda boleh memikirkan pandangan seperti halaman yang berbeza dalam laman web. Setiap pandangan akan menawarkan fungsi yang berbeza seperti borang login, senarai kenalan, atau jadual data.
Di bawah ini saya telah membina koleksi ringkas elemen bar UI yang berbeza:
- Bar status - Memaparkan tahap bateri semasa peranti, sambungan 3G, bar penerimaan, pembawa telefon, dan banyak lagi. Ia disyorkan bahawa anda sentiasa memasukkan unsur-unsur ini.
- Bar navigasi - Memberi pilihan pengguna anda untuk menavigasi antara hierarki halaman. Ini sering menyertakan butang di sebelah kiri bar untuk membolehkan pengguna kembali ke paparan apl sebelumnya.
- Toolbar - Muncul di bahagian bawah aplikasi iPhone. Ini akan memegang beberapa ikon yang terikat kepada beberapa fungsi seperti Kongsi, Muat turun, Padam, dan lain-lain.
- Bar Tab - Sangat serupa dengan bar alat, kecuali sekarang anda bekerja dengan tab. Apabila pengguna mengklik pada ikon tab, ia akan diserlahkan secara automatik, dan ia akan memaparkan keadaan hover berkilat. Bar ini digunakan untuk menukar antara pandangan dan bukannya menawarkan fungsi langsung.
Senarai ini hanya mengandungi bar alat yang dapat anda temukan dalam kebanyakan aplikasi. Terdapat beberapa pandangan dan gaya lain untuk dipertimbangkan, yang boleh anda dapati dalam Garis Panduan Penggunaan Elemen UI iOS Apple. Saya sangat menyarankan untuk merujuk kepada dokumentasi ini apabila anda mempunyai keraguan tentang elemen UI iPhone.
Untuk kepentingan masa saya tidak akan menggambarkan setiap elemen UI. Terdapat terlalu banyak elemen untuk dipertimbangkan, dan anda tidak akan menggunakan semua mereka dalam apl tunggal anda. Tetapi semasa anda melukis pandangan anda, anda boleh dapatkan inspirasi dari garis panduan yang dicadangkan di atas, dan aplikasi iPhone lain anda telah menikmati menggunakannya.
Merancang Photoshop Mockups
Saya mengandaikan sebahagian besar daripada anda agak selesa bekerja dengan Adobe Photoshop. Ia adalah perisian perdana untuk mencipta grafik untuk laman web, sepanduk, logo, dan mockups mudah alih. Merancang grafik untuk web adalah proses yang agak mudah, tetapi ia agak rumit apabila ia datang kepada reka bentuk aplikasi iPhone.
Jika anda ingin membina aplikasi yang anda patut lakukan membuat reka bentuk mockup pixel-sempurna dari awal.
Untuk bermula, kita harus membincangkan tetapan Photoshop. Oleh kerana kami merancang untuk iPhone, kami perlu mempertimbangkan 2 gaya reka bentuk yang berbeza. The Paparan iPhone biasa ialah 320 x 480 piksel. Walau bagaimanapun iPhone 4 termasuk a paparan retina yang menggandakan jumlah piksel dalam saiz skrin yang sama. Jadi anda perlu dua kali ganda resolusi hingga 640 x 960 piksel dan reka bentuk susun atur anda kepada piawaian ini.
Ini bermakna anda juga perlu buat 2 set ikon untuk mockups anda. Asalnya ikon akan menjadi ditetapkan ke 163ppi tetapi anda perlu termasuk ikon dengan 326ppi untuk iPhone 4. Ikon ditandakan secara tradisinya @ 2x pada akhir nama fail mereka, seperti “[email protected]“.
Sekarang mari kita mengoptimumkan tetapan dokumen baru kami. Mula-mula kita perlu mengedit sesetengah pilihan, jadi akses ke Photoshop> Edit> Keutamaan> Panduan, Grid dan Rempah. Kami akan menjadi menetapkan Gridline kami setiap 20px dengan subdivisi pada 2. Apabila mereka bentuk untuk paparan retina Baris 2px akan memaparkan 1 mata pada skrin. Ini adalah peraturan penting yang perlu anda ingat untuk mengetepikan apl anda.
Saya cenderung untuk mencari lebih mudah untuk membina reka bentuk saya dengan resolusi yang lebih tinggi kemudian skala mereka ke bawah, tetapi anda boleh cuba kedua-dua kaedah dan lihat apa yang sesuai dengan anda. Kami menggunakan 640 x 960 piksel pada 326ppi - simpan ini sebagai pratetap tersuai jika anda fikir anda akan menggunakannya dengan kerap.
Membina dengan Elemen Templat
Sekarang anda boleh menggunakan Photoshop untuk membuat susun atur pixel-sempurna pada anda sendiri, tetapi ini terbukti menjadi kerja yang sangat meletihkan dan membosankan.
Ini adalah fail besar dengan terlalu banyak elemen. Untuk membuat perkara lebih mudah anda boleh menekan v mengaktifkan Pindahkan Alat dan klik pada “Pilih Auto” pada bar pilihannya, kemudian pilih “Lapisan” bukannya “Kumpulan”. Dengan tetapan ini, anda boleh mengklik mana-mana unsur dan Photoshop akan membawa anda ke lapisan yang sepadan!
Rasa bebas bermain dengan mockup, atau anda juga boleh membuat prototaip permohonan anda dari mockup. Bergantung kepada aplikasi anda, anda boleh menyertakan ciri-ciri dalam bidang teras, yang mana banyak yang anda dapati dalam fail JPA ini. Ia juga mungkin untuk pergi ke lapisan elemen ini dan mengedit fon, warna kecerunan, dan gaya reka bentuk lain juga. Hanya pastikan anda tidak mengubah saiz apa-apa kerana semua bar dan elemen UI ditetapkan ke saiz piawai lalai.
Membangunkan Aplikasi dalam Xcode
Alat pemaju untuk pengaturcaraan IOS dan Mac OS X dinamakan sebagai Xcode. Jika anda menjalankan OS X Lion, anda boleh mendapatkan Xcode dan semua pakej yang dikenakan secara percuma di dalam Mac App Store.
Selepas pemasangan selesai, lancarkan Xcode dan skrin penyambungannya akan muncul. Dari sini anda boleh memuatkan projek lama atau memilih untuk membuat yang baru. Buat masa ini anda perlu klik “Buat projek Xcode baharu“, maka tetingkap templat akan muncul dengan beberapa pilihan. Di bawah iOS> Aplikasi, klik pada “Permohonan Paparan Tunggal” dan tekan “Seterusnya”. Awak boleh beri nama aplikasi baru, seperti Uji (sebaiknya tiada ruang), kemudian pada Pengenal pasti Syarikat, taip dalam apa-apa perkataan seperti syarikat saya, dan akhirnya memilih direktori dan tekan “Simpan”.
Xcode akan membina direktori fail dan menghantar anda ke dalam tetingkap baru untuk berfungsi. Anda harus melihat banyak pilihan fail yang disenaraikan, tetapi folder yang dinamakan selepas permohonan anda adalah tumpuan utama.
Dengan Xcode anda mempunyai dua pilihan untuk mereka bentuk elemen depan. Klasik xib / nib format adalah standard untuk aplikasi Mac OS X dan iOS, yang memerlukan anda untuk mereka bentuk pandangan halaman baru setiap kali. Walau bagaimanapun, semasa anda membuat lebih banyak pandangan dalam satu aplikasi, jumlah fail nib boleh menjadi terlalu besar, jadi yang baru papan cerita fail memegang semua pandangan nib anda dalam anak tetingkap editor tunggal. Dari sini, anda boleh mengeluarkan dan menambah elemen dan ciri UI dengan mudah.
Di samping itu anda akan mencari .h dan .m fail dalam kumpulan folder yang sama. Ini adalah nama fail pendek untuk kepala dan pelaksanaannya kod. Fail-fail ini adalah di mana anda menulis semua fungsi Objektif-C dan pembolehubah yang diperlukan untuk aplikasi anda dijalankan. Mungkin idea yang baik untuk menerangkan bagaimana Xcode berfungsi dengan MVC (Model, Lihat, Pengawal), yang mana sebabnya kita memerlukan 2 fail untuk setiap pengawal.
Hierarki Pengaturcaraan MVC
Untuk memahami bagaimana aplikasinya berfungsi, anda perlu memahami senibina pengaturcaraannya. Dengan Model, View, Controller (MVC) sebagai asas, Xcode boleh memisahkan semua paparan dan kod antara muka anda dari fungsi logik dan pemprosesan anda, dan tidak ada pilihan lain untuk dipilih. MVC mungkin kelihatan mengelirukan pada mulanya tetapi jika anda cuba memahami dan mula membina beberapa aplikasi asas anda akan menyukai strukturnya.
Untuk memudahkannya difahami, saya telah membentangkan setiap objek dalam senarai di bawah:
- Model - Memegang semua data logik dan teras anda. Ini termasuk pemboleh ubah, sambungan ke suapan atau imej RSS luaran, fungsi terperinci, dan nombor crunching. Lapisan ini sepenuhnya terpisah dari pandangan anda supaya anda dapat menukar pandangan dengan mudah dan masih mempunyai data yang sama yang berfungsi.
- Lihat - Gaya skrin atau paparan dalam aplikasi anda. Senarai jadual, halaman profil, halaman ringkasan artikel, pemain audio, pemain video, semuanya adalah contoh pandangan. Anda boleh menukar gaya mereka dan mengeluarkan elemen tetapi anda masih akan bekerja dengan data yang sama dalam Model anda.
- Pengawal - Bertindak sebagai perantara antara dua yang lain. Anda menyambung objek dalam pandangan anda kepada ViewController yang melepasi maklumat tersebut ke dan dari Model anda. Jadi dengan cara ini, mungkin mempunyai pengguna mengetuk butang dan mendaftarkannya dalam model anda. Kemudian jalankan fungsi log keluar dan melalui pengawal yang sama lulus mesej “berjaya log keluar!”.
Jadi pada asasnya anda model memegang semua maklumat dan fungsi bahawa anda perlu memaparkan di mana-mana di skrin. Tetapi model tidak boleh berinteraksi dengan skrin, hanya pandangan boleh. Pandangan kebanyakannya semua visual, dan ia hanya boleh menarik data melalui ViewController. The Pengawal sebenarnya adalah cara yang lebih baik untuk menyembunyikan data belakang anda dari reka bentuk akhir depan. Dengan cara ini, anda boleh mengubah suai reka bentuk beberapa kali sementara tidak kehilangan apa-apa fungsi.
Dengan pengetahuan ini ia tidak sepatutnya sukar untuk mula membina beberapa aplikasi pertama anda. Seperti yang dinyatakan sebelum ini, Objektif-C adalah bahasa pengaturcaraan teras yang anda akan gunakan untuk membangunkan aplikasinya. Ia dibina di atas bahasa C dengan sintaks terkini dan beberapa paradigma tambahan. Anda akan memerlukan banyak masa untuk mengenali bahasa tersebut, tetapi untuk pelajaran pemula, saya mencadangkan siri tutorial dari Mobiletuts+.
Reka Bentuk dengan Papan Tulis
Sekarang kita telah melihat aspek teknikal sesuatu aplikasi, kita perlu menghabiskan sedikit masa untuk merancang antara muka. Saya mengandaikan bahawa anda telah menyimpannya “Papan cerita” pilihan diperiksa semasa membuat projek, yang bermaksud anda boleh mencari satu MainStoryboard_iPhone.storyboard fail di dalam kumpulan folder yang terletak di sebelah kiri tetingkap. Klik pada fail untuk memilihnya dan buka pandangan.
Sidebar baru harus dipaparkan terus ke kanan kumpulan folder. Ini dipanggil Garis Besar Dokumen dan ia adalah sejenis kaedah pratonton cepat untuk memeriksa semua pandangan yang tersedia dalam papan cerita ini.
Kami mahu bermula dengan menambah beberapa elemen halaman ke dalam pengawal pandangan kami. Kita memerlukan dua elemen berbeza: a Bar navigasi dan a Bar Tab. Sebelum kita ambil mereka, akses kepada Inspektor Atribut (Lihat> Utiliti> Tunjukkan Penyiasat Atribut) di sebelah kanan tetingkap, kemudian cari Bar status label. Secara lalai ia ditetapkan kepada Disimpulkan yang menggunakan warna status iPhone standard, tetapi anda juga boleh memilih Hitam atau Lut hitam jika reka bentuk apl anda lebih sesuai warna.
Perpustakaan Objek
Sekiranya Utiliti pane di sebelah kanan tetingkap tidak kelihatan, anda boleh mendayakannya dengan akses kepada View> Utilities> Show Utilities. Pada anak tetingkap Utiliti, lihat bahagian bawah untuk panel dipanggil Perpustakaan objek. Ia mendapat menu lungsur dengan “Objek” sebagai item pertama senarai. Sekiranya anda tidak dapat mencarinya, anda boleh memilih Lihat> Utiliti> Paparkan Perpustakaan Objek.
Dari menu drop-down Perpustakaan objek, cari dan pilih Windows & Bar. Sekarang klik pada Bar navigasi, tarik ke dalam tetingkap paparan dan letakkannya terus di bawah hitam Bar status (dengan ikon bateri). Kita boleh menyesuaikan penerangan tajuk bar sekarang. Klik dua kali pada teks yang sedang dibaca “Tajuk“, dan anda akan melihat label bernama “Tajuk” pada anak tetingkap Utiliti, yang mana anda boleh menukar penerangan tajuk ke “Uji” dari sana. Hit “Masukkan” untuk menyaksikan perubahan itu.
Sekali lagi dalam panel Windows & Bar, tatal ke bawah untuk mencari Bar Tab, kemudian seret ke tetingkap paparan dan letakkan di bahagian paling bawah aplikasi anda. Secara lalai unsur-unsur 2 kelihatan hebat.
Kini mungkin anda mahu kecerunan Navigation Bar untuk menyesuaikan bar tab di bahagian bawah, dan untuk melakukan ini, anda boleh klik pada Bar Navigasi dan melihat ke kanan di Atribut panel dalam panel utiliti. Pilihan pertama dipanggil Gaya, yang ditetapkan kepada Lalai. Tukar Gaya dari Lalai ke Black Opaque dan kami akan mempunyai set warna yang sepadan!
Mari juga tambahkan butang tab lain di bar bawah apl. Alihkan kursor tetikus anda ke panel Windows & Bar lagi dan tatal ke bawah Bar Bar Item, langsung di bawah Tab Bar. Seret ini ke dalam tetingkap apl anda dan letakkan di tengah-tengah 2 butang Bar Tab sedia ada. Jika anda mengklik dua kali pada butang baru ini, anda dapat melihat beberapa pilihan tambahan dalam panel Utilities, anda menukar item itu gambar dan tajuk dari sana. Sebagai contoh, saya telah menukar tajuk ke “Bookmark” untuk item Tab Bar yang baru ditambah.
Jadi ini adalah tutorial ringkas mengenai reka bentuk pandangan dalam Xcode. Ini bukan proses yang sangat sukar, tetapi ia memerlukan sedikit masa untuk membiasakan diri dengan muka. Main dengan beberapa elemen lagi jika anda merasa selesa, anda juga boleh menuju ke Sumber Pembangunan IOS Apple untuk mendapatkan sumber pembelajaran yang lebih banyak, tidak ada perkara yang buruk untuk mengetahui lebih lanjut!
Tinggal untuk Bahagian II
Ini menyimpulkan bahagian pertama panduan untuk reka bentuk & pembangunan aplikasi iPhone. Di bahagian seterusnya, kami akan menyelidiki sedikit lebih mendalam ke Objektif-C dan Sentuhan Koko, dan akhirnya anda akan belajar untuk membina aplikasi iPhone berfungsi, menantikan!
Galeri Rekabentuk IOS
Untuk pereka di luar sana, saya juga berharap dapat membawa anda inspirasi, jadi saya telah menyertakan senarai pandangan aplikasi iPhone hebat di bawah. Senarai ini mempunyai pelbagai elemen aplikasi yang memberi inspirasi yang anda mungkin tidak pernah perhatikan sebelum ini. Jangan ragu untuk berkongsi idea, pandangan apl atau soalan anda di bahagian komen di bawah, terima kasih!
Race Splitter
Kepuasan Jauh
Tweetbot untuk iPhone
Reeder
Foursquare
MailChimp
Joystiq
Piictu
Kegelapan
