iOS Tasarım Aracı temel bilgileri
Bu kılavuzda iOS için Xamarin Tasarım Aracı tanıtılmaktadır. Denetimleri görsel olarak düzenlemek için iOS Tasarım Aracı nasıl kullanılacağını, bu denetimlere kodda nasıl erişeceklerini ve özelliklerin nasıl düzenleyebileceğinizi gösterir.
Uyarı
iOS Tasarım Aracı, Mac için Visual Studio 2019 sürüm 16.8 ve Visual Studio 2019 sürüm 8.8'de kullanım dışı bırakıldı ve Visual Studio 2019 sürüm 16.9 ve Mac için Visual Studio sürüm 8.9'da kaldırıldı. iOS kullanıcı arabirimleri oluşturmanın önerilen yolu doğrudan Xcode çalıştıran bir Mac üzerindedir. Daha fazla bilgi için bkz . Xcode ile kullanıcı arabirimleri tasarlama.
iOS için Xamarin Tasarım Aracı, Xcode'un Interface Builder ve Android Tasarım Aracı benzer bir görsel arabirim tasarımcısıdır. Birçok özelliği arasında Windows ve Mac için Visual Studio ile sorunsuz tümleştirme, sürükleyip bırakma düzenleme, olay işleyicilerini ayarlamaya yönelik bir arabirim ve özel denetimleri işleme özelliği yer alır.
Gereksinimler
iOS Tasarım Aracı, Windows'da Mac için Visual Studio ve Visual Studio 2017 ve sonraki sürümlerde kullanılabilir. Windows için Visual Studio'da iOS Tasarım Aracı düzgün yapılandırılmış bir Mac derleme konağına bağlantı gerektirir, ancak Xcode'un çalışmaması gerekir.
Bu kılavuzda, Başlarken kılavuzlarında ele alınan içerikler hakkında bilgi sahibi olduğunuz varsayılır.
iOS Tasarım Aracı nasıl çalışır?
Bu bölümde, iOS Tasarım Aracı kullanıcı arabirimi oluşturmayı ve bunu koda bağlamayı nasıl kolaylaştırdığı açıklanmaktadır.
iOS Tasarım Aracı, geliştiricilerin bir uygulamanın kullanıcı arabirimini görsel olarak tasarlamasına olanak tanır. Görsel Taslaklara Giriş kılavuzunda açıklandığı gibi, görsel taslak bir uygulamayı oluşturan ekranları (görünüm denetleyicileri), bu görünüm denetleyicilerine yerleştirilen arabirim öğelerini (görünümleri) ve uygulamanın genel gezinti akışını açıklar.
Görünüm denetleyicisinin iki bölümü vardır: iOS Tasarım Aracı görsel gösterimi ve ilişkili C# sınıfı:
Görünüm denetleyicisi varsayılan durumunda herhangi bir işlev sağlamaz; denetimlerle doldurulmalıdır. Bu denetimler, ekranın tüm içeriğini içeren dikdörtgen alan olan görünüm denetleyicisinin görünümüne yerleştirilir. Çoğu görünüm denetleyicisi, düğme içeren bir görünüm denetleyicisini gösteren aşağıdaki ekran görüntüsünde gösterildiği gibi düğmeler, etiketler ve metin alanları gibi yaygın denetimler içerir:
Statik metin içeren etiketler gibi bazı denetimler görünüm denetleyicisine eklenebilir ve tek başına bırakılabilir. Ancak denetimlerin program aracılığıyla özelleştirilmesi gerekir. Örneğin, yukarıda eklenen düğme dokunulduğunda bir şey yapmalıdır, bu nedenle koda bir olay işleyicisi eklenmelidir.
Koddaki düğmeye erişmek ve düğmeyi işlemek için benzersiz bir tanımlayıcıya sahip olması gerekir. Düğmeyi seçip Özellikler Bölmesi'ni açarak ve Ad alanını "SubmitButton" gibi bir değere ayarlayarak benzersiz bir tanımlayıcı sağlayın:
Artık düğmeye bir ad olduğuna göre, bu düğmeye koddan erişilebilir. Ama bu nasıl çalışır?
Çözüm Bölmesi'nde ViewController.cs gidip açıklama göstergesine tıklanması, görünüm denetleyicisinin ViewController sınıf tanımının her biri kısmi sınıf tanımı içeren iki dosyaya yayıldığını ortaya koyuyor:
ViewController.cs sınıfıyla ilgili
ViewControllerözel kodla doldurulmalıdır. Bu dosyadaViewController, sınıf çeşitli iOS görünüm denetleyicisi yaşam döngüsü yöntemlerine yanıt verebilir, kullanıcı arabirimini özelleştirebilir ve düğme dokunmaları gibi kullanıcı girişlerine yanıt verebilir.ViewController.designer.cs, görsel olarak oluşturulmuş arabirimi kodla eşlemek için iOS Tasarım Aracı tarafından oluşturulan bir dosyadır. Bu dosyada yapılan değişikliklerin üzerine yazılacağından değiştirilmemelidir. Bu dosyadaki özellik bildirimleri, sınıftaki kodun
ViewControlleriOS Tasarım Aracı ayarlanan Ad ile denetimlere erişmesini mümkün hale getirir. ViewController.designer.cs açıldığında aşağıdaki kod açılır:
namespace Designer
{
[Register ("ViewController")]
partial class ViewController
{
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIKit.UIButton SubmitButton { get; set; }
void ReleaseDesignerOutlets ()
{
if (SubmitButton != null) {
SubmitButton.Dispose ();
SubmitButton = null;
}
}
}
}
Özellik SubmitButton bildirimi, yalnızca ViewController.designer.cs dosyasını değil tüm sınıfı görsel taslakta tanımlanan düğmeye bağlarViewController. ViewController.cs sınıfının bir bölümünü ViewController tanımladığından, öğesine SubmitButtonerişimi vardır.
Aşağıdaki ekran görüntüsünde IntelliSense'in artık ViewController.cs'de başvuruyu SubmitButton tanıdığı gösterilmektedir:
Bu bölümde iOS'ta bir düğmenin nasıl oluşturulduğu Tasarım Aracı ve kodda bu düğmeye nasıl erişildiğini gösterilmiştir.
Bu belgenin geri kalanında iOS Tasarım Aracı daha ayrıntılı bir genel bakış sağlanır.
iOS Tasarım Aracı temel bilgileri
Bu bölümde iOS Tasarım Aracı bölümleri tanıtılarak özelliklerine ilişkin bir tur sunulmaktadır.
iOS Tasarım Aracı başlatma
Mac için Visual Studio ile oluşturulan Xamarin.iOS projeleri bir görsel taslak içerir. Görsel taslak içeriğini görüntülemek için Çözüm Bölmesi'nde .storyboard dosyasına çift tıklayın:
iOS Tasarım Aracı özellikleri
iOS Tasarım Aracı altı birincil bölümü vardır:
- Surface'i Tasarlama – iOS Tasarım Aracı birincil çalışma alanı. Belge alanında gösterildiği gibi, kullanıcı arabirimlerinin görsel olarak oluşturulmasını sağlar.
- Kısıtlamalar Araç Çubuğu – Öğeleri bir kullanıcı arabiriminde konumlandırmanın iki farklı yolu olan çerçeve düzenleme modu ile kısıtlama düzenleme modu arasında geçiş yapmaya olanak tanır.
- Araç Kutusu – Tasarım yüzeyine sürüklenebilen ve kullanıcı arabirimine eklenebilen denetleyicileri, nesneleri, denetimleri, veri görünümlerini, hareket tanıyıcılarını, pencereleri ve çubukları listeler.
- Özellikler Bölmesi : Seçili denetimin kimlik, görsel stiller, erişilebilirlik, düzen ve davranış gibi özelliklerini gösterir.
- Belge Ana Hattı – Düzenlenen arabirimin düzenini oluşturan denetim ağacını gösterir. Ağaçtaki bir öğeye tıklanması iOS Tasarım Aracı seçer ve özelliklerini Özellikler Bölmesi'nde gösterir. Bu, iç içe geçmiş bir kullanıcı arabiriminde belirli bir denetimi seçmek için kullanışlıdır.
- Alt Araç Çubuğu – iOS Tasarım Aracı cihaz, yönlendirme ve yakınlaştırma gibi .storyboard veya .xib dosyasını görüntüleme biçimini değiştirmeye yönelik seçenekleri içerir.
İş akışını tasarlama
Arabirime denetim ekleme
Arabirime denetim eklemek için Araç Kutusu'ndan sürükleyin ve tasarım yüzeyine bırakın. Denetim eklerken veya konumlandırırken dikey ve yatay yönergeler dikey orta, yatay orta ve kenar boşlukları gibi yaygın olarak kullanılan düzen konumlarını vurgular:
Yukarıdaki örnekteki mavi noktalı çizgi, düğme yerleştirmeye yardımcı olmak için yatay orta görsel hizalama kılavuzu sağlar.
Bağlam menüsü komutları
Bağlam menüsü hem tasarım yüzeyinde hem de Belge Ana Hattı'nda kullanılabilir. Bu menü, seçili denetim ve üst öğesi için komutlar sağlar. Bu komutlar iç içe geçmiş hiyerarşideki görünümlerle çalışırken yararlıdır:
Kısıtlamalar araç çubuğu
Kısıtlamalar araç çubuğu güncelleştirildi ve şimdi iki denetimden oluşuyor: çerçeve düzenleme modu / kısıtlama düzenleme modu iki durumlu düğmesi ve güncelleştirme kısıtlamaları / çerçeveleri güncelleştir düğmesi.
Çerçeve düzenleme modu / kısıtlama düzenleme modu iki durumlu düğmesi
iOS Tasarım Aracı önceki sürümlerinde, tasarım yüzeyinde zaten seçili olan bir görünüme tıklanması çerçeve düzenleme modu ile kısıtlama düzenleme modu arasında geçiş yaptı. Şimdi, kısıtlamalar araç çubuğundaki bir geçiş denetimi bu düzenleme modları arasında geçiş yapar.
- Çerçeve düzenleme modu:
- Kısıtlama düzenleme modu:
Kısıtlamaları güncelleştir / çerçeveleri güncelleştir düğmesi
Güncelleştirme kısıtlamaları / çerçeveleri güncelleştir düğmesi, çerçeve düzenleme modunun / kısıtlama düzenleme modunun iki durumlu düğmesinin sağındaki yer alır.
- Çerçeve düzenleme modunda, bu düğmeye tıklanması, seçilen öğelerin çerçevelerini kısıtlamalarıyla eşleşecek şekilde ayarlar.
- Kısıtlama düzenleme modunda, bu düğmeye tıklanması, seçilen öğelerin kısıtlamalarını çerçeveleriyle eşleşecek şekilde ayarlar.
Alt araç çubuğu
Alttaki araç çubuğu, iOS Tasarım Aracı görsel taslak veya .xib dosyasını görüntülemek için kullanılan cihazı, yönlendirmeyi ve yakınlaştırmayı seçmek için bir yol sağlar:
Cihaz ve yönlendirme
Genişletildiğinde, alt araç çubuğu geçerli belgeye uygulanan tüm cihazları, yönlendirmeleri ve/veya uyarlamaları görüntüler. Bunlara tıklanması, tasarım yüzeyinde görüntülenen görünümü değiştirir.
Cihaz ve yönlendirmenin seçilmesinin yalnızca iOS Tasarım Aracı tasarımı önizleme şeklini değiştirdiğini unutmayın. Geçerli seçimden bağımsız olarak, aksini belirtmek için Özellikleri Düzenle düğmesi kullanılmadığı sürece yeni eklenen kısıtlamalar tüm cihazlara ve yönlendirmelere uygulanır.
Boyut sınıfları etkinleştirildiğinde, genişletilmiş alt araç çubuğunda Özellikleri Düzenle düğmesi görüntülenir. Özellikleri Düzenle düğmesine tıklanması, seçilen cihaz ve yönlendirme tarafından temsil edilen boyut sınıfına göre arabirim varyasyonu oluşturma seçeneklerini görüntüler. Aşağıdaki örnekleri değerlendirin:
- i Telefon SE / Dikey seçilirse, açılır pencere kompakt genişlik, normal yükseklik boyutu sınıfı için bir arabirim varyasyonu oluşturma seçenekleri sağlar.
- iPad Pro 9.7" / Yatay / Tam Ekran seçiliyse, popover normal genişlik, normal yükseklik boyutu sınıfı için bir arabirim varyasyonu oluşturma seçenekleri sağlar.
Yakınlaştırma denetimleri
Tasarım yüzeyi çeşitli denetimler aracılığıyla yakınlaştırmayı destekler:
Denetimler şunları içerir:
- Sığdırmak için yakınlaştır
- Uzaklaştırma
- Yakınlaştırma
- Gerçek boyut (1:1 piksel boyutu)
Bu denetimler tasarım yüzeyindeki yakınlaştırmayı ayarlar. Çalışma zamanında uygulamanın kullanıcı arabirimini etkilemez.
Özellikler Bölmesi
Bir denetimin kimliğini, görsel stillerini, erişilebilirliğini ve davranışını düzenlemek için Özellikler Bölmesi'ni kullanın. Aşağıdaki ekran görüntüsünde bir düğmenin Özellikler Bölmesi seçenekleri gösterilmektedir:
Özellikler Bölmesi bölümleri
Özellikler Bölmesi üç bölüm içerir:
- Pencere öğesi – Denetimin ad, sınıf, stil özellikleri vb. gibi ana özellikleri. Denetimin içeriğini yönetme özellikleri genellikle buraya yerleştirilir.
- Düzen – Kısıtlamalar ve çerçeveler de dahil olmak üzere denetimin konumunu ve boyutunu izleyen özellikler burada listelenmiştir.
- Olaylar – Olaylar ve olay işleyicileri burada belirtilir. Dokunma, dokunma, sürükleme gibi olayları işlemek için kullanışlıdır. Olaylar doğrudan kodda da işlenebilir.
Özellikler Bölmesi'nde özellikleri düzenleme
iOS Tasarım Aracı, tasarım yüzeyinde görsel düzenlemeye ek olarak Özellikler Bölmesi'ndeki özellikleri düzenlemeyi de destekler. Aşağıdaki ekran görüntülerinde gösterildiği gibi, kullanılabilir özellikler seçili denetime göre değişir:
Önemli
Özellikler Bölmesi'nin Kimlik bölümünde artık bir Modül alanı gösterilir. Bu bölümü yalnızca Swift sınıflarıyla birlikte çalışırken doldurmak gerekir. Swift sınıfları için ad alanı olan bir modül adı girmek için bunu kullanın.
Varsayılan değerler
Özellikler Bölmesi'ndeki birçok özellik hiçbir değer veya varsayılan değer göstermez. Ancak, uygulamanın kodu yine de bu değerleri değiştirebilir. Özellikler Bölmesi kodda ayarlanan değerleri göstermez.
Olay işleyicileri
Çeşitli olaylar için özel olay işleyicileri belirtmek için Özellikler Bölmesi'nin Olaylar sekmesini kullanın. Örneğin, aşağıdaki ekran görüntüsünde, bir HandleClick yöntem düğmenin İçe Rötuş olayını işler:
Bir olay işleyicisi belirtildikten sonra, ilgili görünüm denetleyicisi sınıfına aynı ada sahip bir yöntem eklenmelidir. Aksi takdirde, düğmeye dokunulduğunda bir unrecognized selector özel durum oluşur:
Özellikler Bölmesi'nde bir olay işleyicisi belirtildikten sonra, iOS Tasarım Aracı ilgili kod dosyasını hemen açar ve yöntem bildirimini eklemeyi teklif eder.
Özel olay işleyicileri kullanan bir örnek için Hello, iOS Başlarken Kılavuzu'na bakın.
Ana hat görünümü
iOS Tasarım Aracı bir arabirimin denetim hiyerarşisini ana hat olarak da görüntüleyebilir. Ana hat, aşağıda gösterildiği gibi Belge Ana Hattı sekmesini seçerek kullanılabilir:
Ana hat görünümünde seçili denetim, tasarım yüzeyindeki seçili denetimle eşitlenmiş olarak kalır. Bu özellik, iç içe yerleştirilmiş bir arabirim hiyerarşisinden öğe seçmek için kullanışlıdır.
Xcode'a geri dön
iOS Tasarım Aracı ve Xcode Interface Builder'ı birbirinin yerine kullanmak mümkündür. Xcode Interface Builder'da bir görsel taslak veya .xib dosyası açmak için, dosyaya sağ tıklayın ve aşağıdaki ekran görüntüsünde gösterildiği gibi Xcode Arabirim Oluşturucusu ile > Aç'ı seçin:
Xcode Interface Builder'da düzenlemeler yaptıktan sonra dosyayı kaydedin ve Mac için Visual Studio dönün. Değişiklikler Xamarin.iOS projesiyle eşitlenir.
.xib desteği
iOS Tasarım Aracı .xib dosyalarının oluşturulmasını, düzenlenmesini ve yönetilmesini destekler. Bunlar, bir uygulamanın görünüm hiyerarşisine eklenebilen tek ve özel görünümleri yeniden temsil eden XML dosyalarıdır. .xib dosyası genellikle bir uygulamadaki tek bir görünüm veya ekranın arabirimini temsil ederken, görsel taslak birçok ekranı ve aralarındaki geçişleri temsil eder.
Hangi çözümün (.xib dosyaları, görsel taslaklar veya kod) kullanıcı arabirimi oluşturmak ve korumak için en iyi şekilde çalıştığı hakkında birçok fikir vardır. Gerçekte, mükemmel bir çözüm yoktur ve eldeki iş için her zaman en iyi aracı göz önünde bulundurmaya değer. Buna göre, .xib dosyaları genellikle bir uygulamadaki özel tablo görünümü hücresi gibi birden çok yerde gerekli olan özel görünümü temsil etmek için kullanıldığında en güçlü dosyalardır.
.xib dosyalarını kullanma hakkında daha fazla belge aşağıdaki tariflerde bulunabilir:
- Görünüm .xib Şablonunu Kullanma
- .xib kullanarak Özel TableViewCell oluşturma
- .xib kullanarak Başlatma Ekranı Oluşturma
Görsel taslakların kullanımı hakkında daha fazla bilgi için Görsel Taslaklara Giriş bölümüne bakın.
Bu ve diğer iOS Tasarım Aracı ilgili kılavuzlar, çoğu Xamarin.iOS yeni proje şablonu varsayılan olarak görsel taslak sağladığından, kullanıcı arabirimleri oluşturmaya yönelik standart yaklaşım olarak görsel taslakların kullanımını ifade eder.
Özet
Bu kılavuz, özelliklerini açıklayan ve güzel kullanıcı arabirimleri tasarlamak için sunduğu araçların ana hatlarını çizen iOS Tasarım Aracı giriş niteliğindedir.