ViewPager系列之广告页滑动

时间 2019-11-12

原文原文链接

ViewPager是support-v4下的一个控件，视图左右滑动切换工具。要添加这个包才能使用哦！ViewPager是相似于ListView的一个控件，不少的Item组成的，相似于左右翻动的一本书，而ListView只是上下翻动。ViewPager的适配器PagerAdapter相似于ListView的BaseAdapter,使用方面也很相似于ListView,准备数据源，适配器，适配器里面要计算总Item的条目数，绘制每一个item视图。。java

先上效果图：android

完整代码：缓存

import android.app.ActionBar;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;

public class advertisement extends Activity {
private ViewPager viewPager;
    private LinearLayout  layout;
    private List<ImageView> imageList;
    private List<ImageView>  pointList;
    ImageView point;
    int[] drawable={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_advertisement);
        viewPager=(ViewPager)findViewById(R.id.viewPager);
        layout=(LinearLayout)findViewById(R.id.layout);
        imageList=new ArrayList<ImageView>();
        pointList=new ArrayList<ImageView>();
        addView();
        pointList.get(1).setImageResource(R.mipmap.ic_focus);//滑动灰色小圆点
        pointList.get(2).setImageResource(R.mipmap.ic_focus);
        pointList.get(3).setImageResource(R.mipmap.ic_focus);
        viewPager.setOnPageChangeListener(new pointListener());
    }

public void addView(){
       for (int i=0;i<4;i++){
           ImageView iv=new ImageView(this);
           iv.setImageResource(drawable[i]);
           iv.setScaleType(ImageView.ScaleType.CENTER_CROP);//图片缩放方式
           imageList.add(iv);
           viewPager.setAdapter(new ViewPagerAdapter());
           //ViewPager上的小圆点滑动效果
           point=new ImageView(this);
           //设置控件对于父容器的布局参数宽高位置等
           //控件自身所处的父容器是什么就用哪一种类型的父容器。这里point在LinearLayout下面
           LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(20,20);
           params.leftMargin=20;
           point.setImageResource(R.mipmap.ic_focus_select);
           point.setMaxHeight(20);
           point.setMaxWidth(20);
           point.setLayoutParams(params);
           pointList.add(point);
           layout.addView(point);
       }
   }

    class ViewPagerAdapter  extends PagerAdapter{
        @Override
        // 获取要滑动的控件的数量，那么这里就应该是展现的广告图片的ImageView数量
        public int getCount() {
            return imageList.size();
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //ViewPager 是扩展于 ViewGroup，container参数是当前的ViewPager对象，
            // 全部的item都会被加入到ViewPager中，
           // position就是 每一个item对应的下标
            container.addView(imageList.get(position));
            return imageList.get(position);
        }
        @Override
        //从instantiateItem返回的object是一个view有一个id，用它和view的id比较
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
        @Override
        // PagerAdapter只缓存三张要显示的图片，若是滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(imageList.get(position));
        }
    }
    class pointListener implements ViewPager.OnPageChangeListener{
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//这个方法会在屏幕滚动过程当中不断被调用。
// 有三个参数，第一个position，这个参数要特别注意一下。
// 当用手指滑动时，若是手指按在页面上不动，position和当前页面index是一致的；
// 若是手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，
// 只有翻页成功的状况下最后一次调用才会变为目标页面；若是手指向右拖动（相应页面向左翻动），
// 这时候position大部分时间和目标页面是一致的，只有翻页不成功的状况下最后一次调用才会变为原页面。
//当直接设置setCurrentItem翻页时，若是是相邻的状况（好比如今是第二个页面，
// 跳到第一或者第三个页面），若是页面向右翻动，大部分时间是和当前页面是一致的，
// 只有最后才变成目标页面；若是向左翻动，position和目标页面是一致的。
// 这和用手指拖动页面翻动是基本一致的。
// 若是不是相邻的状况，好比我从第一个页面跳到第三个页面，position先是0，而后逐步变成1，
// 而后逐步变成2；我从第三个页面跳到第一个页面，position先是1，而后逐步变成0，并无出现为2的状况。
// positionOffset是当前页面滑动比例，若是页面向右翻动，这个值不断变大，
// 最后在趋近1的状况后突变为0。若是页面向左翻动，这个值不断变小，最后变为0。
// positionOffsetPixels是当前页面滑动像素，变化状况和positionOffset一致。
        }
        @Override
        public void onPageScrollStateChanged(int state) {
//这个方法在手指操做屏幕的时候发生变化。有三个值：0（END）,1(PRESS) , 2(UP) 。
//当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，
// 若是发生了滑动（即便很小），这个值会变为2，而后最后变为0 。总共执行这个方法三次。
// 一种特殊状况是手指按下去之后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是1,0 。
//当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 , 0 。
        }
        @Override
        public void onPageSelected(int position) {
      //onPageSelected(int position)：这个方法有一个参数position，
       // 表明哪一个页面被选中。当用手指滑动翻页的时候，
      // 若是翻动成功了（滑动的距离够长），手指抬起来就会当即执行这个方法，
      // position就是当前滑动到的页面。若是直接setCurrentItem翻页，
      // 那position就和setCurrentItem的参数一致，这种状况在onPageScrolled执行方法前就会当即执行。
          for (int i=0;i<pointList.size();i++){
             if(position==i)
                pointList.get(i).setImageResource(R.mipmap.ic_focus_select);//滑动白色小圆点
              else
                 pointList.get(i).setImageResource(R.mipmap.ic_focus);//滑动灰色小圆点
          }
        }
    }
}

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".advertisement">
<!-- RelativeLayout下能实现一个组件悬浮在另外一个组件上效果有点惊讶 -->
   <android.support.v4.view.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">

   </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:layout_centerHorizontal="true"
       >

    </LinearLayout>
</RelativeLayout>