برنامج MultiAutoCompleteTextView مع مثال في Android Studio
في Android ، يعد MultiAutoCompleteTextView برنامج TextView قابل للتحرير يوسع AutoCompleteTextView والذي يمكنه عرض الاقتراح الكامل للسلسلة الفرعية للنص مما يسمح للمستخدم بالاختيار بسرعة بدلاً من الكتابة بالكامل. و AutoCompleteTextView يقدم سوى اقتراح حول الجملة بأكملها و MultiAutoCompleteTextView العروض اقتراح لكل رمز في الجملة. يمكننا تحديد ما هو الفاصل بين الرموز.
ملاحظة مهمة: أحد الاختلافات الأكثر أهمية بين MultiAutoCompleteTextView و AutoCompleteTextView هو أن AutoCompleteTextView يمكنه الاحتفاظ أو تحديد قيمة واحدة فقط في وقت واحد ولكن MultiAutoCompleteTextView يمكن أن يحمل قيمة كلمات سلسلة متعددة في وقت واحد. يتم فصل جميع هذه القيم بفاصلة (،).
التعليمات البرمجية الأساسية MultiAutoCompleteTextView في XML:
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This Is A MultiAutoCompleteTextView" />
جدول المحتويات
المحول المستخدم لملء البيانات في MultiAutoCompleteTextView
لعرض محتوى المصفوفة في MultiAutoCompleteTextView ، نحتاج إلى تنفيذ المحول . في MultiAutoCompleteTextView ، نظرًا لأننا نعرض القيم النصية بشكل أساسي ، لذلك نستخدم ArrayAdapter لذلك. يوجد أدناه وصف ArrayAdapter.
ArrayAdapter في Android:
عندما تكون لدينا قائمة بنوع واحد من العناصر التي تدعمها مصفوفة ، يمكننا استخدام ArrayAdapter. على سبيل المثال ، قائمة جهات اتصال الهاتف أو البلدان أو الأسماء.
كود ArrayAdapter في Android:
ArrayAdapter(Context context, int resource, int textViewResourceId, T[] objects)
في مقتطف الشفرة أعلاه نعرض تنفيذ ArrayAdapter. تُستخدم هذه المعلمات الأربعة لإظهار قائمة العناصر في MultiAutoCompleteTextView الموضحة بالفعل في البرنامج التعليمي ArrayAdapter .
استرداد القيمة من MultiAutoCompleteTextView في فئة Java:
يوجد أدناه مثال على الكود حيث نسترد القيمة من MultiAutoCompleteTextView في فئة Java .
// initiate a MultiAutoCompleteTextView
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
String MultiAutoCompleteTextViewValue = simpleMultiAutoCompleteTextView.getText().toString(); // retrieve a value from MultiAutoCompleteTextView
طرق مهمة لـ MultiAutoCompleteTextView:
دعونا نناقش بعض الطرق المهمة لـ MultiAutoCompleteTextView والتي قد يتم استدعاؤها من أجل إدارة MultiAutoCompleteTextView.
1. setTokenizer (MultiAutoCompleteTextView.Tokenizer t): تحدد هذه الطريقة الرمز المميز الذي سيتم استخدامه لتحديد النطاق ذي الصلة للنص الذي يكتبه المستخدم. يتم استخدام CommaTokenizer لتعيين الرمز المميز الذي يميز السلاسل الفرعية المختلفة بفاصلة.
أدناه قمنا بتعيين CommaTokenizer لـ MultiAutoCompleteTextView
// initiate a MultiAutoCompleteTextView
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
// set tokenizer that distinguish the various substrings by comma
simpleMultiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
2. setThreshold (عتبة int):
تُستخدم هذه الطريقة لتعيين قيمة حدية تساعدنا على بدء البحث من شخصية معينة. في هذا قمنا بتعيين قيمة نوع int المستخدمة لتحديد العتبة. افترض أنه في حالة تعيين قيمة 1 للعتبة ، في وقت الكتابة ، يبدأ البحث من الحرف الأول.
أدناه قمنا بتعيين قيمة 2 للعتبة التي تساعدنا على بدء البحث من الحرف الثاني.
// initiate a MultiAutoCompleteTextView
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
// set threshold value 2 that help us to start the searching from second character
simpleMultiAutoCompleteTextView.setThreshold(2);
سمات وخصائص MultiAutoCompleteTextView :
الآن دعنا نناقش بعض السمات المهمة التي تساعدنا في تكوين MultiAutoCompleteTextView في ملف xml .
1. المعرف id : تُستخدم هذه السمة لتعريف MultiAutoCompleteTextView بشكل فريد.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This Is A MultiAutoCompleteTextView" /> <!-- id of a MultiAutoCompleteTextView that is used to uniquely identify it -->
2. الجاذبية gravity : هذه سمة اختيارية تُستخدم للتحكم في محاذاة النص مثل اليسار ، واليمين ، والوسط ، والأعلى ، والأسفل ، والمركز الرأسي ، والمركز الأفقي ، إلخ.
أدناه قمنا بتعيين الجاذبية الصحيحة لنص MultiAutoCompleteTextView.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="AbhiAndroid.Com" /> <!-- right gravity for the displayed text of MultiAutoCompleteTextView -->
3. النص text: يتم استخدام هذه السمة لتعيين النص في MultiAutoCompleteTextView. يمكننا ضبط النص في xml وكذلك فيفئة java .
في المثال الثاني أعلاه ، استخدمنا أيضًا سمة النص.
إعداد النص في MultiAutoCompleteTextView في فئة Java:
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setText("AbhiAndroid"); // set text in a MultiAutoCompleteTextView
4. تلميح hint: يتم استخدام هذه السمة لتعيين التلميح إلى ما يجب عليك إدخاله في MultiAutoCompleteTextView هذا. عندما يبدأ المستخدم في الكتابة في MultiAutoCompleteTextView ، سيختفي التلميح تلقائيًا.
أدناه قمنا بتعيين تلميح MultiAutoCompleteTextView.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Text Here" /><!-- set hint in MultiAutoCompleteTextView -->
إعداد تلميح في MultiAutoCompleteTextView في فئة Java:
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setHint("Enter Your Text Here"); // set hint in a MultiAutoCompleteTextView
5. textColor: تُستخدم هذه السمة لتعيين لون النص في MultiAutoCompleteTextView. تكون قيمة اللون على شكل "#argb" أو "#rgb" أو "#rrggbb" أو "#aarrggbb".
أدناه قمنا بتعيين اللون الأحمر للنص المعروض في MultiAutoCompleteTextView.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"/>
<!-- red color for the displayed text of a MultiAutoCompleteTextView -->
ضبط النص اللون في MultiAutoCompleteTextView في فئة Java:
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setTextColor(Color.RED); // red color for the displayed text of a MultiAutoCompleteTextView
6. textColorHint: تُستخدم هذه السمة لتعيين لون نص التلميح المعروض.
أدناه قمنا بتعيين اللون الأزرق للتلميح المعروض لـ MultiAutoCompleteTextView.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Text Here"
android:textColorHint="#00f"/>
<!-- blue color for displayed hint text of a MultiAutoCompleteTextView -->
ضبط textColorHint في MultiAutoCompleteTextView في فئة Java:
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setHintTextColor(Color.BLUE); // blue color for the displayed hint text of a MultiAutoCompleteTextView
7. textSize: تستخدم هذه السمة لتعيين حجم نص MultiAutoCompleteTextView. يمكننا ضبط حجم النص في sp (مقياس بكسل مستقل) أو dp (كثافة بكسل).
أدناه قمنا بتعيين حجم 25sp لنص MultiAutoCompleteTextView.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"
android:textSize="25sp"/><!-- 25 sp text size of a MultiAutoCompleteTextView -->
ضبط النص الحجم في MultiAutoCompleteTextView في فئة Java:
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setTextSize(25); // 25 sp text size of a MultiAutoCompleteTextView
8. textStyle: تُستخدم هذه السمة لتعيين نمط النص في MultiAutoCompleteTextView. أنماط النص الممكنة هي غامقة ومائلة وعادية. إذا احتجنا إلى استخدام نمطين أو أكثر من أجل MultiAutoCompleteTextView ، فحينئذٍ "|" عامل يستخدم لذلك.
أدناه قمنا بتعيين النمط الغامق للنص المعروض في MultiAutoCompleteTextView.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold"/><!-- bold style for the displayed text of a MultiAutoCompleteTextView -->
9. الخلفية background : تُستخدم هذه السمة لتعيين خلفية MultiAutoCompleteTextView. يمكننا ضبط اللون أو الرسم (صورة أو xml قابلللرسممخصص) في خلفية MultiAutoCompleteTextView.
أدناه قمنا بتعيين اللون الأخضر للخلفية واللون الأحمر للنص المعروض في MultiAutoCompleteTextView.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold"
android:background="#0f0"/><!-- green background color of a MultiAutoCompleteTextView -->
إعداد الخلفية في MultiAutoCompleteTextView في فئة Java:
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setBackgroundColor(Color.GREEN); // green color for the background of a MultiAutoCompleteTextView
10. الحشو padding : تُستخدم هذه السمة لتعيين المساحة المتروكة من الجانب الأيسر أو الأيمن أو العلوي أو السفلي من MultiAutoCompleteTextView.
- padding إلى اليمين : اضبط المساحة المتروكة من الجانب الأيمن من MultiAutoCompleteTextView .
- paddingLeft: اضبط المساحة المتروكة من الجانب الأيسر من MultiAutoCompleteTextView .
- paddingTop: اضبط المساحة المتروكة من الجانب العلوي لـ MultiAutoCompleteTextView .
- paddingBottom: اضبط الحشوة من الجانب السفلي من MultiAutoCompleteTextView .
- الحشوة : اضبط الحشوة من جميع جوانب MultiAutoCompleteTextView .
أدناه قمنا بتعيين حشوة 40dp من الجانب الأيسر من MultiAutoCompleteTextView.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold"
android:background="#0f0"
android:paddingLeft="40dp"/>
<!-- 40dp padding from left side of a MultiAutoCompleteTextView -->
11. drawableBottom، drawableTop، drawableRight and drawableLeft: هذه السمة ترسم الرسم القابل للرسم أدناه ، أعلى ، يمين ويسار نص MultiAutoCompleteTextView.
أدناه قمنا بتعيين الرمز إلى أعلى نص MultiAutoCompleteTextView باستخدام drawableTop. بنفس الطريقة يمكنك تجربة السمات الثلاثة الأخرى بنفسك.
قم أولاً بحفظ صورة اسم ic_launcher في مجلد قابل للرسم إذا لم يكن موجودًا واستخدم الكود أدناه.
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#0f0"
android:drawableTop="@drawable/ic_launcher"
android:text="AbhiAndroid.Com"
android:gravity="center"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold" />
<!-- drawableTop of a MultiAutoCompleteTextView -->
مثال MultiAutoCompleteTextView في Android Studio
يوجد أدناه مثال MultiAutoCompleteTextView حيث نعرض MultiAutoCompleteTextView مع قائمة اقتراحات بأسماء إصدارات android. لملء البيانات في هذه القائمة ، نقوم بتطبيق محول مصفوفة . وضعنا قيمة الحد 1 التي تساعدنا على بدء البحث من الحرف الأول.
يمكنك أدناه تنزيل كود المشروع الكامل والمخرج النهائي والشرح خطوة بخطوة للمثال:
الخطوة 1 : قم بإنشاء مشروع جديد وقم بتسميته MultiAutoCompleteTextView
الخطوة 2: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة ، نفتح ملف xml ونضيف الكود لعرض MultiAutoCompleteTextView باستخدام سماته المختلفة.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!-- MultiAutoCompleteTextView In Android -->
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#0f0"
android:gravity="center"
android:hint="Enter Your Text Here"
android:padding="10dp"
android:textColor="#f00"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
الخطوة 3: افتح src -> package -> MainActivity. جافا
في هذه الخطوة ، نفتح MainActivity ونضيف الكود لبدء MultiAutoCompleteTextView ثم نضيف البيانات إلى قائمة الاقتراحات باستخدام ArrayAdapter. في هذا قمنا أيضًا بتعيين قيمة العتبة 1 التي تساعدنا على بدء البحث من الحرف الأول.
package example.abhiandroid.multiautocompletetextviewexample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.MultiAutoCompleteTextView;
public class MainActivity extends AppCompatActivity {
String[] androidVersionNames = {"Aestro", "Blender", "CupCake", "Donut", "Eclair", "Froyo", "Gingerbread", "HoneyComb", "IceCream Sandwich", "Jellibean", "Kitkat", "Lollipop", "MarshMallow"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initiate a MultiAutoCompleteTextView
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
// set adapter to fill the data in suggestion list
ArrayAdapter<String> versionNames = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, androidVersionNames);
simpleMultiAutoCompleteTextView.setAdapter(versionNames);
// set threshold value 1 that help us to start the searching from first character
simpleMultiAutoCompleteTextView.setThreshold(1);
// set tokenizer that distinguish the various substrings by comma
simpleMultiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
}
}
المخرجات :
الآن قم بتشغيل التطبيق وسترى MultiAutoCompleteTextView. أدخل هنا أي حرف وسيظهر إصدار Android المقابل لتلك الشخصية. حدده وافعل الشيء نفسه مع إصدار Android الآخر. يمكنك أن ترى أنه يمكن أن يحتوي على أكثر من قيمة واحدة والتي لم تكن ممكنة مع AutoCompleteTextView.