안드로이드 - viewpager2에서 해당페이지에서 양쪽 미리보기 구현 질문

사진처럼 해당페이지에서 양쪽 페이지를 약간씩 보이는 미리보기를 구현하고 싶은데..

viewpager2로 구현하고 있습니다..

구글링해서 따라하는데

저는 똑같이 따라해도 이렇게 나오네요...흰색 바탕이 나옵니다.. 뭐가 원인일까요?

프래그먼트에 뷰페이저2를 사용하고있고 리사이클러뷰로 아이템이 구성되어있습니다.

코드상에 문제가 없으면 xml파일에서 뭐가 문제가 있는걸까요..?

뷰페이저2가 있는 프래그먼트.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mv_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MovieFragment">
 
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        android:paddingStart="40dp"
        android:paddingEnd="40dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

아이템.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/constraintlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/fragment_background"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:theme="@style/AppTheme.AppBarOverlay"
            app:elevation="0dp">
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </com.google.android.material.appbar.AppBarLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    <ImageView
        android:id="@+id/movie_post"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/coordinator"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:src="@drawable/movie1"/>
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/movie_post"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/slide_bar"
        android:layout_marginTop="20dp"
        android:text="1. 군 도"
        android:textSize="30dp"
        android:textColor="@color/white"/>
 
    <ImageView
        android:id="@+id/slide_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/linear1"
        android:layout_marginTop="10dp"
        android:src="@drawable/home_slider"/>
 
    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@id/slide_bar"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="10dp">
 
        <TextView
            android:id="@+id/reserve_rating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="예매율 61.8%"
            android:textSize="20dp"
            android:textColor="@color/white"/>
        <View
            android:layout_width="2dp"
            android:layout_height="17dp"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@color/white"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="15세 관람가"
            android:textSize="20dp"
            android:textColor="@color/white"/>
        <View
            android:layout_width="2dp"
            android:layout_height="17dp"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@color/white"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="D-1"
            android:textSize="20dp"
            android:textColor="@color/white"/>
    </LinearLayout>
 
    <Button
        android:id="@+id/see_detail_btn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/linear1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginTop="20dp"
        android:text="상세보기"
        android:textSize="20dp"
        android:textColor="@color/white"
        android:background="@drawable/detail_button_background"/>
</androidx.constraintlayout.widget.ConstraintLayout>

프래그먼트에서 양쪽 미리보기 구현 코드입니다.

pager.setClipToPadding(false);
        pager.setClipChildren(false);
        pager.getChildAt(0).setOverScrollMode(RecyclerView.OVER_SCROLL_NEVER);
 
        CompositePageTransformer compositePageTransformer = new CompositePageTransformer();
        compositePageTransformer.addTransformer(new MarginPageTransformer(40));
        compositePageTransformer.addTransformer(new ViewPager2.PageTransformer() {
            @Override
            public void transformPage(@NonNull View page, float position) {
                float r = 1 - Math.abs(position);
//                page.setScaleX(1.0f + r * 0.15f);
                page.setScaleY(0.85f + r * 0.15f);
 
            }
        });
 
        pager.setPageTransformer(compositePageTransformer);

뭐가 문제인지 좀 알려주세요..ㅜㅜ

현재 제 프로젝트에서 사용하는 Extension function 입니다. 저도 Github에 있는 코드를 참조해서 Extension function으로 만들어 쓰고 있습니다.

fun ViewPager2.showOtherPageEdges(
    numberOfPage: Int,
    @DimenRes pageMarinRes: Int = R.dimen.spacing_2x,
    @DimenRes offsetRes: Int = R.dimen.spacing_3x
) {
    enableShowingOtherPageEdges(numberOfPage)
 
    val pageMarginPx = resources.getDimensionPixelOffset(pageMarinRes)
    val offsetPx = resources.getDimensionPixelOffset(offsetRes)
 
    setPageTransformer { page, position ->
        val viewPager = page.parent.parent as ViewPager2
        val offset = position * -(2 * offsetPx + pageMarginPx)
        if (viewPager.orientation == ViewPager2.ORIENTATION_HORIZONTAL) {
            if (ViewCompat.getLayoutDirection(viewPager) == ViewCompat.LAYOUT_DIRECTION_RTL) {
                page.translationX = -offset
            } else {
                page.translationX = offset
            }
        } else {
            page.translationY = offset
        }
    }
}
 
 
fun ViewPager2.enableShowingOtherPageEdges(numberOfPage: Int) {
    clipToPadding = false
    clipChildren = false
    offscreenPageLimit = numberOfPage
}
 
myViewPager.showOtherPageEdges(3, R.dimen.dp_8, R.dimen.dp_12)

그리고 제가 사용하는 ViewPager adapter 아이템 레이아웃에는 MaterialCardView 사용하는 것 말고는 별다른 점은 없습니다.

그런데 왜 item layout에 CoordinateLayout과 Toolbar를 사용하셨는지 모르겠네요. 부적절해 보여서요.

viewpager2에서 해당페이지에서 양쪽 미리보기 구현 질문

Please log in or register to add a comment.

답변 달기

1개의 답변

Please log in or register to add a comment.