ArrayAdapter هو نوع من محول الذي يعمل جسرا بين عنصر واجهة المستخدم ومصدر البيانات التي تساعدنا على تعبئة البيانات في عنصر واجهة المستخدم. تتوقع تخطيطًا باستخدام TextView واحد ولمزيد من التخصيص في عناصر الشبكة أو عناصر القائمة ، نستخدم محولات مخصصة.
- ArrayAdapter هو أيضًا تطبيق BaseAdapter لذلك إذا أردنا المزيد من التخصيص ، فإننا ننشئ محولًا مخصصًا ونوسع ArrayAdapter في ذلك.
- نحن تجاوز كل وظيفة من BaseAdapter في عادتنا محول لاعطاء مزيد من التخصيص لArrayAdapter.
كود محول Android المخصص عندما نقوم بتوسيع 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 والتي تُستخدم لتعيين البيانات في قائمة أو شبكة أو سبينر . من هناك ، استخدمنا وظيفتين أساسيتين getCount () و getView ().
1. getCount ():
ترجع الدالة getCount () العدد الإجمالي للعناصر المراد عرضها في قائمة. تحسب القيمة من حجم المصفوفة أو طول المصفوفة. على سبيل المثال ، إذا كان لدينا قائمة بالعناصر في قائمة مصفوفة وكان علينا عرض العناصر في عرض القائمة ، فيمكننا حساب العدد الإجمالي للعناصر باستخدام وظيفة الحجم ، ثم يتم إرجاع قيمة العدد الصحيح بواسطة الدالة getCount () كما هو مبين أدناه.
@Override
public int getCount() {
int count=arrayList.size(); //counts the total number of elements from the arrayList.
return count;//returns the total count to adapter
}
2. getView (int i، View view، ViewGroup viewGroup):
يتم استدعاء هذه الوظيفة تلقائيًا عندما يكون عرض عنصر القائمة جاهزًا للعرض أو على وشك العرض. في هذه الوظيفة ، قمنا بتعيين التخطيط لعناصر القائمة باستخدام فئة LayoutInflater ثم أضفنا البيانات إلى طرق العرض مثل ImageView و TextView وما إلى ذلك.
يوجد أدناه رمز مثال لوظيفة getView مع شرح مضمن قمنا فيه بتعيين التخطيط باستخدام LayoutInflater ثم نحصل على معرف طريقة العرض وننفذها.
@Override
public View getView(int i, View view, ViewGroup viewGroup) {
view = inflter.inflate(R.layout.activity_list_view, null);//set layout for displaying items
ImageView icon = (ImageView) view.findViewById(R.id.icon);//get id for image view
icon.setImageResource(countryFlags[i]);//set image of the item’s
return view;
}
مثال على ArrayAdapter المخصص :
يوجد أدناه المثال ، الذي نعرض فيه قائمة بأسماء الحيوانات مع الصور في عرض القائمة باستخدام محول مصفوفة بسيط. فيما يلي الناتج النهائي والكود:
Select File -> New -> New Project -> and Fill the forms and click "Finish" button
الخطوة 2: الآن افتح res -> layout -> xml (or) activity_main.xml وأضف الكود التالي:
<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"
tools:context=".MainActivity">
<ListView
android:id="@+id/simpleListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#000"
android:dividerHeight="2dp"/>
</RelativeLayout>
الخطوة 3: قم بإنشاء تخطيط جديد في res-> التخطيط وقم بتسميته list_view_items. xml . هنا أضف الكود التالي:
<?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" />
<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: الآن افتح -> java -> package -> MainActivity. جافا وإضافة الكود أدناه.
package example.abhiandriod.customarrayadapterexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
ListView simpleList;
ArrayList<Item> animalList=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
simpleList = (ListView) findViewById(R.id.simpleListView);
animalList.add(new Item("Lion",R.drawable.lion));
animalList.add(new Item("Tiger",R.drawable.tiger));
animalList.add(new Item("Monkey",R.drawable.monkey));
animalList.add(new Item("Elephant",R.drawable.elephant));
animalList.add(new Item("Dog",R.drawable.dog));
animalList.add(new Item("Cat",R.drawable.cat));
MyAdapter myAdapter=new MyAdapter(this,R.layout.list_view_items,animalList);
simpleList.setAdapter(myAdapter);
}
}
الخطوة 5: قم بإنشاء كلاس Class جديد -> java -> package-> MyAdapter.java وأضف الكود أدناه. هنا في فئة المحول المخصص ، نتجاوز وظيفة BaseAdapter.
package example.abhiandriod.customarrayadapterexample;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.HashMap;
public class MyAdapter extends ArrayAdapter<Item> {
ArrayList<Item> animalList = new ArrayList<>();
public MyAdapter(Context context, int textViewResourceId, ArrayList<Item> objects) {
super(context, textViewResourceId, objects);
animalList = objects;
}
@Override
public int getCount() {
return super.getCount();
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = inflater.inflate(R.layout.list_view_items, null);
TextView textView = (TextView) v.findViewById(R.id.textView);
ImageView imageView = (ImageView) v.findViewById(R.id.imageView);
textView.setText(animalList.get(position).getAnimalName());
imageView.setImageResource(animalList.get(position).getAnimalImage());
return v;
}
}
الخطوة 6: قم بإنشاء كلاس جديدة src-> package-> Item.java وأضف الكود أدناه:
package example.abhiandriod.customarrayadapterexample;
public class Item {
String animalName;
int animalImage;
public Item(String animalName,int animalImage)
{
this.animalImage=animalImage;
this.animalName=animalName;
}
public String getAnimalName()
{
return animalName;
}
public int getAnimalImage()
{
return animalImage;
}
}
مخرج :
الآن قم بتشغيل التطبيق في Emulator وسترى اسم الحيوانات مدرجًا بالصور. لهذا استخدمنا ArrayAdapter المخصص.
المثال 2: أدناه هو المثال الذي نعرض فيه صور الحيوانات في الشبكة الخاصة بعرض الشبكة باستخدام ArrayAdapter المخصص. فيما يلي الناتج النهائي والكود:
حدد ملف -> جديد -> مشروع جديد. املأ الاستمارات وانقر فوق الزر "إنهاء".
الخطوة 2: الآن افتح التطبيق -> res -> layout -> activity_main. xml (أو) main. xml وأضف الكود التالي:
<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"
tools:context=".MainActivity">
<GridView
android:id="@+id/simpleGridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="2"/>
</RelativeLayout>
الخطوة 3: قم بإنشاء نشاط تخطيط layout جديد في التطبيق -> res-> layout-> نشاط جديد وقم بتسميته grid_view_items.xml وأضف الكود التالي:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:padding="5dp"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="@dimen/activity_horizontal_margin"
android:text="Demo"
android:textColor="#000" />
</RelativeLayout>
الخطوة 4: الآن افتح التطبيق -> جافا -> الحزمة -> MainActivity.java
package example.abhiandriod.customarrayadapterexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
GridView simpleList;
ArrayList<Item> animalList=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
simpleList = (GridView) findViewById(R.id.simpleGridView);
animalList.add(new Item("Lion",R.drawable.lion));
animalList.add(new Item("Tiger",R.drawable.tiger));
animalList.add(new Item("Monkey",R.drawable.monkey));
animalList.add(new Item("Elephant",R.drawable.elephant));
animalList.add(new Item("Dog",R.drawable.dog));
animalList.add(new Item("Cat",R.drawable.cat));
MyAdapter myAdapter=new MyAdapter(this,R.layout.grid_view_items,animalList);
simpleList.setAdapter(myAdapter);
}
}
الخطوة 5: قم بإنشاء فئة او كلاس جديدة src -> package -> MyAdapter.java وأضف الكود التالي:
package example.abhiandriod.customarrayadapterexample;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class MyAdapter extends ArrayAdapter<Item> {
ArrayList<Item> animalList = new ArrayList<>();
public MyAdapter(Context context, int textViewResourceId, ArrayList<Item> objects) {
super(context, textViewResourceId, objects);
animalList = objects;
}
@Override
public int getCount() {
return super.getCount();
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = inflater.inflate(R.layout.grid_view_items, null);
TextView textView = (TextView) v.findViewById(R.id.textView);
ImageView imageView = (ImageView) v.findViewById(R.id.imageView);
textView.setText(animalList.get(position).getAnimalName());
imageView.setImageResource(animalList.get(position).getAnimalImage());
return v;
}
}
الخطوة 6: قم بإنشاء فئة جديدة src -> package -> Item.java وأضف الكود أدناه:
package example.abhiandriod.customarrayadapterexample;
/**
* Created by Gourav on 10-01-2016.
*/
public class Item {
String animalName;
int animalImage;
public Item(String animalName,int animalImage)
{
this.animalImage=animalImage;
this.animalName=animalName;
}
public String getAnimalName()
{
return animalName;
}
public int getAnimalImage()
{
return animalImage;
}
}