Android使用ViewPager做轮播

ViewPager.html

:first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);border-radius:3px}iframe{border:0}figure{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}kbd{border:1px solid #aaa;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:1px 2px 2px #ddd;-webkit-box-shadow:1px 2px 2px #ddd;box-shadow:1px 2px 2px #ddd;background-color:#f9f9f9;background-image:-moz-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:-o-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:-webkit-linear-gradient(top,#eee,#f9f9f9,#eee);background-image:linear-gradient(top,#eee,#f9f9f9,#eee);padding:1px 3px;font-family:inherit;font-size:.85em}.oembeded .oembed_photo{display:inline-block}img[data-echo]{margin:25px 0;width:100px;height:100px;background:url(../img/ajax.gif) center center no-repeat #fff}.spinner{display:inline-block;width:10px;height:10px;margin-bottom:-.1em;border:2px solid rgba(0,0,0,.5);border-top-color:transparent;border-radius:100%;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}.spinner:after{content:'';display:block;width:0;height:0;position:absolute;top:-6px;left:0;border:4px solid transparent;border-bottom-color:rgba(0,0,0,.5);-webkit-transform:rotate(45deg);transform:rotate(45deg)}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}p.toc{margin:0!important}p.toc ul{padding-left:10px}p.toc>ul{padding:10px;margin:0 10px;display:inline-block;border:1px solid #ededed;border-radius:5px}p.toc li,p.toc ul{list-style-type:none}p.toc li{width:100%;padding:0;overflow:hidden}p.toc li a::after{content:"."}p.toc li a:before{content:"• "}p.toc h5{text-transform:uppercase}p.toc .title{float:left;padding-right:3px}p.toc .number{margin:0;float:right;padding-left:3px;background:#fff;display:none}input.task-list-item{margin-left:-1.62em}.markdown{font-family:"Hiragino Sans GB","Microsoft YaHei",STHeiti,SimSun,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",'Segoe UI',AppleSDGothicNeo-Medium,'Malgun Gothic',Verdana,Tahoma,sans-serif;padding:20px}.markdown a{text-decoration:none;vertical-align:baseline}.markdown a:hover{text-decoration:underline}.markdown h1{font-size:2.2em;font-weight:700;margin:1.5em 0 1em}.markdown h2{font-size:1.8em;font-weight:700;margin:1.275em 0 .85em}.markdown h3{font-size:1.6em;font-weight:700;margin:1.125em 0 .75em}.markdown h4{font-size:1.4em;font-weight:700;margin:.99em 0 .66em}.markdown h5{font-size:1.2em;font-weight:700;margin:.855em 0 .57em}.markdown h6{font-size:1em;font-weight:700;margin:.75em 0 .5em}.markdown h1+p,.markdown h1:first-child,.markdown h2+p,.markdown h2:first-child,.markdown h3+p,.markdown h3:first-child,.markdown h4+p,.markdown h4:first-child,.markdown h5+p,.markdown h5:first-child,.markdown h6+p,.markdown h6:first-child{margin-top:0}.markdown hr{border:1px solid #ccc}.markdown p{margin:1em 0;word-wrap:break-word}.markdown ol{list-style-type:decimal}.markdown li{display:list-item;line-height:1.4em}.markdown blockquote{margin:1em 20px}.markdown blockquote>:first-child{margin-top:0}.markdown blockquote>:last-child{margin-bottom:0}.markdown blockquote cite:before{content:'\2014 \00A0'}.markdown .code{border-radius:3px;word-wrap:break-word}.markdown pre{border-radius:3px;word-wrap:break-word;border:1px solid #ccc;overflow:auto;padding:.5em}.markdown pre code{border:0;display:block}.markdown pre>code{font-family:Consolas,Inconsolata,Courier,monospace;font-weight:700;white-space:pre;margin:0}.markdown code{border-radius:3px;word-wrap:break-word;border:1px solid #ccc;padding:0 5px;margin:0 2px}.markdown img{max-width:100%}.markdown mark{color:#000;background-color:#fcf8e3}.markdown table{padding:0;border-collapse:collapse;border-spacing:0;margin-bottom:16px}.markdown table tr td,.markdown table tr th{border:1px solid #ccc;margin:0;padding:6px 13px}.markdown table tr th{font-weight:700}.markdown table tr th>:first-child{margin-top:0}.markdown table tr th>:last-child{margin-bottom:0}.markdown table tr td>:first-child{margin-top:0}.markdown table tr td>:last-child{margin-bottom:0}@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);.haroopad{padding:20px;color:#222;font-size:15px;font-family:"Roboto Condensed",Tauri,"Hiragino Sans GB","Microsoft YaHei",STHeiti,SimSun,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",'Segoe UI',AppleSDGothicNeo-Medium,'Malgun Gothic',Verdana,Tahoma,sans-serif;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}.haroopad a{color:#3269a0}.haroopad a:hover{color:#4183c4}.haroopad h2{border-bottom:1px solid #e6e6e6}.haroopad h6{color:#777}.haroopad hr{border:1px solid #e6e6e6}.haroopad blockquote>code,.haroopad h1>code,.haroopad h2>code,.haroopad h3>code,.haroopad h4>code,.haroopad h5>code,.haroopad h6>code,.haroopad li>code,.haroopad p>code,.haroopad td>code{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:85%;background-color:rgba(0,0,0,.02);padding:.2em .5em;border:1px solid #efefef}.haroopad pre>code{font-size:1em;letter-spacing:-1px;font-weight:700}.haroopad blockquote{border-left:4px solid #e6e6e6;padding:0 15px;color:#777}.haroopad table{background-color:#fafafa}.haroopad table tr td,.haroopad table tr th{border:1px solid #e6e6e6}.haroopad table tr:nth-child(2n){background-color:#f2f2f2}.hljs{display:block;overflow-x:auto;padding:.5em;background:#23241f;-webkit-text-size-adjust:none}.aspectj .hljs-function,.css .hljs-function .hljs-preprocessor,.css .hljs-rules,.css .hljs-value,.hljs,.hljs-pragma,.hljs-tag{color:#f8f8f2}.hljs-emphasis,.hljs-strong,.hljs-strongemphasis{color:#a8a8a2}.alias .hljs-keyword,.hljs-blockquote,.hljs-bullet,.hljs-hexcolor,.hljs-horizontal_rule,.hljs-literal,.hljs-number,.hljs-regexp{color:#ae81ff}.css .hljs-class,.hljs-class .hljs-title:last-child,.hljs-code,.hljs-tag .hljs-value,.hljs-title{color:#a6e22e}.hljs-link_url{font-size:80%}.hljs-strong,.hljs-strongemphasis{font-weight:700}.hljs-class .hljs-title:last-child,.hljs-emphasis,.hljs-strongemphasis,.hljs-typename{font-style:italic}.alias .hljs-keyword:first-child,.css .hljs-important,.css .hljs-tag,.css .unit,.hljs-attribute,.hljs-change,.hljs-flow,.hljs-function,.hljs-header,.hljs-keyword,.hljs-symbol,.hljs-symbol .hljs-string,.hljs-tag .hljs-title,.hljs-value,.hljs-winutils,.nginx .hljs-title,.ruby .hljs-class .hljs-keyword:first-child,.ruby .hljs-function .hljs-keyword,.tex .hljs-special{color:#f92672}.css .hljs-attribute,.hljs-aspect .hljs-keyword:first-child,.hljs-class .hljs-keyword:first-child,.hljs-constant,.hljs-function .hljs-keyword,.hljs-typename{color:#66d9ef}.hljs-aspect .hljs-title,.hljs-class .hljs-title,.hljs-params,.hljs-variable{color:#f8f8f2}.apache .hljs-cbracket,.apache .hljs-tag,.css .hljs-id,.django .hljs-filter .hljs-argument,.django .hljs-template_tag,.django .hljs-variable,.hljs-addition,.hljs-attr_selector,.hljs-built_in,.hljs-envvar,.hljs-link_label,.hljs-link_url,.hljs-prompt,.hljs-pseudo,.hljs-stream,.hljs-string,.hljs-subst,.hljs-type,.ruby .hljs-class .hljs-parent,.smalltalk .hljs-array,.smalltalk .hljs-class,.smalltalk .hljs-localvars,.tex .hljs-command{color:#e6db74}.apache .hljs-sqbracket,.hljs-annotation,.hljs-comment,.hljs-decorator,.hljs-deletion,.hljs-doctype,.hljs-javadoc,.hljs-pi,.hljs-shebang,.tex .hljs-formula{color:#75715e}.coffeescript .javascript,.javascript .xml,.php .xml,.tex .hljs-formula,.xml .css,.xml .hljs-cdata,.xml .javascript,.xml .php,.xml .vbscript{opacity:.5}.MathJax_Hover_Frame{border-radius:.25em;-webkit-border-radius:.25em;-moz-border-radius:.25em;-khtml-border-radius:.25em;box-shadow:0 0 15px #83A;-webkit-box-shadow:0 0 15px #83A;-moz-box-shadow:0 0 15px #83A;-khtml-box-shadow:0 0 15px #83A;border:1px solid #A6D!important;display:inline-block;position:absolute}.MathJax_Hover_Arrow{position:absolute;width:15px;height:11px;cursor:pointer}#MathJax_About{position:fixed;left:50%;width:auto;text-align:center;border:3px outset;padding:1em 2em;background-color:#DDD;color:#000;cursor:default;font-family:message-box;font-size:120%;font-style:normal;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;z-index:201;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;-khtml-border-radius:15px;box-shadow:0 10px 20px gray;-webkit-box-shadow:0 10px 20px gray;-moz-box-shadow:0 10px 20px gray;-khtml-box-shadow:0 10px 20px gray;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}.MathJax_Menu{position:absolute;background-color:#fff;color:#000;width:auto;padding:5px 0;border:1px solid #CCC;margin:0;cursor:default;font:menu;text-align:left;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;z-index:201;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;box-shadow:0 10px 20px gray;-webkit-box-shadow:0 10px 20px gray;-moz-box-shadow:0 10px 20px gray;-khtml-box-shadow:0 10px 20px gray;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}.MathJax_MenuItem{padding:1px 2em;background:0 0}.MathJax_MenuArrow{position:absolute;right:.5em;color:#666}.MathJax_MenuActive .MathJax_MenuArrow{color:#fff}.MathJax_MenuArrow.RTL{left:.5em;right:auto}.MathJax_MenuCheck{position:absolute;left:.7em}.MathJax_MenuCheck.RTL{right:.7em;left:auto}.MathJax_MenuRadioCheck{position:absolute;left:.7em}.MathJax_MenuRadioCheck.RTL{right:.7em;left:auto}.MathJax_MenuLabel{padding:1px 2em 3px 1.33em;font-style:italic}.MathJax_MenuRule{border-top:1px solid #DDD;margin:4px 3px}.MathJax_MenuDisabled{color:GrayText}.MathJax_MenuActive{background-color:#606872;color:#fff}.MathJax_Menu_Close{position:absolute;width:31px;height:31px;top:-15px;left:-15px}#MathJax_Zoom{position:absolute;background-color:#F0F0F0;overflow:auto;display:block;z-index:301;padding:.5em;border:1px solid #000;margin:0;font-weight:400;font-style:normal;text-align:left;text-indent:0;text-transform:none;line-height:normal;letter-spacing:normal;word-spacing:normal;word-wrap:normal;white-space:nowrap;float:none;box-shadow:5px 5px 15px #AAA;-webkit-box-shadow:5px 5px 15px #AAA;-moz-box-shadow:5px 5px 15px #AAA;-khtml-box-shadow:5px 5px 15px #AAA;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}#MathJax_ZoomOverlay{position:absolute;left:0;top:0;z-index:300;display:inline-block;width:100%;height:100%;border:0;padding:0;margin:0;background-color:#fff;opacity:0;filter:alpha(opacity=0)}#MathJax_ZoomFrame{position:relative;display:inline-block;height:0;width:0}#MathJax_ZoomEventTrap{position:absolute;left:0;top:0;z-index:302;display:inline-block;border:0;padding:0;margin:0;background-color:#fff;opacity:0;filter:alpha(opacity=0)}.MathJax_Preview{color:#888}#MathJax_Message{position:fixed;left:1px;bottom:2px;background-color:#E6E6E6;border:1px solid #959595;margin:0;padding:2px 8px;z-index:102;color:#000;font-size:80%;width:auto;white-space:nowrap}#MathJax_MSIE_Frame{position:absolute;top:0;left:0;width:0;z-index:101;border:0;margin:0;padding:0}.MathJax_Error{color:#C00;font-style:italic}footer{position:fixed;font-size:.8em;text-align:right;bottom:0;margin-left:-25px;height:20px;width:100%}
-->

ViewPager轮播Banner的坑

需要对ViewPager中的ViewContainer的加载机制更深入的学习

使用ViewPager实现轮播广告banner,功能为:

1. banner可以自己向左或者向右自己轮播, 向右是无限的, 向左是到了adapter中item的最小值, (一般是0). 此时, 不应该可以继续向左划动. 如果需要向左划动, 本质上是把初始显示的item变为整个adapter的item的中间的一个.

2. 点击跳转网页或者另一个activity

3. 在banner的下面有可以配置的划动状态显示, 如小圆点显示当前展示的是娜一张.

实现思路:
如果通过ViewPager实现, 需要注意两点:

1. 需要一个线程,或者定时器来定时让adapter中的currentItem更换. 这里我们使用了一个Runnable().

2. 对于ViewPager的更换item的机制需要理解, 在ViewPager中需要了解Adapter的重写的四大函数.

具体实现:
需要定义一个继承自ViewPager的View, 并定义其对应的Adapter, 直接上代码.

public class AutoPlayBanner extends ViewPager {

    public enum ShowDirection {
        LEFT,
        RIGHT
    }

    public AutoPlayBanner(Context context) {
        super(context);
    }

    public AutoPlayBanner(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private long showTime = 3 * 1000;
    private ShowDirection direction = ShowDirection.LEFT;

    public void setShowTime(long showTimeMillis) {
        showTime = showTimeMillis;
    }

    public void setShowDirection(ShowDirection direction) {
        this.direction = direction;
    }

    public void start() {
        stop();
        postDelayed(player, showTime);
    }

    public void stop() {
        removeCallbacks(player);
    }

    private Runnable player = new Runnable() {
        @Override
        public void run() {
            play(direction);
        }
    };

    private synchronized void play(ShowDirection direction1) {
        PagerAdapter adapter = getAdapter();
        if (adapter != null) {
            int count = adapter.getCount();
            int currentItem = getCurrentItem();
            switch (direction1) {
                case LEFT:
                    currentItem++;
                    if (currentItem > count) {
                        currentItem = 0;
                    }
                    break;
                case RIGHT:
                    currentItem--;
                    if (currentItem < 0) {
                        currentItem = count;
                    }
                    break;
            }
            setCurrentItem(currentItem);
        }
        start();
    }

    public void previous() {
        if (direction == ShowDirection.LEFT) {
            play(ShowDirection.RIGHT);
        } else {
            play(ShowDirection.LEFT);
        }
    }

    public void next() {
        play(direction);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if (state == SCROLL_STATE_IDLE) {
                    start();
                } else if (state == SCROLL_STATE_DRAGGING) {
                    stop();
                }
            }
        });
    }

    public static class AutoPlayBannerAdapter extends PagerAdapter {

        private Context mContext;
        private int itemsCount;
        private List<ImageView> imageList;

        public AutoPlayBannerAdapter(Context context) {
            mContext = context;
        }

        // Should call this to init imageList
        public void InitItems(List<ImageView> imageArray) {
            itemsCount = imageArray.size();
            imageList = imageArray;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            if (imageList.size() >= 4){
//                container.removeView((View) object);
                container.removeView(imageList.get(position % imageList.size()));
            }
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView;
            if ((imageList == null) || (imageList.size() == 0)) {
                imageView = new ImageView(mContext);
                imageView.setBackgroundResource(android.R.color.white);
            } else {
                imageView = imageList.get(position % imageList.size());
            }

            //ViewGroup parent = (ViewGroup) imageView.getParent();

            if (container != null) {
                container.removeView(imageView);
            }
            container.addView(imageView);
            return imageView;
        }

        @Override
        public int getCount() {
            return imageList == null ? 0 : Integer.MAX_VALUE;
        }

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

以前不懂的地方:

如果需要在xml布局文件中直接引用该控件, 不仅需要实现带一个Context参数的构造函数, 还需要实现带两个参数(另一个是AttributeSet)的构造函数.

实现自动播放的关键是play()函数, 原理也比较简单, 就是根据方向的不同对currentItem的加减.
坑1. ViewPager在内部实现的时候增加新的item是根据Adapter的count来一个一个增加的, 如果setCurrentItem(1000), 就会在ViewPager中增加1000个item, 所以在这里如果真的切换会有很长的切换动画, 会从最后一个一个个跳回到第一个item, 并不是直接跳.

坑2. 如坑1, 如果在刚开始就setCurrentItem(x), 可以做到左右划动, 但是如果x特别大, 会有加载卡死问题, 因为ViewPager会创建之前所有的item.

实现手动划动的关键在于OnPageChangeListener()的回调, 这里在onFinishInflate().
OnPageChangeListener中有三个函数: onPageScrolled(), onPageSelected(), onPageScrollStateChanged(). 这里在第三个函数中, 根据划动是否结束来规避手动划动和自动播放的冲突.

if (state == SCROLL_STATE_IDLE) {
    start();
} else if (state == SCROLL_STATE_DRAGGING) {
    stop();
}

这里当划动的时候就先stop(), 将自动轮播的效果去除, 而在划动结束后重新将play函数加载.所以不会出现手划后马上轮播的情况.

public void start() {
    stop();
    postDelayed(player, showTime);
}

public void stop() {
    removeCallbacks(player);
}

onPageSelected()是当前展示页面的Callback, 可以将banner下部的小圆点标识符切换放在这里, 也可以放在ViewPager的外面, 因为现在的ViewPager可以接受多个onPageChangeListener()的绑定, 小圆点和banner的唯一联系是, 计算当前展示的item都以position % list.length得到.

banner.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (position >= dotsViews.length) {
                    position = (position % dotsViews.length);
                }

                for (int i = 0; i < dotsViews.length; i++) {
                    dotsViews[position]
                            .setBackgroundResource(R.drawable.banner_dot_focused);
                    if (position != i) {
                        dotsViews[i]
                                .setBackgroundResource(R.drawable.banner_dot_normal);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        }

Adapter的问题, 四大函数:

从最简单的来, getCount(), 就是返回所有的应当在ViewPage中的展示的item数. 所以这里设为Integer的最大值, 可以向右无限划动.

@Override
public int getCount() {
    return imageList == null ? 0 : Integer.MAX_VALUE;
}

instantiateItem是增加新的item是来初始化新的item的. 这里需要对ViewPager的缓存机制有所了解, ViewPager中有一个int变量DEFAULT_OFFSCREEN_PAGES = 1, 是在当前展示的item的两侧, 一共缓存了多少个Pages(Items), 一般不应超过(左右)三个.
这里我们要加入ViewPager中的item是ImageView, 所以在Adapter内部维护了一个ImageView的List.

注意, 这里是先removeView, 再addView, 这里是因为根据position得到循环加入pager的item, 当item加入到pager中时, 如果该view已经有parent, 则应先解除之前的包含关系, 其实在这里parent就是ViewPager本身, 也即container.

该开始的时候parent和container不相等, 是因为第一次将item加入的时候parent是null.

@Override
public Object instantiateItem(ViewGroup container, int position) {
    ImageView imageView;
    if ((imageList == null) || (imageList.size() == 0)) {
        imageView = new ImageView(mContext);
        imageView.setBackgroundResource(android.R.color.white);
    } else {
        imageView = imageList.get(position % imageList.size());
    }

    //ViewGroup parent = (ViewGroup) imageView.getParent();

    if (container != null) {
        container.removeView(imageView);
    }
    container.addView(imageView);
    return imageView;
}

ViewPager中每一个item会有一个key与其对应, 也是找到该item的唯一标识. 可以直接使用view本身作为key, 也可以用类似position的标识. isViewFromObject()函数就是表示标识和真正的view的关系的函数, 我们这里用的时view做key, 那么object就是view.

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

由于我们这里已经在instantiateItem函数中将多余的item去除掉了, 这里不需要再额外去除.

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    if (imageList.size() >= 4){
//                container.removeView((View) object);
        container.removeView(imageList.get(position % imageList.size()));
    }
}

---

特殊地,这里给出Android中几种延迟处理事件的方法:

1. 利用TimerTask和Handler
   首先定义一个TimerTask

    TimerTask task = new TimerTask(){
        public void run(){
            Message msg = new Message();
            msg.what = 1;
            handler.sendMessage(msg);
        }
    }
   

   然后定义出handler

    Handler handler = new Handler(){
        public void handleMessage(Message msg){
            switch(msg.what){
                case 1:
                    break;
                default:
                    break;
            }
            super.handleMessage(msg);
        }
    }
   

   最后用Timer调用,

    Timer timer = new Timer();
    timer.schedule(task, 50);
   

2. View中自带的postDelayed
   例如:

    v.postDelayed(new Runnable(){
            public void run(){
                // ...
            }
        }, 30);
   

3. handler中的postDelayed
   例如:

    hanler.postDelayed(new Runnable(){
            public void run(){
                // ...
            }
        }, 30);
   

另外, 在Android中动态改变layoutParams需要得到要改变控件的父布局的参数, 然后对该控件设置.

generated by haroopad