如德芙般絲滑的ViewPager輪播

每次在地鐵上把玩別的應(yīng)用時，看著別人家的輪播圖總是那么高大上，滑動起來總是那么銜接完美，就像別人家的亞索和盲僧總是那么6。我不服，solo，于是當(dāng)即也手動寫一個。
Talk is cheap,show you the code

Talk is cheap,show you the effect：


giphy.gif

功能簡介：

自定義的一個BannerView輪播器類，實現(xiàn)可滑動指示點，可調(diào)節(jié)滑動速度；

實現(xiàn)步驟：

1.BannerView引入布局：viewpager顯示輪播，linearlayout用于添加一排白色（未選中狀態(tài)）小圓點，view用于顯示紅色移動小圓點。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="160dp"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="14dp"
        android:layout_alignBottom="@id/viewpager">

        <LinearLayout
            android:id="@+id/dot_linear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"/>

        <View
            android:id="@+id/movedot"
            android:layout_width="6dp"
            android:layout_height="6dp"
            android:background="@drawable/dot_focus"/>
    </RelativeLayout>
</RelativeLayout>

2.viewpager的pageradapter類，每一項為imageview,實現(xiàn)多張切換。

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class BannerViewpagerAdapter extends PagerAdapter {
    private Context context;
    private int[] pics;

    public BannerViewpagerAdapter(Context context, int[] pics) {
        this.context = context;
        this.pics = pics;
    }

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

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

    /**
     * 相當(dāng)于baseadapter的getview
     * @param container
     * @param position
     * @return
     */
    @Override
    public Object instantiateItem(final ViewGroup container, final int position) {
        ImageView imageView = new ImageView(context);
        container.addView(imageView);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setImageResource(pics[position%pics.length]);

        return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
}
Bannerview類中：

3.初始化，包括初始化自動輪播時間，圓點直徑，原點間隙，圓點之間圓心間距（算偏移量）。params1第一個點無左間距，params2其余點有左間距。

    private Context context;
    private ViewPager viewPager;
    public PagerAdapter pagerAdapter;
    /** 自動輪播時間間隔 */
    private final int DELAY_TIME = 4000;
    /** 頁面滾動時間 */
    private final int SCROLL_TIME = 400;
    public LinearLayout linearLayout;
    private View bannerView;
    private int[] pics;
    private final int SCROLL_WHAT = 0;
    private LinearLayout.LayoutParams params1,params2;
    private View moveDot;
    /** 相鄰點圓心距離 */
    private int dotDistance;
    /** 圓點直徑 */
    private int dotDiameter;
    /** 圓之間間隔空隙 */
    private int dotSpace;

    public BannerView(Context context,int[] pics,PagerAdapter pagerAdapter,int layout){
        this.context = context;
        this.pics = pics;
        this.pagerAdapter = pagerAdapter;
        bannerView = LayoutInflater.from(context).inflate(layout,null);
        initView();
        event();
    }

    private void initView() {
        linearLayout = bannerView.findViewById(R.id.dot_linear);
        viewPager = bannerView.findViewById(R.id.viewpager);
        moveDot = bannerView.findViewById(R.id.movedot);
        //設(shè)置默認(rèn)viewpager當(dāng)前項
        viewPager.setCurrentItem(pics.length*Integer.MAX_VALUE/2);
        viewPager.setAdapter(pagerAdapter);
        pagerAdapter.notifyDataSetChanged();
        handler.sendEmptyMessageDelayed(SCROLL_WHAT, DELAY_TIME);

        dotSpace = dp2px(7);
        dotDiameter = dp2px(6);
        dotDistance = dotDiameter + dotSpace;

        params1 = new LinearLayout.LayoutParams(dotDiameter,dotDiameter);
        params1.leftMargin = 0;
        params2 = new LinearLayout.LayoutParams(dotDiameter,dotDiameter);
        params2.leftMargin = dotSpace;

        setViewPagerDuration();
        initDot();
    }

4.創(chuàng)建白色小圓點，并添加到linearlayout中，第一個無左邊界，其余加入左邊界。

    /**
     * 創(chuàng)建小圓點
     */
    private void initDot(){
        View dot;
        for(int i=0;i<pics.length;i++){
            dot = new View(context);
            if(i == 0){
                dot.setLayoutParams(params1);
                dot.setBackgroundResource(R.drawable.dot_unfocus);
            }else{
                dot.setLayoutParams(params2);
                dot.setBackgroundResource(R.drawable.dot_unfocus);
            }
            linearLayout.addView(dot);
        }
    }

5.實現(xiàn)移動小紅點指示點：
pageChangeListener的onPageScrolled回調(diào)方法中，回調(diào)了positionOffset值，即滑動當(dāng)前一頁的偏移百分比，范圍[0-1]?？梢愿鶕?jù)實時設(shè)置小紅點params.leftMargin達(dá)到移動效果。那么當(dāng)前左邊距是多少呢。比如滑動到第二和第三頁之間，那么左邊距就是第一個點和第二個點的間隔dotDistance加上第二和第三點之間偏移乘以dotDistance。


