Description:

At present, the company in the process of project development, I am responsible for the UI module involves some page need to use a similar Banner figure shuffling, the effect of combined before the public platform there have seen a similar implementation way, and in combination with the needs of the project itself, made some changes, use the company project, this paper do some summary and accumulation.

Effect:





rendering

This article uses ViewPager to do a similar style of Banner.

Introduction: compilecom. Zhy: magic – viewpager: 1.0.1 ` `

Layout file:

<?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>
`Copy the code

Android:clipChildren= “false”; Android:clipChildren= “false”; The width of the ViewPager is match_parent, and the left and right margins are set to 60dp to show the left and right pages. You can then set the attributes associated with the ViewPager, such as Adapter

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 (a){
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        // Set the spacing between pages
        mViewPager.setPageMargin(65);
        // Set Page cache Page value
        mViewPager.setOffscreenPageLimit(6);
        // Add special effects to the ViewPager (determine the animation effect)
        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(a) {
                return 6;
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                returnview == object; }}); }}Copy the code

Note:

// Set the spacing between pages
ViewPager.setPageMargin(65);Copy the code
// Set Page cache Page value
mViewPager.setOffscreenPageLimit(6);Copy the code
// Add special effects to the ViewPager (determine the animation effect)
mViewPager.setPageTransformer(true, (new AlphaPageTransformer(new ScaleInTransformer())));Copy the code

DEMO download: pan.baidu.com/s/1eRNFADW