ViewPager实现APP首页图片轮播和自由切换

来源：互联网发布：法国双飞人药水知乎编辑：程序博客网时间：2024/04/28 16:12

1、首先看下实现的效果

这里写图片描述
主要的代码 ##

layout中的代码

<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"    tools:context=".MainActivity2" ><FrameLayout          android:layout_width="fill_parent"            android:layout_height="200dp">          <android.support.v4.view.ViewPager              android:id="@+id/myviewpager"              android:layout_width="fill_parent"              android:layout_height="fill_parent"          />          <LinearLayout              android:layout_width="fill_parent"             android:layout_height="35dp"             android:orientation="vertical"             android:layout_gravity="bottom"             android:gravity="center"             android:background="#33000000">              <TextView                    android:id="@+id/txttitle"                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                       android:textColor="@android:color/white"              />                 <LinearLayout                   android:layout_width="wrap_content"                  android:layout_height="wrap_content"                     android:layout_marginTop="3dp"                  android:orientation="horizontal">                  <View                      android:id="@+id/dotnumber_1"                     android:layout_width="10dp"                     android:layout_height="10dp"                     android:layout_marginLeft="2dp"                     android:layout_marginRight="2dp"                     android:background="@drawable/dot_select_yes"                          />                  <View                      android:id="@+id/dotnumber_2"                     android:layout_width="10dp"                     android:layout_height="10dp"                     android:layout_marginLeft="2dp"                     android:layout_marginRight="2dp"                     android:background="@drawable/dot_select"                          />                  <View                      android:id="@+id/dotnumber_3"                     android:layout_width="10dp"                     android:layout_height="10dp"                     android:layout_marginLeft="2dp"                     android:layout_marginRight="2dp"                     android:background="@drawable/dot_select"                          />              </LinearLayout>           </LinearLayout>      </FrameLayout>  </RelativeLayout>

