Banner展示手动滑动、自动播放

一、需求

在一个页面顶部展示多图，横向轮播，也即是通俗意义的Banner。需求细节解析：

1，同一个位置，展示不同的内容，包含展示图片、标题、内容描述【内容切换】；

2，因为同一个位置展示，需要有标示，告知用户当前所在的位置；【位置标识】；

3，便于内容的全部展示且不拒绝用户的主动操作，需要自动轮播与手动滑动处理相结合；【手动自动】；

4，当前位置内容可变，需要兼容多种模式【特值处理】；

二、实现思路

实现功能，一般通过现有控件，加以事件控制而达到目标。在基本实现上，可以通过抽取组合，形成自定控件。

基本实现：

1，选择ViewPager，基本已兼容大部分功能；

2，制作定位标志，标识当前所处位置；

3，再实现定时任务，达到各个页面的自动切换；

三、具体实现

1，xml文件

<FrameLayout        android:layout_width="match_parent"        android:layout_height="210dp">        <android.support.v4.view.ViewPager            android:id="@+id/vp"            android:layout_width="match_parent"            android:layout_height="210dp" />        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_gravity="bottom"            android:background="@mipmap/shadow_article">            <TextView                android:id="@+id/tv_title"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_above="@+id/author_layout"                android:layout_marginBottom="10dp"                android:layout_marginLeft="10dp"                android:layout_marginRight="10dp"                android:maxLines="2"                android:text="标题"                android:textColor="@color/white"                android:textSize="18sp" />            <RelativeLayout                android:id="@+id/author_layout"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_alignParentBottom="true"                android:layout_marginLeft="10dp"                android:gravity="center_vertical"                android:paddingBottom="20dp">                <TextView                    android:id="@+id/tv_topic"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="10dp"                    android:text="“内容”"                    android:textColor="@color/white"                    android:textSize="12sp" />            </RelativeLayout>        </RelativeLayout>        <LinearLayout            android:id="@+id/dot_ll"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="bottom|center_horizontal"            android:layout_marginBottom="10dp"            android:layout_marginTop="10dip"            android:gravity="center">            <View                android:id="@+id/v_dot0"                style="@style/dot_style"                android:background="@drawable/dot_focused"                android:visibility="gone" />            <View                android:id="@+id/v_dot1"                style="@style/dot_style"                android:background="@drawable/dot_focused"                android:visibility="gone" />            <View                android:id="@+id/v_dot2"                style="@style/dot_style"                android:background="@drawable/dot_focused"                android:visibility="gone" />            <View                android:id="@+id/v_dot3"                style="@style/dot_style"                android:background="@drawable/dot_focused"                android:visibility="gone" />            <View                android:id="@+id/v_dot4"                style="@style/dot_style"                android:background="@drawable/dot_focused"                android:visibility="gone" />        </LinearLayout>    </FrameLayout>

2，代码实现：

