Aracılığıyla paylaş

Xamarin'de tvOS Gezinti ve Odak ile çalışma

  • Makale

Bu makale Odak kavramını ve Xamarin.tvOS uygulamasının içinde Gezinti'yi sunmak ve işlemek için nasıl kullanıldığını kapsar.

Bu makale, Odak kavramını ve Xamarin.tvOS uygulamasının Kullanıcı Arabiriminde Gezintiyi işlemek için nasıl kullanıldığını kapsar. Xamarin.tvOS uygulamanızın Kullanıcı Arabirimi Gezintisi'ni sağlamak için yerleşik tvOS Gezinti denetimlerinin Odak, Vurgulama ve Seçim'i nasıl kullandığını inceleyeceğiz.

tvOS uygulamaları Kullanıcı Arabirimi Gezintisi

Şimdi Son kullanıcıya geçerli Gezinti Durumu hakkında görsel ipuçları sağlamak için Odak'ın Parallax ve Katmanlı Görüntüler ile nasıl kullanılabileceğini inceleyeceğiz.

Son olarak Xamarin.tvOS uygulamalarınızda Odak, Odak Güncelleştirmeler, Odak Kılavuzları, Koleksiyonlarda Odak ve Görüntü Görünümlerinde Parallax'ı Etkinleştirme ile çalışmaya göz atacağız.

Xamarin.tvOS uygulamanızın kullanıcıları, cihazın ekranındaki görüntülere dokunduğu iOS ile olduğu gibi doğrudan arabirimiyle etkileşim kurmaz, siri remote kullanarak dolaylı olarak odanın her yerinden etkileşim kurar. Uygulamanızın Kullanıcı Arabirimini tasarlarken doğal olarak akması ve kullanıcının Apple TV deneyimine daldırılması için bunu aklınızda bulundurmanız gerekir.

Başarılı bir tvOS uygulaması, gezintiyi uygulamanın amacını ve sunduğu verilerin yapısını gezintiye dikkat etmeden sorunsuz bir şekilde destekleyecek şekilde uygular. Kullanıcı Arabirimine hakim olmadan veya odağı içerikten ve uygulamalar kullanıcı deneyiminden uzaklaştırmadan gezintinizi doğal ve tanıdık hissettirebilecek şekilde tasarlayın.

tvOS ayarları uygulaması

Apple TV kullanırken, kullanıcı genellikle her biri belirli bir içerik kümesi sunan yığılmış bir ekran kümesinde geziniyor. Buna karşılık, her yeni ekran Düğmeler, Sekme Çubukları, Tablolar, Koleksiyon Görünümleri veya Bölünmüş Görünümler gibi standart kullanıcı arabirimi denetimlerini kullanarak içeriğin bir veya daha fazla alt ekranına yol açabilir.

Her yeni veri ekranıyla, kullanıcı bu ekran yığınında daha derine iner. Siri Remote'un Menü düğmesini kullanarak, önceki bir ekrana veya Ana Menü'ye dönmek için yığında geriye doğru gidebilirler.