滑動過程演示
    private void event(){
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) moveDot.getLayoutParams();

                //取余，不然會一直往右移動
                int dotPos = position % pics.length;
                //dotDistance圓心間距
                params.leftMargin = (int) (dotDistance * dotPos + dotDistance * positionOffset);
                moveDot.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int i) {
            }

            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });

    }

6.實現(xiàn)自設(shè)置滾動速度：
要設(shè)置滾動，滾動事件來自于viewPager.setCurrentItem()，那么順藤摸瓜，點進(jìn)setCurrentItem往上找：

    /**
     * Set the currently selected page. If the ViewPager has already been through its first
     * layout with its current adapter there will be a smooth animated transition between
     * the current item and the specified item.
     *
     * @param item Item index to select
     */
    public void setCurrentItem(int item) {
        mPopulatePending = false;
        setCurrentItemInternal(item, !mFirstLayout, false);
    }

實現(xiàn)來自setCurrentItemInternal()，點進(jìn)去繼續(xù)，來到了ViewPager類中。從setCurrentItemInternal() -> scrollToItem() -> smoothScrollTo()，里面最終是由mScroller.startScroll(sx, sy, dx, dy, duration)實現(xiàn)了滾動。所以我們要改變duration這個值，一不做二不休，采用偷梁換柱，自己Scroller類，覆寫startScroll()方法，傳入自己的duration。mScroller是Viewpager的一個成員變量，那就用反射替用自己scroller換掉原有的mScroller。

    void setCurrentItemInternal(int item, boolean smoothScroll, boolean always) {
        setCurrentItemInternal(item, smoothScroll, always, 0);
    }

    void setCurrentItemInternal(int item, boolean smoothScroll, boolean always, int velocity) {
        if (mAdapter == null || mAdapter.getCount() <= 0) {
            setScrollingCacheEnabled(false);
            return;
        }
        if (!always && mCurItem == item && mItems.size() != 0) {
            setScrollingCacheEnabled(false);
            return;
        }

        if (item < 0) {
            item = 0;
        } else if (item >= mAdapter.getCount()) {
            item = mAdapter.getCount() - 1;
        }
        final int pageLimit = mOffscreenPageLimit;
        if (item > (mCurItem + pageLimit) || item < (mCurItem - pageLimit)) {
            // We are doing a jump by more than one page.  To avoid
            // glitches, we want to keep all current pages in the view
            // until the scroll ends.
            for (int i = 0; i < mItems.size(); i++) {
                mItems.get(i).scrolling = true;
            }
        }
        final boolean dispatchSelected = mCurItem != item;

        if (mFirstLayout) {
            // We don't have any idea how big we are yet and shouldn't have any pages either.
            // Just set things up and let the pending layout handle things.
            mCurItem = item;
            if (dispatchSelected) {
                dispatchOnPageSelected(item);
            }
            requestLayout();
        } else {
            populate(item);
            scrollToItem(item, smoothScroll, velocity, dispatchSelected);
        }
    }

private void scrollToItem(int item, boolean smoothScroll, int velocity,
            boolean dispatchSelected) {
        final ItemInfo curInfo = infoForPosition(item);
        int destX = 0;
        if (curInfo != null) {
            final int width = getClientWidth();
            destX = (int) (width * Math.max(mFirstOffset,
                    Math.min(curInfo.offset, mLastOffset)));
        }
        if (smoothScroll) {
            smoothScrollTo(destX, 0, velocity);
            if (dispatchSelected) {
                dispatchOnPageSelected(item);
            }
        } else {
            if (dispatchSelected) {
                dispatchOnPageSelected(item);
            }
            completeScroll(false);
            scrollTo(destX, 0);
            pageScrolled(destX);
        }
    }

7.創(chuàng)建Scroller傳入duration覆寫startScroll，通過反射取得mScroller屬性重設(shè)mScroller。

