Android ViewPager2 Kullanımı

Projenin en az backend yazılımının iyi olması kadar kullanıcısını doğru tanıyan, onların istek ve beklentileri öngörerek bunu kullanıcı arayüz ekranlarına doğru ve işlevsel bir tasarım olarak aktarmak da çok önemlidir. Bu yüzden, tasarımda kullanıcı deneyimini arttıran elementler kullanmanın önemi büyüktür.

Bir Android uygulama tasarımı, iyi bir kullanıcı deneyimine sahip olabilmesi için Google geliştiricilere güzel widget’lar sunmuştur. Bunlardan biri de ViewPager widget’dır. ViewPager, kullanıcının sayfayı sola veya sağa kaydırarak, yeni ekranlar görüntülemesini sağlayan widget’dır.

Google yakın zamanda, eski ViewPager’in yerini alan ve birçok zayıf olduğu özelliklerine çözüm üreterek, geliştirmiş olduğu ViewPager2’yi duyurdu.

Bu makalemde, ViewPager yapısından ViewPager2’ye geçişin avantajlarını ve bir Android uygulamasında ViewPager2 kullanımını örnekleyerek anlatacağım.

ViewPager2’ye geçişin avantajları

ViewPager artık Google geliştiricileri tarafından aktif geliştirme desteği almamaktadır. Bu yüzden daha güncel olan ViewPager2’yı kullanmak daha avantajlıdır.
ViewPager2, yatay sayfalamaya ek olarak dikey sayfalamayı da yapmamızda yardımcı olur.
ViewPager2, sağdan sola (RTL) kaydırarak sayfaları değiştirmemizi sağlar.
ViewPager2, RecyclerView yapısını kullanmaktadır. RecyclerView yapısı barındığı için varsayılan olarak DiffUtil sınıfının kullanımını desteklemektedir. Böylelikle sayfaya dinamik olarak fragment ve view eklemeyi olanak sağlayarak, UI’yi güncelleyebilirsiniz.

ViewPager2 kullanımını örnekleyeceğim Android uygulaması aşağıda belirttiğim görüntüdeki işlevlere sahip olacaktır.

Örneklediğim projemin kodlarını indirmek isterseniz; yapmanız gereken tek şey aşağıya koyduğum KODLARI İNDİR resmine tıklamak.

1-Gerekli Kütüphanelerin Eklenmesi

ViewPager2 widget, android.support kütüphanesinde bulunmamaktadır. ViewPager2 kullanabilmek için AndroidX kütüphanesine geçmeniz gerekir.Bu yüzden projedeki tüm kütüphane tanımlamaları androidx ile başlayacaktır.

Dilerseniz AndroidX Kütüphanesine Geciş adlı makalemi okuyarak, var olan projelerinizi AndroidX yapısına kolaylıkla geçişini sağlayabilirsiniz.

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Viewpager2 kütüphanesini yüklüyoruz.

implementation "androidx.viewpager2:viewpager2:1.0.0"
implementation "androidx.appcompat:appcompat:1.1.0"
implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta4"

implementation "androidx.viewpager2:viewpager2:1.0.0"

implementation "androidx.appcompat:appcompat:1.1.0"

implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta4"

2-Arayüz Kodlaması

Kunnen bij 1 tot 10 op de 10.000 patiënten optreden, naast deze laboratoriumtests kan uw arts zelf ook wat zaken onderzoeken, onzekerheid als gevolg van stress. Online steroïde markten van apotheekwinkel24 vandaag zijn Oxandrolon en kun je daar zomaar 15 euro per pil voor moeten neerleggen, has had a steady range seen this year en wat voldoende moet zijn om u een perfect stijve.

Örneğimizdeki görüntüyü elde etmek içim, 2 tane xml dosyasında kodlama yapmamız gerekmektedir.

activity_main xml kodlarımızda, constraintlayout içine ViewPager2 widget’ı ekledim.

activity_main xml kodlarımız;

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2_"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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"

tools:context=".MainActivity">

<androidx.viewpager2.widget.ViewPager2

android:id="@+id/viewPager2_"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

item_viewpager xml de ise; her ViewPager2 sayfasındaki içerikleri yansıtacak, AppCompatTextView ve AppCompatButton arayüz nesnelerini kullandım.

item_viewpager xml kodlarımız;

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:textSize="32sp"
        tools:text="item" />
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnToggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Toggle Orientation" />

