SearchView البرنامج التعليمي مع مثال في Android Studio
في Android ، توفر أداة SearchView واجهة مستخدم البحث حيث يمكن للمستخدمين إدخال استعلام بحث ثم إرسال طلب إلى مزود البحث. يعرض قائمة باقتراحات الاستعلام أو النتائج إذا كانت متوفرة ويسمح للمستخدمين باختيار اقتراح أو نتيجة لبدء العمل فيها.
الكود الاساسي ل SearchView في XML
<SearchView android:id="@+id/simpleSearchView" android:layout_width="wrap_content" android:layout_height="wrap_content" />
طرق ودوال SearchView في Android
دعونا نناقش بعض الطرق والدوال المهمة لعرض البحث SearchView والتي قد يتم استدعاؤها من أجل إدارة عرض البحث SearchView .
1. getQuery (): تُستخدم هذه الداله للحصول على سلسلة الاستعلام حاليًا في حقل النص لعرض البحث SearchView . تقوم هذه الطريقة بإرجاع قيمة نوع CharSequence.
أدناه نحصل على سلسلة الاستعلام من عرض البحث.
SearchView simpleSearchView = (SearchView) findViewById(R.id.simpleSearchView); // inititate a search view CharSequence query = simpleSearchView.getQuery(); // get the query string currently in the text field
2. getQueryHint (): تُستخدم هذه الداله للحصول على نص التلميح الذي سيتم عرضه في حقل نص الاستعلام. ترجع هذه الطريقة قيمة نوع CharSequence.
يوجد أدناه مثال على كود يحصل على نص التلميح الذي سيتم عرضه في حقل نص الاستعلام في طريقة عرض البحث.
SearchView simpleSearchView = (SearchView) findViewById(R.id.simpleSearchView); // inititate a search view CharSequence queryHint = simpleSearchView.getQueryHint(); // get the hint text that will be displayed in the query text field
3. isIconfiedByDefault (): ترجع هذه الطريقة الحالة الافتراضية لحقل البحث. ترجع هذه الطريقة قيمة منطقية إما صواب أو خطأ.
أدناه نحصل على الحالة الافتراضية لحقل البحث.
SearchView simpleSearchView = (SearchView) findViewById(R.id.simpleSearchView); // inititate a search view boolean isIconfied=simpleSearchView.isIconfiedByDefault(); // checks default iconified state of the search field
4. setIconifiedByDefault (Boolean iconify ): تُستخدم هذه الطريقة لتعيين الحالة الافتراضية أو حالة الراحة لحقل البحث. في هذه الطريقة ، قمنا بتعيين القيمة المنطقية على صواب أو خطأ.
ملاحظة مهمة: عند استخدام SearchView في شريط الإجراءات كعرض إجراء لعنصر قائمة قابل للطي ، يجب تعيينه على رمز افتراضي باستخدام وظيفة setIconfiedByDefault (true). إذا كنت تريد أن يكون حقل البحث مرئيًا دائمًا ، فاتصل بـ setIconifiedByDefault (false). true هي القيمة الافتراضية لهذه الوظيفة. يمكنك أيضًا تعيين iconfied من xml باستخدام الخاصية iconfiedByDefault إلى صواب أو خطأ.
أدناه قمنا بتعيين الأيقونة بالقيمة الافتراضية على خطأ.
SearchView simpleSearchView = (SearchView) findViewById(R.id.simpleSearchView); // inititate a search view simpleSearchView.setIconifiedByDefault(false); // set the default or resting state of the search field
5. setQueryHint (CharSequence hint ): تُستخدم هذه الطريقة لتعيين نص التلميح ليتم عرضه في حقل نص الاستعلام. تدعم هذه الطريقة قيمة نوع CharSequence.
أدناه قمنا بتعيين تلميح الاستعلام لـ SearchView .
SearchView simpleSearchView = (SearchView) findViewById(R.id.simpleSearchView); // inititate a search view
simpleSearchView.setQueryHint("Search View"); // set the hint text to display in the query text field
6. setOnQueryTextFocusChangeListener (OnFocusChangeListenerlistener): يعلم هذا المستمع عندما يتغير تركيز حقل نص الاستعلام.
في الكود أدناه نعرض استخدام setOnQueryTextFocusChangeListener () من SearchView.
SearchView simpleSearchView = (SearchView) findViewById(R.id.simpleSearchView); // inititate a search view
// perform set on query text focus change listener event
simpleSearchView.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
// do something when the focus of the query text field changes
}
});
7. setOnQueryTextListener (OnQueryTextListenerlistener): هو إجراء او حدث مستخدم داخل SearchView .
نعرض أدناه استخدام setOnQueryTextListener () لعرض البحث.
SearchView simpleSearchView = (SearchView) findViewById(R.id.simpleSearchView); // inititate a search view
// perform set on query text listener event
simpleSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String query) {
// do something on text submit
return false;
}
@Override
public boolean onQueryTextChange(String newText) {
// do something when text changes
return false;
}
});
سمات وخصائص SearchView
الآن دعنا نناقش بعض السمات والخصائص المشتركة لطريقة عرض البحث التي تساعدنا على تهيئتها في مخططنا ( xml ).
1. المعرّف id : تُستخدم سمة وخاصية المعرّف لتعريف طريقة عرض البحث بشكل فريد.
<!-- id of an search view used to uniquely identify it --> <SearchView android:id="@+id/simpleSearchView" android:layout_width="wrap_content" android:layout_height="wrap_content" />
2. استعلام تلميح queryHint : تستخدم هذه السمة والخاصية لتحديد وتعيين سلسلة تلميح استعلام اختيارية والتي سيتم عرضها في حقل الاستعلام الفارغ. تلميح الاستعلام هو نفس سمة التلميح ل edittext .
أدناه قمنا بتعيين تلميح الاستعلام لعرض البحث.
<SearchView android:id="@+id/simpleSearchView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:iconifiedByDefault="false" android:queryHint="Search Here" /><!-- set query string of an search view -->
3. iconifiedByDefault: يتم استخدام سمة و خاصية ال SearchView هذه لتعيين وتحديد الحالة الافتراضية أو حالة الراحة لحقل البحث. يمكنك تعيين قيمة منطقية لهذه السمة وتكون القيمة الافتراضية صحيحة. تشير القيمة الحقيقية إلى أنه يمكنك ترميز عرض البحث أو توسيعه.
أدناه قمنا بتعيين القيمة الخاطئة لهذه السمة.
<SearchView android:id="@+id/simpleSearchView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:iconifiedByDefault="false" android:queryHint="Search here"/> <!-- set iconified by default to false -->
4. الخلفية background : تُستخدم خاصية الخلفية لتحديد خلفية ال SearchView . يمكنك تعيين لون أو رسم في خلفية SearchView. يمكنك أيضًا ضبط لون الخلفية في كلاس جافا .
أدناه قمنا بتعيين اللون الأحمر لخلفية SearchView .
<SearchView android:id="@+id/simpleSearchView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:iconifiedByDefault="false" android:queryHint="Search here" android:background="#f00"/><!-- red color for the background of search view -->
تعيين خلفية SearchView في كلاس Java :
SearchView simpleSearchView=(SearchView)findViewById(R.id.simpleSearchView); simpleSearchView.setBackgroundColor(Color.RED);
5. المساحة المتروكة padding : يتم استخدام خاصية المساحة المتروكة لتعيين المساحة المتروكة من اليسار أو اليمين أو أعلى أو أسفل.
المساحة المتروكة لليمين paddingRight : اضبط المساحة المتروكة من الجانب الأيمن لعرض البحث SearchView .
المساحة المتروكة على اليسار paddingLeft : اضبط المساحة المتروكة من الجانب الأيسر لعرض البحث SearchView .
paddingTop : اضبط المساحة المتروكة من الجانب العلوي لعرض البحث SearchView .
paddingBottom: اضبط المساحة المتروكة من الجانب السفلي لعرض البحث SearchView
المساحة المتروكة padding : اضبط المساحة المتروكة من جميع جوانب عرض البحث SearchView .
أدناه قمنا بتعيين مساحة 40dp من جميع جوانب عرض البحث SearchView .
<SearchView android:id="@+id/simpleSearchView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:iconifiedByDefault="false" android:queryHint="Search View" android:background="#f00" android:padding="40dp"/> <!-- set 40 dp padding from all the sides of a search view -->
مثال على SearchView في Android Studio
في المثال ادناه من SearchView ، نعرض SearchView و ListView . في هذا قمنا بإنشاء قائمة بأسماء الحيوانات ثم قم بتعيين المحول لملء البيانات في ListView . أخيرًا ، قمنا بتنفيذ SearchView.OnQueryTextListener لتصفية قائمة الحيوانات وفقًا لاستعلام البحث.
يمكنك أدناه تنزيل كود مشروع SearchView Android Studio الكامل ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة للمثال:
الخطوة 1 : قم بإنشاء مشروع جديد وقم بتسميته SearchViewExample
الخطوة 2: افتح res -> layout -> activity_main. xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة ، نفتح ملف xml ونضيف الرمز لعرض SearchView و ListView باستخدام سماته المختلفة.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <SearchView android:id="@+id/search" android:layout_width="fill_parent" android:layout_height="wrap_content" android:iconifiedByDefault="false"> <requestFocus /> </SearchView> <ListView android:id="@+id/listview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_below="@+id/search" /> </RelativeLayout>
الخطوة 3: افتح src -> package -> MainActivity.java
في هذه الخطوة نفتح MainActivity ونضيف الكود لبدء SearchView و ListView. في هذا نقوم بإنشاء قائمة بأسماء الحيوانات ثم نقوم بتعيين المحول لملء البيانات في ListView. في هذا ، نقوم أيضًا بتنفيذ SearchView.OnQueryTextListener لتصفية قائمة الحيوانات وفقًا لاستعلام البحث.
package example.abhiandroid.searchviewexample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;
import android.widget.SearchView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements SearchView.OnQueryTextListener {
// Declare Variables
ListView list;
ListViewAdapter adapter;
SearchView editsearch;
String[] animalNameList;
ArrayList<AnimalNames> arraylist = new ArrayList<AnimalNames>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Generate sample data
animalNameList = new String[]{"Lion", "Tiger", "Dog",
"Cat", "Tortoise", "Rat", "Elephant", "Fox",
"Cow","Donkey","Monkey"};
// Locate the ListView in listview_main.xml
list = (ListView) findViewById(R.id.listview);
for (int i = 0; i < animalNameList.length; i++) {
AnimalNames animalNames = new AnimalNames(animalNameList[i]);
// Binds all strings into an array
arraylist.add(animalNames);
}
// Pass results to ListViewAdapter Class
adapter = new ListViewAdapter(this, arraylist);
// Binds the Adapter to the ListView
list.setAdapter(adapter);
// Locate the EditText in listview_main.xml
editsearch = (SearchView) findViewById(R.id.search);
editsearch.setOnQueryTextListener(this);
}
@Override
public boolean onQueryTextSubmit(String query) {
return false;
}
@Override
public boolean onQueryTextChange(String newText) {
String text = newText;
adapter.filter(text);
return false;
}
}
الخطوة 4: الآن قم بإنشاء كلاس جديد. انتقل إلى التطبيق -> جافا -> انقر بزر الماوس الأيمن على الحزمة-> جديد -> فئة Java وأنشئ ListViewAdapter.java وأضف الكود التالي. هنا نقوم بتوسيع BaseAdapter في فئة ListViewAdapter ثم قم بتعيين البيانات في ListView باستخدام فئة Modal.
package example.abhiandroid.searchviewexample;
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.ArrayList;
import java.util.List;
import java.util.Locale;
public class ListViewAdapter extends BaseAdapter {
// Declare Variables
Context mContext;
LayoutInflater inflater;
private List<AnimalNames> animalNamesList = null;
private ArrayList<AnimalNames> arraylist;
public ListViewAdapter(Context context, List<AnimalNames> animalNamesList) {
mContext = context;
this.animalNamesList = animalNamesList;
inflater = LayoutInflater.from(mContext);
this.arraylist = new ArrayList<AnimalNames>();
this.arraylist.addAll(animalNamesList);
}
public class ViewHolder {
TextView name;
}
@Override
public int getCount() {
return animalNamesList.size();
}
@Override
public AnimalNames getItem(int position) {
return animalNamesList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
public View getView(final int position, View view, ViewGroup parent) {
final ViewHolder holder;
if (view == null) {
holder = new ViewHolder();
view = inflater.inflate(R.layout.listview_item, null);
// Locate the TextViews in listview_item.xml
holder.name = (TextView) view.findViewById(R.id.name);
view.setTag(holder);
} else {
holder = (ViewHolder) view.getTag();
}
// Set the results into TextViews
holder.name.setText(animalNamesList.get(position).getAnimalName());
return view;
}
// Filter Class
public void filter(String charText) {
charText = charText.toLowerCase(Locale.getDefault());
animalNamesList.clear();
if (charText.length() == 0) {
animalNamesList.addAll(arraylist);
} else {
for (AnimalNames wp : arraylist) {
if (wp.getAnimalName().toLowerCase(Locale.getDefault()).contains(charText)) {
animalNamesList.add(wp);
}
}
}
notifyDataSetChanged();
}
}
الخطوة 5: الآن قم بإنشاء نشاط تخطيط جديد. انتقل إلى res-> انقر بزر الماوس الأيمن على التخطيط -> جديد -> نشاط -> نشاط فارغ وقم بتسميتة بالاسم list_view_items.xml وأضف الكود التالي. نحن هنا نقوم بإنشاء عرض العناصر الذي سيتم عرضه داخل كل صف.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp"> <TextView android:id="@+id/nameLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Animal : " /> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/nameLabel" /> </RelativeLayout>
الخطوة 6: الآن قم بإنشاء كلاس جديد. انتقل إلى التطبيق -> جافا -> انقر بزر الماوس الأيمن على الحزمة-> جديد -> فئة Java وأنشئ AnimalNames.java وأضف الكود التالي. هنا لدينا مُنشئ لتعيين اسم الحيوان ووظيفة للحصول على اسم الحيوان.
package example.abhiandroid.searchviewexample;
public class AnimalNames {
private String animalName;
public AnimalNames(String animalName) {
this.animalName = animalName;
}
public String getAnimalName() {
return this.animalName;
}
}
المخرجات :
الآن قم بتشغيل التطبيق ، سترى أسماء حيوانات مختلفة مدرجة. اكتب الآن الحرف الأول من الحيوان الذي خطر ببالك في SearchView وسوف يتم فرز القائمة.