造轮子系列--撸一个轮播图

PictureCarousel

先上效果图:

效果图.gif

可以看到,我们实现了一个简易的图片轮播器。下面我们从设计到实现一步一步来实现这个自定义的控件。
先给上地址https://github.com/Reoger/PictureCarousel,源代码。

使用

  1. 添加依赖。
    方法一:
    maven依赖:
    <dependency>
      <groupId>com.hut.reoger.pictruecarousel</groupId>
      <artifactId>pictruecarousel</artifactId>
      <version>1.0</version>
      <type>pom</type>
    </dependency>
    
    方法二:
    gradle依赖:
    compile 'com.hut.reoger.pictruecarousel:pictruecarousel:1.0'
    

2.在需要的放置图片轮播的地方放置:、

  <com.hut.reoger.pictruecarousel.imageBanner
        android:id="@+id/ban"
        android:layout_width="match_parent"
        android:layout_height="170dp"
        app:time_interval="1000"
        />

其中的** app:time_interval="1000"** 数字代表的是自动轮播时的时间间隔。

  1. 在java代码中添加图片数据
 List<Bitmap> bitmaps = new ArrayList<>();
    private void initData() {
        for (int i = 0; i < id.length; i++) {
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(),id[i]);
            bitmaps.add(bitmap);
        }
        ban.addImageToImageBarnner(bitmaps);
/ ban = (imageBanner) findViewById(R.id.ban);
    }

如果需要添加监听事件:

 ban.setOnImageViewSelectClick(new imageBanner.OnImageViewSelectClick() {
            @Override
            public void OnClickListener(int position) {
                Toast.makeText(MainActivity.this,"hello"+position,Toast.LENGTH_SHORT).show();
            }
        });

也可以通过实现添加imageBanner.OnImageViewSelectClick()接口,实现监听。

思路(1)

利用ViewPager来实现。利用ViewPager来实现图片轮播是比较简单的,如果有兴趣,可以参照我之前的博客利用ViewPager实现引导界面,可以很方便的实现一个图片轮播。但这个不是我们今天的重点。在此不多做介绍。

思路(2)

直接自定义个控件,自己一步一步来实现。这个就是今天我们的重点。
首先来分析一下,我们要实现的效果应该怎么去做。

效果图分析.png

从这个图我们可以看出来,轮播图主要由两部分组成,一部分用于显示图片,另一部分用于显示下面指示的小白点。看起来小白点是在图片的上面。这样,自然而然的我们就会想到用FrameLayout来实现这个效果,要实现的效果如下:

效果预览图.png

通过FrameLayout将两个控件嵌套就可以很容易的实现。

整体思路有了,接下来就是一个一个来实现了。首先是显示图片的部分:很简单的思想就是直接用一个ScrollView来包装图片,通过一个横向的ScrollView就可以比较简单的实现显示多张图片。但是这里,我们采用自定义View的方法,具体的思路就是:
在初始化view的时候,先测量出图片的总长度,然后以图片的总长度定义为自定义vie的长度:


Paste_Image.png

实现滑动效果的话,也很简单。实现思路如下:首先拦截在本控件上的点击事件,当检测到手指移动的时候,自定义view按照手移动的位置进行移动,注意,这里我们需要给当前图片一个索引值,当手指移动的距离没有一张图片的时候,我们需要计算出来我们具体需要移动的偏移量,在手指抬起的时候,就需要将图片移动到偏移量的位置,否则会导致显示两张不全的图片。在检测到后面没有图片的时候,我们需要将偏移量设置为0;

实现自动轮播,我们只需要借助一个定时器即可实现。每隔多长时间我们就模拟一次手指的滑动即可。定义器我们可以借助Timer类来实现。

对了,我们还需要在图片上添加点击事件,我们可以通过在这个view类中添加一个接口,当判断手指在图片上有点击事件的时候(点击事件的判断:当手机按下时,设置一个变量为ture,移动时就将该变量设置为false,到手指抬起的时候,如果该变量还是为true的话,即可以判断是点击事件)我们手动调用我们在该类中的接口(注意要传入图片的索引值,否则无法判断是哪一张图片的点击事件)。如果需要点击事件的话,我们可以直接同Button控件一张为我们写的控件添加点击事件了。

到次,显示图片的控件就差不多了,接下来就是实现下面的知识点。
首先,指示点的布局采用简单的LinearLayout即可,因为我们可以看到,他们明显就是在一个水平线上。然后,指示点的数据肯定同照片的数量一样多。最主要的是,我们需要用这些点来显示当前显示的图片,这一点其实也很简单就可以实现。在我们前面的图片控件中,我们有一个图片索引值,当图片发生改变的时候,索引值也改变。我们只需要将索引值传给指示点,让特殊显示当前的索引值即可。

整的来说,轮播图实现起来是比较简单的,但是还是需要一定的基础,通过造这么一个轮子,至少增加了自己对自定义View的理解和动手能力。
造轮子之路,还需坚持。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,117评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,759评论 22 665
  • 公司只有顺利越过了这第一个坑——销售类型,然后成功越过第二个坑——能力,才能最终走进业绩的光辉殿堂。 现在许多有梦...
    行走_fcc6阅读 397评论 0 0
  • 一提到日本,几乎所有的伙伴都问同样的问题,去东京没?去京都没? 最后两天是在京都度过的,每天的交流日程是满的,没有...
    竹de三厘米阅读 446评论 0 1