CycleRotationView:自定义控件之轮播图

CycleRotationView:自定义控件,主要功能是实现类似与各种商城首页的广告轮播图。其实像这种比较常见的自定义控件早就满大街了,虽然说“不要重复发明轮子”,但是不代表不用关心轮子是怎么造的,本着“知其然知其所以然”的态度,完成了这个控件(总不能需要用到时才来学习吧)。老规矩,先来个效果图(没有效果图的文章都是耍流氓):

对于轮播图的图片切换,大家立马会想到 ViewPager 这个控件,因为它已经拥有左右滑动的功能,用来实现轮播图效果会简单一些,本篇也是基于 ViewPager 这个控件的实现,将其分成下面四个部分:

1、图片轮播

2、指示器

3、图片指示器联动

4、定时轮播

下面开始实现(有点啰嗦,勿喷…):

图片轮播

布局文件

<RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="120dp">
       <android.support.v4.view.ViewPager
           android:id="@+id/viewPager"
           android:layout_width="match_parent"
           android:layout_height="120dp" />
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="18dp"
           android:layout_alignParentBottom="true"
           android:background="#66000000"
           android:orientation="horizontal">
           <TextView
               android:id="@+id/title"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_marginLeft="15dp"
               android:layout_weight="1"
               android:textColor="#FFFFFF" />
           <LinearLayout
               android:id="@+id/pointGroup"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:layout_marginRight="15dp"
               android:orientation="horizontal" />
       </LinearLayout>
   </RelativeLayout>

先来看看布局文件,最外层的 RelativeLayout 代表整个控件,包含 ViewPager 和一个 LinearLayout;在 LinearLayout 中又包含 TextView 和 LinearLayout。这里说明一下:第一个 LinearLayout 包含标题(id=title)和指示器(id=pointGroup),第二个 LinearLayout 用来包裹指示器(在代码里完成),给张理解图(这里我并没有设置标题):

代码实现

    /**
     * 初始化布局
     * @param mContext
     */
    private void initView(Context mContext) {
        View view = LayoutInflater.from(mContext)
                .inflate(R.layout.cycle_rotation_layout, this, true);
        mViewPager = (ViewPager) view.findViewById(R.id.viewPager);
        mPointGroup = (LinearLayout)view.findViewById(R.id.pointGroup);
    }

首先是加载刚才的布局文件,把 ViewPager 和 pointGroup 找出来;

    for (int i = 0; i < images.length; i++) {
        // 创建 ImageView,并设置图片
        ImageView img = new ImageView(mContext);
        // 把图片扩大到 ImageView 的大小
        img.setScaleType(ImageView.ScaleType.FIT_XY);
        img.setImageResource(images[i]);
        mList.add(img);
        }

根据用户传递过来的图片的数量进行遍历创建对应数量的 ImageView ,然后给创建的 ImageView 设置图片,再用一个 List 集合把 ImageView 装起来待用。在 Fragement + ViewPager + TabLayout 的场景里 ViewPager 里填充的是 Fragement,而这里的 ViewPager 填充的是 ImageView;

    /**
    * 适配器
    */
    class CycleAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position = position % mList.size();
            // 判断该 item 是否已经有 parent
            final View child = mList.get(position);
            if (child.getParent() != null) {
                container.removeView(child);
            }
            container.addView(mList.get(position));
            return mList.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {}

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

适配器上场了,在 getCount() 方法里返回 Integer.MAX_VALUE 是因为 ViewPager 不会循环滑动,给这么一个数值(据说 Integer.MAX_VALUE 的值是 10亿,我没试过)可以让它一直滑下去。问题来了:这么大的数值,会不会出现性能问题?这个我也好奇,看谁更有兴趣咯。

还要说一下 instantiateItem() 方法,为什么要判断 parent 的状态?原因是如果不这样处理,在向左滑动 ViewPager 的时候会报错: The specified child already has a parent. You must call removeView 。

注意:instantiateItem() 进行了判断,destroyItem() 就不用再 removeView() 了,否则会出现空白页。

