Görünümler ile ViewPager

ViewPager, gestural gezintisi uygulamanızı sağlayan bir düzen yöneticisidir. Gestural gezintisi, kullanıcının veri sayfalarında gezinmek için sola ve sağa doğru çekmesini sağlar. Bu kılavuzda, Görünümler'i veri sayfaları olarak kullanarak ViewPager ve PagerTabStrip ile çekilebilir kullanıcı arabiriminin nasıl uygulandığı açıklanmaktadır (sonraki kılavuzda sayfalar için Parçaların nasıl kullanılacağı açıklanmaktadır).

Genel bakış

Bu kılavuz, yaprak döken ve yaprak döken ağaçlardan oluşan bir görüntü galerisi uygulamak için nasıl kullanılacağını ViewPager gösteren adım adım bir tanıtım sağlayan bir kılavuzdur. Bu uygulamada, kullanıcı ağaç görüntülerini görüntülemek için bir "ağaç kataloğu" üzerinden sola ve sağa doğru çekin. Kataloğun her sayfasının en üstünde, ağacın adı birPagerTabStrip içinde listelenir ve ağaç görüntüsü içinde ImageViewgörüntülenir. Bir bağdaştırıcı, temel alınan veri modeline ViewPager arabirim sağlamak için kullanılır. Bu uygulama, 'den PagerAdaptertüretilen bir bağdaştırıcı uygular.

Tabanlı uygulamalar genellikle s ile Fragmentuygulansa ViewPagerda, s'nin ek karmaşıklığının Fragmentgerekli olmadığı görece basit kullanım örnekleri vardır. Örneğin, bu kılavuzda gösterilen temel görüntü galerisi uygulaması s kullanımını Fragmentgerektirmez. İçerik statik olduğundan ve kullanıcı farklı görüntüler arasında yalnızca ileri geri çekildiğinden, standart Android görünümleri ve düzenleri kullanılarak uygulama daha basit tutulabilir.

Uygulama Projesi Başlatma

TreePager adlı yeni bir Android projesi oluşturun (yeni Android projeleri oluşturma hakkında daha fazla bilgi için bkz. Merhaba, Android). Ardından NuGet Paket Yöneticisi başlatın. (NuGet paketlerini yükleme hakkında daha fazla bilgi için bkz. İzlenecek yol: Projenize NuGet ekleme). Android Destek Kitaplığı v4'ü bulun ve yükleyin:

Bu, Android Destek Kitaplığı v4 tarafından yeniden alınan tüm ek paketleri de yükler.

Örnek Veri Kaynağı Ekleme

Bu örnekte, ağaç kataloğu veri kaynağı (sınıfı tarafından TreeCatalog temsil edilir) ViewPager öğesini öğe içeriğiyle sağlar. TreeCatalog , bağdaştırıcının s oluşturmak Viewiçin kullanacağı ağaç görüntülerinin ve ağaç başlıklarının hazır bir koleksiyonunu içerir. TreeCatalog Oluşturucu bağımsız değişken gerektirmez:

TreeCatalog treeCatalog = new TreeCatalog();

içindeki TreeCatalog görüntü koleksiyonu, her görüntüye bir dizin oluşturucu tarafından erişilecek şekilde düzenlenir. Örneğin, aşağıdaki kod satırı koleksiyondaki üçüncü görüntünün görüntü kaynak kimliğini alır:

int imageId = treeCatalog[2].imageId;

uygulamasının uygulama ayrıntıları TreeCatalog anlaşılmasıyla ViewPagerTreeCatalog ilgili olmadığından kod burada listelenmez. kaynak koduna TreeCatalog TreeCatalog.cs adresinden ulaşabilirsiniz. Bu kaynak dosyayı indirin (veya kodu kopyalayıp yeni bir TreeCatalog.cs dosyasına yapıştırın) ve projenize ekleyin. Ayrıca, görüntü dosyalarını indirip Resources/drawable klasörünüzde açın ve bunları projeye ekleyin.

ViewPager Düzeni Oluşturma

Resources/layout/Main.axml dosyasını açın ve içeriğini aşağıdaki XML ile değiştirin:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</android.support.v4.view.ViewPager>

Bu XML, ekranın tamamını kaplayan bir ViewPager tanımlar. Destek kitaplığında paketlendiğinden android.support.v4.view.ViewPager ViewPager tam adını kullanmanız gerektiğini unutmayın. ViewPageryalnızca Android Destek Kitaplığı v4'ten kullanılabilir; Android SDK'sında kullanılamaz.

ViewPager'ı ayarlama

MainActivity.cs düzenleyin ve aşağıdaki using deyimi ekleyin:

using Android.Support.V4.View;

