手把手帶你用viewpager實現(xiàn)gallary效果，外加無限循環(huán)，自動輪播

手把手帶你用viewpager實現(xiàn)gallary效果，外加無限循環(huán)，自動輪播

效果圖：圖很丑，各位看官且按需更改。

<img src="http://img.blog.csdn.net/20180123181419412?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjYyODc0MzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" height="600" alt="效果圖"/>

主要功能：

①Gallary樣式

②無限輪播

③自動輪播和手勢操作間沖突解決

提前說明：可以先不看提供的連接，文章末尾會提供整體代碼。

1、大致思路：

經(jīng)過查閱網(wǎng)上資料，個人感覺viewPager實現(xiàn)最為靠譜，省時省力。下面就將上述的需求一個個解決：

①Gallary樣式：使用ViewPager.PageTransformer解決滑動動畫。

參照：

https://developer.android.com/training/animation/screen-slide.html

http://www.itdecent.cn/p/722ece163629

②無限輪播：在PagerAdapter里面進行操作，讓getCount()方法返回的值足夠大。

參照：
方法二
http://blog.csdn.net/Just_Sanpark/article/details/17436037

③自動輪播和收拾操作間沖突解決：

自動輪播使用handler發(fā)送延時消息；在viewpager的dispatchTouchEvent方法里面來進行ViewPager接收到Touch事件的操作。

2、接下來下面是代碼實現(xiàn)了，先創(chuàng)建個普通的ViewPager：

①activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tongtong.tiny.loopviewpagergallary.MainActivity">

    <!-- 這里的ViewPager最好包一層父布局，并給它設置android:clipChildren="false"屬性-->
    <FrameLayout
        android:id="@+id/fl_vp_parent"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:layout_centerInParent="true"
        android:background="#aadc71ff"
        android:clipChildren="false"
        >

        <!-- 寬度不要占滿屏幕
        設置android:clipChildren="false"屬性 -->
        <android.support.v4.view.ViewPager
            android:id="@+id/id_viewpager"
            android:layout_width="250dp"
            android:layout_height="120dp"
            android:layout_gravity="center"
            android:clipChildren="false"
            >
        </android.support.v4.view.ViewPager>

    </FrameLayout>

</android.support.constraint.ConstraintLayout>

ViewPager：

public class PageTransformerAdapter extends PagerAdapter {
    private Context context;
    private List<TextView> list;

    public PageTransformerAdapter(Context context, List<TextView> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(list.get(position));
        return list.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        TextView iv = (TextView) object;
        container.removeView(iv);
    }
}

MainActivity代碼：

public class MainActivity extends AppCompatActivity {
    public static final String TAG = MainActivity.class.getSimpleName();
    //測試數(shù)據(jù)個數(shù)
    public static final int LIST_SIZE = 10;

    FrameLayout flVpParent;
    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flVpParent = findViewById(R.id.fl_vp_parent);
        mViewPager = findViewById(R.id.id_viewpager);

        List<TextView> viewList = getViewLists();
        PageTransformerAdapter mAdapter = new PageTransformerAdapter(MainActivity.this, viewList);

        mViewPager.setAdapter(mAdapter);
    }

    /**
     * 生成List<TextView>數(shù)據(jù)
     *
     * @return
     */
    private List<TextView> getViewLists() {
        List<TextView> list = new ArrayList<>();
        for (int j = 0; j < LIST_SIZE; j++) {
            TextView tv = generateTextView(j);
            list.add(tv);
        }
        return list;
    }

    /**
     * 生成單個的TextView對象
     *
     * @param j
     * @return
     */
    private TextView generateTextView(final int j) {
        TextView tv = new TextView(this);
        tv.setBackgroundColor(Color.parseColor("#2371e9"));
        String str = "這個是第" + (j + 1) + "個View";
        tv.setTag(str);
        tv.setText(str);
        tv.setTextColor(Color.parseColor("#f0523c"));
        tv.setTextSize(30);
        tv.setGravity(Gravity.CENTER);
        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.e(TAG, "第" + (j + 1) + "個View被點擊了");
            }
        });
        return tv;
    }
}

效果如下圖：

<img src="http://img.blog.csdn.net/20180123181944489?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjYyODc0MzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" height="600" alt="效果平淡無奇，甚至還有點丑。"/>

好了，架子搭建好了，可以開始一步步實現(xiàn)需求了。

3、Gallary視圖效果：利用ViewPager.PageTransformer實現(xiàn)

①viewpager的布局文件設置之前已經(jīng)設置好了，這里直接使用

②新建ScaleDownPageTransformer，實現(xiàn)ViewPager.PageTransformer接口

/**
 * Desc:    左右縮放的PageTransformer
 * Created by tiny on 2018/1/19.
 * Time: 17:04
 * Version:
 */

public class ScaleDownPageTransformer implements ViewPager.PageTransformer {
    private static final float DEFAULT_MIN_SCALE = 0.9f;
    private float mMinScale = DEFAULT_MIN_SCALE;

    /**
     * Apply a property transformation to the given page.
     *
     * @param view     Apply the transformation to this page
     * @param position Position of page relative to the current front-and-center
     *                 position of the pager. 0 is front and center. 1 is one full
     *                 page position to the right, and -1 is one page position to the left.
     */
    @Override
    public void transformPage(View view, float position) {
        float limitLow = -1;
        float limitMid = 0;
        float limitHigh = 1;

        if (position < limitLow) {
            view.setScaleX(mMinScale);
            view.setScaleY(mMinScale);
        } else if (position <= limitHigh) { // [-1,1]

            if (position < limitMid) //[-1,0)
            {
                float factor = mMinScale + (1 - mMinScale) * (1 + position);
                view.setScaleX(factor);
                view.setScaleY(factor);
            } else//[0,1]
            {
                float factor = mMinScale + (1 - mMinScale) * (1 - position);
                view.setScaleX(factor);
                view.setScaleY(factor);
            }
        } else { // (1,+Infinity]
            view.setScaleX(mMinScale);
            view.setScaleY(mMinScale);
        }
    }
}

