17/5/2014 - برمجة Android - عرض تفاصيل عناصر قوائم ListView




هذه التدوينه جواب على سؤالين ورداني على البريد الإلكتروني، سأتحدث في هذا الدرس عن قوائم ListView في Android والتي تحدثت عنها مُسبقاً في عدد من الدروس يمكنك مراجعة بعضها إن كنت تتعامل مع القوائم لأوّل مرّه.

برمجة Android - بناء قائمة ListView بسيطة في واجهة المستخدم الرسومية
برمجة Android - بناء قوائم ListView مُتقدمه
برمجة Android - إضافة خاصيّة البحث إلى قوائم ListView
برمجة Android - خاصية البحث لقوائم ListView المُتقدمه

نعود إلى موضوع التدوينه، لنفرض إنّ لدينا قائمة ListView في برنامجنا تعرض عدد من العناصر، المطلوب هو عند الضغط على أحد هذه العناصر يتم عرض معلومات تخص العنصر الذي تم الضغط عليه في Activity جديده. في المثال الذي سأبنيه في هذا الدرس سيكون كالتالي: قائمه تعرض عدد من أسماء نُظم التشغيل، وعند إختار أحد نظم التشغيل عن طريق الضغط عليه ينقلنا البرنامج إلى Activity آخر يعرض قائمه أخرى تحتوي على الإصدارات المتوفره لنظام التشغيل هذا.

الأساسيات التي سأستخدمها في هذا الدرس مشابهه بشكل كبير درس "بناء قائمة ListView بسيطة في واجهة المستخدم الرسومية" وبالتالي أنصح بقراءته أن لم تكن قد قرأته مُسبقاً.

سأبدأ بالـ MainActivity والتي سأضع في واجهتها ListView أعطيته الإسم التعريفي listView، سأضع في القائمه ثلاث عناصر وهي GNU/Linux و Mac OS X و Windows كالتالي:

	// ... //

ListView osListView = ( ListView ) findViewById( R.id.listView );

// ... //

ArrayAdapter osAdapter = new ArrayAdapter( this, android.R.layout.simple_list_item_1 );

osAdapter.add( "GNU/Linux" );
osAdapter.add( "Mac OS X" );
osAdapter.add( "Windows" );

// ... //

osListView.setAdapter( osAdapter );

// ... //


الشيفره هنا بسيطه وقد شُرحت في الدروس السابقه، مجرد تعبئة معلومات لا أكثر ولا أقل، المطلوب حالياً هو عند الضغط على أحد هذه العناصر يتم فتح Activity جديده تعرض قائمه بإصدارات نظام التشغيل المُختار، كما إستخدمنا الداله setOnItemClickListener في الدروس السابقه سنستخدمها هنا ليتم تنفيذ شيفرتنا عندما يضغط المستخدم على أحد العناصر كالتالي:

	osListView.setOnItemClickListener( new OnItemClickListener() 
{
@Override
public void onItemClick( AdapterView parent, View view, int position, long id )
{
Intent detailsIntent = new Intent( getBaseContext(), DetailsActivity.class );

detailsIntent.putExtra( "selectedItem", ( String ) parent.getItemAtPosition( position ) );

startActivity( detailsIntent );
}

});


لندقق النظر في شيفرة الدالة onItemClick لأنها تُعتبر جديده علينا نسبياً، تقوم هذه الأسطر الثلاث بمناداة Activity أخرى يُطلق عليها إسم DetailsActivity سنبنيها بعد قليل إن شاء الله، والنقطه المهمه فإنّ هذه الشيفره تُمرر إسم نظام التشغيل الذي إختاره المُستخدم إلى هذه الـActivity عن طريق هذا السطر:

detailsIntent.putExtra( "selectedItem", ( String ) parent.getItemAtPosition( position ) );


فبإستخدام الداله putExtra والتي توفرها لنا الفئة Intent يُمكننا تمرير ما شئنا من المعلومات إلى الـActivity الذي نقوم بمناداتها، لاحظ هُنا فإنّ المفتاح (Key) الذي ستتمكن DetailsActivity من الوصول إلى إسم نظام التشغيل المُختار من خلاله هو selectedItem والذي وضعناه في البارامتر الأول للداله putExtra، أما البارامتر الثاني فكما هو واضح يُمثّل قيمة العُنصر المُختار.

الشيفره الكاملة لـMainActivity:

package com.maastaar.listviewmultiactivity;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity
{

@Override
protected void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_main );

// ... //

ListView osListView = ( ListView ) findViewById( R.id.listView );

// ... //

