안녕하세요, 반갑습니다!
오늘은 좌우로 손을 쓸어넘겨 화면을 전환하는,
꽤 멋드러진 뷰(View) 에 대해서 설명하려고 합니다.
뷰 페이저2(View Pager2)
1. .xml 파일에서 뷰 페이저2(View Pager2) 배치하기
메인이 되는 액티비티에 단순하게 뷰 페이저2(View Pager2) 하나만 배치했습니다.
<androidx.constraintlayout.widget.ConstraintLayout
.
.
.>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/vPager2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
그래서..
걍 하얘요...
ㅠ
하지만! 뷰페이저(ViewPage2) 는 각 프래그먼트를 배치해서 화면을 교체하는 것이죠.
따라서 메인 액티비티는 전혀 상관이 없습니다.
2. 뷰페이저2(View Pager2) 에 들어갈 프래그먼트 만들기
각 화면, 즉 프래그먼트를 만들어야 합니다.
보여줘야할 만큼 만들면 되는데요.
저는 예시로 3개를 만들었습니다.
먼저, 프래그먼트 클래스를 만들어 줍니다.
그러면, 이렇게 프래그먼트 클래스와 연결되는 .xml 파일도 같이 생성됩니다.
이제 각 .xml 파일에 원하는 레이아웃을 만들어 주면 되는데요.
저는 아래와 같이 텍스트뷰(TextView) 와 아이유 사진을 보여줄 이미지 뷰(ImageView)를 배치했습니다.
아이유 이쁘쥬?ㅎㅎ
각 프래그먼트의 xml 코드입니다.
<LinearLayout
.
.
.>
<TextView
android:id="@+id/f1TextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="아이유 보라색 머리"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
android:textSize="35sp" />
<ImageView
android:id="@+id/f1img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:scaleType="centerCrop"
tools:src="@drawable/iu1" />
</LinearLayout>
2. 뷰페이저2(View Pager2)를 위한 어댑터(FragmentStateAdapter) 만들기
이제 뷰페이저2(View Pager2) 가 동작하기 위한 어댑터(FragmentStateAdapter) 를 만들어야 합니다.
그런데 기존과 달리 이제는 리싸이클러뷰(RecyclerView) 와 동일한 어댑터를 사용하게 됩니다.
이렇게 추적해 보면 RecyclerView.Adapter 를 상속하고 있음을 알 수 있습니다.
어쨌거나, 그래도 저희는 리싸이클러뷰(RecyclerView)를 만드는 건 아니니까요.
뷰페이저2(View Pager2)의 어댑터(Adapter)로 사용될 클래스를 만들어 주세요.
그리고 FragmentStateAdapter 를 상속해주세요.
그럼 아래와 같이 빨간 줄이 생기면,
자동 완성을 이용해서 Implement Method 를 만들어 주면 됩니다.
잘 만들어 졌나요?
그럼 각 메서드(Method) 를 작성해주세요.
class ExViewPagerAdapter(fa:FragmentActivity) : FragmentStateAdapter(fa) {
var fragments = listOf<Fragment>() //프래그먼트가 저장될 배열
override fun getItemCount(): Int = fragments.size //프래그먼트 배열의 크기
override fun createFragment(position: Int): Fragment {
return fragments.get(position) //반환될 프래그먼트
}
}이제 뷰페이저2(View Pager2)가 동작할 액티비티에서 이 어댑터를 객체로 만들 것입니다.
3. 액티비티에서 어댑터(RecyclerAdapter) 연결하기
override fun onCreate(savedInstanceState: Bundle?) {
.
.
.
//뷰 페이저2 설정
val fragmentList = listOf(Fragment1(), Fragment2(), Fragment3())
val adapter = ExViewPagerAdapter(this)
adapter.fragments = fragmentList
vPager2.adapter = adapter //뷰페이저2 에 어댑터 연결
}
어떤가요?
이렇게 보니 정말 리싸이클러뷰(RecyclerView) 의 어댑터를 만들때와 비슷하네요.
이렇게 뷰 페이저2(View Pager2) 에 어댑터까지 연결하면,
완성입니다!
이 뷰 페이저2(View Pager2) 를 이용해서 이제 더 앱다운 앱이 되는 것 같네요!
그리고 역시 아이유는 이쁘구요ㅎㅎ
그럼 다음 포스팅에서 뵙겠습니다.
감사합니다.