下拉筛选控件

发布时间:2019-06-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了下拉筛选控件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

简单实现效果类似如上的美团筛选功能。
实现思路如下:根据外层传递进来的list创建顶部下拉条目的个数,并设置按钮互斥,选中样式。下面弹出的筛选列表通过addView的方式添加,增加里面布局的灵活性。可以添加一些筛选列表的弹出动画以增加交互

简单实现代码如下:
单个选中控件的实现:

import andROId.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 自定义的筛选器单个view,自处理选中效果,抛出点击事件处理
 * Created by ZRP on 2015/9/19.
 */
public class FilterTabView extends LinearLayout implements View.OnClickListener {

    PRivate View view;
    private TextView text;

    private boolean isChecked;

    public FilterTabView(Context context) {
        suPEr(context);
        inIT();
    }

    public FilterTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        View inflate = LayoutInflater.From(getContext()).inflate(R.layout.custom_filter_tabview, this);
        inflate.setOnClickListener(this);

        view = inflate.findViewById(R.id.view);
        text = (TextView) inflate.findViewById(R.id.text);
    }

    public TextView getText() {
        return text;
    }

    public void setText(String txt) {
        text.setText(txt);
    }

    public void setChecked(boolean isChecked) {
        this.isChecked = isChecked;
        view.setSelected(isChecked);
    }

    public boolean isChecked() {
        return isChecked;
    }

    private OnClickListener clickListener;

    public void setOnClickListener(OnClickListener clickListener) {
        this.clickListener = clickListener;
    }

    @override
    public void onClick(View view) {
        if (clickListener != null) clickListener.onClick(this);
    }

    public interface OnClickListener {
        void onClick(FilterTabView tabView);
    }
}

以上该view的布局代码如下:

<?XMl version="1.0" encoding="utf-8"?>
<LinearLayout >"http://schemas.android.COM/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/filter_tab_selector"
        android:gravity="center">

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="工作地点"
            android:textColor="#333333"
            android:textSize="13sp" />

        <ImageView
            android:id="@+id/image"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_marginLeft="13dp"
            android:src="@drawable/filter_image" />
    </LinearLayout>
</LinearLayout>

整条筛选控件的实现:

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import java.util.ArrayList;

/**
 * 筛选器,自处理选中效果切换,抛出子view点击事件处理
 * Created by ZRP on 2015/9/19.
 */
public class ExpandTabView extends LinearLayout implements FilterTabView.OnClickListener {

    private FilterTabView selectedView;
    private LinearLayout tab_container, container, view_container;

    private ArrayList<FilterTabView> tabViews = new ArrayList<FilterTabView>();//存储动态创建的tab
    private int position = -1;//当前点击的view为list中的position

    public ExpandTabView(Context context) {
        super(context);
        init();
    }

    public ExpandTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        View inflate = LayoutInflater.from(getContext()).inflate(R.layout.custom_expand_tabview, this);
        tab_container = (LinearLayout) inflate.findViewById(R.id.tab_container);
        container = (LinearLayout) inflate.findViewById(R.id.container);
        view_container = (LinearLayout) inflate.findViewById(R.id.view_container);
        container.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                closeExpand();// 清空所有选中效果,并重置各状态值
            }
        });
    }

    public void setNameList(ArrayList<String> nameList) {
        if (nameList == null) return;

        LinearLayout.LayoutParams tabParams = new LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT, 1);
        LinearLayout.LayoutParams lineParams = new LayoutParams(1, ViewGroup.LayoutParams.MATCH_PARENT);
        for (int i = 0; i < nameList.size(); i++) {
            // 创建tab
            FilterTabView tabView = new FilterTabView(getContext());
            tabView.setText(nameList.get(i));
            tabView.setOnClickListener(this);
            tabViews.add(tabView);
            tabView.setLayoutParams(tabParams);
            tab_container.addView(tabView);

            // 创建line
            if (i < nameList.size() - 1) {
                View line = new View(getContext());
                line.setBackgroundColor(getResources().getColor(R.color.fengexian_gray));
                line.setLayoutParams(lineParams);
                tab_container.addView(line);
            }
        }
    }

    /**
     * 添加expand展现布局
     *
     * @param expandView
     */
    public void setExpandView(View expandView) {
        if (expandView == null) return;
        container.setVisibility(View.VISIBLE);
        view_container.removeAllViews();
        view_container.addView(expandView);
    }

    /**
     * 清除expand展现布局并让其消失
     */
    private void clearExpandView() {
        container.setVisibility(View.GONE);
        view_container.removeAllViews();
    }

    /**
     * 外部调用,清除展现的布局,并取消所有tab的选中效果
     */
    public void closeExpand() {
        position = -1;
        selectedView = null;
        clearExpandView();
        if (tabViews == null || tabViews.size() == 0) return;
        for (int i = 0; i < tabViews.size(); i++) {
            tabViews.get(i).setChecked(false);
        }
    }

    @Override
    public void onClick(FilterTabView tabView) {
        FilterTabView[] views = tabViews.toArray(new FilterTabView[tabViews.size()]);

        // 选中的position
        for (int i = 0; i < views.length; i++) {
            if (tabView == views[i]) position = i;
        }

        if (selectedView == null) {
            tabView.setChecked(true);
            selectedView = tabView;
            if (listener != null) listener.onSelected(tabView, position, true);
        } else {
            if (selectedView == tabView) {
                selectedView.setChecked(false);
                clearExpandView();
                selectedView = null;
                if (listener != null) listener.onSelected(tabView, position, false);
            } else {
                for (int i = 0; i < views.length; i++) {
                    views[i].setChecked(views[i] == tabView);
                }
                clearExpandView();
                selectedView = tabView;
                if (listener != null) listener.onSelected(tabView, position, true);
            }
        }
    }

    private Onfilterselected listener;

    /**
     * 设置顶部tab选中回调
     *
     * @param listener
     */
    public void setOnFilterSelected(OnFilterSelected listener) {
        this.listener = listener;
    }

    public interface OnFilterSelected {

        /**
         * tab选中回调
         *
         * @param tabView     选中的tab
         * @param position    选中tab的position
         * @param singleCheck 是否为单次选中,为true的时候调出选择view,为false的时候隐藏选择view
         */
        void onSelected(FilterTabView tabView, int position, boolean singleCheck);
    }
}

上面该view的布局如下:

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

    <LinearLayout
        android:id="@+id/tab_container"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/divider_color" />

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#26000000"
        android:orientation="vertical"
        android:visibility="gone">

        <LinearLayout
            android:id="@+id/view_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:orientation="vertical" />
    </LinearLayout>

</LinearLayout>

使用的时候代码如下:

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

    expandTabView = (ExpandTabView) findViewById(R.id.expand_tabview);
    expandTabView.setOnFilterSelected(this);

    ArrayList<String> nameList = new ArrayList<>();
    nameList.add("性别");
    nameList.add("地点");
    expandTabView.setNameList(nameList);
}

@Override
    public void onSelected(FilterTabView tabView, int position, boolean singleCheck) {
        if (singleCheck) {
            if (position == 0) {
                expandTabView.setExpandView(genderFilterView());
            } else {
                expandTabView.setExpandView(buildingFilterView());
            }
        }
    }

如上。

源代码地址

想想自己的代码这么渣,顿时好方...

脚本宝典总结

以上是脚本宝典为你收集整理的下拉筛选控件全部内容,希望文章能够帮你解决下拉筛选控件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。