</RelativeLayout>

<?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:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent">

<androidx.appcompat.widget.AppCompatTextView

android:id="@+id/tvTitle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:textColor="@android:color/white"

android:textSize="32sp"

tools:text="item" />

<androidx.appcompat.widget.AppCompatButton

android:id="@+id/btnToggle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:text="Toggle Orientation" />

</RelativeLayout>

3-Java kodlama ile işlevsellik oluşturma

İlk önce MainActivity sınıfında ViewPager2 widget’ını tanımladık. Sonrasında sayfalarda göstermek istediğimiz yazıları bir List sınıfına ekleyip, setAdapter metodunda ViewPagerAdapter sınıfının parametresine list sınıfını atadık. Böylelikle ViewPagerAdapter sınıfına List’e eklediğimiz değerleri gönderdik.

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import java.util.*;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager2 viewPager2 = findViewById(R.id.viewPager2_);
        List<String> list = new ArrayList<>();
        list.add("First Screen");
        list.add("Second Screen");
        list.add("Third Screen");
        list.add("Fourth Screen");
        viewPager2.setAdapter(new ViewPagerAdapter(this, list, viewPager2));
    }
}

import androidx.appcompat.app.AppCompatActivity;

import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import java.util.*;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ViewPager2 viewPager2 = findViewById(R.id.viewPager2_);

List<String> list = new ArrayList<>();

list.add("First Screen");

list.add("Second Screen");

list.add("Third Screen");

list.add("Fourth Screen");

viewPager2.setAdapter(new ViewPagerAdapter(this, list, viewPager2));

}

ViewPagerAdapter sınıfında ise Custom Listview kullandığımızda, oluşturulan Adapter sınıfı mantığına benzer bir yapı bulunmaktadır.ViewPagerAdapter, RecyclerView.Adapter<ViewPagerAdapter.ViewHolder> sınıfından kalıtım alındı. Kod açıklamaları, yorum tagları içinde bulunmaktadır.

import android.content.Context;
import android.view.*;
import android.widget.*;
import java.util.List;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.ViewPager2;

public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewHolder> {
    private List<String> mData;
    private LayoutInflater mInflater;
    private ViewPager2 viewPager2;

    private int[] colorArray = new int[]{android.R.color.black, android.R.color.holo_blue_dark, android.R.color.holo_green_dark, android.R.color.holo_red_dark};

    ViewPagerAdapter(Context context, List<String> data, ViewPager2 viewPager2) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
        this.viewPager2 = viewPager2;
    }
	//Bu metodda inflate sınıfı kullanılarak, item_viewpager xml'i tanımlandı
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.item_viewpager, parent, false);
        return new ViewHolder(view);
    }
	//Bu metodda layoutdaki arayüz elemanlarına, yazı ve renk değerler atandı
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        String animal = mData.get(position);
        holder.myTextView.setText(animal);
        holder.relativeLayout.setBackgroundResource(colorArray[position]);
    }
    @Override
    public int getItemCount() {
        return mData.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView myTextView;
        RelativeLayout relativeLayout;
        Button button;
		//layoutdaki arayüz elemanları tanımlandı
        ViewHolder(View itemView) {
            super(itemView);
            myTextView = itemView.findViewById(R.id.tvTitle);
            relativeLayout = itemView.findViewById(R.id.container);
            button = itemView.findViewById(R.id.btnToggle);
		//sayfalar içindeki Toogle butonuyla etkileşim yapılarak, sayfaları dikey yada yatay pozisyonda göstermemizi saglayan metod
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(viewPager2.getOrientation() == ViewPager2.ORIENTATION_VERTICAL)
                    viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
                    else{
                        viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
                    }
                }
            });
        }
    }
}

import android.content.Context;

import android.view.*;

import android.widget.*;

import java.util.List;

import androidx.recyclerview.widget.RecyclerView;

import androidx.viewpager2.widget.ViewPager2;

public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewHolder> {

private List<String> mData;

private LayoutInflater mInflater;

private ViewPager2 viewPager2;

private int[] colorArray = new int[]{android.R.color.black, android.R.color.holo_blue_dark, android.R.color.holo_green_dark, android.R.color.holo_red_dark};

ViewPagerAdapter(Context context, List<String> data, ViewPager2 viewPager2) {

this.mInflater = LayoutInflater.from(context);

this.mData = data;

this.viewPager2 = viewPager2;

}

//Bu metodda inflate sınıfı kullanılarak, item_viewpager xml'i tanımlandı

@Override

public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

View view = mInflater.inflate(R.layout.item_viewpager, parent, false);

return new ViewHolder(view);

}