/**     * banner内容显示     */    private ViewPager bannner;    /**     * 指示图标点     */    private List<View> dots;    /**     * 指示图标，动态构建     */    private View dot0;    private View dot1;    private View dot2;    private View dot3;    private View dot4;    /**     * 展示数据     */    private List<ADInfo> adList;    /**     * 展示View     */    private List<ImageView> imageViews;    /**     * 标题     */    private TextView title;    /**     * 内容     */    private TextView content;    /**     * 指示标整体布局     */    private LinearLayout dotLL;    /**     * 当前位置     */    private int currentPos = 0;    private ScheduledExecutorService scheduledExecutorService;    /**     * 初始化数据     */    private void initData() {        /**         * 制造数据         */        adList = new ArrayList<>();//        dots = new ArrayList<>();//        dotLL = (LinearLayout) findViewById(R.id.dot_ll);//        dotLL.setOrientation(LinearLayout.HORIZONTAL);//        dot = View.inflate(MainActivity.this, R.layout.dot_xml, null);        for (int i = 0; i < img_list.size(); i++) {            ADInfo ad = new ADInfo();            ad.setId(i + "");            ad.setContent("我是内容" + i);            ad.setTitle("这是标题" + i);            ad.setType(1 + "");            ad.setUrl(img_list.get(i));            adList.add(ad);//            dotLL.addView(dot);        }    }    /**     * 初始化控件     */    private void initView1() {        title = (TextView) findViewById(R.id.tv_title);        dot0 = findViewById(R.id.v_dot0);        dot1 = findViewById(R.id.v_dot1);        dot2 = findViewById(R.id.v_dot2);        dot3 = findViewById(R.id.v_dot3);        dot4 = findViewById(R.id.v_dot4);        dots = new ArrayList<>();        dots.add(dot0);        dots.add(dot1);        dots.add(dot2);        dots.add(dot3);        dots.add(dot4);        for (int i = 0; i < adList.size(); i++) {            dots.get(i).setVisibility(View.VISIBLE);        }        /**         * 默认值         */        dots.get(0).setBackgroundResource(R.mipmap.icon_point_pre);        content = (TextView) findViewById(R.id.tv_topic);        bannner = (ViewPager) findViewById(R.id.vp);        bannner.setAdapter(new MyAdapter());        bannner.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            int oldPos = 0;            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                currentPos = position;                ADInfo ad = adList.get(position);                title.setText(ad.getTitle());                content.setText(ad.getContent());                dots.get(position).setBackgroundResource(R.mipmap.icon_point_pre);                dots.get(oldPos).setBackgroundResource(R.mipmap.icon_point);                oldPos = position;//                setContentView(imageViews.get(position));            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    /**     * 刷新页面数据     */    private void initPageView() {        imageViews = new ArrayList<>();        for (int i = 0; i < adList.size(); i++) {            // 加载图片            ImageView imageView = ViewFactory.getImageView(MainActivity.this, adList.get(i).getUrl());            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);            imageViews.add(imageView);        }    }    /**     * 添加定时任务，动态更新页面     */    private Handler handler = new Handler() {        public void handleMessage(android.os.Message msg) {            bannner.setCurrentItem(currentPos);        }    };    Timer timer = new Timer();    TimerTask task = new TimerTask() {        @Override        public void run() {            synchronized (bannner) {                currentPos = (currentPos + 1) % imageViews.size();                handler.obtainMessage().sendToTarget();            }        }    };    private void startAd() {        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();        // 执行定时任务        scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,                TimeUnit.SECONDS);    }    private class ScrollTask implements Runnable {        @Override        public void run() {            synchronized (bannner) {                currentPos = (currentPos + 1) % imageViews.size();                handler.obtainMessage().sendToTarget();            }        }    }    private class MyAdapter extends PagerAdapter {        @Override        public int getCount() {            return adList.size();        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            ImageView iv = imageViews.get(position);            ((ViewPager) container).addView(iv);            final ADInfo adinfo = adList.get(position);            /**             * 添加Item点击事件             */            iv.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    Toast.makeText(MainActivity.this, adinfo.getTitle(), Toast.LENGTH_SHORT).show();                }            });            return iv;        }        @Override        public void destroyItem(View arg0, int arg1, Object arg2) {            ((ViewPager) arg0).removeView((View) arg2);        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            return arg0 == arg1;        }        @Override        public void restoreState(Parcelable arg0, ClassLoader arg1) {        }        @Override        public Parcelable saveState() {            return null;        }        @Override        public void startUpdate(View arg0) {        }        @Override        public void finishUpdate(View arg0) {        }    }    @Override    protected void onStop() {        super.onStop();        if (timer != null) {            timer.cancel();            timer = null;        }    }

onCreate()调用：     initData();        initView1();        initPageView();//        startAd();        timer.schedule(task, 2000, 2000);initData()://初始化数据，包含有每个页面的ID、标题、内容、图片，甚至于跳转链接等；initView1()://初始化页面View，ViewPager、知识图标等；initPageView()：//填充数据，页面展示；

开启定时任务，实现item轮播。
其中，实现轮播采用两种方式：
1，timer.schedule()；
2，startAd();实质是：Executors.newSingleThreadScheduledExecutor()。


以上是基础实现的思路及代码实现，以上存在的缺陷是，位置指示标识是写死固定的view，他的个数有所限制，尤其是最大值的限制。


在此基础上，应用ViewPager及Fragment特性制作自定控件，使用可消除缺陷且实现效果较好。

时光穿梭门


网络图片下载链接直接借用网友的了，自定义控件也是他抽取好的，细节请参阅他的博客。谢谢~~
http://blog.csdn.net/stevenhu_223/article/details/45577781

四、实现效果

有故事有啤酒还有代码：

我希望你能重梳婵鬓美扫蛾眉，沿途美丽下去 ，就像我第一次遇到你的那样。
我祝福你遇到一个对的人，恋爱、结婚、生两个孩子，就像我们从前计划的那样。
好姑娘，遗憾我不能陪着你了。
转过身，只剩一捧没你好看的傻月亮， 月光和你一样凉。
便是当我走了，不管走的多远，
我也会记着，
把手上的温暖给那月亮留下。