結合FlexboxLayout實現標籤選擇功能

之前特意研究過FlexboxLayout的用法(http://blog.csdn.net/qq_35366908/article/details/64920172介紹了FlexBoxLayout的基本使用),知道了他的大概使用場景,最近項目中遇到了需要實現篩選標籤查詢數據的功能,效果圖如圖

          



多選、單選以及數據回顯,核心類代碼

package com.liulije.myfilterdemo;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.google.android.flexbox.FlexboxLayout;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class SearchActivity extends AppCompatActivity {
    private static final String TAG = "SearchActivity";
    @BindView(R.id.fbl_content)
    FlexboxLayout fblContent;
    @BindView(R.id.ll_status)
    LinearLayout llStatus;
    @BindView(R.id.tv_sure_selected)
    TextView tvSureSelected;
    //可選選項集合
    private List mSelectedList = new ArrayList<>();

    //單選  false 多選
    private boolean singleSelected = false;

    private StringBuilder sb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_search);
        ButterKnife.bind(this);
        initSelected();
        addSelectedView();
        sb = new StringBuilder();
    }


    @OnClick(R.id.tv_sure_selected)
    public void onClick() {
        sb.setLength(0);
        for (SelectedBean selectedBean : mSelectedList) {
            if (selectedBean.isSelected()) {
                sb.append(selectedBean.getName()).append(",");
                Log.e(TAG, "onClick: selected" + selectedBean.getName());
            }

        }
        Intent intent = new Intent();
        if (sb != null && sb.length() > 0) {
            intent.putExtra("RESULT", sb.substring(0, sb.length() - 1).toString());
            setResult(RESULT_OK, intent);
        } else {
            sb.append("全部").append(",");
            intent.putExtra("RESULT", sb.substring(0, sb.length() - 1).toString());
            setResult(RESULT_OK, intent);
        }

        finish();

    }

    /**
     * 展示選項
     */
    private void addSelectedView() {
        fblContent.removeAllViews();
        for (int i = 0; i < mSelectedList.size(); i++) {
            String status = mSelectedList.get(i).getName();
            TextView textView = createBaseFlexItemTextView(mSelectedList.get(i));
            textView.setLayoutParams(createDefaultLayoutParams());
            textView.setText(status);
            textView.setTextSize(13);
            textView.setTag(i);
            fblContent.addView(textView);
        }
    }

    private TextView createBaseFlexItemTextView(SelectedBean selectedBean) {
        final TextView textView = new TextView(this);
        textView.setText(selectedBean.getName());
        textView.setPadding(30, 8, 30, 8);
        textView.setGravity(Gravity.CENTER);
        if (selectedBean.isSelected()) {
            textView.setTextColor(Color.WHITE);
            textView.setBackgroundResource(R.drawable.selected_textbg);
        } else {
            textView.setTextColor(Color.parseColor("#535353"));
            textView.setBackgroundResource(R.drawable.unselected_textbg);
        }
        if (singleSelected) {
            dealSingle(textView, selectedBean);
        } else {
            selectedMore(textView, selectedBean);
        }
        return textView;
    }

    /**
     * 多選
     *
     * @param mTextView
     * @param bean
     */
    private void selectedMore(final TextView mTextView, final SelectedBean bean) {
        mTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (bean.isSelected()) {
                    bean.setSelected(false);
                    mTextView.setTextColor(Color.parseColor("#535353"));
                    mTextView.setBackgroundResource(R.drawable.unselected_textbg);
                } else {
                    if (bean.getId() != 0) {//點擊的不是全部
                        setOtherStatus(0,false);
                    } else {
                        for (int i = 0; i < mSelectedList.size(); i++) {
                            SelectedBean selectedBean = mSelectedList.get(i);
                            if (selectedBean.getId() != 0) {
                                setOtherStatus(i,false);
                            }
                        }
                    }
                    bean.setSelected(true);
                    mTextView.setTextColor(Color.WHITE);
                    mTextView.setBackgroundResource(R.drawable.selected_textbg);

                }
            }
        });
    }

    /**
     * 整理其它數據的選中狀態
     *
     * @param i
     */
    private void setOtherStatus(int i,boolean selected) {
        mSelectedList.get(i).setSelected(selected);
        TextView textView = (TextView) fblContent.getChildAt(i);
        textView.setTextColor(Color.parseColor("#535353"));
        textView.setBackgroundResource(R.drawable.unselected_textbg);
    }

    /**
     * 單選處理數據
     *
     * @param mTextView
     */
    private void dealSingle(final TextView mTextView, final SelectedBean bean) {
        mTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mTextView.setTextColor(Color.parseColor("#535353"));
                mTextView.setBackgroundResource(R.drawable.unselected_textbg);
                int tag = (int) mTextView.getTag();
                if (bean.isSelected()) {
                    bean.setSelected(false);
                } else {
                    bean.setSelected(true);
                    mTextView.setTextColor(Color.WHITE);
                    mTextView.setBackgroundResource(R.drawable.selected_textbg);
                    for (int j = 0; j < fblContent.getChildCount(); j++) {
                        TextView mAll = (TextView) fblContent.getChildAt(j);
                        if ((int) mAll.getTag() != tag) {
                            mSelectedList.get(j).setSelected(false);
                            mAll.setTextColor(Color.parseColor("#535353"));
                            mAll.setBackgroundResource(R.drawable.unselected_textbg);
                        }
                    }
                }
            }
        });
    }

    private ViewGroup.LayoutParams createDefaultLayoutParams() {
        FlexboxLayout.LayoutParams lp = new FlexboxLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        //它假設每個子項的 layout_flexGrow 屬性的值設爲 1,那麼剩餘空間將均勻分配到每個子項。默認爲0
//        lp.flexGrow = 1;
        lp.setMargins(0, 40, 40, 0);
//        lp.setMargins(10, 5, 10, 5);
        return lp;
    }

    /**
     * 初始化選項
     */
    private void initSelected() {
        String[] StatusArray = getResources().getStringArray(R.array.selected_type);
        for (int i = 0; i < StatusArray.length; i++) {
            SelectedBean bean = new SelectedBean(StatusArray[i], false, i);
            if (i == 0) {//默認選中第一個
                bean.setSelected(true);
            } else {
                bean.setSelected(false);
            }
            mSelectedList.add(bean);
        }
    }

demo地址:https://github.com/LiuL1J1e/MyFilterDemo


寫的比較low不過功能實現了,也是記錄一下這段代碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章