指示器

    /**
    * 创建指示器
    */
    for(int i = 0; i < images.length; i ++) {
        // 创建指示器,实质也是 ImageView
        ImageView point = new ImageView(mContext);
        point.setImageResource(R.drawable.shape_point_selector);
        // 指示器布局参数
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pointSize, pointSize);
        // 第2个起才设置左边距
        if (i > 0) {
            params.leftMargin = pointMargin;
            point.setSelected(false); // 默认选中第1个
        } else {
            point.setSelected(true); // 默认选中第1个
        }
        point.setLayoutParams(params); // 给指示器设置参数
        mPointGroup.addView(point); // 把指示器添加到容器
    }

创建指示器的时候为了和 ImageView 的数量对应,所以同样要遍历用户设置的图片数量。下面是指示器的相关布局文件:

shape_point_selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/shape_point_selected" />
    <item android:state_selected="false" android:drawable="@drawable/shape_point_normal" />
</selector>

shape_point_selected:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#FFFFFF"/>
</shape>

shape_point_normal:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#66000000"/>
</shape>

ViewPager 和 pointGroup 都创建好了,接下来是他们俩的联动:

联动

 mViewPager.setAdapter(new CycleAdapter());

        // ViewPager 的监听事件
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            int lastPosition;
            @Override
            public void onPageSelected(int position) {
                position = position % mList.size();
                // 设置当前圆点选中
                mPointGroup.getChildAt(position).setSelected(true);
                // 设置前一个圆点不选中
                mPointGroup.getChildAt(lastPosition).setSelected(false);
                lastPosition = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

给 ViewPager 添加监听事件,在选中某个页面的同时设置相应位置指示器也被选中。position % mList.size():Adapter 的 getCount() 中返回了很大的值,这里求余可以保证不会出现空指针异常。

定时轮播

 mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                // 当前选中的 item
                int currentItem = mViewPager.getCurrentItem();
                // 判断是否是最后一个 item
                if (currentItem == mViewPager.getAdapter().getCount() - 1) {
                    mViewPager.setCurrentItem(1);
                } else {
                    mViewPager.setCurrentItem(currentItem + 1);
                }
                // 不断给自己发消息
                mHandler.postDelayed(this, 3000);
            }
        }, 3000);

定时轮播也很简单,用 Handler 来延时给自己发消息。在 ViewPager 滑动到最后一个时给它设置 mViewPager.setCurrentItem(1) 来实现循环轮播。

基本的轮播功能到这里就完成了,但是还有很多的拓展功能,比如点击事件,用户设置图片链接,这些我都已经实现了,这里就不一一介绍了,有兴趣的可以看看源码:cycleRotation

时间: 2024-08-02 19:05:23

CycleRotationView:自定义控件之轮播图的相关文章

Android自定义控件之轮播图控件

背景 最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮

jQuery----无缝轮播图

1.效果 2.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/iconfont.css"> <link rel="stylesh

Android自己定义控件之轮播图控件

背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个控件,不必每次反复写代码了. 效果图 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还须要在以下加一个指示器来标示滑动到了第几张轮播图.指示器我们能够用一个线性布局来依据要展示的轮播图设置显示的View,我们要做这种一个控件没

CSS-用伪类制作小箭头(轮播图的左右切换btn)

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

Jquery 实现轮播图

jq 轮播图 function banner_show(){ var left_btn = $("#banner_tag_left"); //获取左侧单击按钮 var right_btn = $("#banner_tag_right"); //获取右侧点击按钮 var Owidth = $("#banner ul li").width(); //获取单个图片宽度 var Oindex = $("#banner ul li");

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

js学习总结----轮播图之渐隐渐现版

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-user-select:none; } ul,li{ list-style } im

swiper结合ajax的轮播图

Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合ajax使用,所以要先定义json文件 json: 定义好json文件后,在HTML页面中简单布局,如下图: *swiper-container代表swiper的容器 <div class="swiper-container"> *swiper-wrapper 代表触控的对象 &

基于js的自适应、多样式轮播图插件(兼容IE8+、FF、chrome等主流浏览器)

插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传入最外层盒子ID即可. 1.根据html中的Dom结构引入图片. 2.引入css和js文件 3.调用pomeloSlider.doslide(obj) sliderwidth:轮播图宽度,单位为像素,默认自适应全屏. outer:最外层盒子ID,默认为"outer" time:轮播的时间间