Parçalar ile ViewPager

Makale
03/01/2018

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, veri sayfaları olarak Parçalar kullanılarak ViewPager ile çekilebilir kullanıcı arabiriminin nasıl uygulanacakları açıklanmaktadır.

Genel bakış

ViewPager genellikle parçalarla birlikte kullanılır, böylece içindeki her sayfanın ViewPageryaşam döngüsünü yönetmek daha kolay olur. Bu kılavuzda flash ViewPager kartlarda bir dizi matematik sorunu sunan FlashCardPager adlı bir uygulama oluşturmak için kullanılır. Her flash kart bir parça olarak uygulanır. Kullanıcı flash kartlardan sola ve sağa doğru çekin ve yanıtını ortaya çıkarmak için matematik sorununa dokunun. Bu uygulama, her flash kart için bir Fragment örnek oluşturur ve 'den FragmentPagerAdaptertüretilen bir bağdaştırıcı uygular. Viewpager ve Görünümler'de, işin çoğu yaşam döngüsü yöntemlerinde MainActivity yapılmıştır. FlashCardPager'da, işin çoğu yaşam döngüsü yöntemlerinden birinde bir Fragment tarafından yapılır.

Bu kılavuzda parçaların temelleri ele alınmamaktadır. Xamarin.Android'deki parçaları henüz bilmiyorsanız, parçaları kullanmaya başlamanıza yardımcı olması için bkz . Parçalar .

Uygulama Projesi Başlatma

FlashCardPager adlı yeni bir Android projesi oluşturun. 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). Viewpager ve Views bölümünde açıklandığı gibi Xamarin.Android.Support.v4 paketini bulun ve yükleyin.

Örnek Veri Kaynağı Ekleme

FlashCardPager'da veri kaynağı sınıfı tarafından FlashCardDeck temsil edilen bir flash kart destesidir; bu veri kaynağı öğesini ViewPager öğe içeriğiyle sağlar. FlashCardDeck matematik sorunları ve yanıtlarından oluşan hazır bir koleksiyon içerir. FlashCardDeck Oluşturucu bağımsız değişken gerektirmez:

FlashCardDeck flashCards = new FlashCardDeck();

içindeki FlashCardDeck flash kartların koleksiyonu, her flash karta bir dizin oluşturucu tarafından erişilecek şekilde düzenlenmiştir. Örneğin, aşağıdaki kod satırı destedeki dördüncü flash kart sorununu alır:

string problem = flashCardDeck[3].Problem;

Bu kod satırı, önceki soruna karşılık gelen yanıtı alır:

string answer = flashCardDeck[3].Answer;

uygulamasının uygulama ayrıntıları FlashCardDeck anlaşılmasıyla ViewPagerFlashCardDeck ilgili olmadığından kod burada listelenmez. kaynak kodu FlashCardDeck FlashCardDeck.cs kullanılabilir. Bu kaynak dosyayı indirin (veya kodu kopyalayıp yeni bir FlashCardDeck.cs dosyasına yapıştırın) ve projenize 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 deyimleri ekleyin:

using Android.Support.V4.View;
using Android.Support.V4.App;

sınıf bildirimini MainActivity öğesinden FragmentActivitytüretilmiş olacak şekilde değiştirin:

public class MainActivity : FragmentActivity

MainActivity , parçalarınFragmentActivity desteğini yönetmeyi bildiği için (yerine Activity) FragmentActivity kaynaktan türetilir. 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);
    FlashCardDeck flashCards = new FlashCardDeck();
}

Bu kod şunu yapar:

Main.axml düzen kaynağından görünümü ayarlar.
düzeninden öğesine ViewPager başvuru alır.
Veri kaynağı olarak yeni FlashCardDeck 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 kullanılan parçaların eksik ViewPagerolması nedeniyle boş olur ve FlashCardDeck'teki verilerden bu parçaları oluşturmak için bir bağdaştırıcı eksiktir.

Aşağıdaki bölümlerde, her flash kartın işlevselliğini uygulamak için bir FlashCardFragment oluşturulur ve içindeki verilerden FlashCardDeckoluşturulan parçalara bağlanmak ViewPager için bir FragmentPagerAdapter oluşturulur.

Parça Oluşturma

Her flash kart adlı FlashCardFragmentbir kullanıcı arabirimi parçası tarafından yönetilir. FlashCardFragment'nin görünümü, tek bir flash kartla birlikte bulunan bilgileri görüntüler. her örneği FlashCardFragment tarafından ViewPagerbarındırılır. FlashCardFragment'nin görünümü, flash kart sorunu metnini görüntüleyen bir TextView görünümden oluşur. Bu görünüm, kullanıcı flash kart sorusuna dokunduğunda yanıtı görüntülemek için kullanan bir Toast olay işleyicisi uygular.

FlashCardFragment Düzenini Oluşturma

