android 充值选择界面,RecylerView(GridView布局)实现充值界面效果

RecylerView(GridView布局)实现充值界面效果

项目中有一个充值的效果如下：

效果图

之前为了赶项目进度，也没有多想，这不是很简单的么？5个TextView加1个EditText不就搞定了么？

的确这样做是可以实现的，而且也在规定时间内完成了项目。(但是存在局限性)

由于项目中多次的使用了RecycleView，然后发现这个用RecycleView实现效果会更好(布局更灵活，不限制个数),完成后的效果：

有角标

无角标

1、数据传递效果的展示

首先分析下这个界面需要的数据，由于这个界面是后台通过两个字段判断实现的效果

String data = "3,9,30,50,100";

//isDiscount ：1、有角标 2、无角标

String isDiscount = "1";

我们首先要通过IsDiscount这个字段来判断是否显示带角标的控件，以及data字段来判断动态添加几个控件

2、界面实现效果分析

1、组件选择

文章开始就说到了，我们选用的是RecycleView这个控件结合GridView布局实现效果

2、RecyeView Adapter布局分析

①有角标TextView

②正常无角标TextView

③EditText输入框

布局如上三种，大家都知道RecycleView的强大，现在我们就利用它其中的ItemType这个功能，RecyleView很多复杂的界面都是通过ItemType这个属性来实现的。

3、具体代码的实现

①ItemType种类的控制

@Override

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

switch (viewType) {

case ItemModel.ONE:

///左上角三角标识布局；

return new CornorViewHoler(LayoutInflater.from(parent.getContext()).inflate(R.layout.corner_one, parent, false));

case ItemModel.TWO:

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

case ItemModel.THREE:

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

}

return null;

}

在onCreateViewHolde这个方法中添加所需要的三种布局文件

②Item数据封装

在这个Adapter中，由于我需要知道几个条件，第一个是当前选中的状态是否是免费的标志，第二个是当前选中的值，所以封装了一个ItemModel的类用于处理数据

public class ItemModel implements Serializable {

//左上角三角图标

public static final int ONE = 1001;

//textview布局

public static final int TWO = 1002;

//edittext布局

public static final int THREE = 1003;

public int type;

public Object data;

//是否免费的标志

public boolean isFree;

public ItemModel(int type, Object data, boolean isFree) {

this.type = type;

this.data = data;

}

}

好了前期的准备工作差不多了，现在我们就该对Adapter中的逻辑进行处理了。先上Adapter的完整代码

public class DemoAdapter extends RecyclerView.Adapter {

private ArrayList dataList = new ArrayList<>();

private int lastPressIndex = -1;

private Context mContext;

public void replaceAll(ArrayList list, Context context) {

mContext = context;

dataList.clear();

if (list != null && list.size() > 0) {

dataList.addAll(list);

}

notifyDataSetChanged();

}

@Override

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

switch (viewType) {

case ItemModel.ONE:

///左上角三角标识布局；

return new CornorViewHoler(LayoutInflater.from(parent.getContext()).inflate(R.layout.corner_one, parent, false));

case ItemModel.TWO:

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

case ItemModel.THREE:

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

}

return null;

}

@Override

public void onBindViewHolder(DemoAdapter.BaseViewHolder holder, int position) {

holder.setData(dataList.get(position).data);

}

@Override

public int getItemViewType(int position) {

return dataList.get(position).type;

}

@Override

public int getItemCount() {

return dataList != null ? dataList.size() : 0;

}

public class