[안드로이드 코틀린] 밀어서 화면 변경 ViewPager2 화면 변경 위치 표시(Indicator) 해주는 방법

이번 시간에는 ViewPager2를 이용해서 액티비티 위에 있는 프래그먼트를 변경해주는

방법과

변경하면 위치를 보여주는 Indicator 적용하는 방법에 대하여 알아보겠습니다.

---

목차

1. 실행화면
2. 라이브러리 등록하기
3. 프래그먼트(Fragemnt) 만들기
4. 페이지 어뎁터 만들기 PageAdapter.kt
5. 메인 화면 구성 activity_main.xml
6. 메인 코드 구현 MainActivity.kt

---

1. 실행화면

2. 라이브러리 등록하기

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

 implementation 'com.tbuonomo:dotsindicator:4.2'

 

dataBinding 설정

android 괄호 안에 추가

- 설명 - 

 UI 구성요소를 객체 생성 없이 사용하기 위해 필요함

    buildFeatures{
        dataBinding = true
    }

 

3. 프래그먼트(Fragemnt) 만들기

 

OneFragment.kt

class OneFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false)
    }
}

 

TwoFragment.kt

class TwoFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_two, container, false)
    }
}

 

ThreeFragment.kt

class ThreeFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_three, container, false)
    }
}

 

fragment_one.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"
    tools:context=".OneFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="50sp"
        android:text="화면1" />
</FrameLayout>

 

fragment_two.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"
    tools:context=".TwoFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="50sp"
        android:text="화면2" />
</FrameLayout>

 

fragment_three.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"
    tools:context=".ThreeFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="50sp"
        android:text="화면3" />
</FrameLayout>

 

4. 페이지 어뎁터 만들기 PageAdapter.kt

 - 설명 - 

 프래그먼트 화면에 보여줄 클래스

class PageAdapter(private val fragmentActivity: FragmentActivity,
    private val fragments: List<Fragment>): FragmentStateAdapter(fragmentActivity) {

    override fun getItemCount(): Int {
       return fragments.size
    }

    override fun createFragment(position: Int): Fragment {

        return when(position){
            0 -> return OneFragment()
            1 -> return TwoFragment()
            else -> return ThreeFragment()
        }
    }
}

 

5. 메인 화면 구성 activity_main.xml

- 설명 -

1.  화면 변경해줄 ViewPage2

2. 화면 위치 보여줄 DotsIndicator

3. 색상 res -> values -> colors.xml

    <color name="blue_200">#90CAF9</color>
    <color name="pink_200">#F48FB1</color>

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <com.tbuonomo.viewpagerdotsindicator.DotsIndicator
            android:id="@+id/dotsIndicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerInParent="true"
            android:layout_marginBottom="60dp"
            app:dotsColor="@color/blue_200"
            app:dotsCornerRadius="8dp"
            app:dotsSize="16dp"
            app:dotsSpacing="4dp"
            app:dotsStrokeWidth="2dp"
            app:selectedDotColor="@color/pink_200" />
    </RelativeLayout>
</layout>

 

6. 메인 코드 구현 MainActivity.kt

 - 설명 - 

 1. var fragment1 = OneFragment()

프래그먼트 선언

 2. fragments.add(fragment1)

리스트에 프래그먼트 등록

 3. PageAdapter(this, fragments)

Adapter에 리스트 등록

 4. binding.viewPager2.adapter = adapter

ViewPager2에 Adapter 적용

 5. binding.dotsIndicator.setViewPager2(binding.viewPager2)

dotsIndicatoer에 Viewpager2 적용

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //binding 초기화
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        //프래그먼트 선언
        var fragment1 = OneFragment()
        var fragment2 = TwoFragment()
        var fragment3 = ThreeFragment()

        //리스트에 프래그먼트 등록
        var fragments = ArrayList<Fragment>()
        fragments.add(fragment1)
        fragments.add(fragment2)
        fragments.add(fragment3)

        //PageAdapter에 리스트를 등록
        var adapter = PageAdapter(this, fragments)

        //ViewPager2에 Adapter 적용
        binding.viewPager2.adapter = adapter

        //화면 표시 적용
        binding.dotsIndicator.setViewPager2(binding.viewPager2)
    }
}

2022.06.06 - [안드로이드] - [안드로이드 코틀린] 커스텀 달력 만드는 방법 part1 화면 구성

[안드로이드 코틀린] 커스텀 달력 만드는 방법 part1 화면 구성

2022.06.14 - [안드로이드] - [안드로이드 코틀린] Tab Custom Animation part1 - 화면 구성 및 설정

[안드로이드 코틀린] Tab Custom Animation part1 - 화면 구성 및 설정

2022.06.17 - [안드로이드] - [안드로이드 코틀린] 정해진 시간에 알람 울리는 방법 Notification TimePickerDialog part1 - 설정

[안드로이드 코틀린] 정해진 시간에 알람 울리는 방법 Notification TimePickerDialog part1 - 설정