Uygulanabilmesi FlashCardFragment için önce düzeni tanımlanmalıdır. Bu düzen, tek parça için bir parça kapsayıcı düzenidir. Kaynaklara/düzene flashcard_layout.axml adlı yeni bir Android düzeni ekleyin. Resources/layout/flashcard_layout.axml dosyasını açın ve içeriğini aşağıdaki kodla değiştirin:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/flash_card_question"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:textSize="100sp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Question goes here" />
    </RelativeLayout>

Bu düzen tek bir flash kart parçasını tanımlar; her parça, büyük (100sp) yazı tipi kullanarak matematik sorunu görüntüleyen bir parçadan oluşur TextView . Bu metin, flash kartta dikey ve yatay olarak ortalanır.

İlk FlashCardFragment Sınıfını Oluşturma

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

using System;
using Android.OS;
using Android.Views;
using Android.Widget;
using Android.Support.V4.App;

namespace FlashCardPager
{
    public class FlashCardFragment : Android.Support.V4.App.Fragment
    {
        public FlashCardFragment() { }

        public static FlashCardFragment newInstance(String question, String answer)
        {
            FlashCardFragment fragment = new FlashCardFragment();
            return fragment;
        }
        public override View OnCreateView (
            LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.Inflate (Resource.Layout.flashcard_layout, container, false);
            TextView questionBox = (TextView)view.FindViewById (Resource.Id.flash_card_question);
            return view;
        }
    }
}

Bu kod, flash kart görüntülemek için kullanılacak temel Fragment tanımı belirler. FlashCardFragment içinde tanımlanan Android.Support.V4.App.Fragmentdestek kitaplığı sürümünden Fragment türetildiğini unutmayın. Oluşturucu boş newInstance olduğundan, oluşturucu yerine yeni FlashCardFragment bir oluşturmak için fabrika yöntemi kullanılır.

Yaşam OnCreateView döngüsü yöntemi, öğesini TextViewoluşturur ve yapılandırılır. Parçanın TextView düzenini şişirir ve çağırana şişirilmiş TextView değerini döndürür. LayoutInflater ve ViewGroup düzeni şişirebilmesi için OnCreateView öğesine geçirilir. Paket, savedInstanceState kaydedilmiş durumdan OnCreateView öğesini yeniden oluşturmak TextView için kullanan verileri içerir.

Parçanın görünümü, çağrısı inflater.Inflatetarafından açıkça şişirilir. container Bağımsız değişken görünümün üst öğesidir ve false bayrağı, şişirilmiş görünümü görünümü görünümün üst öğesine eklemekten kaçınmasını sağlar (bu kılavuzun ilerleyen bölümlerinde bağdaştırıcının GetItem yöntemi çağrıldığında ViewPager eklenir).

FlashCardFragment'a Durum Kodu Ekleme

Bir Etkinlik gibi, bir parçanın da durumunu kaydetmek ve almak için kullandığı bir Bundle parçası vardır. FlashCardPager'da bu, Bundle ilişkili flash kartın soru ve yanıt metnini kaydetmek için kullanılır. FlashCardFragment.cs'da, sınıf tanımının en üstüne FlashCardFragment aşağıdaki Bundle anahtarları ekleyin:

private static string FLASH_CARD_QUESTION = "card_question";
private static string FLASH_CARD_ANSWER = "card_answer";

newInstance Fabrika yöntemini değiştirerek bir Bundle nesne oluşturup yukarıdaki anahtarları kullanarak geçirilen soruyu ve yanıt metnini örneklendirdikten sonra parçada depolayın:

public static FlashCardFragment newInstance(String question, String answer)
{
    FlashCardFragment fragment = new FlashCardFragment();

    Bundle args = new Bundle();
    args.PutString(FLASH_CARD_QUESTION, question);
    args.PutString(FLASH_CARD_ANSWER, answer);
    fragment.Arguments = args;

    return fragment;
}

Geçirilen Paketten bu bilgileri almak ve soru metnini içine TextBoxyüklemek için parça yaşam döngüsü yöntemini OnCreateView değiştirin:

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    string question = Arguments.GetString(FLASH_CARD_QUESTION, "");
    string answer = Arguments.GetString(FLASH_CARD_ANSWER, "");

    View view = inflater.Inflate(Resource.Layout.flashcard_layout, container, false);
    TextView questionBox = (TextView)view.FindViewById(Resource.Id.flash_card_question);
    questionBox.Text = question;

    return view;
}

answer Değişkeni burada kullanılmaz, ancak daha sonra bu dosyaya olay işleyici kodu eklendiğinde kullanılır.

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

