طريقة برمجة custom Spinner في الاندرويد

في Android ، كلما احتجنا إلى عرض عنصر Spinner مع صورة ونص وما إلى ذلك (أي إنشاء قائمة مخصصة أكثر) ، فعلينا تنفيذ محول مخصص مثل المحول الأساسي . من أجل التخصيص ، نحتاج إلى إنشاء فئة محول مخصصة ثم توسيع محولنا الافتراضي في تلك الفئة. هنا نقوم بإنشاء قائمة مخصصة باستخدام الوظائف المتجاوزة للمحول وعرض Spinner المخصص . لمزيد من التوضيح حول كيفية تنفيذ محول مخصص ، نحتاج أولاً إلى فهم Spinner .

في Android ، يوفر لك Spinners طريقة سريعة لتحديد قيمة واحدة من مجموعة من القيم. مغازل Android ليست سوى القائمة المنسدلة التي تظهر في لغات البرمجة الأخرى. في الحالة الافتراضية ، يعرض القرص الدوار القيمة المحددة حاليًا. يوفر طريقة سهلة لتحديد قيمة من قائمة القيم.

ملاحظة مهمة: يرتبط Spinner بعرض المحول ، لذا لملء البيانات في القرص الدوار ، نحتاج إلى استخدام إحدى فئات المحول.

كود XML الخاص بـ Spinner في Android:

	<Spinner
	android:id="@+id/simpleSpinner "
	android:layout_width="fill_parent"
	android:layout_height="wrap_content" />
  
  

في مقتطف الشفرة أعلاه ، نقوم بتطبيق spinner بسيط في ملف xml الخاص بنا . الآن لملء البيانات في هذا القرص الدوار ، نحتاج إلى استخدام فئة المحول. سنستخدم هنا محولات مخصصة لملء البيانات المخصصة بالصور في الدوار.

إليك كيفية توسيع فئة CustomAdapter BaseAdapter:

public class CustomAdapter extends BaseAdapter {

	@Override
	public int getCount() {
	return 0;
	}

	@Override
	public Object getItem(int i) {
	return null;
	}

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

	@Override
	public View getView(int i, View view, ViewGroup viewGroup) {

	return null;
	}
  

فئة BaseAdapter في Android هي فئة Abstract . لذلك أثناء توسيعه في CustomAdapter ، فإننا نتجاوز طرقه بناءً على المتطلبات. في مقتطف الشفرة أعلاه ، تُستخدم الوظائف المتجاوزة للمحول الأساسي لتعيين البيانات في spinner أو listview أو networkview . تم وصف هذه الوظائف بالفعل في البرنامج التعليمي BaseAdapter .

نموذج رمز لفئة المحول المخصص عندما نقوم بتوسيع ArrayAdapter في ذلك:

  public class MyAdapter extends ArrayAdapter {

	public MyAdapter(Context context, int resource, int textViewResourceId, List objects) {
	super(context, resource, textViewResourceId, objects);
	}

	@Override
	public int getCount() {
	return super.getCount();
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
	return super.getView(position, convertView, parent);
	}
	}
  
  

في مقتطف الشفرة أعلاه ، نرى الوظائف المتجاوزة لـ ArrayAdapter والتي تُستخدم لتعيين البيانات في قائمة أو شبكة أو سبينر. تم وصف هذه الوظائف بالفعل في البرنامج التعليمي المخصص ArrayAdapter .

---

مثال Spinner المخصص في Android Studio

مثال 1: مثال على زر زيادة مخصص باستخدام BaseAdapter

يوجد أدناه المثال الذي عرضنا فيه أسماء الدول مع الصور في قرص دوار وكلما نقرت على عنصر ما ، سيتم عرض اسم البلد كرسالة باستخدام الخبز المحمص. فيما يلي الناتج النهائي والكود:

الخطوة 1: قم بإنشاء مشروع جديد في Android Studio وقم بتسميته CustomSpinnerExample.

حدد ملف -> جديد -> مشروع جديد. املأ المتطلبات وانقر فوق الزر "إنهاء".

الخطوة 2: افتح res -> layout ->  xml (or) activity_main. xml  وأضف الكود التالي. نحن هنا نقوم بإنشاء Spinner داخل النسق النسبي .

	
  <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">

	<Spinner
	android:id="@+id/simpleSpinner"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="50dp" />

	</RelativeLayout>

  

الخطوة 3: قم بإنشاء نشاط تخطيط جديد في res-> layout وقم بتسميته custom_spinner_items.xml. أضف التعليمات البرمجية التالية. نحن هنا نحدد التصميم الأساسي للعناصر المخصصة التي سيتم عرضها داخل Spinner.

	
  <?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="wrap_content"
	android:orientation="horizontal">

	<ImageView
	android:id="@+id/imageView"
	android:layout_width="50dp"
	android:layout_height="50dp"
	android:padding="5dp"
	android:src="@drawable/ic_launcher" /><!--Make sure image is present in Drawable folder-->

	<TextView
	android:id="@+id/textView"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center"
	android:padding="@dimen/activity_horizontal_margin"
	android:text="Demo"
	android:textColor="#000" />
	</LinearLayout>
  
  

الخطوة 4: افتح التطبيق -> جافا -> الحزمة -> النشاط الرئيسي. MainActivity وأضف الكود التالي. التفسير مدرج في الكود نفسه.

	package example.abhiandriod.customspinnerexample;

	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.AdapterView;
	import android.widget.Spinner;
	import android.widget.Toast;

	public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener{


	String[] countryNames={"India","China","Australia","Portugle","America","New Zealand"};
	int flags[] = {R.drawable.india, R.drawable.china, R.drawable.australia, R.drawable.portugle, R.drawable.america, R.drawable.new_zealand};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	//Getting the instance of Spinner and applying OnItemSelectedListener on it
	Spinner spin = (Spinner) findViewById(R.id.simpleSpinner);
	spin.setOnItemSelectedListener(this);

	CustomAdapter customAdapter=new CustomAdapter(getApplicationContext(),flags,countryNames);
	spin.setAdapter(customAdapter);
	}


	//Performing action onItemSelected and onNothing selected
	@Override
	public void onItemSelected(AdapterView<?> arg0, View arg1, int position,long id) {
	Toast.makeText(getApplicationContext(), countryNames[position], Toast.LENGTH_LONG).show();
	}

	@Override
	public void onNothingSelected(AdapterView<?> arg0) {
	// TODO Auto-generated method stub
	}
	}
  
  

الخطوة 5: قم بإنشاء  Class جديد -> java -> package and new class name CustomAdapter.java وأضف الكود التالي. هنا سوف نتجاوز طرق BaseAdapter لملء البيانات في Spinner.

	package example.abhiandriod.customspinnerexample;

	import android.content.Context;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.BaseAdapter;
	import android.widget.ImageView;
	import android.widget.TextView;

	public class CustomAdapter extends BaseAdapter {
	Context context;
	int flags[];
	String[] countryNames;
	LayoutInflater inflter;

	public CustomAdapter(Context applicationContext, int[] flags, String[] countryNames) {
	this.context = applicationContext;
	this.flags = flags;
	this.countryNames = countryNames;
	inflter = (LayoutInflater.from(applicationContext));
	}

	@Override
	public int getCount() {
	return flags.length;
	}

	@Override
	public Object getItem(int i) {
	return null;
	}

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

	@Override
	public View getView(int i, View view, ViewGroup viewGroup) {
	view = inflter.inflate(R.layout.custom_spinner_items, null);
	ImageView icon = (ImageView) view.findViewById(R.id.imageView);
	TextView names = (TextView) view.findViewById(R.id.textView);
	icon.setImageResource(flags[i]);
	names.setText(countryNames[i]);
	return view;
	}
	}
  

المخرج:

قم الآن بتشغيل التطبيق في Emulator / AVD وسترى القرص الدوار المخصص يعرض الأعلام وأسماء الدول معًا. قم بتغيير أسماء الدول داخل الدوار وسترى رسالة توست التي تعرض الدولة التي تم تحديدها.

تعديل المقال