마스터Q&A 안드로이드는 안드로이드 개발자들의 질문과 답변을 위한 지식 커뮤니티 사이트입니다. 안드로이드펍에서 운영하고 있습니다. [사용법, 운영진]

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

0 추천

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

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);

 

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

codeslave (3,940 포인트) 님이 2020년 10월 10일 질문

1개의 답변

0 추천

현재 제 프로젝트에서 사용하는 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를 사용하셨는지  모르겠네요. 부적절해 보여서요.

spark (227,530 포인트) 님이 2020년 10월 11일 답변
감사합니다..해결했습니다..!
...