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)
    

    }
}