簡述：

目前公司項目開發(fā)過程中，我負(fù)責(zé)的模塊有涉及到一些頁面UI需要用到類似Banner圖輪播的效果，結(jié)合之前在公眾號平臺看過有類似實現(xiàn)的方式，然后在結(jié)合自身項目的需求，做了一些修改，使用到公司項目中來，本文只是做一些總結(jié)，積累。

效果圖：

效果圖

本文是利用ViewPager做類似風(fēng)格的Banner圖 。

引入：
compilecom.zhy:magic-viewpager:1.0.1``

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:clipToPadding="false"
    android:fitsSystemWindows="true"
    >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:clipChildren="false"
        android:layout_centerInParent="true"
        android:background="#aadc71ff"
        >
        <android.support.v4.view.ViewPager
            android:id="@+id/id_viewpager"
            android:layout_width="match_parent"
            android:layout_marginLeft="60dp"
            android:layout_marginRight="60dp"
            android:clipChildren="false"
            android:layout_height="180dp"
            android:layout_gravity="center"
            >
        </android.support.v4.view.ViewPager>

    </FrameLayout>



</RelativeLayout>

說明：
設(shè)置了ViewPager外層控件以及ViewPager都設(shè)置了Android:clipChildren=”false”。ViewPager的寬度是match_parent，左右設(shè)置了60dp的邊距，就是為了顯示出左右部分的Page.
接下來可以對ViewPager設(shè)置Adapter等相關(guān)屬性

public class MainActivity extends AppCompatActivity {

    ViewPager mViewPager ;
    private PagerAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView (){
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        //設(shè)置Page間間距
        mViewPager.setPageMargin(65);
        //設(shè)置Page緩存頁數(shù)值
        mViewPager.setOffscreenPageLimit(6);
        //給ViewPager加特效(決定動畫效果)
        mViewPager.setPageTransformer(true, (new AlphaPageTransformer(new ScaleInTransformer())));
        mViewPager.setAdapter(mAdapter = new PagerAdapter() {
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_monthly_bills_item, null);

                container.addView(view);
                return view;
            }

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

            @Override
            public int getCount() {
                return 6;
            }

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

    }
}

注意 ：

//設(shè)置Page間間距 
ViewPager.setPageMargin(65);

//設(shè)置Page緩存頁數(shù)值
mViewPager.setOffscreenPageLimit(6);

//給ViewPager加特效(決定動畫效果) 
mViewPager.setPageTransformer(true, (new AlphaPageTransformer(new ScaleInTransformer())));

DEMO下載：http://pan.baidu.com/s/1eRNFADW