Apple, tvOS uygulamanız için gezintiyi tasarlarken aşağıdakileri göz önünde bulundurmanızı önerir:

  • İçerik Bulmayı Hızlı ve Kolay Hale Getirmek için Gezinti düzeni oluşturun - Kullanıcılar, uygulamanızdaki içeriğe mümkün olduğunca az sayıda dokunma, tıklama ve çekme hareketiyle erişmek ister. Gezintinizi basitleştirin ve içeriği minimum sayıda ekranla düzenleyin.
  • Dokunma Kullanarak Akıcı Arabirim Oluşturma - Bir kullanıcının mümkün olan en az sayıda hareketi kullanarak en düşük sürtünmeyle Odaklanabilir Öğeler arasında hareket etmesini sağlayın.
  • Odaklanarak Tasarla - Kullanıcı odada içerikle etkileşimde olduğundan, Siri Remote kullanarak etkileşim kurmadan önce Odağı Kullanıcı Arabirimi öğesine taşıması gerekir. Kullanıcılar, hedeflerine ulaşmak için çok fazla hareket gerektiriyorsa uygulamanızdan rahatsız olur.
  • Menü Düğmesi aracılığıyla Geriye Doğru Gezinti Sağlayın - Kolay ve tanıdık bir deneyim oluşturmak için kullanıcıların Siri Remote'un Menü düğmesini kullanarak geriye doğru gezinmesine izin verin. Menü düğmesine basmak her zaman önceki ekrana veya uygulamanın Ana Menüsüne geri dönmelidir. Uygulamanın en üst düzeyinde, Menü düğmesine basmak Apple TV Giriş ekranına geri dönmelidir.
  • Genellikle Geri Düğmesi Görüntülemekten Kaçının - Siri Remote üzerindeki Menü düğmesine basıldığında ekran yığınında geriye doğru gidildiği için, bu davranışı yineleyen fazladan bir denetim görüntülemekten kaçının. Bu kuralın bir istisnası, bir İptal düğmesinin de görüntülenmesi gereken yıkıcı eylemlere (içerik silme gibi) sahip ekranlar veya ekranlar satın almaktır.
  • Büyük Koleksiyonları Çok Yerine Tek Ekranda Göster - Siri Remote, büyük bir içerik koleksiyonunda gezinmeyi hızlı ve kolay bir şekilde hareket ettirmek için tasarlanmıştır. Uygulamanız büyük bir Odaklanabilir Öğeler koleksiyonuyla çalışıyorsa, bunları kullanıcının bölümünde daha fazla gezinti gerektiren birçok ekrana bölmek yerine tek bir ekranda tutmayı göz önünde bulundurun.
  • Gezinti için Standart Denetimleri Kullanma - Mümkün olduğunca kolay ve tanıdık bir kullanıcı deneyimi oluşturmak için, uygulamanızın gezintisi UIKit için Sayfa Denetimleri, Sekme Çubukları, Kesimli Denetimler, Tablo Görünümleri, Koleksiyon Görünümleri ve Bölünmüş Görünümler gibi yerleşik denetimleri kullanın. Kullanıcı bu öğelere zaten aşina olduğundan, sezgisel olarak uygulamanızda gezinebilecektir.
  • Yatay İçerik Gezintisini Tercih Edin - Apple TV'nin doğası gereği Siri Remote'ta sola doğru çekme işlemi yukarı ve aşağı göre daha doğaldır. Uygulamanız için içerik düzenleri tasarlarken bu seçeneği göz önünde bulundurun.

Odak ve Seçim

Apple TV'de, geçerli gezintinin hedefi olan bir görüntü, düğme veya diğer kullanıcı arabirimi öğesi odakta olarak kabul edilir.

Odak ve Seçim örneği

Kullanıcının cihazın dokunmatik ekranındaki öğelerle doğrudan etkileşimde bulunduğu iOS cihazlarının aksine, kullanıcılar Siri Remote'ı kullanarak odanın her yerinden tvOS öğeleriyle etkileşim kurar. Apple TV, bu kullanıcı etkileşimini sunmak ve işlemek için Odak tabanlı bir model kullanır.

Siri Remote'da hareketleri ve düğmeyi kullanarak kullanıcı odağı bir kullanıcı arabirimi öğesinden diğerine taşır. Odak istenen öğeye kaydıktan sonra, kullanıcı içeriği seçmek veya bu öğe tarafından temsil edilen eylemi etkinleştirmek için tıklar.

Odak değiştikçe, o anda odağı olan Kullanıcı Arabirimi öğesini net bir şekilde tanımlamak için ince animasyonlar ve efektler (görüntülerdeki Parallax Efekti gibi) kullanılır.

