Android 自定義支持快速搜索篩選的選擇控制項(一)

来源:https://www.cnblogs.com/whieenz/archive/2018/04/23/8919177.html
-Advertisement-
Play Games

Android 自定義支持快速搜索篩選的選擇控制項 項目中遇到選擇控制項選項過多,需要快速查找匹配的情況。 做了簡單的Demo,效果圖如下: 源碼地址: "https://github.com/whieenz/SearchSelect" 這個控制項是由Dialog+SearchView+ListView實 ...


Android 自定義支持快速搜索篩選的選擇控制項

項目中遇到選擇控制項選項過多,需要快速查找匹配的情況。
做了簡單的Demo,效果圖如下:

源碼地址:https://github.com/whieenz/SearchSelect

image

這個控制項是由Dialog+SearchView+ListView實現的。Dialog用來承載選擇控制項,SearchView實現輸入,ListView展示結果。設計概要圖如下:

image

一、自定義Dialog

Dialog佈局文件

<?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="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/dialog_bg"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_centerVertical="true"
                android:textSize="18sp"
                android:textColor="#000000"
                android:id="@+id/tv_dialog_select_title"/>
            <ImageButton
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:padding="8dp"
                android:layout_marginRight="10dp"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:scaleType="centerInside"
                android:background="@color/transparent"
                android:src="@drawable/im_search_back"
                android:id="@+id/btn_dialog_select_search"/>
        </RelativeLayout>
        <com.whieenz.searchselect.DialogSearchView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/searchView"
            android:visibility="gone"/>
        <ListView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:id="@+id/listview"
            android:layout_gravity="center_horizontal" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:gravity="center"
        android:background="@color/transparent">
        <ImageButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/imb_dialog_select_close"
            android:scaleType="centerInside"
            android:src="@drawable/dialog_close"
            android:background="@color/transparent"/>
    </LinearLayout>

</LinearLayout>

Dialog Java文件

package com.whieenz.searchselect;

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.ImageButton;
import android.widget.ListView;
import android.widget.TextView;

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


/**
 * Created by whieenz on 2017/7/18.
 */

public class SerachSelectDialog extends Dialog {

    public SerachSelectDialog(Context context, int themeResId) {
        super(context, themeResId);
    }

    /**
     * 設置 Dialog的大小
     * @param x 寬比例
     * @param y  高比例
     */
    public  void setDialogWindowAttr(double x, double y, Activity activity){
        if (x<0||x>1||y<0||y>1){
            return;
        }
        Window window = this.getWindow();
        WindowManager.LayoutParams lp = window.getAttributes();
        WindowManager manager = activity.getWindowManager();
        DisplayMetrics outMetrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(outMetrics);
        int width = outMetrics.widthPixels;
        int height = outMetrics.heightPixels;
        lp.gravity = Gravity.CENTER;
        lp.width = (int) (width * x);
        lp.height = (int) (height * y);
        this.getWindow().setAttributes(lp);
    }


    public static class Builder {
        private String title;
        private View contentView;
        private String positiveButtonText;
        private String negativeButtonText;
        private String singleButtonText;
        private List<String> listData;
        private View.OnClickListener positiveButtonClickListener;
        private View.OnClickListener negativeButtonClickListener;
        private View.OnClickListener singleButtonClickListener;

        private View layout;
        private Context context;
        private SerachSelectDialog dialog;
        private OnSelectedListiner selectedListiner;

        ListView listView;
        //SearchView searchView ;
        DialogSearchView searchView;
        ImageButton searchBtn;
        ImageButton closeBtn;
        TextView titleView;
        private boolean state = false;

