Shulou(Shulou.com)06/03 Report--

Editor to share with you how Android to achieve a general filter bar, I hope you will learn something after reading this article, let's discuss it together!

I. demand analysis

After seeing this filter bar, consider the layout first. When I first came into contact with android, I may see the idea of this layout is: filter bar this part, a horizontal layout of LinearLayout, and then divided into three parts, each part accounts for a proportion of 1, and then put a TextView and ImageView in each part, and then monitor the click events of each part, TextView and ImageView for color, text, direction and other processing. Indeed, this can achieve the function, but it is very troublesome to write, need to manually deal with changes in TextView and ImageView, may be messed up after more filter columns, but also spend a lot of time to find and modify BUG, there may be a small place written upside down, the effect will be messed up.

So think about it, is there a better layout for the filter bar? After flipping through the available controls, it is found that the utility of CheckBox is very useful here (previously, for the use of CheckBox, only checking a check box), how to say that it is easy to use, because CheckBox has two states (selected and unchecked) just to meet the requirements, change the font color to blue when selected, change the direction and color of the icon, and reset to the starting style when unselected. And you can easily change the style by setting selector. You only need to manage the status of CheckBox.

For pop-up boxes, it's simple to customize a popWindow. However, it should be noted that because you need to change the transparency of the background color when the pop-up box pops up, and restore the transparency of the background color after the pop-up box disappears, you need to do some special processing. Here you plan to monitor popWindow changes to complete the relevant processing.

II. Code implementation and optimization

According to the above analysis, the layout design is as follows:

Three parts are set, and each part uses two selector set in CheckBox,CheckBox, namely android:drawableRight= "@ drawable/seletor_stock_arrow" and android:textColor= "@ drawable/selector_text_stock"

The settings are as follows:

Set the seletor_stock_arrow of the arrow style:

Set the selector_text_stock of the text style:

The implementation is simple, let's take a look at the effect:

The effect is good, the next step is to manage the status of each CheckBox in the code. Before doing this part, let's take care of popWindow, which needs to be used with CheckBox later.

PopWindow is very simple, inherit PopupWindow, then customize some styles and layouts, and put the code directly:

CommonFilterPop:

