İlk iOS Uygulamanızı oluşturma

Bu makale size kendi iOS Tap Counter Uygulamanızı nasıl oluşturacağınızı öğretecektir. Bu hemen hemen musluk düğmesine bastığınız zamanı sayan ve sıfırladığınızda sıfırdan saymaya başlayan gerçekten basit bir uygulamadır. İşte ne yaratacağınızın basit bir önizlemesi.

Devam etmeden önce, bu eğitimin başlangıç ​​olarak birçok kavramı kontrol edeceğini bildirmek istiyorum. Henüz burada çok çılgın bir şey yok, ama harika bir başlangıç.

Kurulum

  1. Öncelikle, Xcode'un indirildiğinden emin olmanız gerekir. En son XCode'a da sahip olduğunuzdan emin olun. App Store'a danışın ve güncelleme gerekmediğinden emin olun.
  2. Bu eğitimin sonunda Xcode 8.3.2'yi Swift 3 ile kullanıyorum. Bu makaleyi gördüğünüzde bir şey değişti veya çalışmıyorsa lütfen bana bildirin, böylece makaleyi buna göre değiştirebilirim.
  3. İlk projeni yarat. Xcode'ı çalıştırın ve açılış ekranında olmalısınız.
  4. Yeni bir Xcode Projesi oluştur'a tıklayın.
  5. Bu çok basit bir uygulama olduğu için View View'a tıklayın. Oyunlar gibi diğer seçenekler de var - peki oyun oluşturabilir, iMessage Uygulaması - iMessage için bir uygulama oluşturun. Bu bir klavye olabilir ve klavyede oyun olabilir ve Sayfa tabanlı Uygulama - iBooks'a benzer kaydırma ve daha az etkileşim türleri.
  6. Sonra İleri'ye tıklayın ve uygulamaya Ürün Adında bir Ad verin. Takım ve Organizasyon Adı, Organizasyon Tanımlayıcı'yı seçin. Dilin hızlı olduğundan emin olun. Cihazlar için ne istediğinizi seçebilirsiniz. Hem iPad hem de iPhone için Universal'ı kullanacağım. Ancak yalnızca iPad için iPad veya yalnızca iPhone için iPhone kullanabilirsiniz.
  7. Oradan, Xcode bu projeyi kaydetmek için bir yer seçmenizi ister. İstediğiniz yere kaydetmeyi seçebilirsiniz.
  8. Bitirdikten sonra oldukça boş bir projeniz olmalı. Ama yakında düzelteceğiz.
  9. Main.storyboard tıklayın
  10. Bu, Arayüz Oluşturucunuz. Bu, ön çalışmaların çoğunu yaptığınız yer. Sen tasarımı yap ve buraya bak.
  11. Sağ alt köşede, bu, TableViewController, Düğmeler, Etiketler ve Metin Görünümleri gibi öğeleri ve denetleyicileri seçebileceğiniz yerdir.
  12. İhtiyacınız olanı aramak için kullanabileceğiniz bir de arama çubuğu var.

Main.storyboard

  1. Gezinti Denetleyicisi'ni arayın ve ekrana sürükleyin.
  2. Oradan rootViewController'ı kaldırın. Sağ bölmeye bakın, rootViewController'ı seçin. ‘Sil’ tuşuna basın. Şimdi gezinti denetleyicisini denetleyin ve sürükleyin, Görüntü Denetleyicisine sürükleyin ve Kök Görüntü Denetleyicisi olarak ayarlayın.

Daha sonra Navigasyon Kontrolörüne tıklayacaksınız ve sağ tarafta İlk Görüntüleme Kontrolörü Olduğunu yazan boş bir onay kutusu var. Tıkladığına emin ol

