Android 打造上下滑动翻屏VScrollScreenLay

开篇

  在工作之余，撸了一个上下滑动翻屏的组件分享给大家。

屏幕截图

立即体验

扫描以下二维码下载体验App（从0.2.3版本开始，体验App内嵌版本更新检测功能）：

源码简析

attrs:

    <declare-styleable name="VScrollScreenLayout">
        <attr name="vssl_y_slide_ratio" format="float"/>
        <attr name="vssl_flip_ratio" format="float"/>
        <attr name="vssl_rebound_anim_time" format="integer"/>
        <attr name="vssl_flip_anim_time" format="integer"/>
    </declare-styleable>

    private float ySlideRatio;//上下滑动比率
    private float flipRatio;//翻页的最小滑动距离比率。
    private int reboundAnimTime;//回弹的动画时间。默认为300毫秒
    private int flipAnimTime;//翻页的动画时间。默认为500毫秒

翻屏的最小距离：distance = 屏高度 * flipRatio

    private void rebound() {
        int scrollY = getScrollY();
        int oldScrollY = curPageIndex * pageHeight;
        int diffY = scrollY - oldScrollY;
        int reboundHeight;
        int tempFlipAnimTime = reboundAnimTime;
        //向上翻页
        if (scrollY < oldScrollY) {
            //第一页（或者上翻距离不够最少翻页距离），松手回弹
            if (curPageIndex == 0 || Math.abs(diffY) < pageHeight * flipRatio)
                reboundHeight = diffY;
            else {//翻到上一页
                curPageIndex--;
                reboundHeight = scrollY - curPageIndex * pageHeight;
                tempFlipAnimTime = flipAnimTime;
                if (onScrollPageChangedListener != null)
                    onScrollPageChangedListener.onScroll(getContext(), curPageIndex);
            }
        }
        //向下翻页
        else {
            //最后一页（或者上翻距离不够最少翻屏距离），松手回弹
            if (curPageIndex == getChildCount() - 1 || Math.abs(diffY) < pageHeight * flipRatio) {
                reboundHeight = diffY;
            } else {//翻到下一页
                curPageIndex++;
                reboundHeight = scrollY - curPageIndex * pageHeight;
                tempFlipAnimTime = flipAnimTime;
                if (onScrollPageChangedListener != null)
                    onScrollPageChangedListener.onScroll(getContext(), curPageIndex);
            }
        }
        mScroller.startScroll(0, scrollY, 0, -reboundHeight, tempFlipAnimTime);
        invalidate();
    }

简单使用

• 1、add(View child)

        VScrollScreenLayout screenLayout;
        for (int i = 0; i < 5; i++) {
            View page = new View(this);
            ...
            screenLayout.addView(page);
        }

• 2、xml中使用

<jsc.kit.vscrollscreen.VScrollScreenLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/v_scroll_screen_layout"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!--first page-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <jsc.kit.archeaderview.LGradientArcHeaderView
            android:layout_width="match_parent"
            android:layout_height="180dp"
            app:ahv_end_color="#3300BA86"
            app:ahv_height="30dp"
            app:ahv_start_color="#FF00BA86" />

        <ImageView
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="32dp"
            android:layout_width="160dp"
            android:layout_height="160dp"
            android:src="@drawable/tiger"/>

        <TextView
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="向上滑动可继续翻页"/>

    </LinearLayout>
    ...
</jsc.kit.vscrollscreen.VScrollScreenLayout>

翻页监听

        scrollScreenLayout.setOnScrollPageChangedListener(new VScrollScreenLayout.OnScrollPageChangedListener() {
            @Override
            public void onScroll(Context context, int pageIndex) {
                Toast.makeText(context, "The current page is " + (pageIndex + 1), Toast.LENGTH_SHORT).show();
            }
        });

篇尾

  如果您觉得还不错的话，点个赞(或加个关注)啰！QQ:1006368252。

态度决定高度，细节决定成败！