• 0
  • Contact Me: alexbashy9001@gmail.com

View Pager (VP) #1

VP – виджет, который позволяет листать контент с эффектом слайда

VP загружает контент из фрагментов.

Мы создадим наш VP с баннерами фильмов, на которых будет расположена кнопка

У нас будет три фильма во VP – поэтому давайте создадим три фрагмента.

В каждом из фрагментов будет карточка с фильмом. Эти карточки будет выглядеть вот так

Вот например xml-код из первой карточки

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".BadBoys">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">

<com.google.android.material.card.MaterialCardView
android:id="@+id/card"
android:layout_width="336dp"
android:layout_height="200dp"
android:layout_margin="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:strokeWidth="1dp"
app:strokeColor="@android:color/white"
app:cardElevation="0dp"
android:focusable="true"
android:checkable="true">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bad_boys">

<Button
android:id="@+id/containedIconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:background="@color/black"
android:text="@string/play"
app:icon="@drawable/play"
style="@style/Widget.MaterialComponents.Button.Icon"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

</FrameLayout>

После того как мы создали фрагменты для подгрузки во VP – нам нужно создать класс адаптера, который будет загружать наши фрагменты во VP

class SliderAdapter(fragmentActivity: FragmentActivity):FragmentStateAdapter(fragmentActivity) {
override fun getItemCount(): Int {
return 3
}

override fun createFragment(position: Int): Fragment {
return when (position) {
0 -> {
BadBoys()
}
1 -> {
Avengers()
}
2 -> {
Alita()
}
else -> {
BadBoys()
}
}
}
}

Давайте разберем наш код

Мы должны унаследовать для нашего класса адаптера все методы от базового класса FragmentStateAdapter, который предназначен для организации функционала подгрузки фрагментов во VP. В качестве аргумента мы передаём класс FragmentActivity, который является подклассом класса Activity и предназначен для работы со фрагментами и обеспечивает их жизненный цикл.

Функция getItemCount() определяет сколько фрагментов мы будем загружать во VP

А в функции createFragment() мы осуществляем загрузку фрагментов, где первый фрагмент имеет индекс – 0. Кроме того мы в этой функции записываем фрагмент, который будет отображаться как стартовый по умолчанию

else -> {
BadBoys()
}

Теперь переходим в xml шаблон нашего Activity и размещаем виджет ViewPager

<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
tools:context=".MainActivity">

<androidx.viewpager2.widget.ViewPager2
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:layout_margin="10dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Тут нет ничего нового. Далее мы переходим в класс нашего Activity и вызываем наш VP, после чего обращаемся к его свойству adapter и записываем в качестве адаптера по наполнению – тот класс адаптера, который мы создали до этого

binding?.slider?.adapter = SliderAdapter(this)

После этого наш VP начнет функционировать

Код из урока

bad_boys.xml – xml шаблон первого фрагмента

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".BadBoys">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">

<com.google.android.material.card.MaterialCardView
android:id="@+id/card"
android:layout_width="336dp"
android:layout_height="200dp"
android:layout_margin="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:strokeWidth="1dp"
app:strokeColor="@android:color/white"
app:cardElevation="0dp"
android:focusable="true"
android:checkable="true">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bad_boys">

<Button
android:id="@+id/containedIconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:background="@color/black"
android:text="@string/play"
app:icon="@drawable/play"
style="@style/Widget.MaterialComponents.Button.Icon"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

</FrameLayout>

avengers.xml – xml шаблон второго фрагмента

<FrameLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".BadBoys">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">

<com.google.android.material.card.MaterialCardView
android:id="@+id/card"
android:layout_width="336dp"
android:layout_height="200dp"
android:layout_margin="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:strokeWidth="1dp"
app:strokeColor="@android:color/white"
app:cardElevation="0dp"
android:focusable="true"
android:checkable="true">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/avengers">

<Button
android:id="@+id/containedIconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:background="@color/black"
android:text="@string/play"
app:icon="@drawable/play"
style="@style/Widget.MaterialComponents.Button.Icon"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>



</FrameLayout>

alita.xml – xml шаблон третьего фрагмента

<FrameLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".BadBoys">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">

<com.google.android.material.card.MaterialCardView
android:id="@+id/card"
android:layout_width="336dp"
android:layout_height="200dp"
android:layout_margin="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:strokeWidth="1dp"
app:strokeColor="@android:color/white"
app:cardElevation="0dp"
android:focusable="true"
android:checkable="true">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/alita">

<Button
android:id="@+id/containedIconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:background="@color/black"
android:text="@string/play"
app:icon="@drawable/play"
style="@style/Widget.MaterialComponents.Button.Icon"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>



</FrameLayout>

SliderAdapter.kt – класс адаптера

class SliderAdapter(fragmentActivity: FragmentActivity):FragmentStateAdapter(fragmentActivity) {
override fun getItemCount(): Int {
return 3
}

override fun createFragment(position: Int): Fragment {
return when (position) {
0 -> {
BadBoys()
}
1 -> {
Avengers()
}
2 -> {
Alita()
}
else -> {
BadBoys()
}
}
}
}

activity_main.xml – xml шаблон нашего Activity

<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
tools:context=".MainActivity">

<androidx.viewpager2.widget.ViewPager2
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:layout_margin="10dp"
tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

MainActivity.kt – класс нашего Activity


class MainActivity : AppCompatActivity() {

var binding: ActivityMainBinding? = null

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

binding?.slider?.adapter = SliderAdapter(this)


}
}

Leave a Reply

Your email address will not be published. Required fields are marked *