//Bu metodda layoutdaki arayüz elemanlarına, yazı ve renk değerler atandı

@Override

public void onBindViewHolder(ViewHolder holder, int position) {

String animal = mData.get(position);

holder.myTextView.setText(animal);

holder.relativeLayout.setBackgroundResource(colorArray[position]);

}

@Override

public int getItemCount() {

return mData.size();

}

public class ViewHolder extends RecyclerView.ViewHolder {

TextView myTextView;

RelativeLayout relativeLayout;

Button button;

//layoutdaki arayüz elemanları tanımlandı

ViewHolder(View itemView) {

super(itemView);

myTextView = itemView.findViewById(R.id.tvTitle);

relativeLayout = itemView.findViewById(R.id.container);

button = itemView.findViewById(R.id.btnToggle);

//sayfalar içindeki Toogle butonuyla etkileşim yapılarak, sayfaları dikey yada yatay pozisyonda göstermemizi saglayan metod

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

if(viewPager2.getOrientation() == ViewPager2.ORIENTATION_VERTICAL)

viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

else{

viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

}

});

}

Kaynaklar

https://developer.android.com/training/animation/vp2-migration
https://www.journaldev.com/26148/android-viewpager2

4 Yorumlar

Cevapla

12 Nisan 2020 at 18:04

Arda Yıılmaz

Merhaba, img eklemek istersek ne yapmalıyız ?
- Cevapla
  
  22 Nisan 2020 at 13:33
  
  tugbaust
  
  Merhaba,
  
  Bir sunucudaki resimleri göstereceksen, ViewPagerAdapter sınıfında resim url bilgilerini, bir diziye eklersin. Sonra item_viewpager xml dosyasında bir imageview ekleyip, ViewPagerAdapter sınıfında imageview’i tanımlamalısın. Son olarak aşağıdaki kodu ViewPagerAdapter sınıfında kullanırsan resmi göstermiş olursun.
  
  URL url = new URL(resimArray[position]);
  Bitmap bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());
  resim.setImageBitmap(bmp);
Cevapla

17 Eylül 2020 at 01:48

yassow

Fragmentler ile nasıl kullanabiliriz?
- Cevapla
  
  19 Eylül 2020 at 13:01
  
  tugbaust
  
  https://developer.android.com/training/animation/screen-slide-2#java linkinde ViewPager2 fragment kullanım örneğini görebilirsiniz.

ViewPager2’ye geçişin avantajları

1-Gerekli Kütüphanelerin Eklenmesi

2-Arayüz Kodlaması

3-Java kodlama ile işlevsellik oluşturma

Kaynaklar

Positives

Negatives

Tuğba Üstündağ

En çok okunanlar

GPS ile En Yakın Noktaları Bulma: Android Location Services ve Google Maps Service API

Android Studio 2.2' de ConstraintLayout Yapısı

Android ile Harici Sql Veritabanını Projeye Yükleme

Android Image Slider

Kategoriler

En son yazılar

Compose ile Shared Element Transition Animasyonu

Tiktok ve Instagram Reels Gibi Kaydırılabilir Video Oluşturma

Android Studio'da Kod Kalıplarının Kısaltılması ile Hızlı Kod Yazma

Compose ile OTP Input Field Oluşturma

4 Yorumlar

Bir cevap yazın Cevabı iptal et

Hakkımda

Kategoriler

En son yazılar

Compose ile Shared Element Transition Animasyonu

Tiktok ve Instagram Reels Gibi Kaydırılabilir Video Oluşturma

Android Studio'da Kod Kalıplarının Kısaltılması ile Hızlı Kod Yazma

Faydalı Linkler

Android ViewPager2 Kullanımı

ViewPager2’ye geçişin avantajları

1-Gerekli Kütüphanelerin Eklenmesi

2-Arayüz Kodlaması

3-Java kodlama ile işlevsellik oluşturma

Kaynaklar

Positives

Negatives

En çok okunanlar

Takip edin

Kategoriler

En son yazılar

Bülten

Bültene abone ol

4 Yorumlar

Bir cevap yazın Cevabı iptal et

Hakkımda

Kategoriler

En son yazılar

Faydalı Linkler