Bu, temelde Xcode’a yalnızca görünüm yerine gezinme denetleyicisiyle başlamasını söylüyor. Bu, artık sahip olacağımız navigasyon çubuğumuzdur. Gezinme çubuğu, ‘Sayaç’ başlığı ve ‘Sıfırla’ Düğmesi ile videoda en üstte gördüğünüz çubuktur.

  1. Oradan, ‘Kütüphane’ olan bir etiketi arayacak ve onu İzleme Kontrolörüne sürükleyeceksiniz.
  2. Şimdi düğmeyi arayın ve aynı şeyi iki kez yapın.
  3. Buradan, etiketleri ve düğmelerin etrafını sürükleyerek istediğiniz şekilde hizalayın. Bu öğeleri taşırken gördüğünüz çizgiler, onu bir yere hizaladığınızı bildiren hizalamalardır. Yaptıktan sonra, istersen gezinme çubuğundaki sıfırlama düğmesini çıkarabilirsin, ki ne yaptım ya da sadece kendi yerleşimini kullan. Endişelenmeyin, işlevselliğini etkilemeyecek.
  4. Şimdi, ne göreceklerini bilmek istiyoruz. Yani Label ile, iki kez tıklamak, onu Label'dan istediğin gibi değiştirebilir. Bu bir sayaç olduğundan, bir numara seçin. Şimdi sağda bir Font özniteliği var. Varsayılan olarak Sistem Font 17'dir. Daha büyük veya daha küçük yapın, tercihinize göre yapın. 60 kullandım. Ne istersen yapabilirsin.
  5. Düğmeler için, bir sıfırlama ve bir musluk var. Bu nedenle, onları uygun şekilde etiketlediğinizden emin olun. Label ile yaptığınız gibi hemen hemen aynı şeyi yapıyorsunuz. Ancak yazı tipini değiştirmeniz gerekmez. İstersen yapabilirsin.
  6. Son olarak, bu uygulama için bir başlığın olmasını istiyoruz. Böylece gezinti çubuğunda, çubuk vurgulanana kadar tıklayın. Sağ bölmede artık Başlık, Bilgi İstemi ve Geri Düğmesi göründüğünü fark edeceksiniz. Başlığı istediğiniz bir başlıkla değiştirin.

Şimdi buna daha yakın bir şeye sahip olmalısın.

Eğlenceli Bölüm

Şimdi bu uygulamanın kodlama kısmına girmek istiyoruz. Xcode'un üstünde bir Yardımcı Editör Düğmesi var. Bir Venn şeması gibi görünüyor.

Şimdi iki şey görmelisiniz, Arabirim Oluşturucu ve View Controller kodunu. Şimdi yapacağımız şey klavyenizdeki basın kontrolü, basılı tutun ve etiketinizi en üstteki koda sürükleyin. Etikete 'counterLabel' gibi bir ad verin.

Artık etiketiniz olduğuna göre, iki düğme için de aynısını yapmanız gerekir. Ama işte işler biraz değişiyor. Bağlantıda, açılır menüyü tıklayın ve Eylem'i seçin - Bu, kullanıcının düğmeye dokunduğunda uygulamanın bir şey yapmasını sağlar. Her ikisinde de aynısını yapın ve onlara 'tapButtonTapped' gibi anlamlı bir ad verin.

Bunu tamamladığınızda, sol bölmedeki görüntü denetleyiciye tıklayın ve Yardımcı Editör'ü tekrar normal çizgilerle değiştirin.

Tamam, ilk önce bu kodu yazacağız: var counter: Int = 0 (Bu, Integer türüne izin veren bir değişkendir ve sıfıra ayarlayacağız.) Bir var var farklı bir makale. Ama temelde var değişebilir, yapamam.

