Android开发之仿京东筛选年份/价格控件

前言：
在前一篇文章介绍了筛选按钮的—- Android自定义view之筛选按钮该控件主要是为了在某些筛选的地方点击选中某一个需要选中的子项而创作，接下来介绍一款控件——年份/价格筛选控件，OK 废话不多说，来看效果图
这里写图片描述
OK 接下来看实现步骤：
我们现在分析一下这个控件的组合，该控件一共由三个地方组成，组成一：顶部的标题（TextView），组成二：中间的显示控件（两个EditText和一个view），组成三：三个筛选选中的控件（上一篇文章中介绍的控件组合而成），OK，分析好了之后接下来我们就来实现这个组合控件。
步骤一：既然这是一个组合控件，那么免不了要自定义并继承与一个group 容器，这里这个容器可以自由选择，我选择的是LinearLayout，所以第一步我们先在XML中实现这个效果
代码如下：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/shopping_list_flilter_height">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:gravity="center|left"
        android:text="标题"
        android:textColor="@color/color_default_font_color"/>

</RelativeLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/et_low"
        android:layout_width="0dp"
        android:layout_height="@dimen/shopping_list_flilter_input_height"
        android:layout_weight="1"
        android:background="@drawable/shape_filter_item_constion_bg"
        android:gravity="center"
        android:hint="@string/shopping_list_flilter_year"
        android:textSize="@dimen/item_font_size" />

    <View
        android:id="@+id/v_line"
        android:layout_width="10dp"
        android:layout_height="@dimen/line_height"
        android:background="@color/color_33" />

    <EditText
        android:id="@+id/et_higt"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="@drawable/shape_filter_item_constion_bg"
        android:gravity="center"
        android:hint="@string/shopping_list_flilter_year"
        android:textSize="@dimen/font_size" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <view.SelectedView
        android:id="@+id/sv_filter1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <view.SelectedView
        android:id="@+id/sv_filter2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/shopping_list_filter_item_margin"
        android:layout_marginRight="@dimen/shopping_list_filter_item_margin"
        android:layout_weight="1" />

    <view.SelectedView
        android:id="@+id/sv_filter3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</LinearLayout>

最外层是一个LinearLayout（别忘记加了）
步骤二：定义一个类继承与LinearLayout,并重写其构造方法，然后利用LayoutInflater 转换器对之前定义的XML文件进行转换，并且利用TextWatcher对xml文件中用到的筛选按钮控件进行监听，代码如下

 textWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            String val = etLow + "-" + etHigt;
            L.i(val);
            if (!(val.equals(svFilter1.getText()) || val.equals(svFilter2.getText()) || val.equals(svFilter3.getText()))) {
                svFilter1.setChecked(false);
                svFilter2.setChecked(false);
                svFilter3.setChecked(false);
            }
        }
        @Override
        public void afterTextChanged(Editable s) {
        }

然后利用attrs对控件定义属性和文字：

if (attrs != null) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.IntervalSearch, 0, 0);
        etLow.setHint(a.getString(R.styleable.IntervalSearch_lowTxt));
        etHigt.setHint(a.getString(R.styleable.IntervalSearch_higtTxt));
        svFilter1.setText(a.getString(R.styleable.IntervalSearch_svFilter1));
        svFilter2.setText(a.getString(R.styleable.IntervalSearch_svFilter2));
        svFilter3.setText(a.getString(R.styleable.IntervalSearch_svFilter3));
        titleTxt.setText(a.getString(R.styleable.IntervalSearch_titleText));

        if (a.getBoolean(R.styleable.IntervalSearch_higtHide, true)) {
            etHigt.setVisibility(VISIBLE);
        } else {
            etHigt.setVisibility(GONE);
            vLine.setVisibility(GONE);
        }
        a.recycle();//回收内存}

步骤三：重写onFinishInflate 方法，对三个选中按钮控件进行处理其中一个控件的处理代码如下：

svFilter1.getLlytItemFilterBg().setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            etLow.removeTextChangedListener(textWatcher);
            etHigt.removeTextChangedListener(textWatcher);

            svFilter1.setChecked(!svFilter1.isChecked());
            svFilter2.setChecked(false);
            svFilter3.setChecked(false);
            if ("0".equals(type)) {
                String[] prices = svFilter1.getText().split("-");
                etLow.setText(prices[0]);
                etHigt.setText(prices[1]);
            } else {
                String year = svFilter1.getText();
                year = year.substring(0, year.length() - 1);
                etLow.setText(year);
            }

            etLow.addTextChangedListener(textWatcher);
            etHigt.addTextChangedListener(textWatcher);
        }
    });

其余两个控件的处理也这一个控件的处理是一样的，这里我就不贴全部的代码了
步骤四：对所有控件做置空归位处理
好了，到这里一个仿京东年份/价格选择的控件就实现完成了，谢谢

Android开发之仿京东筛选年份/价格控件

猜你喜欢