现在恰好有个项目需要做个轮播图效果,这个需求也是很常见的需求,于是就做个笔记写一下实现过程

分为加载本地图片和网络图片

加载本地图片

第一步:先在build.gradle中加入banner和glide的依赖

//banner依赖implementation 'com.youth.banner:banner:1.4.9'    //Glide框架    implementation "com.github.bumptech.glide:glide:4.6.1"

第二步:xml布局

第三步:MainActivity

public class MainActivity extends AppCompatActivity {    private Banner mBanner;    private LocalImageLoader mImageLoader;    private ArrayList imagePath;    private ArrayList imageTitle;   @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        intView();        intDate();    }    private void intDate() {        imagePath = new ArrayList<>();        imageTitle = new ArrayList<>();        imagePath.add(R.mipmap.ic_launcher);        imagePath.add(R.mipmap.ic_launcher);        imagePath.add(R.mipmap.ic_launcher);        imagePath.add(R.mipmap.ic_launcher);        imagePath.add(R.mipmap.ic_launcher);        imageTitle.add("第一");        imageTitle.add("第二");        imageTitle.add("第三");        imageTitle.add("第四");        imageTitle.add("第五");    }    private void intView() {        mImageLoader = new LocalImageLoader();        mBanner = findViewById(R.id.banner);        //样式        mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);        //加载器        mBanner.setImageLoader(mImageLoader);        //动画效果        mBanner.setBannerAnimation(Transformer.ZoomOutSlide);        //图片标题        mBanner.setBannerTitles(imageTitle);        //间隔时间        mBanner.setDelayTime(4500);        //是否为自动轮播        mBanner.isAutoPlay(true);        //图片小点显示所在位置        mBanner.setIndicatorGravity(BannerConfig.CENTER);        //图片加载地址        mBanner.setImages(imagePath);        //启动轮播图。        mBanner.start();        //监听轮播图        mBanner.setOnBannerListener(new OnBannerListener() {            @Override            public void OnBannerClick(int position) {                Toast.makeText(MainActivity.this, "点击了" + (position + 1) + "张轮播图", Toast.LENGTH_SHORT).show();            }        });    }    /**     * 图片加载类     */    private class LocalImageLoader extends ImageLoader {        @Override        public void displayImage(Context context, Object path, ImageView imageView) {            Glide.with(context.getApplicationContext())                    .load(path)                    .into(imageView);        }    }}

加载网络图片

只要修改一下intDate()和LocalImageLoader()方法就好了
例如:

private void initData() {        list_path.add("https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%93%86%E5%95%A6A%E6%A2%A6&step_word=&hs=0&pn=8&spn=0&di=118140&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3835923757%2C1980937759&os=265876109%2C1976020808&simid=0%2C0&adpicid=0&lpn=0&ln=1495&fr=&fmq=1573545585312_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg24.pplive.cn%2Fcs180x240%2F2017%2F11%2F08%2F18331958489.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fe_z%26e3Brrpe_z%26e3Bv54AzdH3Frw2jAzdH3Ftwtk9F2rHzdii0tkWE_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined");         list_path.add("https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%93%86%E5%95%A6A%E6%A2%A6&step_word=&hs=0&pn=8&spn=0&di=118140&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3835923757%2C1980937759&os=265876109%2C1976020808&simid=0%2C0&adpicid=0&lpn=0&ln=1495&fr=&fmq=1573545585312_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg24.pplive.cn%2Fcs180x240%2F2017%2F11%2F08%2F18331958489.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fe_z%26e3Brrpe_z%26e3Bv54AzdH3Frw2jAzdH3Ftwtk9F2rHzdii0tkWE_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined");        list_path.add("https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%93%86%E5%95%A6A%E6%A2%A6&step_word=&hs=0&pn=8&spn=0&di=118140&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3835923757%2C1980937759&os=265876109%2C1976020808&simid=0%2C0&adpicid=0&lpn=0&ln=1495&fr=&fmq=1573545585312_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg24.pplive.cn%2Fcs180x240%2F2017%2F11%2F08%2F18331958489.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fe_z%26e3Brrpe_z%26e3Bv54AzdH3Frw2jAzdH3Ftwtk9F2rHzdii0tkWE_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined");        list_path.add("https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%93%86%E5%95%A6A%E6%A2%A6&step_word=&hs=0&pn=8&spn=0&di=118140&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3835923757%2C1980937759&os=265876109%2C1976020808&simid=0%2C0&adpicid=0&lpn=0&ln=1495&fr=&fmq=1573545585312_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg24.pplive.cn%2Fcs180x240%2F2017%2F11%2F08%2F18331958489.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fe_z%26e3Brrpe_z%26e3Bv54AzdH3Frw2jAzdH3Ftwtk9F2rHzdii0tkWE_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined");         list_path.add("https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%93%86%E5%95%A6A%E6%A2%A6&step_word=&hs=0&pn=8&spn=0&di=118140&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3835923757%2C1980937759&os=265876109%2C1976020808&simid=0%2C0&adpicid=0&lpn=0&ln=1495&fr=&fmq=1573545585312_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg24.pplive.cn%2Fcs180x240%2F2017%2F11%2F08%2F18331958489.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fe_z%26e3Brrpe_z%26e3Bv54AzdH3Frw2jAzdH3Ftwtk9F2rHzdii0tkWE_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined");         list_path.add("https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%93%86%E5%95%A6A%E6%A2%A6&step_word=&hs=0&pn=8&spn=0&di=118140&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3835923757%2C1980937759&os=265876109%2C1976020808&simid=0%2C0&adpicid=0&lpn=0&ln=1495&fr=&fmq=1573545585312_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg24.pplive.cn%2Fcs180x240%2F2017%2F11%2F08%2F18331958489.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fe_z%26e3Brrpe_z%26e3Bv54AzdH3Frw2jAzdH3Ftwtk9F2rHzdii0tkWE_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined");         list_title.add("哆啦A梦1");        list_title.add("哆啦A梦2");        list_title.add("哆啦A梦3");        list_title.add("哆啦A梦4");        list_title.add("哆啦A梦5");        list_title.add("哆啦A梦6");    }  private class LocalImageLoader extends ImageLoader {        @Override        public void displayImage(Context context, Object path, ImageView imageView) {            Glide.with(context.getApplicationContext())                    .load((String) path)                    .into(imageView);        }    }

下载网络图片的时候要记得添加网络权限

-----------------------------------分割线---------------------------------------------------

补充。轮播图几种默认样式对比。。。PS:如果轮播图不想要title,就更改样式就好了

需要注意的是,如果设置有标题出现的样式,那么一定要设置setBannerTitles属性,不然会报错

样式一:CIRCLE_INDICATOR:无标题,有小圆点

//banner无标题样式mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);

效果图:

样式二:CIRCLE_INDICATOR_TITLE_INSIDE:小圆点和标题在同一栏

mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);

效果图

样式三:CIRCLE_INDICATOR_TITLE:标题和小圆点同时出现

mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);

效果图:

更多相关文章

  1. Android自定义ActionBar背景色、字体颜色等样式style
  2. 加载相册和拍照图片(Android交流QQ群:213167832)
  3. Android实战简易教程(Android(安卓)APP 引导页实现-第一次应用进
  4. Android用StaticLayout实现文字转化为图片效果(类似长微博发送)
  5. Android实现图片自动切换
  6. Android简单实现仿微信选择图片以及拍照(PhotoPicker)
  7. Androidの疑难杂症之加载布局报Error inflating class
  8. Android获取手机相册图片
  9. Android(安卓)图片压缩并保存的方法

随机推荐

  1. Android(安卓)TV开发中所有的遥控器按键
  2. Android(安卓)Jetpack Components of Vie
  3. android Gallery3D效果
  4. Getting Smack working with Android(安
  5. Android(安卓)坐标
  6. Android网格布局实现--recyclerview
  7. Android(安卓)如何设置自定义dialog的大
  8. Android自定义对话框(Dialog)位置,大小
  9. android 游戏框架SurfaceView
  10. [Android算法] 实现获取视频的缩略图(Thum