Apple, Odak ve Seçim ile çalışmak için aşağıdaki önerilere sahiptir:

  • Hareket Efektleri için Yerleşik Ui Denetimlerini Kullanma - Kullanıcı Arabiriminizde ve Odak API'sini kullanarak UIKit Odak Modeli, kullanıcı arabirimi öğelerinize otomatik olarak varsayılan hareket ve görsel efektleri uygular. Bu, uygulamanızın Apple TV platformunun kullanıcılarına yerel ve tanıdık hissettirir ve Odaklanabilir Öğeler arasında akıcı ve sezgisel bir hareket sağlar.
  • Odağı Beklenen Yönlerde Taşıma - Apple TV'de neredeyse her öğe dolaylı işleme kullanır. Örneğin, kullanıcı odağı taşımak için Siri Remote'ı kullanır ve sistem o anda odaklanmış olan öğeyi görünür tutmak için arabirimi otomatik olarak kaydırıyor. Uygulamanız bu tür bir etkileşim uyguluyorsa odağın kullanıcının hareketi yönünde hareket etmesini sağlayın. Bu nedenle, kullanıcının Siri Uzak odağında sağa doğru çekmesi gerekiyorsa (bu, ekranın sola kaydırmasına neden olabilir). Bu kuralın tek özel durumu, doğrudan işleme kullanan tam ekran öğelerdir (yukarı çekme işlemi öğeyi yukarı taşır).
  • Odaklanmış Öğenin Belirgin Olduğundan Emin Olun - Kullanıcılarınız kullanıcı arabirimi öğelerinizle uzaktan etkileşimde bulunduğundan, şu anda odaklanmış öğenin öne çıkması kritik önem taşır. Bu genellikle yerleşik UIKit öğeler tarafından otomatik olarak işlenir. Özel denetimler için odağı göstermek için öğe boyutu veya gölge gibi özellikleri kullanın.
  • Odaklanmış Öğeleri Duyarlı Hale Getirmek için Parallax kullanın - Siri Remote'ta küçük, dairesel hareketler, odaklanmış öğenin nazik, gerçek zamanlı hareketine neden olur. Bu Parallax Efekti, kullanıcıya odaklanmış öğeyle bağlantı hissi vermek için Katmanlı Görüntüler'de yerleşik UIKitolarak bulunur.
  • Uygun Boyutta Odaklanabilir Öğeler Oluşturma - Geniş aralıklı büyük öğeleri seçmek ve gezinmek daha küçük öğelere göre daha kolaydır.
  • İyi Görünecek Kullanıcı Arabirimi Öğesi Tasarla Odaklanmış veya Odaklanmamış - Genellikle Apple TV, boyutunu artırarak Odaklanmış Öğeyi temsil eder. Uygulamalarınızın kullanıcı arabirimi öğelerinin herhangi bir sunu boyutuna harika göründüğüne ve gerekirse daha büyük boyutlu öğeler için varlıklar sağladığından emin olun.
  • Odak Değişikliklerini Akıcı Temsil Et - Geçişlerin jarring olmasını sağlamak için Odaklanmış ve Odaklanmamış bir öğe arasında sorunsuz bir şekilde belirmek için animasyon kullanın.
  • İmleç Görüntüleme - Kullanıcılar, imleci ekranda hareket ettirerek değil, Odak kullanarak uygulamanızın kullanıcı arabiriminde gezinmeyi bekler. Kullanıcı Arabiriminiz tutarlı bir kullanıcı deneyimi sunmak için her zaman Odak Modeli'ni kullanmalıdır.

Odakla Çalışma

Odaklanabilir Öğe haline gelebilen özel bir denetim oluşturmak istediğiniz zamanlar olabilir. Bu durumda özelliğini geçersiz kılın CanBecomeFocused ve döndür, trueaksi takdirde döndürür false. Örneğin:

public class myView : UIView
{
    public override bool CanBecomeFocused {
        get {return true;}
    }
}

İstediğiniz zaman geçerli öğe olup olmadığını görmek için denetimin UIKit özelliğini kullanabilirsinizFocused. Kullanıcı arabirimi öğesi şu anda odaktaysa true , başka bir öğede yoktur. Örneğin:

// Is my view in focus?
if (myView.Focused) {
    // Do something
    ...
}

Odağı kod aracılığıyla doğrudan başka bir ui öğesine taşıyamasanız da, özelliğini trueolarak ayarlayarak PreferredFocusedView bir ekran yüklendiğinde önce hangi UI öğesinin odağı alabileceğini belirtebilirsiniz. Örneğin:

// Make the play button the starting focus item
playButton.PreferredFocusedView = true;

Odak Güncelleştirmeler ile çalışma