ViewPager ve veri kaynağı arasında ViewPager yer alan bir bağdaştırıcı denetleyicisi nesnesi kullanır (ViewPager Bağdaştırıcısı makalesindeki ç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 örnekte parçalar kullanıldığı için , FragmentPagerAdapter FragmentPagerAdapter ' den PagerAdaptertüretilmiştir. FragmentPagerAdapter her sayfayı, kullanıcı sayfaya dönebildiği sürece parça yöneticisinde kalıcı olarak tutulan bir Fragment olarak temsil eder. Kullanıcı sayfaları FragmentPagerAdapter arasında ViewPagergezindikçe, veri kaynağından bilgileri ayıklar ve görüntülemek üzere s oluşturmak Fragmentüzere ViewPager kullanır.

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

Count : Kullanılabilir görünüm (sayfa) sayısını döndüren salt okunur özellik.
GetItem : Belirtilen sayfa için görüntülenecek parçayı döndürür.

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

using System;
using Android.Views;
using Android.Widget;
using Android.Support.V4.App;

namespace FlashCardPager
{
    class FlashCardDeckAdapter : FragmentPagerAdapter
    {
        public FlashCardDeckAdapter (Android.Support.V4.App.FragmentManager fm, FlashCardDeck flashCards)
            : base(fm)
        {
        }

        public override int Count
        {
            get { throw new NotImplementedException(); }
        }

        public override Android.Support.V4.App.Fragment GetItem(int position)
        {
            throw new NotImplementedException();
        }
    }
}

Bu kod temel FragmentPagerAdapter uygulamayı saplar. Aşağıdaki bölümlerde, bu yöntemlerin her biri çalışan kodla değiştirilir. Oluşturucunun amacı, parça yöneticisini 'nin temel sınıf oluşturucusna FlashCardDeckAdaptergeçirmektir.

Bağdaştırıcı Oluşturucuyu Uygulama

Uygulama örneği oluşturduğunda FlashCardDeckAdapter, parça yöneticisine bir başvuru sağlar ve örneğini oluşturur FlashCardDeck. aşağıdaki üye değişkenini FlashCardDeckAdapter.cs sınıfının en üstüne FlashCardDeckAdapter ekleyin:

public FlashCardDeck flashCardDeck;

Oluşturucuya aşağıdaki kod FlashCardDeckAdapter satırını ekleyin:

this.flashCardDeck = flashCards;

Bu kod satırı, öğesinin FlashCardDeck FlashCardDeckAdapter kullanacağı örneği depolar.

Uygulama Sayısı

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

public override int Count
{
    get { return flashCardDeck.NumCards; }
}

NumCards özelliğiFlashCardDeck, veri kümesindeki flash kart sayısını (parça sayısı) döndürür.

GetItem Uygulama

yöntemi, GetItem verilen konumla ilişkili parçayı döndürür. Flash kart destesinde bir konum için çağrıldığında GetItem , flash kart sorununu bu konumda görüntülemek için yapılandırılmış bir FlashCardFragment döndürür. GetItem yöntemini aşağıdaki kod ile değiştirin:

public override Android.Support.V4.App.Fragment GetItem(int position)
{
    return (Android.Support.V4.App.Fragment)
        FlashCardFragment.newInstance (
            flashCardDeck[position].Problem, flashCardDeck[position].Answer);
}

Bu kod şunu yapar:

Belirtilen konum için destedeki FlashCardDeck matematik sorunu dizesini arar.
Belirtilen konum için destedeki FlashCardDeck yanıt dizesini arar.
FlashCardFragment Flash kart sorununu ve yanıt dizelerini geçirerek fabrika yöntemini newInstanceçağırır.
Bu konuma ilişkin soru ve yanıt metnini içeren yeni bir flash kart Fragment oluşturur ve döndürür.

ViewPager konumunda işlendiğinde, flash kart destesinde Fragment positionbulunan matematik sorunu dizesini içeren öğesini position görüntülerTextBox.

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

FlashCardDeckAdapter 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:

FlashCardDeckAdapter adapter =
    new FlashCardDeckAdapter(SupportFragmentManager, flashCards);
viewPager.Adapter = adapter;

Bu kod FlashCardDeckAdapter, ilk bağımsız değişkende SupportFragmentManager öğesini geçirerek örneğini oluşturur. SupportFragmentManager(FragmentActivity özelliği, öğesine başvuru almak için FragmentManager kullanılır. hakkında FragmentManagerdaha fazla bilgi için bkz. Parçaları Yönetme.)

Çekirdek uygulama artık tamamlandı; uygulamayı derleyin ve çalıştırın. Flash kart destesinin 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 flash kart görmek için sola doğru çekin, ardından flash kart destesinde geri gitmek için sağa doğru çekin:

Bu minimum ViewPager uygulama, destedeki her flash kartı görüntüler, ancak kullanıcının destenin içinde nerede olduğuna dair hiçbir gösterge sağlamaz. Sonraki adım bir PagerTabStripeklemektir. , PagerTabStrip kullanıcıya hangi sorun numarasının görüntülendiğini bildirir ve önceki ve sonraki flash kartların ipucunu görüntüleyerek gezinti bağlamı sağlar.

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/pager"
    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>

Uygulamayı derleyip çalıştırdığınızda, her flash kartın üst kısmında boş PagerTabStrip değerin görüntülendiğini görmeniz gerekir:

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

Her sayfa sekmesine başlık eklemek için bağdaştırıcıda yöntemini uygulayın GetPageTitleFormatted . ViewPager , sayfayı belirtilen konumda açıklayan başlık dizesini almak için (uygulandıysa) öğesini çağırır GetPageTitleFormatted . FlashCardDeckAdapter.cs sınıfına FlashCardDeckAdapter aşağıdaki yöntemi ekleyin:

public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
    return new Java.Lang.String("Problem " + (position + 1));
}

