如何在 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();
}
});
}
});
}
}
我们已经成功地为我们的应用程序制作了自定义可搜索微调器。最终输出如下所示。