Kullanıcı odağın bir kullanıcı arabirimi öğesinden diğerine kaymasına neden olduğunda (örneğin, Siri Remote'taki bir harekete yanıt olarak) odak güncelleştirme olayı hem odağı kaybeden öğeye hem de odağı alan öğeye gönderilir.

veya UIViewControlleröğesinden UIView devralan özel öğeler için, Odak Güncelleştirme Olayı ile çalışmak için birkaç yöntemi geçersiz kılabilirsiniz:

  • DidUpdateFocus - Görünüm odağı her kazandığında veya kaybettiğinde bu yöntem çağrılır.
  • ShouldUpdateFocus - Odağın taşınmasına izin verilen yeri tanımlamak için bu yöntemi kullanın.

Odak Altyapısı'nın odağı ui öğesine geri taşımasını PreferredFocusedView istemek için Görünüm Denetleyicisi'nin yöntemini çağırın SetNeedsUpdateFocus .

Önemli

Çağrının SetNeedsUpdateFocus etkili olması için çağrılan Görünüm Denetleyicisi'nin o anda odakta olan Görünüm'ü içermesi gerekir.

Odak Kılavuzlarıyla Çalışma

tvOS'ta yerleşik olarak bulunan Odak Altyapısı, yatay ve dikey kılavuza düşen öğeler arasındaki hareketleri işlemede harikadır. Genellikle kullanıcı arabirimi öğelerini arabirim tasarımınıza eklemekten başka bir şey yapmanız gerekmez ve Odak Altyapısı bu öğeler arasındaki hareketi geliştirici müdahalesi olmadan otomatik olarak işler.

Ancak, kullanıcı arabirimi tasarımınızın gereksinimleri nedeniyle, kullanıcı arabirimi öğelerinin yatay ve dikey bir kılavuza düşmediği ve birbirine çapraz oldukları için erişilemez olabileceği zamanlar olabilir. Bunun nedeni Odak Altyapısı'nın yalnızca kullanıcı arabirimi öğeleri arasındaki basit Yukarı, Aşağı, Sol ve Sağ hareketlerini işleyecek şekilde tasarlanmış olmasıdır.

Bir örnek için aşağıdaki kullanıcı arabirimi düzenini inceleyin:

Odak Kılavuzlarıyla çalışma örneği

Daha Fazla Bilgi düğmesi, Satın Al düğmesiyle yatay ve dikey bir kılavuza düşmediğinden, kullanıcıya erişilemez. Ancak bu, Odak Altyapısı'na hareket ipuçları sağlamak için Odak Kılavuzu kullanılarak kolayca düzeltilebilir.

Odak Kılavuzu (UIFocusGuide), görünümün görünür olmayan bir alanını Odak Altyapısına Odaklanabilir olarak kullanıma sunar, böylece Odak başka bir görünüme yönlendirilebilir.

Bu nedenle, yukarıda verilen örneği çözmek için, Daha Fazla Bilgi ve Satın Al düğmeleri arasında bir Odak Kılavuzu oluşturmak üzere Görünüm Denetleyicisi'ne aşağıdaki kod eklenebilir:

public UIFocusGuide FocusGuide = new UIFocusGuide ();
...

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Add Focus Guide to layout
    View.AddLayoutGuide (FocusGuide);

    // Define Focus Guide that will allow the user to move
    // between the More Info and Buy buttons.
    FocusGuide.LeftAnchor.ConstraintEqualTo (BuyButton.LeftAnchor).Active = true;
    FocusGuide.TopAnchor.ConstraintEqualTo (MoreInfoButton.TopAnchor).Active = true;
    FocusGuide.WidthAnchor.ConstraintEqualTo (BuyButton.WidthAnchor).Active = true;
    FocusGuide.HeightAnchor.ConstraintEqualTo (MoreInfoButton.HeightAnchor).Active = true;
}

İlk olarak, yöntemi kullanılarak yeni UIFocusGuide bir oluşturulur ve Görünümün Düzen Kılavuzu koleksiyonuna AddLayoutGuide eklenir.

Ardından Odak Kılavuzunun Üst, Sol, Genişlik ve Yükseklik Tutturucuları, Daha Fazla Bilgi ve Satın Al düğmelerine göre ayarlanır ve bu düğmelerin arasında konumlandırılır. Bkz.

Örnek Odak Kılavuzu

Ayrıca, yeni kısıtlamaların, özellikleri trueolarak ayarlanarak Active oluşturulduklarında etkinleştirildiğini de unutmayın:

FocusGuide.LeftAnchor.ConstraintEqualTo (...).Active = true;

Yeni Odak Kılavuzu oluşturulup Görünüme eklendikten sonra Görünüm Denetleyicisi'nin DidUpdateFocus yöntemi geçersiz kılınabilir ve Daha Fazla Bilgi ve Satın Al düğmeleri arasında hareket etmek için aşağıdaki kod eklenebilir:

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    base.DidUpdateFocus (context, coordinator);

    // Get next focusable item from context
    var nextFocusableItem = context.NextFocusedView;

    // Anything to process?
    if (nextFocusableItem == null) return;

    // Decide the next focusable item based on the current
    // item with focus
    if (nextFocusableItem == MoreInfoButton) {
        // Move from the More Info to Buy button
        FocusGuide.PreferredFocusedView = BuyButton;
    } else if (nextFocusableItem == BuyButton) {
        // Move from the Buy to the More Info button
        FocusGuide.PreferredFocusedView = MoreInfoButton;
    } else {
        // No valid move
        FocusGuide.PreferredFocusedView = null;
    }
}

İlk olarak, bu kod NextFocusedView (context) içinde geçirilen dosyasından UIFocusUpdateContext alır. Bu görünüm ise nullişleme gerekmez ve yöntemden çıkılır.