        public Builder(Context context) {
            //這裡傳入自定義的style,直接影響此Dialog的顯示效果。style具體實現見style.xml
            this.context = context;
            dialog = new SerachSelectDialog(context,R.style.selectDialog);
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            layout = inflater.inflate(R.layout.dialog_select_search, null);
            listView = (ListView)layout.findViewById(R.id.listview);
            //searchView = (SearchView) layout.findViewById(R.id.searchView);
            searchView = (DialogSearchView) layout.findViewById(R.id.searchView);
            searchBtn = (ImageButton) layout.findViewById(R.id.btn_dialog_select_search);
            closeBtn = (ImageButton) layout.findViewById(R.id.imb_dialog_select_close);
            titleView = (TextView) layout.findViewById(R.id.tv_dialog_select_title);
            dialog.addContentView(layout, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        }

        public Builder setTitle(String title) {
            this.title = title;
            return this;
        }

        public Builder setContentView(View v) {
            this.contentView = v;
            return this;
        }

        public void setListData(List<String> listData) {
            this.listData = listData;
        }

        public Builder setPositiveButton(String positiveButtonText, View.OnClickListener listener) {
            this.positiveButtonText = positiveButtonText;
            this.positiveButtonClickListener = listener;
            return this;
        }

        public Builder setNegativeButton(String negativeButtonText, View.OnClickListener listener) {
            this.negativeButtonText = negativeButtonText;
            this.negativeButtonClickListener = listener;
            return this;
        }

        /**
         * 單按鈕對話框和雙按鈕對話框的公共部分在這裡設置
         */
        private SerachSelectDialog create() {
            titleView.setText(title);
            final SearchSelectAdapter sa = new SearchSelectAdapter(context,listData);
            listView.setAdapter(sa);
            listView.invalidate();
            searchBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (!state){
                        searchView.setVisibility(View.VISIBLE);
                        state = true;
                    }else {
                        searchView.setVisibility(View.GONE);
                        state = false;
                    }
                }
            });
            searchView.setDialogSearchViewListener(new DialogSearchView.DialogSearchViewListener() {

                @Override
                public boolean onQueryTextChange(String text) {
                    updateLayout(searchItem(text));
                    return false;
                }
            });
            closeBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            });
            dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
                @Override
                public void onDismiss(DialogInterface dialog) {

                }
            });

            listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    selectedListiner.onSelected(sa.getItem(position));
                    dialog.dismiss();
                }
            });
            dialog.setContentView(layout);
            //用戶可以點擊手機Back鍵取消對話框顯示
            dialog.setCancelable(true);
            //用戶不能通過點擊對話框之外的地方取消對話框顯示
            dialog.setCanceledOnTouchOutside(false);
            return  dialog;

        }
        public List<String> searchItem(String name) {
            ArrayList<String> mSearchList = new ArrayList<String>();
            for (int i = 0; i < listData.size(); i++) {
                int index = listData.get(i).indexOf(name);
                // 存在匹配的數據
                if (index != -1) {
                    mSearchList.add(listData.get(i));
                }
            }
            return mSearchList;
        }

        public void updateLayout(List<String> newList) {
            final SearchSelectAdapter sa = new SearchSelectAdapter(context,newList);
            listView.setAdapter(sa);
            listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    selectedListiner.onSelected(sa.getItem(position));
                    dialog.dismiss();
                }
            });
        }

        public void setSelectedListiner(SerachSelectDialog.Builder.OnSelectedListiner selectedListiner) {
            this.selectedListiner = selectedListiner;
        }

        public static abstract class OnSelectedListiner{
            public abstract void onSelected(String String);
        }

        public SerachSelectDialog show() {
            create();
            dialog.show();
            return dialog;
        }
    }
}

二、自定義SearchView

SearchView 佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="#ffffff"
    android:layout_height="50dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@drawable/search_layout_bg">
            <ImageButton
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:id="@+id/imb_search_search"
                android:layout_marginLeft="15dp"
                android:scaleType="centerInside"
                android:src="@drawable/im_search_gray"
                android:background="#F0F0F0" />
            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="15dp"
                android:id="@+id/et_search_text"
                android:layout_weight="1"
                android:lines="1"
                android:textSize="14sp"
                android:background="@null"
                android:hint="請輸入搜索內容"/>

            <ImageButton
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:padding="12.5dp"
                android:id="@+id/imb_search_clear"
                android:layout_marginRight="20dp"
                android:src="@drawable/im_x"
                android:visibility="gone"
                android:scaleType="centerInside"
                android:background="#F0F0F0" />
        </LinearLayout>

