Android Kotlin ViewPager2 Kullanımı
Android uygulama geliştirme sürecinde sayfa geçişleri ve içeriklerin etkileşimli bir şekilde sunulması önemli bir rol oynar. Bu yazımızda ViewPager2'in temel özelliklerini ve TabLayout ile kullanımını temel bir proje üzerinden göreceğiz. İyi okumalar dilerim.
ViewPager2 Nedir ?
ViewPager2, önceki sürüm olan ViewPager’a kıyasla birçok avantaja sahiptir. Özellikle, RecyclerView tabanlı bir adapter kullanması, veri setini dinamik olarak yönetmeyi ve sayfalar arasında geçişleri optimize etmeyi sağlar. Bu özellik, uygulama içeriğini daha verimli bir şekilde yönetmemize olanak tanır. Ayrıca, Fragment tabanlı olması, her sayfanın kendi yaşam döngüsüne sahip olmasını ve böylece her bir sayfanın bağımsız olarak yönetilebilmesini sağlar.
ViewPager2'nin kullanımı, özellikle birden çok sayfa arasında geçiş yapmak ve kullanıcı etkileşimlerini takip etmek açısından oldukça esnek bir yapı sunar. Bu bileşen, sayfalar arasında yatay veya dikey kaydırma gibi farklı geçiş efektlerini destekler. Ayrıca, sayfa geçişlerini belirli bir animasyon veya geçiş efekti ile özelleştirmek de mümkündür.
TabLayout ile birleştirildiğinde, kullanıcıya mevcut sayfa konumunu gösterme ve hızlı bir şekilde belirli bir sayfaya geçiş yapma imkanı sağlar. Bu, uygulamanın genel kullanılabilirliğini artırır ve kullanıcı deneyimini iyileştirir.
Bu özelliklerin bir araya gelmesi, ViewPager2'nin sayfa yönetimi ve kullanıcı etkileşimlerini kolayca entegre etmemizi sağlar. Bu yazıda, temel bir proje üzerinden ViewPager2 ve TabLayout kullanımını adım adım ele alacak ve bu bileşenleri kullanarak etkileyici ve etkileşimli içerik sunmanın nasıl mümkün olduğunu göreceğiz.
Kurulum
Aşağıdakine benzer bir yapı kuracağımız örnek bir proje üzerinden ilerleyeceğiz.
Home fragment’i activity üzerinde görüntülemek için Navigation component kullandım.
Konumuz olmadığından detaylı değinmiyorum.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sahinkaradeniz.viewpagerdeneme.MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/main" />
</androidx.constraintlayout.widget.ConstraintLayout>navigation/main
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
app:startDestination="@id/HomeFragment">
<fragment
android:id="@+id/HomeFragment"
android:name="com.sahinkaradeniz.viewpagerdeneme.HomeFragment"
tools:layout="@layout/fragment_home" />
</navigation>MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}Viewlara Fragment üzerinden erişmek için ViewBinding kullanacağım. ViewBinding’i aktif hale getirmek için:
build.gradle.kts(app)
android {
buildFeatures {
viewBinding = true
}
}Senaryomuz HomeFragment üzerinde TabLayout kullanarak TabA, TabB ve TabC ekranlarını görüntülemek.
Öncelikle bir HomeFragment oluşturalım ve xml tasarımına Tablayout ve ViewPager2'yi ekleyelim.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout_home_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/vp_home"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.viewpager2.widget.ViewPager2>
</LinearLayout>Bu kısımda istersek TabLayout içerisine TabItem ekleyerek Tab’ları statik olarak ekleyebiliriz. Örneğin:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout_home_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:text="Tab Item"
android:layout_height="wrap_content">
</com.google.android.material.tabs.TabItem>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:text="Tab Item 2"
android:layout_height="wrap_content">
</com.google.android.material.tabs.TabItem>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:text="Tab Item 3"
android:layout_height="wrap_content">
</com.google.android.material.tabs.TabItem>
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/vp_home"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.viewpager2.widget.ViewPager2>
</LinearLayout>ViewPager2'de Fragment’ları kullanarak görüntüleme yaptığımızdan bahsetmiştik.
Şimdi görüntülemek istediğimiz 3 Fragment oluşturalım. Ben TabA, TabB ve TabC olarak 3 temsili Fragment oluşturuyorum.
Oluşturduğumuz Fragment’ları HomeFragment üzerinde görüntülemek için bir FragmentStateAdapter yazacağız. Bu adapter bir RecyclerView adapter gibi çalışarak Fragment’ları HomeFragment içerisine eklediğimiz ViewPager2 üzerinde göstermemizi sağlar.
Hatta içerisine girip miras aldığı sınıfa bakarsak bir RecyclerView.Adapter olduğunu görebiliriz.
HomeFragmentStateAdapter
class HomeFragmentStateAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle, private val fragmentList: List<Fragment>) :
FragmentStateAdapter(fragmentManager, lifecycle) {
override fun getItemCount(): Int {
return fragmentList.size
}
override fun createFragment(position: Int): Fragment {
return fragmentList[position]
}
}Sonrasında HomeFragmentStateAdapter’i HomeFragment içerisinde çağırarak gerekli bağlantı işlemlerini yapalım.
class HomeFragment : Fragment() {
// View'lara erişebilmek için binding nesnesi
private var _binding:FragmentHomeBinding?=null
private val binding get() = _binding!!
// Adapter değişkeni
private lateinit var adapter: HomeFragmentStateAdapter
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View{
// ui bağlantısı
_binding= FragmentHomeBinding.inflate(layoutInflater)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
initViewPagerAdapter()
}
// Görüntülemek istediğimiz Fragment'ların listesi
private val fragmentList = arrayListOf(
TabAFragment(), TabBFragment(), TabCFragment()
)
// Tab'lara vermek istediğimiz isimlendirmeler.
private val tabTitles = arrayListOf(
"Tab A","Tab B","Tab C"
)
private fun initViewPagerAdapter(){
// Adapter init
val viewPager = binding.vpHome
adapter = HomeFragmentStateAdapter(childFragmentManager, viewLifecycleOwner.lifecycle,fragmentList)
viewPager.adapter = adapter
// TabLayout ile ViewPager bağlantısı yapılır.
TabLayoutMediator(binding.tabLayoutHomeFragment, viewPager) { tab, position ->
// TabLayout içerisindeki TabItem'lara text atanma işlemi yapılır.
tab.text = tabTitles[position]
}.attach()
}
override fun onDestroyView() {
super.onDestroyView()
_binding=null
}
}Yukarıdaki bağlantıları yaptıktan sonra uygulamayı çalıştırarak görüntüleme işlemini yapabiliriz.
Sizlerle paylaştığım bu metinde hatalı gördüğünüz veya eklemek istediğiniz bilgiler varsa, lütfen benimle iletişime geçin.
Yararladığım Kaynaklar
