بسم الله الرحمن الرحيم
إن شاء الله اليوم من أفضل الدروس التي تخص برمجة عنصر اللست فيو او القائمة في تطبيقات الاندرويد, ما يميز هذا الدرس إنه أكثر من سهل للمبتدئين, فقط نقل الاكواد وتغيير الاسم + مسار الصورة + الموقع الذي سوف يتم التوجه عليه.
طبعاً انا استخدمت مثال موقع, ولكن تستطيع استخدام هذه القائمة بإي أمر تريد, مثل الزر تماماً, توفر عليك الكثير من الوقت, تستطيع وضع مثلاً فقط عنوان الاكتفتي الذي تريد التوجه عليه بعد الضغط على زر معين, طبعاً مع تغيير الأمر بالأكواد + نوع البيانات المدخلة هل هي سترنج او انتجر او بولين إلخ .
هذا الدرس كنت أعتبره سر بالنسبة لي, لأنك تستطيع منه أن تنشأ الكثير من التطبيقات بسهولة تماماً فقط في تعديل البيانات وتغيير التصميم, مهم جداً جداً ..
بالنسبة لمن لم يتابع الدروس الماضية, فيفضل متابعتها لفهم بعض النقاط, تابعها :
- برمجة القائمة اللست فيو بأبسط طريقة – اندرويد ستوديو
- اللست فيو مع لياوت مخصصة القائمة بالاندرويد مبسطة
- استخدام عناصر كثيرة باللست فيو قائمة تطبيقات الاندرويد برمجياً
- لست فيو بالاندرويد قائمة متقدمة صورة + نص برمجياً
بالنسبة لترى نتيجة هذا الدرس في معاينة سريعة فيديو, شاهد الفيديو التالي والذي هو نفس نتيجة الدرس السابق, فقط في هذا الدرس استخدام لست متطورة اكثر, سهلة الاستخدام واعطاء الاوامر بسهولة.
طبعاً في الدرس الماضي كان شرح طويل ولكن ارجوا متابعته, فالكود الذي أخذناه في الدرس الماضي, نفسه اليوم ولكن مع تعديلات جديدة.
سوف أركز بشرح اليوم على النقاط الجديدة. والأكواد المستخدمة هي :
+ لياوت الرئيسية للتطبيق, المهم فيها عنصر القائمة حتى لو استخدمتها مع عناصر اخرى. activity_main.xml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/Andrody.com" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"> <ListView android:id="@+id/list" android:layout_height="wrap_content" android:layout_width="match_parent"> </ListView> </LinearLayout>
+ لياوت خاصة لتنسيق العناصر text.xml :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/im" android:layout_margin="10dp" android:layout_width="50dp" android:layout_height="50dp" /> <TextView android:layout_gravity="center" android:id="@+id/tv" android:textColor="#000561" android:textSize="30sp" android:layout_margin="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
+ الاكتفتي الرئيسي للقائمة MainActivity.java :
public class MainActivity extends Activity { ListView listView ; ArrayList<Data> arraylist = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); listView = (ListView) findViewById(R.id.list); String[] AndRody_Name = {"Android","Ios","AndRody","Windows","Google","Ebay"}; Integer[] AndRody_img = {R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5,R.drawable.img6}; String[] AndRody_Site = {"http://android.com","http://www.apple.com/ios/", "http://www.andrody.com/","http://www.microsoft.com/en-us/windows", "https://google.com","http://www.ebay.com/"}; for (int i = 0; i < AndRody_Name.length; i++) { Data abboudi = new Data(AndRody_Name[i], AndRody_img[i], AndRody_Site[i]); arraylist.add(abboudi); } ListAdapter adapter = new ListAdapter(this, arraylist); listView.setAdapter(adapter); } }
لو لاحظتم إن الكود هذه المرة في الاكتفتي اقصر من السابق, لأنني في الدرس السابق قمنا ببرمجة كل عنصر على حدة.
الجديد هنا, هو إضافة مصفوفة جديدة من نوع سترنج من اجل روابط المواقع, وقم بتسميتها : AndRody_Site .
معلومة أكررها لو لاحظتم ان العناصر مرتبة في المصفوفات, فالعنصر الأول في مصفوفة الاسماء Android و العنصر الاول في مصفوفة روابط المواقع http://android.com وفي الصورة كذلك العنصر الأول يوافقها جميعها.
فالقصد إنك عندما تملأ البيانات, رتبها بالترتيب الاول يوافق الاول بجميع المصفوفات, او استخدم الطريقة المستخدمة في الدرس الثالث, مصفوفات في ملف منعزل لتحافظ على الترتيب.
كذلك لدينا سطر جديد ArrayList<Data> arraylist = new ArrayList<>(); وهو لإنشاء مصفوفة ولكن قائمة, وليست مصفوفة عادية, وداخلها اسم اكتفتي Data فهذا اسم الاكتفتي الجديدة لدينا اليوم.
for (int i = 0; i < AndRody_Name.length; i++) {
Data abboudi = new Data(AndRody_Name[i], AndRody_img[i], AndRody_Site[i]);
arraylist.add(abboudi);
}
اما هنا فنحدد عدد العناصر التي سوف تظهر بناءاً على مصفوفة الأسماء, ونضيف جميع المصفوفات لــــ : مصفوفة القائمة arraylist .
ListAdapter adapter = new ListAdapter(this, arraylist);
سابقاً كنا نحدد ان المعلومات التي يأخذها هي مصفوفة الاسماء + مصفوفة الصور , ولكن الان حددنا له إن يأخذ معه مصفوفة القائمة والتي هي تحتوي على جميع المصفوفات الثلاث.
ListAdapter اسم الكلاس الخاص الذي قمنا بإنشائه سابقاً لربط العناصر .
+ كلاس المحول ListAdapter.java :
public class ListAdapter extends BaseAdapter { LayoutInflater inflater; private List<Data> Datalist = null; private ArrayList<Data> arraylist; Context context; public ListAdapter(Activity context, List<Data> openSite) { this.context=context; this.Datalist = openSite; inflater = LayoutInflater.from(context); this.arraylist = new ArrayList<>(); this.arraylist.addAll(openSite); } @Override public int getCount() { return Datalist.size(); } @Override public Object getItem(int position) { return Datalist.get(position); } @Override public long getItemId(int position) { return position; } public View getView(final int position,View view,ViewGroup parent) { View Item =inflater.inflate(R.layout.text, null,true); TextView txtTitle = (TextView) Item.findViewById(R.id.tv); ImageView Icon = (ImageView) Item.findViewById(R.id.im); txtTitle.setText(Datalist.get(position).getNames()); Icon.setImageResource(Datalist.get(position).getImage()); Item.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(Datalist.get(position).getSite())); context.startActivity(i); } }); return Item; }; }
public ListAdapter(Activity context, List<Data> openSite) {
this.context=context;
this.Datalist = openSite;
inflater = LayoutInflater.from(context);
this.arraylist = new ArrayList<>();
this.arraylist.addAll(openSite);
كما في الدرس السابق, ولكن هنا نوع البيانات المدخلة هي مصفوفة قائمة واعطينها اسم openSite وأشرنا انها تعادل الداتا ليست ليتم التحكم فيها, كما شرح سابقاً.
بالنسبة لـ getCount + getItem + getItemId فهي اساسية مع extends BaseAdapter لذلك اتركها كما هي. ” سهلة القراءة “.
الجديد فقط هو تعيين اسم النص من القائمة Datalist.get(position).getNames() والصورة كذلك Datalist.get(position).getImage() .
واستخدامنا لدالة الاون كليك بعد النقر على العنصر, نفذ الأمر التالي :
Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(Datalist.get(position).getSite()));
context.startActivity(i);
وهو الانتقال بنا الى متصفح الويب لفتح الموقع التالي, ويتم اختياره من القائمة Datalist.get(position).getSite() . بالنسبة لـ position ليتم اختيار نفس الاسم لنفس الصورة والموقع.
إذا لم تفهم getNames + getImage + getSite فتم تحديد بالكلاس الاخير والجديد في درس اليوم.
+ كلاس الداتا Data.java :
public class Data { private String names,site; private Integer image; public Data(String Names, Integer Image, String Site) { this.names = Names; this.image = Image; this.site = Site; } public String getNames() { return this.names; } public String getSite() { return this.site; } public Integer getImage() { return this.image; } }
كلاس واضح, لاستقبال بيانات معينة, وهي السترنج والانتجر وربطها. ولكنه مهم. فقط استخدمناه كثيراً سابقاً.
بالنسبة للقائمة هكذا تقريباً خمس دروس أخذنا أهم ما فيها, ولكن احتمال لاحقاً تجهيز دروس التعامل ما بينها وما بين قواعد البيانات.
هذا درس اليوم, وان شاء الله تكونوا استفدتم, وانتظرونا في دروس قادمة إن شاء الله ,,, والسلام عليكم 🙂
شكرا لك درس مفيد جدا….