zoukankan      html  css  js  c++  java
  • 使用viewpager实现广告条轮询的效果

    先上效果图:

    viewpager是google在v4-support包中提供的,使用时与listview类似,度需要提供一个adapter,

    只不过viewpager提供的是PagerAdapter

    查看文档,当我们要实现一个pageradapter的时候,至少要实现下面4个方法

    例如:

    class MyAdvertAdapter extends PagerAdapter{
    
            /**
             * 返回条目的数量
             * @return
             */
            @Override
            public int getCount() {
                return Integer.MAX_VALUE;
            }
    
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
    
            /**
             * 创建一页的数据
             *
             * @param container
             * @param position
             * @return
             */
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                position = position % picArray.length;
                ImageView imageView = new ImageView(AdvertScrollActivity.this);
                imageView.setImageResource(picArray[position]);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    
                ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                container.addView(imageView,params);
                return imageView;
            }
    
            /**
             * 销毁某一页的数据
             * @param container
             * @param position
             * @param object
             */
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((ImageView)object);
                object = null;
            }
        }

    当pagerAdapter实现好后,就可以调用viewpager.setAdapter(pagerAdapter),此时就可以实现当手指滑动显示图片的效果

    接下来就是添加图片描述的信息,还有用一些小点描述当前显示的是第几张图片

    ViewPager有一个onPageChangeListener事件,当图片改变的时候会回调里面的一些方法

    vp_advert.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                /**
                 * 显示某张图片的时候回调改方法
                 * @param position
                 */
                @Override
                public void onPageSelected(int position) {
                    position = position % picArray.length;
    
                    Log.i(TAG,"onPageSelected...("+position+")");
    
                    /**
                     * 设置图片的描述信息
                     */
                    tv_desc.setText(picDescArray[position]);
                    /**
                     * 设置小点的显示
                     */
                    ll_point_container.getChildAt(lastPosition).setEnabled(false);
                    ll_point_container.getChildAt(position).setEnabled(true);
                    lastPosition = position;
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });

    最后就是如何让图片自动轮询

    可以使用线程,在线程里sleep,也可是使用timer定时器。

    但是在这边我们使用的是handler的延迟发送消息

     Handler handler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                vp_advert.setCurrentItem(vp_advert.getCurrentItem() + 1);
                if (isRunning) {
                    handler.sendEmptyMessageDelayed(0x123,LOOP_TIME);
                }
            }
        };

    大致功能就算完成了

  • 相关阅读:
    npm的使用
    js 数组去重
    js实现对象或者数组深拷贝
    js简单排序
    js判断类型
    鼠标移入移出事件
    jq中的attr和prop属性
    移动端底部被输入法顶起的解决办法
    vue中的number
    javascript要点(上)
  • 原文地址:https://www.cnblogs.com/zhengqun/p/4600099.html
Copyright © 2011-2022 走看看