仿淘宝Banner:左右滑动ViewPager+最后一张滑动查看详情

手机淘宝上能够看出来这个效果，在产品图片Banner上滑动的时候， 滑动到最后
一页的时候可以跳转详情，其实也就是给其最后一页跳转监听，并且实现页面跳转。
效果图如下：

 主要使用了ViewPager+CirclePageIndicator，实现代码如下：

 bannerlayout.xml

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="144dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    >

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

                    <com.viewpagerindicator.CirclePageIndicator
                        android:id="@+id/circle_indicator"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_centerHorizontal="true"
                        android:padding="10dp"/>

                RelativeLayout>

            LinearLayout>


            <LinearLayout
                android:id="@+id/ll_lookDetail"
                android:layout_width="43dp"
                android:layout_height="match_parent"
                android:background="#eff1f3"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:visibility="gone">

                <ImageView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/asset_img_look_icon"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="3dp"
                    android:text="释\n放\n查\n看\n更\n多"
                    android:textColor="#2493e7"
                    android:textSize="11sp"/>
            LinearLayout>
        LinearLayout>

其中Activity中的实现代码如下：

import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.viewpagerindicator.CirclePageIndicator;

public class AActivity implements ViewPager.OnPageChangeListener {


    private LinearLayout mLookDetail;
    private int[] mImageIds = new int[]{R.drawable.asset_detail_banner, R.drawable.ic_fx_banner, R.drawable.asset_detail_banner};
    private ArrayList mAssertImgList;
    private ViewPager mViewPagerBanner;
    private int currentPageScrollStatus;
    private int count = 0;
    private CirclePageIndicator mCircleIndicator;

    @Override
    @Override
    public void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.bannerlayout);
               mLookDetail = (LinearLayout) findViewById(R.id.ll_lookDetail);
        mViewPagerBanner = (ViewPager) findViewById(R.id.viewpager_banner);
        mCircleIndicator = (CirclePageIndicator) findViewById(R.id.circle_indicator);

        mAssertImgList = new ArrayList();
        //设置banner图
        for (int i = 0; i < mImageIds.length; i++) {
            ImageView view = new ImageView(this);
            view.setBackgroundResource(mImageIds[i]);
            mAssertImgList.add(view);
        }
        mViewPagerBanner.setAdapter(new BannerAdapter(getApplicationContext(), mAssertImgList));
        mCircleIndicator.setViewPager(mViewPagerBanner);
        mCircleIndicator.setOnPageChangeListener(this);

    }  


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

        if (position == mImageIds.length - 1) {
            if (positionOffsetPixels == 0 && currentPageScrollStatus == 1) {
            //count的作用是判断是否是第一次滑动到最后一页，如果每次都需要跳入详情，需删除该变量
                if (count == 0) {
                    mLookDetail.setVisibility(View.VISIBLE);
                    startActivityn(new Intent(AActivity.this,
                            BActivity.class));

                }
                //此处count也需要删除
                count++;
            }

        } else {
            mLookDetail.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        currentPageScrollStatus = state;

    }
}

其中Adapter实现如下：

public class BannerAdapter extends PagerAdapter {
    private Context context;

    private ArrayList mImgList;

    public BannerAdapter (Context context, ArrayList mGuideImgList) {
        this.context = context;
        this.mAssertImgList = mGuideImgList;
    }

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

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

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

    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        ImageView imageView = mImgList.get(position);
        container.addView(imageView);

        return imageView;
    }
}

代码中可能会由于改动，命名有不同，用的时候可以改动一下喽！bénir

源码下载地址：https://github.com/blythe104/SlideBannerDemo

注：由于ViewPager中包含多张图片，在返回的时候可能需要多次注销，需要添加该活动的模式如下：
android:launchMode=”singleTop”