</LinearLayout>

SearchView Java代碼

package com.whieenz.searchselect;

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;


/**
 * Created by whieenz on 2017/7/19.
 */

public class DialogSearchView extends LinearLayout implements View.OnClickListener {

    /**
     * 輸入框 
     */
    private EditText etInput;

    /**
     * 刪除鍵 
     */
    private ImageView ivDelete;

    /**
     * 上下文對象 
     */
    private Context mContext;

    /**
     * 搜索回調介面 
     */
    private DialogSearchViewListener mListener;

    /**
     * 設置搜索回調介面 
     *
     * @param listener 監聽者 
     */
    public void setDialogSearchViewListener(DialogSearchViewListener listener) {
        mListener = listener;
    }

    public DialogSearchView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        LayoutInflater.from(context).inflate(R.layout.view_search_layout, this);
        initViews();
    }

    private void initViews() {
        etInput = (EditText) findViewById(R.id.et_search_text);
        ivDelete = (ImageView) findViewById(R.id.imb_search_clear);
        ivDelete.setOnClickListener(this);
        etInput.addTextChangedListener(new EditChangedListener());
        etInput.setOnClickListener(this);

    }

    private class EditChangedListener implements TextWatcher {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i2, int i3) {

        }
        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i2, int i3) {
            if (!"".equals(charSequence.toString())) {
                ivDelete.setVisibility(VISIBLE);
                //更新autoComplete數據
                if (mListener != null) {
                    mListener.onQueryTextChange(charSequence + "");
                }
            } else {
                ivDelete.setVisibility(GONE);
            }

        }
        @Override
        public void afterTextChanged(Editable editable) {
        }
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.imb_search_clear:
                etInput.setText("");
                if (mListener != null) {
                    mListener.onQueryTextChange("");
                }
                ivDelete.setVisibility(GONE);
                break;
        }
    }
    /**
     * search view回調方法 
     */
    public interface DialogSearchViewListener {
        boolean onQueryTextChange(String text);
    }
}  

自定義ListView Adapter

listItem 佈局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:paddingLeft="10dp"
    android:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/tv_select_info"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="20sp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:lines="1"/>

</RelativeLayout>

Adapter 文件

package com.whieenz.searchselect;

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 java.util.List;


public class SearchSelectAdapter extends BaseAdapter {
    private List<String> Datas;
    private Context context;
    private LayoutInflater inflater;

    public SearchSelectAdapter(Context ctx, List<String> datas){
        this.context = ctx;
        this.Datas = datas;
        this.inflater = LayoutInflater.from(ctx);
    }
    @Override
    public int getCount() {
        return Datas.size();
    }

    @Override
    public String getItem(int i) {
        return Datas.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder holder = null;
        if (view == null ) {
            view = inflater.inflate(R.layout.list_cell_select_single, null);
            holder = new ViewHolder(view);
            view.setTag(holder);
        } else {
            holder = (ViewHolder) view.getTag();
        }

        holder.info.setText(Datas.get(i));
        return view;
    }


    static class ViewHolder {
        TextView info;
        public ViewHolder(View view) {
            info = view.findViewById(R.id.tv_select_info);
        }
    }

}

MainActivity 實現

佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context="com.whieenz.searchselect.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="left"
            android:text="選擇結果:"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="#ff5c5c"
            android:id="@+id/tv_result" />
    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="#ffffff"
        android:background="@drawable/btn_bg"
        android:text="打開選擇器"
        android:onClick="doSelect"/>
</LinearLayout>

Java文件

