android高仿美团筛选控件,Android高仿美团首页分类按钮

惯例，先上GIF

栗子.gif更新v1.1版本 2017-6-2 11:55:30

详见github

一、使用姿势

1、引入(使用Gradle或者Maven)

1)Gradleallprojects {

repositories {

...

maven { url 'https://jitpack.io' }

}

}

dependencies {

compile 'com.github.FJ917:FJMtSortButton:v1.1'

}

2)Maven

jitpack.io

https://jitpack.io

com.github.FJ917

FJMtSortButton

v1.1

2、使用方法

1)xml文件

android:id="@+id/soreButton"

android:background="#ffffff"

android:layout_width="match_parent"

android:layout_height="170dp"/>

2)java文件

1.对自定义控件做一些设置//设置界面监听

soreButton.setViewControl(this);

//添加界面到list

list = new ArrayList<>();

list.add(R.layout.viewpager_page);

list.add(R.layout.viewpager_page);

list.add(R.layout.viewpager_page_text);

//控件相关设置

soreButton

//设置选中和未选中指示器图标

.setIndicator(R.drawable.radio1,R.drawable.radio2)

//设置指示器半间距px

.setDistance(10)

//设置view组

.setView(list)

.init();

将layout的布局add进去list中，然后调用setView方法把list传过去，

还提供了设置指示器图标的方法，以及指示器间距的方法，最后必须调用初始化方法init进行初始化

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

布局R.layout.viewpager_page<?xml  version="1.0" encoding="utf-8"?>

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="5dp"

android:background="#ffffff" >

android:id="@+id/gridView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:horizontalSpacing="5dp"

android:numColumns="5"

android:scrollbars="none"

android:stretchMode="columnWidth"

android:verticalSpacing="10dp" />

2.设置soreButton监听事件(具体的可以参考GIt上面的Demo，Git地址文章末尾)public class MainActivity extends AppCompatActivity implements ViewControl {

private SoreButton soreButton;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

soreButton = (SoreButton) findViewById(R.id.soreButton);

soreButton.setViewControl(this);

}

@Override

public void setView(View view, final int type) {

//这里会返回前面设置进去的View及对应的type,然后就可以进行操作了

}

}

划重点：上面的list中可以传入任意layout布局，然后通过接口回掉拿到View。比美团更加灵活。好了使用姿势已经讲完了，伸手可以撤退了~ 接下来开始讲讲实现原理

二、实现原理

1. 需求分析

需求.png

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

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

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

2.下面开始封装

1)xml<?xml  version="1.0" encoding="utf-8"?>

android:layout_width="match_parent"

android:orientation="vertical"

android:layout_height="match_parent">

android:id="@+id/viewPager"

android:layout_weight="1"

android:layout_width="match_parent"

android:layout_height="0dp" />

android:layout_below="@+id/viewPager"

android:id="@+id/llIndicator"

android:layout_width="match_parent"

android:layout_height="20dp"

android:background="#ffffff"

android:gravity="center"

android:orientation="horizontal" >

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

2)自定义控件SoreButton.java

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

private ViewPager viewPager;

private LinearLayout llIndicator;

//选中图片

private int RadioSelect = R.drawable.radio_select;

//未选中图片

private int RadioUnselected = R.drawable.radio_unselected;

//圆点间距

private int distance = 10;

List listSoreView = new ArrayList<>();

View soreView;

private List listView;

//接口

private ViewControl viewControl;

//设置接口

public void setViewControl(ViewControl viewControl) {

this.viewControl = viewControl;

}

拿到了自定义控件的布局中ViewPager和LinearLayout，并且设置了一个空布局。public SoreButton(Context context, AttributeSet attrs) {

super(context, attrs);

mContext = context;

LayoutInflater.from(context).inflate(R.layout.anfq_sore_button, this, true);

viewPager = (ViewPager) findViewById(R.id.viewPager);

llIndicator = (LinearLayout) findViewById(R.id.llIndicator);

//设置空布局

listView = new ArrayList<>();

listView.add(R.layout.viewpager_default);

}

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

* 设置圆点距离

* @param distance  --距离

* @return

*/

public SoreButton setDistance(int distance){

this.distance = distance;

return this;

}

/**

* 设置指示器图片

* @param radioSelect       --选中图片

* @param radioUnselected   --未选中图片

* @return

*/

public SoreButton setIndicator(int radioSelect,int radioUnselected){

//选中图片

RadioSelect = radioSelect;

//未选中图片

RadioUnselected = radioUnselected;

return this;

}

/**

* 设置view

* @param listView   --view

* @return

*/

public SoreButton setView(List listView){

this.listView = listView;

return this;

}

/**

* 设置初始化

*/

public SoreButton init(){

initViewPager();

return this;

}

接下来我们看看initViewPager中都做了那些操作//初始化ViewPager

private void initViewPager(){

listSoreView = new ArrayList<>();

LayoutInflater layoutInflater = (LayoutInflater)

mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

int size = listView.size();

for (int i = 0; i 

//循环拿到传入的View

soreView = layoutInflater.inflate(listView.get(i), null);

//通过接口回掉的形式返回当前的View,实现接口后开源拿到每个View然后进行操作

if (viewControl!=null){

viewControl.setView(soreView,i);

}

//将获取到的View添加到List中

listSoreView.add(soreView);

}

//设置viewPager的Adapter

viewPager.setAdapter(new ViewPagerAdapter(listSoreView));

//初始化LinearLayout，加入指示器

initLinearLayout(viewPager, size, llIndicator);

}

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

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

* 设置指示器，设置ViewPager滑动事件监听

* @param viewPager --ViewPager

* @param pageSize --View的页数

* @param linearLayout --LinearLayout

*/

private void initLinearLayout(ViewPager viewPager, int pageSize, LinearLayout linearLayout) {

//定义数组放置指示器的点，pageSize是View个数

final ImageView[] imageViews = new ImageView[pageSize];

for (int i = 0; i 

//创建ImageView

ImageView image = new ImageView(mContext);

//将ImageView放入数组

imageViews[i] = image;

//默认选中第一个

if (i == 0) {

//选中的点

image.setImageResource(RadioSelect);

} else {

//未选中的点

image.setImageResource(RadioUnselected);

}

//设置宽高

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(

LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

params.setMargins(distance, 0, distance, 0);

//将点添加到LinearLayout中

linearLayout.addView(image, params);

}

//ViewPager的滑动事件

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrollStateChanged(int arg0) {}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {}

@Override

public void onPageSelected(int arg0) {

//arg0当前ViewPager

for (int i = 0; i 

//设置为选中的点

imageViews[arg0].setImageResource(RadioSelect);

//判断当前的点i如果不等于当前页的话就设置为未选中

if (arg0 != i) {

imageViews[i].setImageResource(RadioUnselected);

}

}

}

});

}

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

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

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

**然后就没有然后了，封装完成~

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

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