Ardından, nextFocusableItem değerlendirilir. Daha Fazla Bilgi veya Satın Al düğmeleriyle eşleşiyorsa Odak, Odak Kılavuzu'nun PreferredFocusedView özelliği kullanılarak karşı düğmeye gönderilir. Örneğin:

// Move from the More Info to Buy button
FocusGuide.PreferredFocusedView = BuyButton;

Odak kaydırmasının PreferredFocusedView kaynağı iki düğmenin de olması durumunda özelliği temizlenir:

// No valid move
FocusGuide.PreferredFocusedView = null;

Koleksiyonlarda Odakla Çalışma

Tek bir öğenin veya içinde UICollectionViewUITableViewodaklanabilir olup olmadığına karar verirken sırasıyla veya UITableViewDelegate yöntemlerini UICollectionViewDelegate geçersiz kılacaksınız. Örneğin:

public class CardHandDelegate : UICollectionViewDelegateFlowLayout
{
    ...
    public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
    {
        if (indexPath == null) {
            return false;
        } else {
            var controller = collectionView as CardHandViewController;
            return !controller.Hand [indexPath.Row].IsFaceDown;
        }
    }
}

Yöntemi, CanFocusItem geçerli öğenin odakta olması durumunda döndürür true , aksi takdirde döndürür false.

Bir UICollectionView veya öğesinin UITableView odağı kaybetmesi ve odağı yeniden kazanmasını anımsamasını ve son öğeye geri yüklemesini istiyorsanız, özelliğini olarak ayarlayın.RemembersLastFocusedIndexPathtrue

Odak ve Parallax

Yukarıda belirtildiği gibi, gezinti olayı sırasında geçerli öğe olduğunda kullanıcı arabirimi öğesinin odakta olduğu kabul edilir. Genellikle bir öğenin odak noktası olarak boyutu biraz artar ve gölge kullanılarak görsel olarak yükseltilir.

Kullanıcı Siri Remote'da yavaş, dairesel bir hareket yaparsa Odaklanmış Öğe bu harekete yanıt olarak gerçek zamanlı olarak hareket eder. Sway meydana geldikçe, görüntünün üzerine ışıklı bir parlaklık uygulanır ve bu da yüzeyin parlıyor gibi görünmesini sağlar. Belirli bir işlem yapılmadığında odak dışı içerikler soluk görünür ve Odaklanmış öğe daha da büyür.

Bu efektler birlikte çalışarak TV ekranındaki içerikle Apple TV ile kanepeden etkileşim kuran kullanıcı arasında zihinsel bir bağlantı sağlar.

Apple TV'de bu Parallax Etkisi, 3B derinlik ve dinamiği odaktaki öğelere iletmek için sistem genelinde kullanılır. tvOS, bu etkiyi oluşturmak için dinamik olarak taşınıp ölçeklendirilen bir dizi saydam, Katmanlı Görüntü kullanır.

Katmanlı Görüntüler, tvOS uygulamanızın simgesi için gereklidir ve dinamik Üst Raf içeriği için desteklenir. Apple, gerekli olmasa da uygulamanızın kullanıcı arabirimindeki diğer Odaklanabilir Öğelerde Katmanlı Görüntülerin uygulanmasını kesinlikle önerir.

Parallax'i etkinleştirme

Denetim UIImageView (veya öğesinden UIImageViewdevralan herhangi bir denetim) Parallax Efektini otomatik olarak destekler. Varsayılan olarak, bu destek devre dışıdır ve etkinleştirmek için aşağıdaki kodu kullanın:

myImageView.AdjustsImageWhenAncestorFocused = true;

Bu özellik olarak trueayarlandığında, Görüntü Görünümü kullanıcı tarafından seçildiğinde ve odakta olduğunda Parallax Efektini otomatik olarak alır.

Özet

Bu makalede Odak kavramı ve Xamarin.tvOS uygulamasının Kullanıcı Arabiriminde Gezintiyi işlemek için nasıl kullanıldığı ele alınmıştır. Yerleşik tvOS Gezinti denetimlerinin gezinti sağlamak için Odak, Vurgulama ve Seçim'i nasıl kullandığını inceler. Ardından, Son kullanıcıya geçerli Gezinti Durumu hakkında görsel ipuçları sağlamak için Odak'ın Parallax ve Katmanlı Görüntüler ile nasıl kullanılabileceğini inceledi. Son olarak Odak, Odak Güncelleştirmeler, Koleksiyonlarda Odak ve Parallax'ı Etkinleştirme ile çalışmayı inceledi.