package com.whieenz.searchselect;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {
    private List<String> mDatas;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = (TextView) findViewById(R.id.tv_result);
        initData();
    }

    public void doSelect(View view){
        SerachSelectDialog.Builder alert = new SerachSelectDialog.Builder(this);
        alert.setListData(mDatas);
        alert.setTitle("請選擇城市");
        alert.setSelectedListiner(new SerachSelectDialog.Builder.OnSelectedListiner() {
            @Override
            public void onSelected(String info) {
                textView.setText(info);
            }
        });
        SerachSelectDialog mDialog = alert.show();
        //設置Dialog 尺寸
        mDialog.setDialogWindowAttr(0.9,0.9,this);
    }
    /**
     * 初始化數據
     */
    private void initData(){
        mDatas = new ArrayList<>();
        String [] citys = {"武漢","北京","上海","深圳","蘭州","成都","天津"};
        for (int i = 0; i < 10; i++) {
            for (int j = 0; j < citys.length; j++) {
                mDatas.add(citys[j]+i);
            }
        }
    }
}

其他配置

Dialog style(樣式)

    <style name="selectDialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowNoTitle">true</item>//無標題
        <item name="android:windowBackground">@color/transparent</item>
    </style>

相關文章:Android自定義模糊匹配搜索控制項(二)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文由 網易雲 發佈。 本期高手問答(4月23日—4月28日),我們請來了桑文鋒老師和大家一起探討數據驅動方面的問題。桑老師基於他在百度的大數據工作,撰寫了《數據驅動:從方法到實踐》一書,它是從理論到實踐的全面且細緻的企業數據驅動指南。 詳解了大數據本質、理念與現狀,圍繞數據驅動四環節——採集、建模 ...
  • 問題一: 今天拿到一份有近百萬條數據的Excel要導到資料庫裡面,我先在本地(2014)用自帶Excel,然後生成腳本文件去伺服器(2008)上執行;文件SQL打開不了 解決方法: 用自帶的sqlcmd工具 第一步:Win+R 鍵入:cmd 命令,開啟命令行工具; 第二步:鍵入:cd C:\Prog ...
  • Oracle資料庫伺服器DG從庫重啟後,無法完成數據同步,具體報錯信息如下: 一、報錯信息 alter log報錯 二、錯誤原因分析 根據報錯信息可以看到通過tns連接logdb服務名存在問題,可通過排查監聽是否啟動,是否有防火牆限制等。 三、處理步驟 通過排查監聽和防火牆限制,發現沒有問題,主庫通 ...
  • 什麼是資料庫: 資料庫(database)是按照數據結構來組織、存儲和管理數據的倉庫,每個資料庫都有一個或多個不同的API用於創建、訪問、管理、搜索和複製所保存的數據。 什麼是mysql: mysql是關係型資料庫管理系統,可以更好的支持WEB應用。 關係型資料庫與非關係型資料庫: 關係型資料庫是通 ...
  • list類型是一個鏈表結構,主要功能有push,pop等。而且list是一個雙向鏈表,可以通過相關操作進行集合的頭部或者尾部添加,刪除元素。 lpush key string 在key對應的list的頭部添加字元串元素,返回1表示成功,0表示key存在且不是list類型 rpush key stri ...
  • [20180423]flashback tablespace與snapshot standby.txt--//預設建立表空間是打開flashback on,如果某個表空間flashback off,在dg啟動snapshot standby時註意,可能"回不來",--//通過測試說明問題.1.環境: ...
  • 首先是下載圖解 1、首先卸載centos7中自帶的mariadb rpm -qa|grep mariadb //查詢出來已安裝的mariadb rpm -e --nodeps 文件名 //卸載mariadb,文件名為上述命令查詢出來的文件 2、查看是否已經安裝了mysql rpm -qa | gre ...
  • 一,添加圖標 你的應用在iPhone主屏幕上的標準圖標(Icon.png)是57像素*57像素的正方形,PNG格式,不能有透明效果或者圖層,72DPI.除些之外,你還可以提供一個同樣格式的114像素*114像素的高解析度圖標([email protected]).當用戶的設備是Retina屏幕的時候,這個圖標就 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...