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<DemoAdapter.BaseViewHolder> {
    private ArrayList<ItemModel> dataList = new ArrayList<>();
    private int lastPressIndex = -1;
    private Context mContext;

    public void replaceAll(ArrayList<ItemModel> 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 BaseViewHolder extends RecyclerView.ViewHolder {

        public BaseViewHolder(View itemView) {
            super(itemView);
        }

        void setData(Object data) {
        }
    }

    private class OneViewHolder extends BaseViewHolder {
        private TextView tv;

        public OneViewHolder(View view) {
            super(view);
            tv = (TextView) view.findViewById(R.id.tv);

            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Log.e("TAG", "OneViewHolder: ");
                    notyfy = 0;
                    int position = getAdapterPosition();
                    ItemModel model = dataList.get(position);
                    Log.e("TAG", "OneViewHolder: " + model.toString());
                    EventBus.getDefault().post(model);
                    if (lastPressIndex == position) {
                        lastPressIndex = -1;
                    } else {
                        lastPressIndex = position;
                    }
                    notifyDataSetChanged();


                }

            });
        }

        @Override
        void setData(Object data) {
            if (data != null) {
                String text = (String) data;
                tv.setText(text);
                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));
                }

            }


        }
    }

    int notyfy = 0;

    private class TWoViewHolder extends BaseViewHolder {
        private EditText et;
        private String chargeFunds;

        public TWoViewHolder(View view) {
            super(view);

            et = (EditText) view.findViewById(R.id.et);
            final int position = getAdapterPosition();
            //ItemModel model = dataList.get(position);
            //Log.e("TWoViewHolder", "TWoViewHolder: "+model.toString());
            Log.e("TWoViewHolder", "TWoViewHolder: ");
          et.setOnFocusChangeListener(new View.OnFocusChangeListener() {
                @Override
                public void onFocusChange(View v, boolean hasFocus) {
                    if (hasFocus) {

                        if (lastPressIndex != position) {
                            notifyItemChanged(lastPressIndex);
                            lastPressIndex = position;
                        }
                    }
                }
            });
            et.addTextChangedListener(new TextWatcher() {


                @Override
                public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                }

                @Override
                public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                    if (charSequence != null || !charSequence.equals("")) {
                        try {
                            int str = Integer.parseInt(String.valueOf(charSequence));

                            if (str < 9) {

                                Toast.makeText(mContext, "输入的金额小于最小支付金额9元", Toast.LENGTH_SHORT).show();
                                et.setSelection(et.getText().length());
                            }
                            if (str > 2000) {
                                Toast.makeText(mContext, "输入的金额大于最大支付金额2000元", Toast.LENGTH_SHORT).show();
                                et.setText("2000");
                                et.setSelection(et.getText().length());
                            }
                        } catch (Exception e) {
                            e.printStackTrace();
                        }

                    }
                }

                @Override
                public void afterTextChanged(Editable editable) {


                    if (editable.length() > 0) {
                        String inputText = et.getText().toString().trim();
                        if (Double.parseDouble(inputText) < 9) {
                            chargeFunds = "9";
                        } else if (Double.parseDouble(inputText) > 2000) {
                            chargeFunds = "2000";
                        } else {
                            chargeFunds = inputText;
                        }
                    }

                    String funds = chargeFunds + "元";
                    ItemModel model = new ItemModel(ItemModel.THREE, funds, false);
                    EventBus.getDefault().post(model);
                }
            });


        }


        @Override
        void setData(Object data) {
            super.setData(data);
            final int position = getAdapterPosition();
            if (position == lastPressIndex)
                et.requestFocus();
            else
                et.clearFocus();
        }
    }

    private class CornorViewHoler extends BaseViewHolder {
        private TextView tv;

        public CornorViewHoler(View view) {
            super(view);
            tv = (TextView) view.findViewById(R.id.tv);
            //int position = getAdapterPosition();
            //ItemModel model = dataList.get(position);
            //Log.e("TAG", "OneViewHolder: "+model.toString());
            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Log.e("TAG", "OneViewHolder: ");
                    notyfy = 0;
                    int position = getAdapterPosition();
                    ItemModel model = dataList.get(position);
                    EventBus.getDefault().post(model);
                    if (lastPressIndex == position) {
                        lastPressIndex = -1;
                    } else {
                        lastPressIndex = position;
                    }
                    notifyDataSetChanged();


                }

            });
        }

        @Override
        void setData(Object data) {
            if (data != null) {
                String text = (String) data;
                tv.setText(text);
                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));
                }

            }
        }
    }
}

上述代码中数据传递使用的是EventBus3.0，所以需要在gradle文件添加如下引用：

compile 'org.greenrobot:eventbus:3.0.0'

现在开始对Adapter类进行分析，在Adapter类中我们创建了3个ViewHolder(CornorViewHoler、TWoViewHolder、OneViewHolder）在这三个ViewHolder中实现各自的逻辑，同时三个类中同时继承了void setData(Object data) 接口处理是否为选中状态、是否需要更改背景颜色以及状态
其他部分的代码都比较简单，不过在处理TWoViewHolder这个类的时候有点小麻烦(EditText),首先大家看到EditText有一个取值范围的（9~2000），这个通过addTextChangedListener监听来实现即可

    et.addTextChangedListener(new TextWatcher() {
                @Override
                public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                }
                @Override
                public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                    if (charSequence != null || !charSequence.equals("")) {
                        try {
                            int str = Integer.parseInt(String.valueOf(charSequence));
                            if (str < 9) {
                                Toast.makeText(mContext, "输入的金额小于最小支付金额9元", Toast.LENGTH_SHORT).show();
                                et.setSelection(et.getText().length());
                            }
                            if (str > 2000) {
                                Toast.makeText(mContext, "输入的金额大于最大支付金额2000元", Toast.LENGTH_SHORT).show();
                                et.setText("2000");
                                et.setSelection(et.getText().length());
                            }
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                    }
                }
                @Override
                public void afterTextChanged(Editable editable) {


                    if (editable.length() > 0) {
                        String inputText = et.getText().toString().trim();
                        if (Double.parseDouble(inputText) < 9) {
                            chargeFunds = "9";
                        } else if (Double.parseDouble(inputText) > 2000) {
                            chargeFunds = "2000";
                        } else {
                            chargeFunds = inputText;
                        }
                    }

                    String funds = chargeFunds + "元";
                    ItemModel model = new ItemModel(ItemModel.THREE, funds, false);
                    EventBus.getDefault().post(model);
                }
            });

