美文网首页实用控件Android开发第三方控件
轮子系列:一款能用易用好用的Android图片轮播轮子

轮子系列:一款能用易用好用的Android图片轮播轮子

作者: Carson带你学安卓 | 来源:发表于2016-11-10 20:54 被阅读9316次

    前言

    • Banner功能在Android开发中实在是太常见了,主要用于广告轮播、商品照片轮播等等,如下图:
    图片轮播
    • 今天我来手把手教你如何使用一个能用易用好用的Android图片轮播轮子。

    目录

    文章目录

    1. 实现轮播功能为什么要选择轮子?

    主要原因是自己实现的话功能实现和性能优化会耗费太多工期,包括;

    耗费原因1:功能实现

    常见的Banner的功能主要有:

    1. 实现图片 & 标语展示
    2. 循环播放
    3. 支持手动切换
    4. 支持加载本地 & 网络图片

    耗费原因2:性能优化

    1. 对于实现图片展示:不止一张图片 & 指示器展示
    2. 对于循环播放:自动、定时、无限 & 循环播放
    3. 对于支持手动切换:滑动流畅 & 无卡顿
    4. 对于支持加载本地 & 网络图片:加载速度 & 点击打开图片

    好了你终于明白为什么要选择轮子了

    2. 如何选择轮子?

    选择标准:

    1. 实现上述所有功能

    什么动画那些其实暂时我们并不需要,所以只需要能实现上述基本的功能就能满足现在市面上大多数的功能了。

    1. 性能的优化

    上面说的一切一切,比如说轮播是用ViewPager实现,但会出现卡顿什么的blabla

    1. 配置程度高

    可灵活设置图片数量、循环时间、图片加载的方式、指示器的样式&位置等等

    1. 简洁易用
      千万别忘了我们为什么要用轮子!!!!!

    按照上面的标准我们就可以开始去网上找轮子了。

    好了不用去Google不用去Github不用去Bing找了(对不起我真的不建议你去百度),因为我已经帮你找了一个好轮子了:Android广告图片轮播控件

    作者不是我,我也没收钱帮他打广告,因为这个轮子真的能用、易用和好用。

    3. 使用步骤

    步骤1. 加入依赖包
    步骤2. 在需要展示的布局定义Banner布局
    步骤3. 在MainActivity布局中定义配置Banner
    步骤4. 在Manifest加入网络请求权限

    4. Demo实战

    没有Demo的代码讲解不是好文章,让我们来一步步学会使用这个好轮子

    步骤1. 在gradle加入依赖包

    compile 'com.youth.banner:banner:1.1.5'  //指定版本
    

    步骤2. 在需要展示的布局定义Banner布局
    main_layout.xml

    <com.youth.banner.Banner   
     xmlns:app="http://schemas.android.com/apk/res-auto"  
      android:id="@+id/banner"    
      android:layout_width="match_parent" 
      android:layout_height="300dp" />
    

    步骤3. 在MainActivity布局中定义配置Banner(具体请看注释)
    MainActivity.java

    package com.example.carson_ho.android_banner;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.util.Log;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.Toast;
    
    import com.bumptech.glide.Glide;
    import com.youth.banner.Banner;
    
    public class MainActivity extends AppCompatActivity {
        private Banner banner;
        //设置图片资源:url或本地资源
        String[] images= new String[] {
                "http://218.192.170.132/BS80.jpg",
                "http://img.zcool.cn/community/0166c756e1427432f875520f7cc838.jpg",
                "http://img.zcool.cn/community/018fdb56e1428632f875520f7b67cb.jpg",
                "http://img.zcool.cn/community/01c8dc56e1428e6ac72531cbaa5f2c.jpg",
                "http://img.zcool.cn/community/01fda356640b706ac725b2c8b99b08.jpg",
                "http://img.zcool.cn/community/01fd2756e142716ac72531cbf8bbbf.jpg",
                "http://img.zcool.cn/community/0114a856640b6d32f87545731c076a.jpg"};
    
        //设置图片标题:自动对应
        String[] titles=new String[]{"十大星级品牌联盟,全场2折起","全场2折起","十大星级品牌联盟","嗨购5折不要停","12趁现在","嗨购5折不要停,12.12趁现在","实打实大顶顶顶顶"};
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        
            
            banner = (Banner) findViewById(R.id.banner);
    
            //设置样式,默认为:Banner.NOT_INDICATOR(不显示指示器和标题)
            //可选样式如下:
            //1. Banner.CIRCLE_INDICATOR    显示圆形指示器
            //2. Banner.NUM_INDICATOR   显示数字指示器
            //3. Banner.NUM_INDICATOR_TITLE 显示数字指示器和标题
            //4. Banner.CIRCLE_INDICATOR_TITLE  显示圆形指示器和标题
            banner.setBannerStyle(Banner.CIRCLE_INDICATOR_TITLE);
    
            //设置轮播样式(没有标题默认为右边,有标题时默认左边)
            //可选样式:
            //Banner.LEFT   指示器居左
            //Banner.CENTER 指示器居中
            //Banner.RIGHT  指示器居右
            banner.setIndicatorGravity(Banner.CENTER);
    
            //设置轮播要显示的标题和图片对应(如果不传默认不显示标题)
            banner.setBannerTitle(titles);
    
            //设置是否自动轮播(不设置则默认自动)
            banner.isAutoPlay(true) ;
    
            //设置轮播图片间隔时间(不设置默认为2000)
            banner.setDelayTime(5000);
            //设置图片资源:可选图片网址/资源文件,默认用Glide加载,也可自定义图片的加载框架
            //所有设置参数方法都放在此方法之前执行
            //banner.setImages(images);
    
            //自定义图片加载框架
            banner.setImages(images, new Banner.OnLoadImageListener() {
                @Override
                public void OnLoadImage(ImageView view, Object url) {
                    System.out.println("加载中");
                    Glide.with(getApplicationContext()).load(url).into(view);
                    System.out.println("加载完");
                }
            });
            //设置点击事件,下标是从1开始
            banner.setOnBannerClickListener(new Banner.OnBannerClickListener() {//设置点击事件
                @Override
                public void OnBannerClick(View view, int position) {
                    Toast.makeText(getApplicationContext(), "你点击了:" + position, Toast.LENGTH_LONG).show();
                }
            });
    

    步骤4:在Manifest.xml加入网络请求权限

    AndroidManifest.xml

    <uses-permission android:name="android.permission.INTERNET"/>
    

    效果图

    效果图

    源代码

    请移步Carson_Ho的Github-Android_Banner

    5. 总结

    本文主要对Android轮播的好轮子进行了全面介绍,接下来我会继续讲解其他安卓开发的知识,有兴趣可以继续关注Carson_Ho的安卓开发笔记!!!!


    请点赞!因为你的鼓励是我写作的最大动力!

    相关文章阅读
    1分钟全面了解“设计模式”
    Android开发:最全面、最易懂的Android屏幕适配解决方案
    Android开发:Handler异步通信机制全面解析(包含Looper、Message Queue)
    Android开发:顶部Tab导航栏实现(TabLayout+ViewPager+Fragment)
    Android开发:底部Tab菜单栏实现(FragmentTabHost+ViewPager)
    Android开发:JSON简介及最全面解析方法!
    Android开发:XML简介及DOM、SAX、PULL解析对比


    欢迎关注Carson_Ho的简书!

    不定期分享关于安卓开发的干货,追求短、平、快,但却不缺深度

    相关文章

      网友评论

      • 无奈又彷徨:有个问题不是很明白,为什么图片会被放大??
      • CROAD:不能设置,成普通的轮播图吗,?手动滑动是可以左右循环切换,扩展性不好
      • 简书用户9527:你好, 出现DeadObjectException
      • 24cyt:麻烦问下楼主指示点样式怎么改,谢谢!
      • 很久以前life:老大 滑动轮播图的时候容易和下拉刷新SwipeRefreshLayout起冲突啊 怎么解决啊
        很久以前life:@昨日d书生 谢谢了 :smile:
        昨日d书生:楼主写的文章很棒,路过看到了你的提问,我也遇到过,请参考:http://blog.csdn.net/qq_27600345/article/details/77063818
      • 53dc43775b95:很喜欢看你的文章,我想问一下这个demo两张图片切换可以平滑一点吗,感觉切换的有点突然,看着不是很舒服
      • 一片落叶枫:好喜欢你的文章。。。。
        Carson带你学安卓: @一片落叶枫 我写的文章思路会比较清晰,也希望自己的文章能帮助更多的开发者
        一片落叶枫: @Carson_Ho 好多不懂的清晰了好多,看你文章不知不觉手机也没电了,,现在就想着等会回去充电继续看你的文章,哈哈
        Carson带你学安卓: @一片落叶枫 为啥。。。
      • 3481319ea87f:用第三方的,可以增加一下自己的对这个框架的理解

      本文标题:轮子系列:一款能用易用好用的Android图片轮播轮子

      本文链接:https://www.haomeiwen.com/subject/vhgojttx.html