Xamarin'de watchOS Düzeni ile çalışma

Apple Watch ekran boyutları için düzenlerin tasarlanması benzersiz zorluklara neden olabilir.

Tasarım İpuçları

Önemli nokta şudur: Kullanıcı arabiriminizi büyük parmakla küçük bir saat ekranında okunabilir ve kullanılabilir hale getirin. iOS Simülatörü (çok büyük görünen) ve bir fare işaretçisi (küçük dokunmatik hedeflerle çalışır) için tasarım tuzağına düşmeyin!

  • Siyah arka plan kullanın; saatin siyah çerçevesiyle daha büyük bir ekran illüzyonu oluşturur.

  • Ekran düzeninizin çevresine yerleştirmeyin; çerçeve doğal bir görsel doldurma oluşturur.

  • Okunabilirliğe odaklanın. Metnin okunabilir olduğundan emin olmak için yazı tipi boyutlarını ve renklerini dikkatle kullanın. Otomatik Dinamik Tür desteği almak için yerleşik metin stillerini kullanın.

Example of Dynamic Type support

Uygulama

Watch Kit, çekici saat uygulaması düzenleri oluşturmanıza yardımcı olmak için aşağıdaki denetimleri içerir:

Arabirim Denetleyicisi

WKInterfaceController tüm sahnelerinizin temel sınıfıdır.

Arabirim denetleyicisinin tasarım yüzeyi dikey bir Grup gibi davranır: Diğer denetimleri arabirim denetleyicisine sürükleyebilirsiniz ve bunlar otomatik olarak bir üst üste yerleştirilecektir:

Controls are automatically laid-out one above the other

Görünümlerini denetlemek için her denetimde Konum ve Boyut özelliklerini ayarlayabilirsiniz:

Set the Position and Size properties on each control

Boyut Kapsayıcıya Göre olarak ayarlandığında orantılı bir değer ve uzaklık ayarlaması sağlayabilirsiniz. Bu ekran görüntüsü, saat ekranının genişliğinin %80'ini (0,8) kullanacak şekilde ayarlanmış bir düğmeyi gösterir:

Provide a proportional value and an offset adjustment

Gruplandırma

WKInterfaceGroup , denetimleri dikey veya yatay olarak yığmak için yapılandırılabilir basit bir düzen kapsayıcısıdır. Varsayılan olarak her denetim arasında aralık içerir, ancak Öznitelikler denetçisindeki aralığı (ve kümeleri) değiştirebilirsiniz.

Modify the spacing and insets in the Attributes inspector

Gruplar, çevresindeki denetimlere göre boyutlandırılabilir ve konumlandırılabilir ve gruplar karmaşık düzenler oluşturmak için iç içe yerleştirilebilir.

Groups can be nested to create complex layouts

Ayırıcı

Ayırıcı denetimi, düzeninizde görsel rehberlik sağlamaya yardımcı olmak için tasarlanmıştır. Kullanıcının ekranınızda hangi içeriğin ilişkili olduğunu anlamasına yardımcı olması için ayırıcıları (veya arka plan renklerini veya resimlerini) kullanın.

Example of Separator usage

Ekranın tam genişliğini kullanmayan mavi ve yeşil ayırıcıların Sabit veya Kapsayıcı boyutlarına Göre olarak yapılandırıldığını unutmayın.

İçerik Denetimleri

, , , SwitchSliderButtonMapImageve diğer denetimler olmadan Labelhiçbir düzen tamamlanamaz. Bunlar, Gruplar veya her denetimdeki konum ve boyut ayarları kullanılarak düzenlerinizde konumlandırılabilir.