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

이전 포스팅에  ViewPager2에 라이브러리를 통해 화면 위치 표시를 구현했습니다. 

이번 시간에는 라이브러리 없이 직접 구현하는 방법에 대하여 알아보겠습니다.

이전에 만든 것을 수정하기 때문에 이전 포스팅을 먼저 보시면 됩니다.

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

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

---

목차

1. 실행화면
2. 메인 화면 수정 activity_main.xml
3. 메인 코드 수정 MainActivity.kt

---

1. 실행화면

 

2. 메인 화면 수정 activity_main.xml

 - 설명 -

 1. DotsIndicator -> LinearLayout

라이브러리에서 LinearLayout으로 변경

2. TextView에  ● 를 등록하고 LinearLayout에 추가할 것입니다. 

<?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" />

        <!-- 화면 위치 표시 -->
        <LinearLayout
            android:id="@+id/dotsLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="60dp"
            android:orientation="horizontal" />
    </RelativeLayout>
</layout>

 

3. 메인 코드 수정 MainActivity.kt

 - 설명 -

1. arrayOfNulls<TextView>(3)

3개의 ● 이 필요하기 때문에 TextView타입의 배열 생성

2. dotsIndicator()

화면 위치 표시 생성 함수

3. selectedIndicator(position: Int)

화면 위치 표시 색상 설정 함수

4. onPageSelected(position: Int)

화면 선택 시 실행되는 함수

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    //텍스트뷰(화면 위치 표시로 쓰임)
    private var dots = arrayOfNulls<TextView>(3)

    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

        //화면 위치 표시 생성
        dotsIndicator()

        //화면 변경 시 이벤트 설정
        binding.viewPager2.registerOnPageChangeCallback(object: ViewPager2.OnPageChangeCallback(){

            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)

                //화면 위치 표시 색상 설정
                selectedIndicator(position)
            }
        })
    }

    //화면 위치 표시 생성
    private fun dotsIndicator(){

        for(i: Int in 0 until 3){

            dots[i] = TextView(this)
            dots[i]?.text = Html.fromHtml(("&#9679"), Html.FROM_HTML_MODE_LEGACY)
            dots[i]?.textSize = 25F

            //텍스트뷰 레이아웃 설정
            var params: LinearLayout.LayoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT
            )

            //텍스트뷰 간의 거리 조절
            params.leftMargin = 30

            //텍스트뷰 레이아웃 적용
            dots[i]?.layoutParams = params

            //레이아웃에 텍스트뷰 적용
            binding.dotsLayout.addView(dots[i])
        }
    }

    //화면 위치 표시 색상 설정
    private fun selectedIndicator(position: Int){

        for(i: Int in 0 until 3){

            //선택한 위치
            if(i == position){
                dots[i]?.setTextColor(ContextCompat.getColor(applicationContext,
                    R.color.pink_200))
            }else{//선택 안된거
                dots[i]?.setTextColor(ContextCompat.getColor(applicationContext,
                    R.color.blue_200))
            }
        }
    }
}

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

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

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

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

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

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