Activity中代码

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private int[] imageids;//图片数组    private String[] titles;  //标题集合    private List<ImageView> imageslist; //ImageView集合    private List<View> dotslist;  //自定义点的集合    private TextView txttitle;    private ViewPager mViewPager;    private ScheduledExecutorService excutorservice;//执行周期性或定时任务    private int oldposition = 1;  //标记位设置前一个点的背景图片    private int currentposition; //当前currentposition+1代表刚开始ImageView的位置    public boolean suspendFlag = false;// 控制线程的执行    private ImageView imageview0;//第一张图片    private ImageView imageview1;//第二张图片    private ImageView imageview2;//第三张图片    private ImageView imageview3;//第四张图片    private ImageView imageview4;//第五张图片    private Handler handle = new Handler() {        @Override        public void handleMessage(Message msg) {            // TODO Auto-generated method stub            super.handleMessage(msg);            mViewPager.setCurrentItem(currentposition);        }    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        imageids = new int[]{R.mipmap.icon_a, R.mipmap.icon_b, R.mipmap.icon_d};        titles = new String[]{"3", "1", "2", "3", "1"};        imageslist = new ArrayList<>();        imageview0 = new ImageView(getApplicationContext());        imageview0.setBackgroundResource(imageids[2]);        imageview0.setId(R.id.image0);        imageview0.setOnClickListener(this);        imageslist.add(imageview0);        imageview1 = new ImageView(getApplicationContext());        imageview1.setBackgroundResource(imageids[0]);        imageslist.add(imageview1);        imageview1.setId(R.id.image1);        imageview1.setOnClickListener(this);        imageview2 = new ImageView(getApplicationContext());        imageview2.setBackgroundResource(imageids[1]);        imageview2.setOnClickListener(this);        imageview2.setId(R.id.image2);        imageslist.add(imageview2);        imageview3 = new ImageView(getApplicationContext());        imageview3.setBackgroundResource(imageids[2]);        imageview3.setOnClickListener(this);        imageview3.setId(R.id.image3);        imageslist.add(imageview3);        imageview4 = new ImageView(getApplicationContext());        imageview4.setBackgroundResource(imageids[0]);        imageview4.setOnClickListener(this);        imageview4.setId(R.id.image4);        imageslist.add(imageview4);        dotslist = new ArrayList<>();        dotslist.add(findViewById(R.id.dotnumber_3));        dotslist.add(findViewById(R.id.dotnumber_1));        dotslist.add(findViewById(R.id.dotnumber_2));        dotslist.add(findViewById(R.id.dotnumber_3));        dotslist.add(findViewById(R.id.dotnumber_1));        txttitle = (TextView) findViewById(R.id.txttitle);        txttitle.setText(titles[1]);        mViewPager = (ViewPager) findViewById(myviewpager);        mViewPager.setAdapter(new ViewPagerAdapter(imageslist));        mViewPager.setCurrentItem(1);        //创建一个页面更换监听        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageSelected(int arg0) {                txttitle.setText(titles[arg0]);                dotslist.get(oldposition).setBackgroundResource(R.mipmap.dot_select);                dotslist.get(arg0).setBackgroundResource(R.mipmap.dot_select_yes);                oldposition = arg0;                currentposition = arg0;            }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {                // TODO Auto-generated method stub            }            //滑动状态改变的时候调用            public void onPageScrollStateChanged(int state) {                // ViewPager.SCROLL_STATE_IDLE 标识的状态是当前页面完全展现，并且没有动画正在进行中，如果不                // 是此状态下执行 setCurrentItem 方法回在首位替换的时候会出现跳动！                 // ViewPager.SCROLL_STATE_DRAGGING 开始滚动                // ViewPager.SCROLL_STATE_IDLE 停止滚动                // ViewPager.SCROLL_STATE_SETTLING 正在设置页面，即将要停止，并且设置当前显示的页面                if (state != ViewPager.SCROLL_STATE_IDLE) {                    suspend();//手指滑动还没有停止的时候暂停线程                    return;                }                resume();//滑动动画完成启动线程                // 当视图在第一个时，将页面号设置为图片的最后一张。                if (currentposition == 0) {                    mViewPager.setCurrentItem(imageslist.size() - 2, false);                } else if (currentposition == imageslist.size() - 1) {                    // 当视图在最后一个是,将页面号设置为图片的第一张。                    mViewPager.setCurrentItem(1, false);                }            }        });    }    @Override    protected void onStart() {        // TODO Auto-generated method stub        //创建一个只有一个线程的线程池        excutorservice = Executors.newSingleThreadScheduledExecutor();        //创建并执行一个在给定初始延迟后首次启用的定期操作，随后，在每一次执行终止和下一次执行开始之间都存在给定的延迟，如果任务的执行时间超过了廷迟时间（delay），下一个任务则会在        //（当前任务执行所需时间+delay）后执行。        //第一个参数，要执行的任务，第二个参数，第一次执行延迟的时间，第三个参数，相邻两次任务执行的间隔，第四个参数，初始延迟和延迟参数的时间单位        excutorservice.scheduleWithFixedDelay(new MyTask(), 4, 4, TimeUnit.SECONDS);        super.onStart();    }    @Override    public void onClick(View view) {        switch (view.getId()) {            case R.id.image0:                Toast.makeText(this, "3", Toast.LENGTH_SHORT).show();                break;            case R.id.image1:                Toast.makeText(this, "1", Toast.LENGTH_SHORT).show();                break;            case R.id.image2:                Toast.makeText(this, "2", Toast.LENGTH_SHORT).show();                break;            case R.id.image3:                Toast.makeText(this, "3", Toast.LENGTH_SHORT).show();                break;            case R.id.image4:                Toast.makeText(this, "1", Toast.LENGTH_SHORT).show();                break;        }    }    private class MyTask implements Runnable {        @Override        public void run() {            // TODO Auto-generated method stub            //当前的下标+1去显示下一个图片，取模是为了循环播放            while (suspendFlag) {                try {                    Thread.sleep(1000);                } catch (InterruptedException e) {                    e.printStackTrace();                }            }            currentposition = (currentposition + 1) % imageslist.size();            handle.sendEmptyMessage(0);        }    }    @Override    protected void onPause() {        super.onPause();        //关闭 ExecutorService        excutorservice.shutdown();    }    /**     * 线程暂停     */    public void suspend() {        this.suspendFlag = true;    }    /**     * 唤醒线程     */    public synchronized void resume() {        suspendFlag = false;    }}

