Android顶部banner轮播图的两种实现（ViewPager+ViewPagerIndicator/banner）

系统管理员 2022-06-06 01:11 905阅读 0赞

## **一、第一种方式：ViewPager+ViewPagerIndicator** ##

1、在gradle文件中，加入ViewPagerIndicator的依赖，我是以jar的形式添加  
![这里写图片描述][SouthEast]

2、在布局文件中，写好布局：  
![这里写图片描述][SouthEast 1]

3、在fragment中实例化：  
![这里写图片描述][SouthEast 2]

4、为ViewPager添加适配器、为ViewPagerIndicator绑定ViewPager  
![这里写图片描述][SouthEast 3]

5、编写ViewPager的适配器，继承自PagerAdapter，并实现其4个方法：  
![这里写图片描述][SouthEast 4]

对于PagerAdapter的四个方法，可以参考下面文章：  
[http://blog.csdn.net/harvic880925/article/details/38487149][http_blog.csdn.net_harvic880925_article_details_38487149]

## 二、第二种方式：第三方框架banner ##

1、在gradle中添加banner的依赖：  
![这里写图片描述][SouthEast 5]

2、在布局文件中，写好布局：  
![这里写图片描述][SouthEast 6]

3、在fragment中实例化：  
![这里写图片描述][SouthEast 7]

4、为banner设置属性：  
![这里写图片描述][SouthEast 8]

5、为banner设置图片加载器，此处用Picasso加载图片：  
![这里写图片描述][SouthEast 9]

对于banner的具体使用，可以查看github：  
[https://github.com/youth5201314/banner][https_github.com_youth5201314_banner]

[SouthEast]: /images/20220606/f4f0b0a0511047dda03fd35e84ef98d6.png
[SouthEast 1]: /images/20220606/bd23ef9269894f15b3396ad1f95ac788.png
[SouthEast 2]: /images/20220606/22a379a47919482abb1e2c0667e2ae82.png
[SouthEast 3]: /images/20220606/0decc0d447ff42668568f9f5489bb439.png
[SouthEast 4]: /images/20220606/cb9680a177124197b34f55b8d9c50e8f.png
[http_blog.csdn.net_harvic880925_article_details_38487149]: http://blog.csdn.net/harvic880925/article/details/38487149
[SouthEast 5]: /images/20220606/d72b9a7c029543618f6e282e782d55ad.png
[SouthEast 6]: /images/20220606/daf74025cb474bacb7b5785440a8734d.png
[SouthEast 7]: /images/20220606/49a2ed48d8dc4c8597e3e44da920e2e1.png
[SouthEast 8]: /images/20220606/5399fe9623df4493b239ba3f30f26785.png
[SouthEast 9]: /images/20220606/bf476f9f110441868dfbb477752aca88.png
[https_github.com_youth5201314_banner]: https://github.com/youth5201314/banner