到这里差不多写完了，是不是就大功告成了？别急，还有一个问题，点击EditText的时候，TextView的状态还没有消失呢，怎么办？

当页面刷新的时候 如果当前选中的是这个输入框就让它获取到并得到焦点，所以我们在TWoViewHolder类中的setData() 方法中让它获取焦点，将最后的位置传递给它

  @Override
        void setData(Object data) {
            super.setData(data);
            final int position = getAdapterPosition();
            if (position == lastPressIndex)
                et.requestFocus();
            else
                et.clearFocus();
        }

这样就差不多了，然后我们对EdiText的焦点进行监听(setOnFocusChangeListener)，Notifycation布局文件即可

  et.setOnFocusChangeListener(new View.OnFocusChangeListener() {
                @Override
                public void onFocusChange(View v, boolean hasFocus) {
                    if (hasFocus) {

                        if (lastPressIndex != position) {
                            notifyItemChanged(lastPressIndex);
                            lastPressIndex = position;
                        }
                    } 
                }
            });

代码讲到这里就可以实现上面的效果了，下面将其他布局文件代码贴出来
MainActivity.class

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private DemoAdapter adapter;
    private TextView tvPay;
    private TextView tv_recharge_money;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv_recharge_money = (TextView) findViewById(R.id.tv_recharge_money);
        recyclerView = (RecyclerView) findViewById(R.id.recylerview);
        tvPay = (TextView) findViewById(R.id.tvPay);
        //setHasFixedSize 的作用就是确保尺寸是通过用户输入从而确保RecyclerView的尺寸是一个常数。
        // RecyclerView 的Item宽或者高不会变(提升性能)。
        recyclerView.setHasFixedSize(true);
        //recycleview设置布局方式，GridView (一行三列)
        recyclerView.setLayoutManager(new GridLayoutManager(this, 3));
        recyclerView.setAdapter(adapter = new DemoAdapter());
        adapter.replaceAll(getData(),this);
        EventBus.getDefault().register(this);

    }

    public ArrayList<ItemModel> getData() {
        String data = "3,9,30,50,100";
        // isDiscount ：1、有角标 2、无角标
        String isDiscount = "2";
        String dataArr[] = data.split(",");
        ArrayList<ItemModel> list = new ArrayList<>();
        for (int i = 0; i < dataArr.length; i++) {
            String count = dataArr[i] + "元";
            if (isDiscount.equals("1") && i == 0) {
                list.add(new ItemModel(ItemModel.ONE, count, true));
            } else {
                list.add(new ItemModel(ItemModel.TWO, count, false));
            }
        }
        list.add(new ItemModel(ItemModel.THREE, null, false));

        return list;
    }

    @Subscribe(threadMode = ThreadMode.MAIN)
    public void getAdapterClickInfo(ItemModel model) {
        String money = model.data.toString().replace("元", "");
        tv_recharge_money.setText(money);
        if (model.isFree==true){
            Toast.makeText(this,"点击的是带免费标签的",Toast.LENGTH_SHORT).show();
        }else {
            Toast.makeText(this,"点击的是正常标签的",Toast.LENGTH_SHORT).show();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        EventBus.getDefault().unregister(this);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.wangchang.testrecharge.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="12dp"
            android:background="@color/grey_300" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@color/white"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="充值账号："
                android:textColor="@color/black" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="15013678968"
                android:textColor="@color/yellow_900" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/grey_300" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@color/white"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="充值金额："
                android:textColor="@color/black" />

            <TextView
                android:id="@+id/tv_recharge_money"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="100"
                android:textColor="@color/yellow_900" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/grey_300" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="选择充值金币:" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recylerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="12dp" />

    </LinearLayout>

    <TextView
        android:id="@+id/tvPay"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:layout_margin="24dp"
        android:background="@drawable/tv_bg_pay"
        android:gravity="center"
        android:text="立即充值"
        android:textColor="@color/white" />
</RelativeLayout>

corner_one.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:gravity="center"
        android:layout_margin="8dp"
        android:padding="12dp"
        android:background="@drawable/tv_bg"
        android:textColor="@color/blue_500" />

    <ImageView
        android:layout_margin="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/free_click"
        android:id="@+id/imageView" />
</FrameLayout>

one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:gravity="center"
        android:layout_margin="8dp"
        android:padding="12dp"
        android:background="@drawable/tv_bg"
        android:textColor="@color/blue_500" />
</LinearLayout>

two.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <EditText
        android:id="@+id/et"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp"
        android:background="@drawable/bg_et"
        android:gravity="center"
        android:hint="9-2000元"
        android:inputType="number"
        android:padding="12dp"
        android:textSize="12sp" />
</LinearLayout>

好了，代码到此为止，效果也差不多了，有兴趣的朋友可以自行尝试下，欢迎大家一起交流,如有更好的建议或者意见可致电lcf_spark@163.com