ArrayAdapter osAdapter = new ArrayAdapter( this, android.R.layout.simple_list_item_1 );

osAdapter.add( "GNU/Linux" );
osAdapter.add( "Mac OS X" );
osAdapter.add( "Windows" );

// ... //

osListView.setAdapter( osAdapter );

// ... //

osListView.setOnItemClickListener( new OnItemClickListener()
{
@Override
public void onItemClick( AdapterView parent, View view, int position, long id )
{
Intent detailsIntent = new Intent( getBaseContext(), DetailsActivity.class );

detailsIntent.putExtra( "selectedItem", ( String ) parent.getItemAtPosition( position ) );

startActivity( detailsIntent );
}

});
}

@Override
public boolean onCreateOptionsMenu( Menu menu )
{
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate( R.menu.main, menu );
return true;
}

}


لنشرع الآن ببناء الـActivity الثانيه والتي تعرض لنا إصدارات نظام التشغيل المتوفره وهي DetailsActivity، لنضع فيها قائمة ListView ونعطي للقائمة الإسم التعريفي versionsListView.أول خطوه يجب أن ننفذها عندما تبدأ DetailsActivity هي أخذ المعلومات المُرسله للـActivity والتي تُمثّل نظام التشغيل المُختار، ووفقاً لنظام التشغيل المُختار سنضع المعلومات المناسبه في قائمتنا الموجوده في هذا الـ Activity.

نأخذ أولاً نظام التشغيل الذي تم إختياره:

String selectedOS = getIntent().getExtras().getString( "selectedItem" );


ولاحظ إننا إستخدمنا المفتاح selectedItem وهو نفسه الإسم الذي مررناه كبارامتر أوّل للداله putExtra عند مناداتنا للـ DetailsActivity.

بعد ذلك نُجهّز المُحوّل (Adapter) الذي سيحتوي على المعلومات التي ستعرض الإصدارات التي تخص نظام التشغيل المُختار:

ArrayAdapter versionsAdapter = new ArrayAdapter( this, android.R.layout.simple_list_item_1 );


نقوم الآن بتعبئة المعلومات المناسبه في المُحوّل وفقاً لإختيار المُستخدم والموجود في المتغير selectedOS:

if ( selectedOS.equals( "GNU/Linux" ) )
{
versionsAdapter.add( "OpenSuSE" );
versionsAdapter.add( "Debian" );
versionsAdapter.add( "Fedora" );
}
else if ( selectedOS.equals( "Mac OS X" ) )
{
versionsAdapter.add( "Mavericks" );
versionsAdapter.add( "Mountain Lion" );
versionsAdapter.add( "Lion" );
}
else if ( selectedOS.equals( "Windows" ) )
{
versionsAdapter.add( "8.1" );
versionsAdapter.add( "8" );
versionsAdapter.add( "7" );
}


وأخيراً نُخبّر قائمتنا بإنّ المحوّل الخاص بها هو versionsAdapter:

		// ... //

ListView versionsListView = (ListView) findViewById( R.id.versionsListView );

versionsListView.setAdapter( versionsAdapter );


الشيفرة الكامله لـ DetailsActivity:

package com.maastaar.listviewmultiactivity;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class DetailsActivity extends Activity
{

@Override
protected void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_details );

// ... //

String selectedOS = getIntent().getExtras().getString( "selectedItem" );

ArrayAdapter versionsAdapter = new ArrayAdapter( this, android.R.layout.simple_list_item_1 );

if ( selectedOS.equals( "GNU/Linux" ) )
{
versionsAdapter.add( "OpenSuSE" );
versionsAdapter.add( "Debian" );
versionsAdapter.add( "Fedora" );
}
else if ( selectedOS.equals( "Mac OS X" ) )
{
versionsAdapter.add( "Mavericks" );
versionsAdapter.add( "Mountain Lion" );
versionsAdapter.add( "Lion" );
}
else if ( selectedOS.equals( "Windows" ) )
{
versionsAdapter.add( "8.1" );
versionsAdapter.add( "8" );
versionsAdapter.add( "7" );
}

// ... //

ListView versionsListView = (ListView) findViewById( R.id.versionsListView );

versionsListView.setAdapter( versionsAdapter );
}

@Override
public boolean onCreateOptionsMenu( Menu menu )
{
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate( R.menu.details, menu );
return true;
}

}


هذا كُل شيء! :). بالطبع كون DetailsActivity عباره عن Activity مُستقلّه فهذا يعني إنه يُمكنا عرض تفاصيل العنصر المُختار بأي طريقه مناسبه غير قوائم الـListView.