Intro 在这，我们相互学习，共同成长，分享使我们并不孤单. BRVAH@www.recyclerview.org

前言

给大家带来的是一个仿美团首页分类按钮的库，这个库比美团的更灵活，可以设置任意的View到ViewPager页中。

作者博客

http://www.jianshu.com/u/3d2770e6e489

源码地址

https://github.com/FJ917/FJMtSortButton

文章目录

使用姿势

导入配置

Gradle
Maven

使用方法

实现原理

需求分析
封装组成
总结

音频版教程

在「码个蛋」公众号中回复“20170331”获取

效果

1

使用姿势

导入配置文件

1. Gradle：

2. Maven

使用方法

1.xml文件

2. java文件
2.1 对自定义控件做一些设置

将layout的布局add进去list中，然后调用setView方法把list传过去，
还提供了设置指示器图标的方法，以及指示器间距的方法，最后必须调用初始化方法init进行初始化

这是其中的一个layout布局，其实这里可以添加任意布局文件进去，是不是比美团更灵活呢？

R.layout.viewpager_page

2.2 设置soreButton监听事件(具体的可以参考GIt上面的Demo)

重点：上面的list中可以传入任意layout布局，然后通过接口回掉拿到View。比美团更加灵活。

2

实现原理

需求分析

界面：分为两部分，上面的按钮以及下面的指示点。上面使用ViewPager作为View的容器，下面的指示器用LinearLayout将动态创建的ImageView添加进去。

ViewPager中的按钮使用GridView来做，当然这一部分我们需要做的灵活些，不一定只放按钮，也可以方其他View，超越美团，//手动滑稽。

重点：通过自定义组合控件的方式来进行封装，方便以后的使用。

封装组成

1. xml

和普通的布局没啥区别，外层LinearLayout垂直布局，其中有ViewPager作为滑动切换的容器，内部的LinearLayout作为指示器容器。

2. 自定义控件SoreButton.java

设置了默认值变量，以及控件和接口定义

拿到了自定义控件的布局中ViewPager和LinearLayout，并且设置了一个空布局。

对外提供的参数设置方法，当调用了init()方法后，会调用initViewPager方法进行ViewPager的初始化。

接下来我们看看initViewPager中都做了那些操作

因为之前调用了setView方法，传入了一组布局，我们通过循环来拿到这组View并添加到list中,然后设置到viewPager的Adapter，然后调用initLinearLayout方法初始化指示器。

接下来我们来看initLinearLayout中又做了那些操作

定义了一个数组，用来放置指示器的点，通过循环pageSize来动态创建ImageView，然后判断i来将第一页的ImageView设置为选中的点，其余设置为未选中的点。接着设置了宽高，然后添加到LinearLayout中。

当然这样还不行，在viewPager滑动的时候我们得更新指示器上的点

我们对ViewPager设置了监听事件setOnPageChangeListener，在滑动的时候会调用onPageSelected，在这里可以拿到当前页，之后我们通过循环刚刚的数组，将当前页对应的点设置为选中图标，不等于当前页的设置为未选中的点。

然后就没有然后了，封装完成~
这样就可以通过上面所说的方式，来使用这个自定义控件实现仿美团的效果，而且不止是仿美团的效果，可以传入其他View，来实现其他效果。比如：稍加改动布局的话可以作为应用的启动引导页。

总结

通过自定义组合控件，可以对一些常用的布局以及逻辑代码进行封装，以减少使用时代码量，使得代码更加简洁。