适配器ViewPagerAdapter代码

public class ViewPagerAdapter extends PagerAdapter {    List<ImageView> mImageslist = null;    public ViewPagerAdapter(List<ImageView> ImagesList) {        this.mImageslist = ImagesList;    }    @Override    public int getCount() {        // TODO Auto-generated method stub        return mImageslist.size();    }    //判断是不是同一张图片    @Override    public boolean isViewFromObject(View arg0, Object arg1) {        // TODO Auto-generated method stub        return arg0 == arg1;    }        /*显示内存就放三张图片 滑动的时候 出去的图片执行destroy 进到内存的图片就是instaint*/    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        //移除这个位置的图片        container.removeView(mImageslist.get(position));    }    //添加当前的图片    @Override    public Object instantiateItem(ViewGroup container, int position) {        // TODO Auto-generated method stub        container.addView(mImageslist.get(position));        return mImageslist.get(position);    }}

对ViewPager的addOnPageChangeListener方法详解请点击查看
ViewPager循环滑动分析：
ViewPager中只需要显示三个ImageView，而Activity中却定义了五个，但只用了三张图片。

 ImageView imageview = new ImageView(getApplicationContext());          imageview.setBackgroundResource(imageids[2]);          imageslist.add(imageview);        ImageView imageview1 = new ImageView(getApplicationContext());          imageview1.setBackgroundResource(imageids[0]);          imageslist.add(imageview1);         ImageView imageview2 = new ImageView(getApplicationContext());          imageview2.setBackgroundResource(imageids[1]);          imageslist.add(imageview2);         ImageView imageview3 = new ImageView(getApplicationContext());          imageview3.setBackgroundResource(imageids[2]);          imageslist.add(imageview3);        ImageView imageview4 = new ImageView(getApplicationContext());          imageview4.setBackgroundResource(imageids[0]);          imageslist.add(imageview4);

ImageView（0）—图片下标2—–图片c
ImageView（1）—图片下标0—–图片a
ImageView（2）—图片下标1—–图片b
ImageView（3）—图片下标2—–图片c
ImageView（4）—图片下标0—–图片a

初始状态，显示下标为1的图片a，当手指向右滑动时，此时我们应该显示第三张图片c，这里我们在第一张图片a的左边多加了一个Imageview,来做一个过渡，在滑动的时候，先来显示ImageView（0）这张图片，当手指滑动动画完成的时候，再做一个判断，判断当前视图是否处于第一个位置，如果处于imageslist中第一个位置，则再把当前页面定位到ImageView（3），也就是显示页面的最后一个，imageslist中的第四个。

如果是ImageView（3）位置，去往左滑动，此时滑动动画先显示的是ImageView（4），然后滑动动画完成后，再做一个判断，判断当前视图是否处于imageslist中最后一个位置，如果处于最后一个位置，则再把当前页面定位到ImageView（1），也就是显示页面的第一个。

 @Override              public void onPageScrollStateChanged(int state) {                      // ViewPager.SCROLL_STATE_IDLE 标识的状态是当前页面完全展现，并且没有动画正在进行中，如果不                     // 是此状态下执行 setCurrentItem 方法回在首位替换的时候会出现跳动！                     if (state != ViewPager.SCROLL_STATE_IDLE)                          {                         return;                         }                     // 当视图在第一个时，将页面号设置为图片的最后一张。                     if (currentposition == 0) {                         mViewPager.setCurrentItem(imageslist.size() - 2, false);                     } else if (currentposition == imageslist.size() - 1) {                         // 当视图在最后一个是,将页面号设置为图片的第一张。                         mViewPager.setCurrentItem(1, false);                     }                                               }

ViewPager轮播功能引用博客地址：

http://blog.csdn.net/JM_beizi/article/details/51297200

阅读全文

0 0