📜  如何在 Android 中实现自定义可搜索微调器?

📅  最后修改于: 2022-05-13 01:58:44.722000             🧑  作者: Mango

如何在 Android 中实现自定义可搜索微调器?

Android Spinner 是一个类似于下拉列表的视图,用于从选项列表中选择一个选项。它提供了一种从项目列表中选择一个项目的简单方法,当我们单击它时,它会显示所有值的下拉列表。 android spinner 的默认值将是当前选择的值,通过使用适配器,我们可以轻松地将项目绑定到 spinner 对象。在本文中,我们将在 Android Studio 中实现一个自定义的可搜索微调器,以便为用户提供更好的用户体验,并方便他们在项目列表中搜索和选择项目。可搜索微调器的优点:

  • 它提供了优于普通列表视图的优势,因为在这里用户可以直接搜索项目而不是滚动整个列表。
  • 搜索使用户的工作更轻松,因此可以将许多项目插入到单个列表中。

我们将在本文中构建什么?

在这里,我们将获取一个数组列表,然后将不同的项目插入到该列表中,然后使用对话框和适配器,我们将使该列表可搜索和可选择。下面是我们将在本文中构建的自定义可搜索微调器的示例视频。请注意,我们将使用Java语言来实现这个项目。

分步实施

步骤 1:创建一个新项目

  • 打开一个新项目。
  • 我们将使用Java语言开发 Empty Activity。保持所有其他选项不变。
  • 您可以在方便时更改项目的名称。
  • 将有两个名为 activity_main.xml 和 MainActivity 的默认文件。Java

如果您不知道如何在 Android Studio 中创建新项目,可以参考如何在 Android Studio 中创建/启动新项目?

第 2 步:在 drawable 中添加新的矢量资源

导航到可绘制 > 右键单击 > 新建 > 矢量资产,然后从剪贴画中选择以下下拉资产。

第 3 步:使用 activity_main.xml 文件

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件。下面是activity_main.xml文件的代码。

XML



 
  
    
 


XML

 


   
    
    
   
    
    
   
      
    
 


Java
package com.example.custom_searchable_spinner;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    // Initialize variable
    TextView textview;
    ArrayList arrayList;
    Dialog dialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // assign variable
        textview=findViewById(R.id.testView);
 
        // initialize array list
        arrayList=new ArrayList<>();
 
        // set value in array list
        arrayList.add("DSA Self Paced");
        arrayList.add("Complete Interview Prep");
        arrayList.add("Amazon SDE Test Series");
        arrayList.add("Compiler Design");
        arrayList.add("Git & Github");
        arrayList.add("Python foundation");
        arrayList.add("Operating systems");
        arrayList.add("Theory of Computation");
 
        textview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Initialize dialog
                dialog=new Dialog(MainActivity.this);
 
                // set custom dialog
                dialog.setContentView(R.layout.dialog_searchable_spinner);
 
                // set custom height and width
                dialog.getWindow().setLayout(650,800);
 
                // set transparent background
                dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
 
                // show dialog
                dialog.show();
 
                // Initialize and assign variable
                EditText editText=dialog.findViewById(R.id.edit_text);
                ListView listView=dialog.findViewById(R.id.list_view);
 
                // Initialize array adapter
                ArrayAdapter adapter=new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1,arrayList);
 
                // set adapter
                listView.setAdapter(adapter);
                editText.addTextChangedListener(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) {
                        adapter.getFilter().filter(s);
                    }
 
                    @Override
                    public void afterTextChanged(Editable s) {
 
                    }
                });
 
                listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView parent, View view, int position, long id) {
                        // when item selected from list
                        // set selected item on textView
                        textview.setText(adapter.getItem(position));
 
                        // Dismiss dialog
                        dialog.dismiss();
                    }
                });
            }
        });
    }
}



第四步:新建资源文件

导航到应用程序 > res > 布局 > 右键单击 > 新建 > 布局资源文件,然后将其命名为 dialog_searchable_spinner。

dialog_searchable_spinner.xml文件中使用以下代码

XML


 


   
    
    
   
    
    
   
      
    
 


第 5 步:使用 MainActivity。Java

转到MainActivity。 Java文件并参考以下代码。下面是MainActivity 的代码。 Java文件。代码中添加了注释以更详细地理解代码。

Java

package com.example.custom_searchable_spinner;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    // Initialize variable
    TextView textview;
    ArrayList arrayList;
    Dialog dialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // assign variable
        textview=findViewById(R.id.testView);
 
        // initialize array list
        arrayList=new ArrayList<>();
 
        // set value in array list
        arrayList.add("DSA Self Paced");
        arrayList.add("Complete Interview Prep");
        arrayList.add("Amazon SDE Test Series");
        arrayList.add("Compiler Design");
        arrayList.add("Git & Github");
        arrayList.add("Python foundation");
        arrayList.add("Operating systems");
        arrayList.add("Theory of Computation");
 
        textview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Initialize dialog
                dialog=new Dialog(MainActivity.this);
 
                // set custom dialog
                dialog.setContentView(R.layout.dialog_searchable_spinner);
 
                // set custom height and width
                dialog.getWindow().setLayout(650,800);
 
                // set transparent background
                dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
 
                // show dialog
                dialog.show();
 
                // Initialize and assign variable
                EditText editText=dialog.findViewById(R.id.edit_text);
                ListView listView=dialog.findViewById(R.id.list_view);
 
                // Initialize array adapter
                ArrayAdapter adapter=new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1,arrayList);
 
                // set adapter
                listView.setAdapter(adapter);
                editText.addTextChangedListener(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) {
                        adapter.getFilter().filter(s);
                    }
 
                    @Override
                    public void afterTextChanged(Editable s) {
 
                    }
                });
 
                listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView parent, View view, int position, long id) {
                        // when item selected from list
                        // set selected item on textView
                        textview.setText(adapter.getItem(position));
 
                        // Dismiss dialog
                        dialog.dismiss();
                    }
                });
            }
        });
    }
}


我们已经成功地为我们的应用程序制作了自定义可搜索微调器。最终输出如下所示。

输出: