1. 程式人生 > >PullToRefreshViewPager和ViewPager製作卡片效果

PullToRefreshViewPager和ViewPager製作卡片效果

問題描述

此次專案中要實現一個類似於Nice好讚的首頁的那樣的一個卡片效果,而且要求ViewPager能重新整理和分頁載入。

分析

我在網上搜羅一圈,找到兩個比較靠譜的自定義控制元件,一個是RecyclerViewPager,另一個就是PullToRefreshViewPager,但是這連個控制元件都不能完全的滿足我的需求,因為第一個是通過橫向的Recyclerview寫的一個自定義控制元件,沒有重新整理和分頁載入,然後在網上找了很長時間的橫向recyclerview怎麼重新整理,沒找到合適的解決辦法,最後決定用PullToRefreshViewPager,我們都知道ViewPager是可以實現卡片效果的,但是沒有RecyclerViewPager那個的卡片效果好看。

最終解決辦法

ViewPager實現卡片效果利用的是clipChirdren這個屬性
具體講解網址:ViewPager卡片效果demo
但是把這些配置都放到PullToRefreshViewPager上就沒有效果,困擾了我一兩天,最後偶然的將佈局檔案中的外邊距設定成內邊距之後,成功的達到了我想要的效果。程式碼如下:

<RelativeLayout
        android:id="@+id/rl_vp_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
android:clipChildren="false" android:clipToPadding="false" android:layerType="software"> <com.saiku.chuangdou.view.pulltorefresh.PullToRefreshViewPager xmlns:ptr="http://schemas.android.com/apk/res-auto" android:id="@+id/pager_task"
android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false" android:clipToPadding="false" android:layerType="software" android:paddingLeft="38dp" android:paddingRight="38dp" ptr:ptrAnimationStyle="flip" ptr:ptrHeaderBackground="@color/transparent" ptr:ptrMode="both" /> </RelativeLayout>

java中的程式碼:

rl_vp_container = (RelativeLayout) view.findViewById(R.id.rl_vp_container);
        rl_vp_container.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return viewPager.dispatchTouchEvent(event);
            }
        });
        viewPager.getRefreshableView().setOffscreenPageLimit(2);
        viewPager.getRefreshableView().setPageMargin(65);
        viewPager.getRefreshableView().setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (rl_vp_container != null)
                    rl_vp_container.invalidate();
            }
        });

由於這個效果我沒有做demo,直接在專案中修改的,所以程式碼就不公開了,有問題的小夥伴留言吧,我儘量及時的回覆。