Package com.example.junweiliu.filterdemo.pop;import android.content.Context;import android.graphics.drawable.BitmapDrawable;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.ListView;import android.widget.PopupWindow;import com.example.junweiliu.filterdemo.R;import com.example.junweiliu.filterdemo.adapter.CommPopAdapter;import java.util.ArrayList;import java.util.List / * Created by junweiliu on 16-11-7. * / public class CommonFilterPop extends PopupWindow {/ * layout filler * / private LayoutInflater mInflater; / * context * / private Context mContext; / * only display data of type String * / private List mDatas = new ArrayList (); / * * pop overall View * / private View popupView; / * list * / private ListView contentLv of the selection condition / * * callback after filter selection * / AdapterView.OnItemClickListener itemClickListener; / * * adapter * / CommPopAdapter adapter; / * constructor * * @ param context * @ param mDatas * / public CommonFilterPop (Context context, List mDatas) {this.mInflater = LayoutInflater.from (context); this.mContext = context; this.mDatas = (mDatas); popupView = mInflater.inflate (R.layout.common_popup_list_dialog, null) / / set View this.setContentView (popupView); / / set the width and height of the pop-up form this.setWidth (ViewGroup.LayoutParams.MATCH_PARENT); this.setHeight (ViewGroup.LayoutParams.WRAP_CONTENT); / / initialize control initPopView (); this.setFocusable (true); this.setTouchable (true); this.setOutsideTouchable (true); this.setBackgroundDrawable (new BitmapDrawable ()); / / you can set / / this.setAnimationStyle (R.style.PopupWindowAnimation); this.update () if you need animation } private void initPopView () {contentLv = (ListView) popupView.findViewById (R.id.lv_pop); adapter = new CommPopAdapter (mContext, mDatas); contentLv.setAdapter (adapter);} / * * listview Click event * * @ param itemClickListener * / public void setOnItemSelectedListener (AdapterView.OnItemClickListener itemClickListener) {if (null! = itemClickListener & & null! = contentLv) {contentLv.setOnItemClickListener (itemClickListener);}

Adapter CommPopAdapter:

Package com.example.junweiliu.filterdemo.adapter;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;import com.example.junweiliu.filterdemo.R;import java.util.ArrayList;import java.util.List;/** * Created by junweiliu on 16-11-7. * / public class CommPopAdapter extends BaseAdapter {/ * * filter data * / private List mDatas = new ArrayList () / * layout loader * / private LayoutInflater mInflater; public CommPopAdapter (Context context, List mDatas) {this.mDatas = mDatas; mInflater = LayoutInflater.from (context);} @ Override public int getCount () {return mDatas.size ();} @ Override public Object getItem (int I) {return mDatas.get (I);} @ Override public long getItemId (int I) {return I;} @ Override public View getView (int I, View convertView, ViewGroup viewGroup) {ViewHolder viewHolder = null If (convertView = = null) {viewHolder = new ViewHolder (); convertView = mInflater.inflate (R.layout.common_popup_list_item, null); viewHolder.mTitleTv = (TextView) convertView.findViewById (R.id.tv_common_listpop_title); convertView.setTag (viewHolder);} else {viewHolder = (ViewHolder) convertView.getTag ();} viewHolder.mTitleTv.setText (mDatas.get (I)); return convertView } / * vh * / public class ViewHolder {/ * filter text tv * / TextView mTitleTv;}}

Related XML files:

Pop layout file common_popup_list_dialog:

Layout common_popup_list_item in the adapter:

The notes are very comprehensive and simple, so there is no more explanation.

The next step is to call popWindow, where it is better to call this popWinow, because you want to write a general filter bar, so extract these common parts and put them into BaseActivity. The Activity you need to use inherits BaseActivity directly, which is convenient for later use.

Create a BaseActivity and process the popWindow in it, as follows

BaseActivity:

Package com.example.junweiliu.filterdemo;import android.app.Activity;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.WindowManager;import android.widget.AdapterView;import android.widget.PopupWindow;import com.example.junweiliu.filterdemo.pop.CommonFilterPop;import java.util.List;/** * Created by junweiliu on 16-11-7. * / public class BaseActivity extends AppCompatActivity {/ * filter pop * / private CommonFilterPop mPopupWindow / * current context instance * / protected Activity activity; @ Override protected void onCreate (@ Nullable Bundle savedInstanceState) {super.onCreate (savedInstanceState); this.activity = this;} / * list Select popupWindow * * @ param parentView parent View * @ param itemTexts list item text collection * @ param itemClickListener list item Click event * / public void showFilterPopupWindow (View parentView, List itemTexts, AdapterView.OnItemClickListener itemClickListener, CustomerDismissListener dismissListener) {showFilterPopupWindow (parentView, itemTexts, itemClickListener, dismissListener, 0) } / * list Select popupWindow * * @ param parentView parent View * @ param itemTexts list item text collection * @ param itemClickListener list item Click event * @ param alpha background Transparency * / public void showFilterPopupWindow (View parentView, List itemTexts, AdapterView.OnItemClickListener itemClickListener, CustomerDismissListener dismissListener, float alpha) {/ / determine whether if (mPopupWindow! = null & & mPopupWindow.isShowing ()) {mPopupWindow.dismiss (); mPopupWindow = null is currently displayed } mPopupWindow = new CommonFilterPop (activity, itemTexts); mPopupWindow.setOnDismissListener (dismissListener); / / bind filter click event mPopupWindow.setOnItemSelectedListener (itemClickListener); / / if transparency is set to 0, the default setting is 0.6f if (0 = = alpha) {alpha = 0.6f;} / / set background transparency WindowManager.LayoutParams lp = activity.getWindow (). GetAttributes (); lp.alpha = alpha; activity.getWindow (). SetAttributes (lp) / / display pop mPopupWindow.showAsDropDown (parentView);} / * * Custom OnDismissListener * / public class CustomerDismissListener implements Popup_Window.OnDismissListener {@ Override public void onDismiss () {/ / reset background color transparency WindowManager.LayoutParams lp = activity.getWindow () .getAttributes (); lp.alpha = 1.0f; activity.getWindow () .setAttributes (lp) when pop disappears }} / * hide pop * / public void hidePopListView () {/ / determine whether it is currently displayed. If so, dismiss if (mPopupWindow! = null & & mPopupWindow.isShowing ()) {mPopupWindow.dismiss (); mPopupWindow = null;}

The display of popWindow disappears in BaseActivity, the transparency of the background is changed when the popWindow is created, and the CustomerDismissListener is rewritten to restore the transparency of the background when the popWindow disappears.

After you get rid of popWindow, use it in combination with CheckBox. It should look like this when used:

/ / cb1 operation cb1.setOnCheckedChangeListener (new CompoundButton.OnCheckedChangeListener () {@ Override public void onCheckedChanged (CompoundButton compoundButton, boolean b) {/ / set other cb to unselected, set yourself to cb1.setChecked (true); cb2.setChecked (false); cb3.setChecked (false); showFilterPopupWindow (showView, showMes1, new AdapterView.OnItemClickListener () {@ Override public void onItemClick (AdapterView adapterView, View view, int I, long l) {cb1.setText (showMes1.get (position)) }, new CustomerDismissListener () {@ Override public void onDismiss () {super.onDismiss (); / / when disappearing, you need to set the current cb to unchecked cb1.setChecked (false);}});}}); / / cb2 operation cb2.setOnCheckedChangeListener (new CompoundButton.OnCheckedChangeListener () {@ Override public void onCheckedChanged (CompoundButton compoundButton, boolean b) {/ / set other cb to unchecked, and set yourself to select cb2.setChecked (true) Cb1.setChecked (false); cb3.setChecked (false); showFilterPopupWindow (showView, showMes2, new AdapterView.OnItemClickListener () {@ Override public void onItemClick (AdapterView adapterView, View view, int I, long l) {cb2.setText (showMes1.get (position));}}, new CustomerDismissListener () {@ Override public void onDismiss () {super.onDismiss (); / / when disappearing, you need to set the current cb to unselected cb2.setChecked (false);}}) / / cb3 operation cb3.setOnCheckedChangeListener (new CompoundButton.OnCheckedChangeListener () {@ Override public void onCheckedChanged (CompoundButton compoundButton, boolean b) {/ / set other cb to unselected, set yourself to cb3.setChecked (true); cb1.setChecked (false); cb2.setChecked (false); showFilterPopupWindow (showView, showMes3, new AdapterView.OnItemClickListener () {@ Override public void onItemClick (AdapterView adapterView, View view, int I, long l) {cb3.setText (showMes3.get (position)) }, new CustomerDismissListener () {@ Override public void onDismiss () {super.onDismiss (); / / when disappearing, you need to set the current cb to unchecked cb3.setChecked (false);});}})

There are many repetitive parts, for example, in the onDismiss method, the current cb is set to unchecked, and the selected state is initialized, so there is too much code redundancy, so wrap it up and encapsulate a method in BaseActivity.

/ * Tab filter bar toggles * * @ param isChecked selected status * @ param showView displays pop and layout * @ param showMes display selected data * @ param itemClickListener Click callback * @ param tabs all cb (need to enter several, cb1,cb2....) * / public void filterTabToggle (boolean isChecked, View showView, List showMes, AdapterView.OnItemClickListener itemClickListener, final CheckBox... Tabs) {if (isChecked) {if (tabs.length adapterView, View view, int position, long l) {hidePopListView (); mTimeCb.setText (mTimeStr.get (position));}}, mTimeCb, mPlaceCb, mTypeCb);}})

Finally, post the complete MainActivity and BaseActivity.

MainActivity:

Package com.example.junweiliu.filterdemo;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.CheckBox;import android.widget.CompoundButton;import android.widget.LinearLayout;import com.example.junweiliu.filterdemo.bean.PlaceBean;import com.example.junweiliu.filterdemo.bean.TimeBean;import java.util.ArrayList;import java.util.List;public class MainActivity extends BaseActivity {/ * Show the data source of the city * / List mPopBeens = new ArrayList () / * * data of display type * / List mTypes = new ArrayList (); / * * data of display time * / List mTimes = new ArrayList (); / * * display time str collection * / List mTimeStr = new ArrayList (); / * * filter region as a whole * / LinearLayout mPlaceAll; / * * filter city cb * / CheckBox mPlaceCb; / * * filter type as a whole * / LinearLayout mTypeAll / * overall filter type * / CheckBox mTypeCb; / * overall screening time * / LinearLayout mTimeAll; / * overall screening time * / CheckBox mTimeCb; @ Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); initDate (); initView () } / * initialization data * / private void initDate () {/ / initialize city PlaceBean placeBean1 = new PlaceBean ("Tianjin"); PlaceBean placeBean2 = new PlaceBean ("Beijing"); PlaceBean placeBean3 = new PlaceBean ("Shanghai"); PlaceBean placeBean4 = new PlaceBean ("Shenzhen"); PlaceBean placeBean5 = new PlaceBean ("Sichuan"); PlaceBean placeBean6 = new PlaceBean ("Hangzhou"); PlaceBean placeBean7 = new PlaceBean ("Suzhou"); mPopBeens.add (placeBean1); mPopBeens.add (placeBean2) MPopBeens.add (placeBean3); mPopBeens.add (placeBean4); mPopBeens.add (placeBean5); mPopBeens.add (placeBean6); mPopBeens.add (placeBean7); / / initialization type mTypes.add ("food"); mTypes.add ("movie"); mTypes.add ("cosmetics"); mTypes.add ("clothes"); mTypes.add ("toy"); mTypes.add ("electrical appliances"); mTypes.add ("decoration"); mTypes.add ("supermarket") / / initialization time TimeBean timeBean1 = new TimeBean ("within 1 day", "go to play"); TimeBean timeBean2 = new TimeBean ("within 3 days", "go shopping"); TimeBean timeBean3 = new TimeBean ("within 10 days", "travel"); TimeBean timeBean4 = new TimeBean ("within 30 days", "to make money"); mTimes.add (timeBean1); mTimes.add (timeBean2); mTimes.add (timeBean3); mTimes.add (timeBean4) / / for (TimeBean bean: mTimes) {mTimeStr.add (bean.getTimeStr ());}} / * initialization control * / private void initView () {mPlaceAll = (LinearLayout) findViewById (R.id.ll_place_tab); mPlaceCb = (CheckBox) findViewById (R.id.cb_place); mTypeAll = (LinearLayout) findViewById (R.id.ll_type); mTypeCb = (CheckBox) findViewById (R.id.cb_type) MTimeAll = (LinearLayout) findViewById (R.id.ll_time); mTimeCb = (CheckBox) findViewById (R.id.cb_time); / / Click to select the overall mPlaceAll.setOnClickListener of the city (new View.OnClickListener () {@ Override public void onClick (View view) {if (mPlaceCb.isChecked ()) mPlaceCb.setChecked (false); else mPlaceCb.setChecked (true);}}) / / Click to select the overall type mTypeAll.setOnClickListener (new View.OnClickListener () {@ Override public void onClick (View view) {if (mTypeCb.isChecked ()) mTypeCb.setChecked (false); else mTypeCb.setChecked (true);}}); / / Click to select the overall mTimeAll.setOnClickListener (new View.OnClickListener () {@ Override public void onClick (View view) {if (mTimeCb.isChecked () mTimeCb.setChecked (false); else mTimeCb.setChecked (true);}})) / / Select city cb mPlaceCb.setOnCheckedChangeListener (new CompoundButton.OnCheckedChangeListener () {@ Override public void onCheckedChanged (CompoundButton compoundButton, boolean isChecked) {filterTabToggleT (isChecked, mPlaceAll, mPopBeens, new AdapterView.OnItemClickListener () {@ Override public void onItemClick (AdapterView adapterView, View view, int position, long l) {hidePopListView (); mPlaceCb.setText (mPopBeens.get (position). GetFilterStr ());}, mPlaceCb, mTypeCb, mTimeCb);}}) / / Select type cb mTypeCb.setOnCheckedChangeListener (new CompoundButton.OnCheckedChangeListener () {@ Override public void onCheckedChanged (CompoundButton compoundButton, boolean isChecked) {filterTabToggle (isChecked, mTypeAll, mTypes, new AdapterView.OnItemClickListener () {@ Override public void onItemClick (AdapterView adapterView, View view, int position, long l) {hidePopListView (); mTypeCb.setText (mTypes.get (position));}, mTypeCb, mPlaceCb, mTimeCb);}}) / / Select cb mTimeCb.setOnCheckedChangeListener (new CompoundButton.OnCheckedChangeListener () {@ Override public void onCheckedChanged (CompoundButton compoundButton, boolean isChecked) {filterTabToggle (isChecked, mTimeAll, mTimeStr, new AdapterView.OnItemClickListener () {@ Override public void onItemClick (AdapterView adapterView, View view, int position, long l) {hidePopListView (); mTimeCb.setText (mTimeStr.get (position));}, mTimeCb, mPlaceCb, mTypeCb);}});}})

BaseActivity:

Package com.example.junweiliu.filterdemo;import android.app.Activity;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.WindowManager;import android.widget.AdapterView;import android.widget.CheckBox;import android.widget.PopupWindow;import com.example.junweiliu.filterdemo.bean.BaseFilter;import com.example.junweiliu.filterdemo.pop.CommonFilterPop;import java.util.ArrayList;import java.util.List / * Created by junweiliu on 16-11-7. * / public class BaseActivity extends AppCompatActivity {/ * filter pop * / private CommonFilterPop mPopupWindow; / * current context instance * / protected Activity activity; @ Override protected void onCreate (@ Nullable Bundle savedInstanceState) {super.onCreate (savedInstanceState); this.activity = this } / * list Select popupWindow * * @ param parentView parent View * @ param itemTexts list item text collection * @ param itemClickListener list item Click event * / public void showFilterPopupWindow (View parentView, List itemTexts, AdapterView.OnItemClickListener itemClickListener, CustomerDismissListener dismissListener) {showFilterPopupWindow (parentView, itemTexts, itemClickListener, dismissListener, 0) } / * list Select popupWindow * * @ param parentView parent View * @ param itemTexts list item text collection * @ param itemClickListener list item Click event * / public void showFilterPopupWindow (View parentView, List itemTexts, AdapterView.OnItemClickListener itemClickListener, CustomerDismissListener dismissListener, float alpha) {/ / determine whether if (mPopupWindow! = null & & mPopupWindow.isShowing ()) {mPopupWindow.dismiss (); mPopupWindow = null;} mPopupWindow = new CommonFilterPop (activity, itemTexts); mPopupWindow.setOnDismissListener (dismissListener) / / bind filter click event mPopupWindow.setOnItemSelectedListener (itemClickListener); / / if transparency is set to 0, default setting is 0.6f if (0 = = alpha) {alpha = 0.6f;} / / set background transparency WindowManager.LayoutParams lp = activity.getWindow (). GetAttributes (); lp.alpha = alpha; activity.getWindow (). SetAttributes (lp); / / display pop mPopupWindow.showAsDropDown (parentView) } / * Tab filter bar toggles * * @ param isChecked selected status * @ param showView display pop and layout * @ param showMes display selected data * @ param itemClickListener Click callback * @ param tabs all cb (need to enter several, cb1,cb2....) * / public void filterTabToggle (boolean isChecked, View showView, List showMes, AdapterView.OnItemClickListener itemClickListener, final CheckBox... Tabs) {if (isChecked) {if (tabs.length)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.