③將ScaleDownPageTransformer設置給viewPager對象。

//設置Page間間距
mViewPager.setPageMargin(20);
//設置緩存的頁面數(shù)量
//這個如果設置為1，或者使用默認值1時，在向左滑動時，右面新加載出的view第一次加載時的縮放動畫不顯示。。
mViewPager.setOffscreenPageLimit(2);
mViewPager.setPageTransformer(true, new ScaleDownPageTransformer());
mViewPager.setAdapter(mAdapter);

參考：

官網(wǎng)demo

http://www.itdecent.cn/p/722ece163629

效果如下：

<img src="http://img.blog.csdn.net/20180123182134676?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjYyODc0MzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" height="600" alt="有點模樣了"/>

4、無限循環(huán)

接下來看下無線循環(huán)的需求，具體細節(jié)和原理的說明網(wǎng)上有好多，我選擇的是這篇文章的第二種方法。

傳送門

下面直接上代碼：
PagerAdapter做了些修改：

public class PageTransformerAdapter extends PagerAdapter {
    private Context context;
    private List<TextView> list;

    public PageTransformerAdapter(Context context, List<TextView> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        int actualPos = position % list.size();
        if (list.get(actualPos).getParent() != null) {
            ((ViewPager) list.get(actualPos).getParent()).removeView(list.get(actualPos));
        }
        container.addView(list.get(actualPos));
        return list.get(actualPos);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        TextView iv = (TextView) object;
        container.removeView(iv);
    }
}

MainActivity中增加了代碼：

//這兒的1000，可以隨便改，只要用戶滑不出邊界即可
int startPos = 1000 * viewList.size() + 1;
mViewPager.setCurrentItem(startPos);

效果如下圖：

<img src="http://img.blog.csdn.net/20180123182248297?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjYyODc0MzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" height="600" alt="來，滑動兩下試試，看看是不是無限循環(huán)"/>

5、自動輪播，同時支持手勢滑動

①自動輪播的功能決定使用handler發(fā)送消息實現(xiàn)

②當用戶對輪播進行操作時，需要停止自動輪播的消息，這里決定在ViewPager的dispatchTouchEvent方法里面操作。

ps: 之所以不在onTouchEvent里面進行操作，是因為ViewPager對分發(fā)下來的事件進行了處理，在onTouchEvent中攔截不到ACTION_DOWN事件，長按事件也攔截不到。

代碼如下：
①自定義LoopViewPager，繼承自ViewPager，

/**
 * Desc:    自動切換的ViewPager，手勢沖突已處理
 * Created by tiny on 2018/1/23.
 * Time: 14:38
 * Version:
 */

public class LoopViewPager extends ViewPager {
    public static final String TAG = LoopViewPager.class.getSimpleName();

    public LoopViewPager(Context context) {
        super(context);
        init();
    }

    public LoopViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        autoPollTask = new AutoPollTask(this);
    }

    private static final long TIME_AUTO_POLL = 2000;
    private static AutoPollTask autoPollTask;
    private static boolean running; //標示是否正在自動輪詢
    private static boolean canRun;//標示是否可以自動輪詢,可在不需要的是否置false

    static class AutoPollTask implements Runnable {
        private final WeakReference<ViewPager> mReference;

        //使用弱引用持有外部類引用->防止內(nèi)存泄漏
        public AutoPollTask(ViewPager reference) {
            this.mReference = new WeakReference<>(reference);
        }

        @Override
        public void run() {
            ViewPager viewPager = mReference.get();
            if (viewPager != null && running && canRun) {
                int currPos = viewPager.getCurrentItem();
                viewPager.setCurrentItem(currPos + 1, true);
                viewPager.postDelayed(autoPollTask, TIME_AUTO_POLL);
            }
        }
    }

    //開啟:如果正在運行,先停止->再開啟
    public void start() {
        if (running)
            stop();
        canRun = true;
        running = true;
        postDelayed(autoPollTask, TIME_AUTO_POLL);
    }

    public void stop() {
        running = false;
        removeCallbacks(autoPollTask);
    }

    /**
     * onTouchEvent中的事件被viewPager處理過了，有些攔截不到
     * 所以在這里攔截
     *
     * @param ev
     * @return
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        //只要接收到事件，就停止?jié)L動。
        if (running)
            stop();
        switch (ev.getAction()) {
            //當手指抬起或者劃出頁面時
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_OUTSIDE:
                if (canRun)
                    start();
                break;
        }
        return super.dispatchTouchEvent(ev);
    }
}

②接下來將activity_main.xml中的ViewPager替換為LoopViewPager，并在MainActivity中添加如下代碼：

mViewPager.start();

最后，為了節(jié)省資源，在MainActivity中加上下面代碼。

@Override
protected void onStart() {
    super.onStart();
    if (mViewPager != null) {
        mViewPager.start();
    }
}

@Override
protected void onStop() {
    super.onStop();
    if (mViewPager != null) {
        mViewPager.stop();
    }
}

最后附上福利：源碼地址，求star。
https://github.com/tinyvampirepudge/LoopViewPagerGallary

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容