Şimdi bir sayacımız var, bu sayıyı göstermeliyiz. ViewDidLoad işlevinde, bunu counterLabel.text = String (counter) yazın (bu nedenle conterLabel'i etiketinizi ne adlandırırsanız değiştirin. .Text, etiketin içindeki metni değiştirmemize izin verir. sayaç değişkenimiz int türündedir.

Tamam şimdi temelde app açılmasını isteyen sayı göstermek zorunda. Sıfırlamak ve dokunmak için şimdi işlevler eklememiz gerekiyor. Tap ile başlayacağız.

Dokunma düğmesinin IBAction içinde, kullanıcı 1'e her dokunduğunda 1 eklemek istiyoruz. Yani yaptığımız, bir sayı eklemek. Ardından etiketin içindeki metni sayı ile değiştirin. Bunu aşağıdakileri yaparak yaparız:

Şimdi bunu yaptıktan sonra, doğru yaptığınızdan emin olmak istersiniz. Yani uygulamayı çalıştırın! CMD + R kullanın veya üst kısımdaki oynat düğmesine basın.

Fark ettiyseniz, bir şeyler yanlış olabilir, düğmeler her yerde olabilir. Ancak, düğmesine dokunduğunuzda, önceki sayıya eklenir. Düğmeyi görmüyorsanız ya da etiketler ve düğmeler yerin her yerinde. Ana panoya geri dön. Şimdi yapacağımız şey, olmasını istediğimiz yerlere yerleştirmek. Çünkü bu basit bir öğretici. Kısıtlamalar ile derinlemesine girmeyeceğim. Apple’ın önerdiği çelişkileri kullanacağız. Bu yüzden Main.storyboard'da View Controller'da olduğunuzdan emin olun. ViewController'da arkaplan gibi bir şeyi tıkladığınızı ancak Görünüm'deki öğeleri tıkladığınızı onaylayın. Arayüz Oluşturucusuna bakarsanız, aşağıdaki resimde gördüğünüz bir düğme vardır, üzerine tıkladığınızda bazı seçenekleri göreceksiniz, Önerilen Kısıtlamaları Sıfırla'yı tıklayın. Şimdi tekrar çalıştır ve işler biraz tanıdık gelmeli.

Dokunduğunuz düğmeGöreceğiniz menü.

Şimdi IBActions'a dönelim

Diğer IBAction içinde sıfırlama düğmesi için var. Sayıyı tekrar 0'a ayarlamak istiyoruz. Yani bunu yapacağız: sayı = 0. İşte bu, sayı şimdi 0'dır. Ancak üzerine dokunduğunuzda uygulamada gösterilmez. Git ve dene. Uygulamayı tekrar çalıştırın.

Bu yüzden sorunu çözmek için, counterLabel'i güncellemediğimiz için yapmamız gerekiyor. Bunu anlamaya çalış. Hala takılı kalmışsanız, cevap sayfanın altındadır.

Şimdi hemen hemen temelleri eklediniz. Uygulamaya hemen hemen çalışır. Dokunduğunuzda, tezgaha bir tane ekleyecektir. Sıfırlama tuşuna basarsanız sayaç 0'a geri döner.

Ekstra, Ekstra!

Şimdi, biraz daha eğlenceli veya ekstra bir şeyler yapmak istiyorsanız. Gezinti çubuğundaki çirkin çizgiden kurtulabiliriz. İşte bunun için kod:

Önce odadaki filleri ele alalım, GÜVERTE NEDİR? orada yapıyor?

Bu isteğe bağlı bir yöntemdir, hemen hemen Xcode'a navigasyon kontrolörü olma ihtimalinin bulunmadığını ve sıfır olmasının ya da olmamanın tamam olduğunu bilmesini sağlar. Bu, denetleyici yoksa kod hala çalışabilir. İsteğe bağlı, öncelikle sıfır olma olasılığı olduğunda kullanılır, ancak programı çok fazla etkilemez. Sıfıra izin vermek istiyoruz çünkü hiçbir şeyi değiştirmiyor, ancak Xcode varsayılan olarak izin vermiyor. Eğer sıfırsa, uygulama isteğe bağlı olarak daha kolay olacak şekilde çökecektir.

Şimdi bu ele alındı, konuşalım kodu.

İlk satır hemen hemen ayar ve boş arka plan görüntüsü. UIImage () kullanıyorsanız, hemen hemen boştur ve aslında herhangi bir türden bir görüntü kullanma ihtiyacını atlar. Bu, arka plan görüntüsü olmaması içindir.

İkinci çizgi temelde alttaki çizgi / kenarlık olan gölge görüntüyü kaldırır. Fakat ikinize de çalışmanız gerekir, çünkü ikisini de istemiyoruz, böylece çizgi görünmüyor.

Şimdi bu yapıldı, başında gösterilen uygulamanın tam bir kopyası var!

Cevap: counterLabel.text = Dize (sayı)

Andy Wong

Andy, St John Üniversitesinde Küçük. Ürün oluşturma, teknoloji endüstrisinde çalışma, yeni şeyler denemeye ve genel olarak günlük yeni şeyler öğrenmeye tutkuyla bağlı. Halen NYC veya San Francisco'da bir yazılım mühendisi / geliştirici stajı arıyor (Tercih edilen ~ şehre aşık oldu). İnşa etmekten daha fazlasına sahip olduğum tek tutku, yararlı bir şeyler inşa etmektir. İnsanlara daha önce hiç mümkün olmayan şekillerde yardımcı olan bir şey.

Bağlanalım! (Twitter) (İnternet sitesi) (Linkedin)