Bu kod, flash kart destesindeki konumu bir sorun numarasına dönüştürür. Sonuçta elde edilen dize, öğesine döndürülen bir Java'ya String ViewPagerdönüştürülür. Uygulamayı bu yeni yöntemle çalıştırdığınızda, her sayfada içinde sorun numarası PagerTabStripgörüntülenir:

Her flash kartın üst kısmında görüntülenen flash kart destesinde sorun numarasını görmek için ileri geri çekebilirsiniz.

Kullanıcı Girişini İşle

FlashCardPager , içinde ViewPagerbir dizi parça tabanlı flash kart sunar, ancak her sorunun yanıtını ortaya çıkarmak için henüz bir yolu yoktur. Bu bölümde, kullanıcı flash kart sorunu metnine FlashCardFragment dokunduğunda yanıtı görüntülemek için öğesine bir olay işleyicisi eklenir.

FlashCardFragment.cs açın ve görünüm çağırana döndürülmeden hemen önce yöntemin sonuna OnCreateView aşağıdaki kodu ekleyin:

questionBox.Click += delegate
{
    Toast.MakeText(Activity.ApplicationContext,
            "Answer: " + answer, ToastLength.Short).Show();
};

Bu Click olay işleyicisi, kullanıcı öğesine dokunduğunda TextBoxgörüntülenen Bir Bildirimde yanıtı görüntüler. değişkenine answer geçirilen OnCreateViewPaketten durum bilgileri okunduğunda daha önce başlatılmıştı. Uygulamayı derleyip çalıştırın, ardından yanıtı görmek için her flash kartta sorun metnine dokunun:

Bu kılavuzda sunulan FlashCardPager, 'den FragmentActivitytüretilen bir MainActivity kullanır, ancak 'den AppCompatActivity de türetebilirsiniz MainActivity (parçaları yönetme desteği de sağlar).

Özet

Bu izlenecek yol, s kullanarak Fragmenttemel ViewPagertabanlı bir uygulama oluşturmaya ilişkin adım adım bir örnek sağladı. Flash kart soruları ve yanıtlarını içeren örnek bir veri kaynağı, flash kartları görüntülemek için bir ViewPager düzen ve veri kaynağına bağlanan ViewPager bir FragmentPagerAdapter alt sınıf sundu. Kullanıcının flash kartlarda gezinmesine yardımcı olmak için, her sayfanın en üstünde sorun numarasını görüntülemek için nasıl bir PagerTabStrip ekleneceğini açıklayan yönergeler eklenmiştir. Son olarak, kullanıcı bir flash kart sorununa dokunduğunda yanıtı görüntülemek için olay işleme kodu eklendi.

Aracılığıyla paylaş

Parçalar ile ViewPager

Genel bakış

Uygulama Projesi Başlatma

Örnek Veri Kaynağı Ekleme

ViewPager Düzeni Oluşturma

ViewPager'ı ayarlama

Parça Oluşturma

FlashCardFragment Düzenini Oluşturma

İlk FlashCardFragment Sınıfını Oluşturma

FlashCardFragment'a Durum Kodu Ekleme

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

Bağdaştırıcı Oluşturucuyu Uygulama

Uygulama Sayısı

GetItem Uygulama

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

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

Kullanıcı Girişini İşle

Özet

Ek kaynaklar

Aracılığıyla paylaş

Parçalar ile ViewPager

Genel bakış

Uygulama Projesi Başlatma

Örnek Veri Kaynağı Ekleme

ViewPager Düzeni Oluşturma

ViewPager'ı ayarlama

Parça Oluşturma

FlashCardFragment Düzenini Oluşturma

İlk FlashCardFragment Sınıfını Oluşturma

FlashCardFragment'a Durum Kodu Ekleme

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

Bağdaştırıcı Oluşturucuyu Uygulama

Uygulama Sayısı

GetItem Uygulama

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

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

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

Kullanıcı Girişini İşle

Özet

Ek kaynaklar