蛇皮Banner無限滾動風格初步實現

蛇皮Banner無限滾動風格初步實現

前言

好吧，最近收到了一波蛇皮風格的banner效果，先看圖 ，大概就是中間banner會露出來兩邊，然後支持無限輪播。

擼碼

首先看到這個效果肯定會想到採用viewpager來實現，但是viewpager一個item的寬度基本上都是佔了一個屏幕。所以這裏就涉及到了一個屬性 clipChildren，這個屬性的作用就是控制他的子控件是否要在他應有的邊界內進行繪製，默認是爲true，也就是不允許，所以這裏我們要設置爲false。這個屬性在很多地方都有用到過，適用於各種凸出來的view。
接下來上Xml代碼

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:clipChildren="false"
    android:layerType="software"
    android:orientation="vertical"
    >
    <android.support.v4.view.ViewPager
        android:id="@+id/mvp"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipChildren="false"
        android:layerType="software"
        />
</LinearLayout>

然後接下來我們就要封裝一個適配器了，主要是爲了實現無限循環播放

public abstract class BaseAdapter<T> extends PagerAdapter implements ViewPager.OnPageChangeListener{

    //當前頁面
    private int currentPosition = 0;

    protected Context mContext;
    protected ArrayList<View> views;
    protected ViewPager mViewPager;

    public BaseAdapter(Context context, List<T> datas, ViewPager viewPager) {
        mContext = context;
        views = new ArrayList<>();
        //如果數據大於一條
        if(datas.size() > 1) {
        //添加最後一頁到第一頁
            datas.add(0,datas.get(datas.size()-1));
        //添加第一頁(經過上行的添加已經是第二頁了)到最後一頁
            datas.add(datas.get(1));
        }
        for (T data:datas) {
            views.add(getItemView(data));
        }
        mViewPager = viewPager;
        viewPager.setAdapter(this);
        viewPager.addOnPageChangeListener(this);
        viewPager.setCurrentItem(1,false);
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View v =views.get(position);
        ViewGroup parent = (ViewGroup) v.getParent();
        if (parent != null) {
            parent.removeAllViews();
        }
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

    protected abstract View getItemView(T data);

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        currentPosition = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //若viewpager滑動未停止，直接返回
        if (state != ViewPager.SCROLL_STATE_IDLE) return;
        //若當前爲第一張，設置頁面爲倒數第二張
        if (currentPosition == 0) {
            mViewPager.setCurrentItem(views.size()-2,false);
        } else if (currentPosition == views.size()-1) {
        //若當前爲倒數第一張，設置頁面爲第二張
            mViewPager.setCurrentItem(1,false);
        }
    }
}

這是一個抽象的adapter，主要對滑動後做一些處理，通過這樣來實現無限循環播放，使用泛型的目的是爲了適應各種數據，因爲考慮到我們的banner可能不單純是一個imageview，還有其他一些東西。
接下來我們要實現這個適配器

public class HeadAdapter extends BaseAdapter<Integer> {
public HeadAdapter(Context context, List<Integer> datas, ViewPager viewPager) {

    super(context, datas, viewPager);
}

private ViewGroup.LayoutParams layoutParams;
@Override
protected View getItemView(Integer data) {
    if (layoutParams == null) {
        layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    }
    View view= LayoutInflater.from(mContext).inflate(R.layout.item_layout,null);
    ImageView i =view.findViewById(R.id.item_image1);
    i.setScaleType(ImageView.ScaleType.CENTER_CROP);
    i.setImageResource(data);

    return view;
}

}

這個代碼就很簡單了，就是設置item了，這裏我是直接用的資源文件圖片，所以傳的Integer。
好了，接下來就是怎麼使用了

public class TestActivity extends AppCompatActivity {
private ViewPager mPager;

HeadAdapter loopVPAdapter;
private Handler mHandler;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);
    mPager=findViewById(R.id.mvp);

    mPager.setClipToPadding(false);
    // set padding manually, the more you set the padding the more you see of prev & next page
    mPager.setPadding(50, 0, 50, 0);
    // sets a margin b/w individual pages to ensure that there is a gap b/w them
    mPager.setPageMargin(10);
    ArrayList<Integer> urls=new ArrayList<>();
    urls.add(R.mipmap.img1);
    urls.add(R.mipmap.img2);
    urls.add(R.mipmap.img3);
    loopVPAdapter=new HeadAdapter(getApplicationContext(), urls,mPager);

    mHandler=new Handler();

    mHandler.postDelayed(new TestActivity.TimerRunnable(), 3000);
    ViewPagerScroller scroller = new ViewPagerScroller(TestActivity.this);
    scroller.setScrollDuration(1500);
    scroller.initViewPagerScroll(mPager);//這個是設置切換過渡時間爲2秒

}

class TimerRunnable implements Runnable{

    @Override
    public void run() {
        int curItem = mPager.getCurrentItem();
        mPager.setCurrentItem(curItem+1);
        if (mHandler!=null){
            mHandler.postDelayed(this,3000);
        }
    }
}

}

這裏我們要設置一下間隔了，間隔大小我們可以隨意控制，然後 ViewPagerScroller這個東西是用來控制滾動速度的，如果沒有需求可以不用管，就用默認的速度，最後我們就開啓一個輪詢 3秒鐘滾動一次，到這裏蛇皮banner無限滾動就差不多完成了。

最後還說一下banner的陰影，之前有使用了cardview發現並沒有什麼卵用，可能可以繪製有關，所以最後考慮到了使用一個第三方庫來實現這個陰影。

implementation ‘com.github.dmytrodanylyk.shadow-layout:library:1.0.3’

最後附上項目鏈接