前言

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

作者博客

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

源码地址

    https://github.com/FJ917/FJMtSortButton

文章目录

1. 使用姿势

1. 导入配置

1. Gradle

2. Maven

2. 使用方法

2. 实现原理

1. 需求分析

2. 封装组成

3. 总结

音频版教程

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

效果

使用姿势

导入配置文件

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。比美团更加灵活。

实现原理

需求分析

界面：分为两部分，上面的按钮以及下面的指示点。上面使用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，来实现其他效果。比如：稍加改动布局的话可以作为应用的启动引导页。

总结

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