今天周末，闲来无事，做了一个仿支付宝充值界面，主要知识点用RecylerView的GridlayoutManager布局管理器，实现不同数据类型，填充不同布局，功能包括单击选中，双击取消，支持可输入金额等。

首先来看一下设计图

ok，首先我们来分析一下功能

主体部分实现是由recylerview来实现，因为考虑到扩展性，所以一般都不会用xml来实现主体界面，支持点击选中，再次点击取消选中。

采用RecylerView的GridlayoutManager布局管理器，分三列，这些都类似于GridView，不作解释，难点在于(adapter如何实现两种布局)，因为还包含了可输入的EditText。

哈哈，其实RecylerView早就解决了这个问题

分析完毕，下面来看实现方式吧。

添加依赖

//noinspection GradleCompatible

compile 'com.android.support:recyclerview-v7:24.0.0-alpha1'

这个根据自己SDK的版本号进行选择。

RecylerView的初始化

recyclerView.setHasFixedSize(true);

recyclerView.setLayoutManager(new GridLayoutManager(this, 3));

recyclerView.setAdapter(adapter = new DemoAdapter());

adapter.replaceAll(getData());

这里采用GridLayoutManager布局管理器，分三列。

数据填充

public ArrayList getData() {

ArrayList list = new ArrayList<>();

for (int i = 0; i < 8; i++) {

String count = i + "元";

list.add(new ItemModel(ItemModel.ONE, count));

}

list.add(new ItemModel(ItemModel.TWO, null));

return list;

}

这里是很有意思的地方，大家可以看出来集合里包含了两种不同类型的数据，ItemModel.ONE，ItemModel.TWO,通过不同的数据类型，我们可以选用不同的布局

@Override

public DemoAdapter.BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

switch (viewType) {

case ItemModel.ONE:

return new OneViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.one, parent, false));

case ItemModel.TWO:

return new TWoViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.two, parent, false));

}

return null;

}

这里对不同的viewType，采用不同的ViewHolder，这里是重点，大家揣摩一下。

adapter布局则是一个TextView，跟EditText。

然后如何实现点击选中状态呢？这需要看我们的Selecor啦

这里可以看出，对于不同的select，设置对应的shape，就能轻松实现选中效果。

那么如何实现只能单选的功能呢？因为我们充值只能选择一种金额。

这里我们需要分析一下。我们在点击一种金额，需要取消其他金额的选中状态。该怎么实现呢？

我们需要设置一个过去选中的位置(int)，记为lastSelectIndex，暂且设置为-1.

private int lastPressIndex = -1;

获取当前选中的位置

int position=getAdapterPosition();

当我们再选中时，需要进行判断，当lastPressIndex==position时，就是双击取消选中状态，将lastPressIndex设置为-1.反之，将lastPressIndex==position。

很好理解吧，因为集合从0开始，设置完之后，我们需要

notifyDataSetChanged();

没错，这句话很重要，如果不刷新的话，下面的viewholder就不会重新赋值。

itemView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Log.e("TAG", "OneViewHolder: ");

int position = getAdapterPosition();

if (lastPressIndex == position) {

lastPressIndex = -1;

} else {

lastPressIndex = position;

}

notifyDataSetChanged();

}

});

根据lastPressIndex改变select的状态。

if (getAdapterPosition() == lastPressIndex) {

tv.setSelected(true);

tv.setTextColor(ContextCompat.getColor(itemView.getContext(), R.color.white));

} else {

tv.setSelected(false);

tv.setTextColor(ContextCompat.getColor(itemView.getContext(), R.color.blue_500));

}

嗯关键点就这么哆啦。效果图

这里主要解释实现的难点，重点，就不一一贴代码啦。

另外在可能有人会问，当我点击充值的时候如何将选中状态的值从adapter传过来呢？

这里我就分析一下实现方法。

1,用广播的方式，选中的时候就发送广播,在主页面进行接收即可

2，用eventBus来实现传值。详情可以看我的博客

使用EvnetBus进行消息传递解析

使用EventBus进行数据传递解析

就这么多啦，附上代码下载链接

http://pan.baidu.com/s/1nvpeorR