private void setViewPagerDuration(){
        try {
            Field field = ViewPager.class.getDeclaredField("mScroller");
            field.setAccessible(true);
            field.set(viewPager,getScroller(SCROLL_TIME));
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }

    private Scroller getScroller(final int smoothDuration){
        Scroller scroller = new Scroller(context,new AccelerateInterpolator()){
            @Override
            public void startScroll(int startX, int startY, int dx, int dy, int duration) {
                super.startScroll(startX, startY, dx, dy, smoothDuration);
            }
        };
        return scroller;
    }
好了，大功告成。完整Bannerview類：
blic class BannerView {
    private Context context;
    private ViewPager viewPager;
    public PagerAdapter pagerAdapter;
    /** 自動輪播時間間隔 */
    private final int DELAY_TIME = 4000;
    /** 頁面滾動時間 */
    private final int SCROLL_TIME = 400;
    public LinearLayout linearLayout;
    private View bannerView;
    private int[] pics;
    private final int SCROLL_WHAT = 0;
    private LinearLayout.LayoutParams params1,params2;
    private View moveDot;
    /** 相鄰點圓心距離 */
    private int dotDistance;
    /** 圓點直徑 */
    private int dotDiameter;
    /** 圓之間間隔空隙 */
    private int dotSpace;

    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
            handler.sendEmptyMessageDelayed(SCROLL_WHAT,DELAY_TIME);
        }
    };

    public BannerView(Context context,int[] pics,PagerAdapter pagerAdapter,int layout){
        this.context = context;
        this.pics = pics;
        this.pagerAdapter = pagerAdapter;
        bannerView = LayoutInflater.from(context).inflate(layout,null);
        initView();
        event();
    }

    private void initView() {
        linearLayout = bannerView.findViewById(R.id.dot_linear);
        viewPager = bannerView.findViewById(R.id.viewpager);
        moveDot = bannerView.findViewById(R.id.movedot);
        //設(shè)置默認(rèn)viewpager當(dāng)前項
        viewPager.setCurrentItem(pics.length*Integer.MAX_VALUE/2);
        viewPager.setAdapter(pagerAdapter);
        pagerAdapter.notifyDataSetChanged();
        handler.sendEmptyMessageDelayed(SCROLL_WHAT, DELAY_TIME);

        dotSpace = dp2px(7);
        dotDiameter = dp2px(6);
        dotDistance = dotDiameter + dotSpace;

        params1 = new LinearLayout.LayoutParams(dotDiameter,dotDiameter);
        params1.leftMargin = 0;
        params2 = new LinearLayout.LayoutParams(dotDiameter,dotDiameter);
        params2.leftMargin = dotSpace;

        setViewPagerDuration();
        initDot();
    }

    private void event(){
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) moveDot.getLayoutParams();

                //取余，不然會一直往右移動
                int dotPos = position % pics.length;
                params.leftMargin = (int) (dotDistance * dotPos + dotDistance * positionOffset);
                moveDot.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int i) {
            }

            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });

    }

    /**
     * 創(chuàng)建小圓點
     */
    private void initDot(){
        View dot;
        for(int i=0;i<pics.length;i++){
            dot = new View(context);
            if(i == 0){
                dot.setLayoutParams(params1);
                dot.setBackgroundResource(R.drawable.dot_unfocus);
            }else{
                dot.setLayoutParams(params2);
                dot.setBackgroundResource(R.drawable.dot_unfocus);
            }
            linearLayout.addView(dot);
        }
    }

    private void setViewPagerDuration(){
        try {
            Field field = ViewPager.class.getDeclaredField("mScroller");
            field.setAccessible(true);
            field.set(viewPager,getScroller(SCROLL_TIME));
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }

    private Scroller getScroller(final int smoothDuration){
        Scroller scroller = new Scroller(context,new AccelerateInterpolator()){
            @Override
            public void startScroll(int startX, int startY, int dx, int dy, int duration) {
                super.startScroll(startX, startY, dx, dy, smoothDuration);
            }
        };
        return scroller;
    }

    public View getBannerView(){
        return bannerView;
    }

    private int dp2px(int dp){
        return (int) (context.getResources().getDisplayMetrics().density*dp + 0.5);
    }

}

MainActivity類：

public class MainActivity extends AppCompatActivity {
    private BannerView bannerView;
    private BannerViewpagerAdapter pagerAdapter;
    private RelativeLayout rlBanner;
    private int[] pics = new int[]{R.mipmap.banner1,R.mipmap.banner2,R.mipmap.banner3,R.mipmap.banner4};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
        rlBanner = (RelativeLayout) findViewById(R.id.rl_banner);
        pagerAdapter = new BannerViewpagerAdapter(getApplicationContext(),pics);
        bannerView = new BannerView(getApplicationContext(),pics,pagerAdapter,R.layout.customviewpager);
        //將bannerview添加到需引入控件即可
        rlBanner.addView(bannerView.getBannerView());
    }
}

重要的是想到找到滑動偏移和設(shè)置時間的辦法，在實際做項目中，辦法總比困難多。1000個讀者就有1000個林黛玉，那么1000個程序猿就有1000個方法。

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

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

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