[안드로이드 코틀린] 밀어서 화면 변경 ViewPager2 갤러리 느낌으로 만드는 방법

이번 시간에는 뷰페이저2(ViewPager2)를 이용해서 이미지를 가로, 세로 방향으로 밀어서 갤러리 느낌으로 보여주는 방법을 알아보겠습니다.

---

목차

1. 실행 화면
2. 라이브러리 등록
3. dataBinding 설정
4. Item Layout 만들기 item_layout.xml
5. ItemAdapter 만들기 ItemAdatper.kt
6. 메인 화면 구성 activity_main.xml
7. 메인 코드 구현 MainActivity.kt

---

1. 실행 화면

2. 라이브러리 등록

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

dependencies 안에 추가

implementation("androidx.viewpager2:viewpager2:1.0.0")

3. dataBinding 설정

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

android 괄호 안에 추가

- 설명 - 

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

    buildFeatures{
        dataBinding = true
    }

 

4. Item Layout 만들기 item_layout.xml

 - 설명 -

 이미지를 보여주는 화면

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop"
    android:id="@+id/imageView"
    />

5. ItemAdapter 만들기 ItemAdatper.kt

 - 설명 -

데이터와 화면을 연결해주는 클래스

1. onCreateViewHolder

 화면 설정

2. onBindViewHolder

 데이터 설정

class ItemAdapter(private val images: Array<Int>):
    RecyclerView.Adapter<ItemAdapter.ItemViewHolder>(){


    class ItemViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){

        //초기화
        var imageView = itemView.findViewById<ImageView>(R.id.imageView)
    }

    //화면 설정
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
        val view  = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_layout, parent, false)

        return ItemViewHolder(view)
    }

    //데이터 설정
    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {

        holder.imageView.setImageResource(images[position])
    }

    //갯수 가져오기
    override fun getItemCount(): Int {
        return images.size
    }
}

 

6. 메인 화면 구성 activity_main.xml

 - 설명 -

1. 화변 변경 상태 알려주는 TextView

2. 밀어서 이미지 보여주는 ViewPager2

3. 화면 변경 상태 바꿔주는 Button

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textOrientation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="가로방향"
            android:textColor="@android:color/black"
            android:textSize="50sp" />

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager2"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:layout_marginTop="50dp"
            android:orientation="horizontal" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/changeBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="방향 바꾸기"
            android:layout_marginTop="20dp"/>
    </LinearLayout>
</layout>

 

7. 메인 코드 구현 MainActivity.kt

 - 설명 - 

1.orientationState

  화면변경 상태 변수

2.var itemAdapter = ItemAdapter(dogs)

  Adapter 초기화

3.viewPager2.adapter = itemAdapter

  ViewPager2 Adapter 설정

4.viewPager2.orientation

  ViewPager2 화면 변경 상태

5. 이미지 res -> drawable

dog1.jpg

0.10MB

dog2.jpg

0.10MB

dog3.jpg

0.08MB

dog4.jpg

0.07MB

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 orientationState = true //가로

        //데이터
        var dogs: Array<Int> = arrayOf(R.drawable.dog1, R.drawable.dog2,
            R.drawable.dog3, R.drawable.dog4)

        //Adapter 초기화
        var itemAdapter = ItemAdapter(dogs)

        //Adapter 적용
        binding.viewPager2.adapter = itemAdapter

        //위치변경 버튼 이벤트
        binding.changeBtn.setOnClickListener {
            if(orientationState){

                binding.viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL //세로
                orientationState = false
                binding.textOrientation.text = "세로방향"
            }else{
                binding.viewPager2.orientation = ViewPager2.ORIENTATION_HORIZONTAL //가로
                orientationState = true
                binding.textOrientation.text = "가로방향"
            }
        }
    }
}

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

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

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

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

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

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