OnCreate yöntemini aşağıdaki kod ile değiştirin:

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);
    ViewPager viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
    TreeCatalog treeCatalog = new TreeCatalog();
}

Bu kod şunu yapar:

1. Main.axml düzen kaynağından görünümü ayarlar.

2. düzeninden öğesine ViewPager başvuru alır.

3. Veri kaynağı olarak yeni TreeCatalog bir örnek oluşturur.

Bu kodu derleyip çalıştırdığınızda aşağıdaki ekran görüntüsüne benzer bir ekran görmeniz gerekir:

Bu noktada, ViewPager TreeCatalog'daki içeriğe erişmek için bir bağdaştırıcı olmadığından boş olur. Sonraki bölümde, TreeCatalog'a bağlamak ViewPager için bir PagerAdapter oluşturulur.

Bağdaştırıcıyı Oluşturma

ViewPagerve veri kaynağı arasında ViewPager yer alan bir bağdaştırıcı denetleyicisi nesnesi kullanır (Bağdaştırıcı'daki çizime bakın). Bu verilere erişmek için, ViewPager 'den PagerAdaptertüretilen özel bir bağdaştırıcı sağlamanız gerekir. Bu bağdaştırıcı her ViewPager sayfayı veri kaynağındaki içerikle doldurur. Bu veri kaynağı uygulamaya özgü olduğundan, özel bağdaştırıcı verilere nasıl erişildiğini anlayan koddur. Kullanıcı sayfalarını kaydırdıkça ViewPager, bağdaştırıcı veri kaynağından bilgileri ayıklar ve görüntülenecek sayfalara ViewPager yükler.

bir PagerAdapteruyguladığınızda, aşağıdakileri geçersiz kılmalısınız:

• InstantiateItem – Belirli bir konum için sayfayı (View) oluşturur ve görünüm koleksiyonuna ViewPagerekler.

• DestroyItem : Belirli bir konumdan sayfa kaldırır.

• Count : Kullanılabilir görünüm (sayfa) sayısını döndüren salt okunur özellik.

• IsViewFromObject – Bir sayfanın belirli bir anahtar nesnesiyle ilişkilendirilip ilişkilendirilmediğini belirler. (Bu nesne yöntemi tarafından InstantiateItem oluşturulur.) Bu örnekte anahtar nesne veri nesnesidir TreeCatalog .

TreePagerAdapter.cs adlı yeni bir dosya ekleyin ve içeriğini aşağıdaki kodla değiştirin:

using System;
using Android.App;
using Android.Runtime;
using Android.Content;
using Android.Views;
using Android.Widget;
using Android.Support.V4.View;
using Java.Lang;

namespace TreePager
{
    class TreePagerAdapter : PagerAdapter
    {
        public override int Count
        {
            get { throw new NotImplementedException(); }
        }

        public override bool IsViewFromObject(View view, Java.Lang.Object obj)
        {
            throw new NotImplementedException();
        }

        public override Java.Lang.Object InstantiateItem (View container, int position)
        {
            throw new NotImplementedException();
        }

        public override void DestroyItem(View container, int position, Java.Lang.Object view)
        {
            throw new NotImplementedException();
        }
    }
}

Bu kod temel PagerAdapter uygulamayı saplar. Aşağıdaki bölümlerde, bu yöntemlerin her biri çalışan kodla değiştirilir.

Oluşturucuyu Uygulama

Uygulama örneği oluşturduğunda TreePagerAdapter, bir bağlam () MainActivityve örneklemini TreeCatalogsağlar. aşağıdaki üye değişkenlerini ve oluşturucuyu TreePagerAdapter.cs sınıfının en üstüne TreePagerAdapter ekleyin:

Context context;
TreeCatalog treeCatalog;

public TreePagerAdapter (Context context, TreeCatalog treeCatalog)
{
    this.context = context;
    this.treeCatalog = treeCatalog;
}

Bu oluşturucunun amacı, öğesinin kullanacağı bağlamı ve TreeCatalog örneği depolamaktır TreePagerAdapter .

Uygulama Sayısı

Uygulama Count nispeten basittir: ağaç kataloğundaki ağaç sayısını döndürür. değerini aşağıdaki kodla değiştirin Count :

public override int Count
{
    get { return treeCatalog.NumTrees; }
}

NumTrees özelliğiTreeCatalog, veri kümesindeki ağaç sayısını (sayfa sayısı) döndürür.

InstantiateItem Uygulama

yöntemi, InstantiateItem belirli bir konum için sayfayı oluşturur. Ayrıca yeni oluşturulan görünümü 'nin görünüm koleksiyonuna ViewPagerda eklemelidir. Bunu mümkün kılmak için, kapsayıcı ViewPager parametresi olarak kendisini geçirir.

InstantiateItem yöntemini aşağıdaki kod ile değiştirin:

public override Java.Lang.Object InstantiateItem (View container, int position)
{
    var imageView = new ImageView (context);
    imageView.SetImageResource (treeCatalog[position].imageId);
    var viewPager = container.JavaCast<ViewPager>();
    viewPager.AddView (imageView);
    return imageView;
}

Bu kod şunu yapar:

1. Ağaç görüntüsünü belirtilen konumda görüntülemek için yeni ImageView bir örnek oluşturur. Uygulamanın MainActivity içeriği oluşturucuya ImageView geçirilecek bağlamdır.

2. ImageView Kaynağı, belirtilen konumdaki TreeCatalog görüntü kaynak kimliğine ayarlar.

3. Geçirilen kapsayıcıyı View bir ViewPager başvuruya döndürür. Bu atamayı düzgün bir şekilde gerçekleştirmek için kullanmanız JavaCast<ViewPager>() gerektiğini unutmayın (Android'in çalışma zamanı tarafından denetlenen bir tür dönüştürmesi gerçekleştirmesi için bu gereklidir).

4. örneğini ImageView öğesine ViewPager ekler ve öğesini çağırana döndürür ImageView .

ViewPager görüntü konumunda positiongörüntülendiğinde, bunu ImageViewgörüntüler. Başlangıçta, InstantiateItem ilk iki sayfayı görünümlerle doldurmak için iki kez çağrılır. Kullanıcı kaydırılırken, görünümler o anda görüntülenen öğenin hemen arkasında ve önünde tutmak için yeniden çağrılır.

DestroyItem Uygulama

yöntemi, DestroyItem verilen konumdan bir sayfa kaldırır. Belirli bir konumdaki görünümün değişebildiği uygulamalarda, ViewPager yeni bir görünümle değiştirmeden önce bu konumdaki eski bir görünümü kaldırmanın bir yolu olmalıdır. TreeCatalog Örnekte, her konumdaki görünüm değişmez, bu nedenle tarafından kaldırılan DestroyItem bir görünüm, söz konusu konum için çağrıldığında InstantiateItem yeniden eklenir. (Daha iyi verimlilik için, bir havuz uygulayarak aynı konumda yeniden görüntülenecek s'leri geri dönüştürebilir View.)

DestroyItem yöntemini aşağıdaki kod ile değiştirin:

public override void DestroyItem(View container, int position, Java.Lang.Object view)
{
    var viewPager = container.JavaCast<ViewPager>();
    viewPager.RemoveView(view as View);
}

Bu kod şunu yapar:

1. Geçirilen kapsayıcıyı View bir ViewPager başvuruya aktarır.

2. Geçirilen Java nesnesini (view) C# View (view as View) içine dönüştürür;

3. görünümünden görünümü ViewPagerkaldırır.

IsViewFromObject Uygulama

Kullanıcı içerik sayfalarından sola ve sağa doğru kaydırdıkça, ViewPager belirtilen konumdaki çocuğun View aynı konum için bağdaştırıcının nesnesiyle ilişkilendirildiğini doğrulamak için çağrılar IsViewFromObject (bu nedenle bağdaştırıcının nesnesi nesne anahtarı olarak adlandırılır). Görece basit uygulamalar için ilişkilendirme kimliklerden biridir; bağdaştırıcının bu örnekteki nesne anahtarı, daha önce aracılığıyla InstantiateItemöğesine döndürülen ViewPager görünümdür. Ancak diğer uygulamalar için nesne anahtarı, bu konumda görüntülenen alt görünümle ViewPager ilişkili (ancak aynı değil) bağdaştırıcıya özgü başka bir sınıf örneği olabilir. Geçirilen görünümün ve nesne anahtarının ilişkilendirilip ilişkilendirilmediğini yalnızca bağdaştırıcı bilir.

IsViewFromObject düzgün çalışması için PagerAdapter uygulanmalıdır. Belirli bir konum için döndürürse IsViewFromObject false , ViewPager görünümü bu konumda görüntülemez. TreePager Uygulamada, tarafından InstantiateItem döndürülen nesne anahtarı bir ağacın sayfasıdırView, bu nedenle kodun yalnızca kimliği denetlemesi gerekir (nesne anahtarı ve görünüm bir ve aynıdır). değerini aşağıdaki kodla değiştirin IsViewFromObject :

public override bool IsViewFromObject(View view, Java.Lang.Object obj)
{
    return view == obj;
}

Bağdaştırıcıyı ViewPager'a ekleme

TreePagerAdapter artık uygulaması uygulandığına göre, bunu ViewPageröğesine eklemenin zamanı geldi. MainActivity.cs aşağıdaki kod satırını yönteminin OnCreate sonuna ekleyin:

viewPager.Adapter = new TreePagerAdapter(this, treeCatalog);

Bu kod TreePagerAdapter, bağlam () olarak değerini MainActivity geçirerek örneğini örneğini alırthis. Örneği, TreeCatalog oluşturucunun ikinci bağımsız değişkenine geçirilir. ' ViewPagers Adapter özelliği örneği oluşturulduğunda TreePagerAdapter nesnesine ayarlanır; bu, öğesini TreePagerAdapter içine ViewPagerekler.

Çekirdek uygulama artık tamamlandı; uygulamayı derleyin ve çalıştırın. Ağaç kataloğunun ilk görüntüsünün, bir sonraki ekran görüntüsünde solda gösterildiği gibi ekranda gösterildiğini görmeniz gerekir. Daha fazla ağaç görünümü görmek için sola doğru çekin, ardından ağaç kataloğunda geri gitmek için sağa doğru çekin:

Çağrı İşareti Göstergesi Ekleme

Bu en düşük ViewPager uygulama, ağaç kataloğunun görüntülerini görüntüler, ancak kullanıcının katalog içinde nerede olduğuna ilişkin hiçbir gösterge sağlamaz. Sonraki adım bir PagerTabStripeklemektir. , PagerTabStrip kullanıcıya hangi sayfanın görüntülendiğini bildirir ve önceki ve sonraki sayfaların ipucunu görüntüleyerek gezinti bağlamı sağlar. PagerTabStrip , bir öğesinin geçerli sayfası için gösterge olarak kullanılmak üzere tasarlanmıştır; kullanıcı her sayfada ViewPagergezindikçe kaydırılır ve güncelleştirilir.

Resources/layout/Main.axml dosyasını açın ve düzene bir PagerTabStrip ekleyin:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.PagerTabStrip
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="top"
          android:paddingBottom="10dp"
          android:paddingTop="10dp"
          android:textColor="#fff" />

</android.support.v4.view.ViewPager>

ViewPager ve PagerTabStrip birlikte çalışacak şekilde tasarlanmıştır. Bir düzenin içinde bildirdiğinizdePagerTabStrip, ViewPager öğesini otomatik olarak bulur PagerTabStrip ve ViewPager bağdaştırıcıya bağlar. Uygulamayı derleyip çalıştırdığınızda, her ekranın üst kısmında boş PagerTabStrip öğesinin görüntülendiğini görmeniz gerekir:

Başlık Görüntüleme

Her sayfa sekmesine başlık eklemek için -derived sınıfında yöntemini PagerAdapteruygulayınGetPageTitleFormatted. ViewPager , sayfayı belirtilen konumda açıklayan başlık dizesini almak için (uygulandıysa) öğesini çağırır GetPageTitleFormatted . TreePagerAdapter.cs sınıfına TreePagerAdapter aşağıdaki yöntemi ekleyin:

public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
    return new Java.Lang.String(treeCatalog[position].caption);
}

Bu kod, ağaç kataloğunda belirtilen sayfadan (konum) ağaç resim yazısı dizesini alır, Java'ya StringViewPagerdönüştürür ve öğesine döndürür. Uygulamayı bu yeni yöntemle çalıştırdığınızda, her sayfada ağaç PagerTabStripresim yazısı görüntülenir. Alt çizgi olmadan ekranın üst kısmında ağaç adını görmeniz gerekir:

Katalogdaki her resim yazısı ağaç resmini görüntülemek için ileri geri çekebilirsiniz.

PagerTitleStrip Çeşitlemesi

PagerTitleStrip, şu anda seçili olan PagerTabStrip sekme için bir alt çizgi eklemesi dışında buna çok benzerPagerTabStrip. yukarıdaki düzende öğesini ile PagerTitleStrip değiştirebilir PagerTabStrip ve ile nasıl göründüğünü PagerTitleStripgörmek için uygulamayı yeniden çalıştırabilirsiniz:

öğesine dönüştürdüğünüzde PagerTitleStripalt çizginin kaldırıldığını unutmayın.

Özet

Bu izlenecek yol, s kullanmadan Fragmenttemel ViewPagertabanlı bir uygulama oluşturmaya ilişkin adım adım bir örnek sağladı. Görüntü ve resim yazısı dizelerini içeren örnek bir veri kaynağı, görüntüleri görüntülemek için bir ViewPager düzen ve veri kaynağına bağlanan ViewPager bir PagerAdapter alt sınıf sundu. Kullanıcının veri kümesinde gezinmesine yardımcı olmak için, her sayfanın en üstünde resim yazısının nasıl görüntüleneceğini PagerTabStrip PagerTitleStrip açıklayan yönergeler eklenmiştir.