Customize FlippableStackView

503 Views Asked by At

I found this library and I'm trying to customize it. What I'm trying to do is to change the swipe from left-right to right left. This is an image of what I want.

enter image description here

I also found that others are trying to do the same thing, as you can read here.

I triend to modify the onLayout method in OrientedViewPager

protected void onLayout(boolean changed, int l, int t, int r, int b)

but I failed because I don't understand how it works. I guess that the part that I have to modify is the one that starts here

// Page views. Do this once we have the right padding offsets from above.
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);

but I don't know how to properly change the code.

In the open issue below I read that blipinsk told that the piece of code that needs changes is in StackPagerTransformer and not in the OrientedViewPager, but I also read here http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html that the page transformer usually is invoked only for the animation while the page/fragment is changing.

Could you please tell me how to do? Where can I find a good book or tutorial on how create viewgroup, stackview and pagetransformer customized? Thanks

EDIT 1 At the moment I used an hack that is not so good, but it works. I set the rotation to 180 here

<com.myapp.app1.flippablestackview.FlippableStackView
    android:id="@+id/flippable_stack_view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:rotation="180" />

and the same in the content of the fragment created in the pager

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="265dp"
    android:layout_height="400dp"
    android:background="@color/white"
    android:padding="30dp">

    <TextView
        android:id="@+id/page_one_text_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:rotation="180"
        android:text="CONTENT" />

    <ImageView
        android:id="@+id/page_one_image_content"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:rotation="180" />

</RelativeLayout>

I guess it isn't an elegant solution but I don't have time for a great fix at this moment.

1

There are 1 best solutions below

1
On

I suggest you to use FancyCoverFlow

fancyCoverFlow = new FancyCoverFlow(context);
fancyCoverFlow.setMaxRotation(45);
fancyCoverFlow.setUnselectedAlpha(0.3f);
fancyCoverFlow.setUnselectedSaturation(0.0f);
fancyCoverFlow.setUnselectedScale(0.4f);

XML

<at.technikum.mti.fancycoverflow.FancyCoverFlow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        fcf:maxRotation="45"
        fcf:unselectedAlpha="0.3"
        fcf:unselectedSaturation="0.0"
        fcf:unselectedScale="0.4" />