24 -اندرويد – Fragments – بناء واجهة مستخدم مرنة Building a Flexible UI

ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development

اندرويد : Fragments: بناء واجهة مستخدم مرنة Building a Flexible UI

السلام عليكم ورحمة الله وبركاته

سوف نتعلم في هذا الدرس مايلي:new prof

  1. اضافة Fragment  إلى فعالية في زمن التنفيذ
  2. استبدال Fragment  ب Fragment  أخر

يفضل الاطلاع على مايلي :

  1. Fragments

بالامكان تحميل المثال عبر النقر على الرابط التالي : Download the sample

عندما تصمم تطبيقك لكي يدعم طيف واسع من قياسات الشاشات, فإنه بإمكانك عندها استخدام ال Fragments  الخاصين بك في عدة تنسيقات مختلفة وذلك لكي يحصل المستخدم على افضل النتائج مهما كان حجم شاشته.

على سبيل المثال, في الاجهزة اليدوية , handset ذات قياس الشاشة الصغير نسبيا , فإنه من الانسب عرض fragment واحد ضمن واجهة المستخدم الواحدة.

وبشكل مناقض تماما لما سبق, فإنك قد ترغب بإعداد مجموعة من fragments احدهم بجوار الاخر على الاجهزة ذات الشاشات الاعرض tablet, والتي تملك قياش شاشة اعرض يتسع لعرض كل هذه المعلومات للمستخدم.

Fragments

الشكل 1 : يبين two fragments ,معروضين ضمن اعدادات مختلفة وذلك بالنسبة لنفس الفعالية نسبةً إلى اجهزة ذات قياسات مختلفة.
ضمن الشاشاة الكبيرة , يتوضع ال fragments بجوار بعضهم البعض, ولكن على الاجهزة الاصغر, تتسع الشاشة إلى fragment وحيد فقد في نفس الوقت, وبالتالي في حال احتجنا إلى عرض ال fragment الآخر فانه سوف يستبدل ال fragment الأول.

يزودنا صف FragmentManager  بعدة توابع تسمح لنا بإضافة أو ازالة او تبديل fragments  ضمن فعالية ما وذلك اثناء زمن التنفيذ –طبعا الهدف من ذلك الحصول على واجهة مستخدم تفعالية.

اضافة Fragment  إلى فعالية في زمن التنفيذ

بدلا من تعريف fragment ضمن ملف تنسيق الفعالية التابع لها – كما تم الشرح في الدرس السابق- وذلك عبر استخدام عنصر <fragment>, بإمكانك اضافة fragment إلى فعالية ما اثناء زمن تنفيذ الفعالية. هذا الموضوع مفيد جدا في حال خططت لاستبدال ال fragment  اثناء دورة حياة الفعالية.

لكي تقوم بمناقلات , مثل تلك الهادفة إلى اضافة أو ازالة fragment , فأنت بحاجة لاستخدام FragmentManager  وذلك لكي تنشأ FragmentTransaction, والذي بدوره يزودنا ب API لاضافة او ازالة او استبدال وانجاز اي مناقلات اخرى خاصة ب fragments.

في حال سمحت فعاليتك لان تتم ازالة ال fragments  واستبدالها ب fragments  اخرى, فإنه يتوجب عليك تهيئة ال  Fragment(s) واضافتها للفعالية عبر التابع onCreate()الخاص بالفعالية.

هنالك قاعدة هامة اثناء التعامل مع ال fragments – وخصوصا ال fragments  التي تضاف إلى الفعالية في زمن التنفيذ- الا وهي :

كل fragment يجب ان يملك container View  ضمن التنسيق , وهو المكان حيث سيتوضع فيه تنسيق ال fragment.

التنسيق التالي عبارة عن تنسيق  عبارة عن تنسيق بديل للتنسيق الذي تم عرضه في الدرس السابق, والذي يظهر فقط fragment  واحد في آن واحد.

يحوي تنسيق الفعالية على FrameLayout  فارغ, والذي بدوره يتصرف على انه حاول container لل fragment, وذلك لكي نقوم باستبدال هذا ال fragment  الوحيد ب fragment  آخر.

لاحظ بأن اسم الملف هو نفسه اسم التنسيق في الدرس الماضي, ولكن مسار التنسيق لا يحوي على “large”, لذلك فإن هذا التنسيق فقط للشاشات الصغيرة , وذلك لان الشاشات الصغيرة لا
تتسع ل two fragments في نفس الوقت.

res/layout/news_articles.xml:

<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@+id/fragment_container”
android:layout_width=”match_parent”
android:layout_height=”match_parent” />

أما داخل الفعالية ,فيتم استدعاء التابع getSupportFragmentManager()وذلك لكي يحضر FragmentManager   باستخدام Support Library APIs . ومن ثم يستدعي التابع beginTransaction() لانشاء FragmentTransaction, ومن ثم يستدعي التابع add() لاضافة ال fragment.

بإمكانك القيام بعدة منقلات خاصة بال fragments لفعالية ما باستخدام نفس ال FragmentTransaction. عندما تكون جاهز لاحداث التغيرات, عندها يتوجب عليك استدعاء التابع commit().

فيما يلي مثال على كيفية اضافة fragment إلى التنسيق السابق

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_articles);

// Check that the activity is using the layout version with
// the fragment_container FrameLayout
if (findViewById(R.id.fragment_container) != null) {

// However, if we’re being restored from a previous state,
// then we don’t need to do anything and should return or else
// we could end up with overlapping fragments.
if (savedInstanceState != null) {
return;
}

// Create an instance of ExampleFragment
HeadlinesFragment firstFragment = new HeadlinesFragment();

// In case this activity was started with special instructions from an Intent,
// pass the Intent’s extras to the fragment as arguments
firstFragment.setArguments(getIntent().getExtras());

// Add the fragment to the ‘fragment_container’ FrameLayout
getSupportFragmentManager().beginTransaction()
.add(R.id.fragment_container, firstFragment).commit();
}
}
}

وبما ان ال fragment قد تمت اضافته إلى  container   FrameLayout في زمن التنفيذ – بدل من تعريفه ضمن ملف تنسيق الفعالية عبر استخدام العنصر <fragment> – لذلك فإنه باستطاعة الفعالية ازالة ال fragment واستبداله ب fragment  اخر.

استبدال Fragment  ب Fragment  آخر

إن سيناريو واجرائية استبدال ال fragment  مشابه لسيناريو اضافة fragment  , ولكنها تتطلب استخدام التابع replace()بدل من التابع add().

لا تنسى بانه عندما تقوم بمناقلات ال fragment , مثل ازالة fragment  او استبدال واحد باخر, فإنه من الانسب ان تسمح للمستخدم بالرجوع والتراجع ” Undo” عن هذه التغيرات.

لكي تسمح للمستخدم بالتجول بشكل تراجعي خلال مناقلات ال fragment , يتوجب عليك استدعاء التابع addToBackStack()قبل تثبيت المناقلة FragmentTransaction.

ملاحظة : عندما تقوم بازالة او استبدال fragment  وتضيف المناقلة إلى المكدس المخصص لعملية التراجع backStack , عندها يتوقف ال fragment  الذي تتم ازالته (يتوقف ولا يهدم stopped but not destroyed).

في حال تجول المستخدم رجوعا بهدف استعادة ال fragment , عندها فإنه يقوم ب restarts من جديد.

في حال لم تقم باضافة المناقلة إلى مكدس التراجع back stack  , عندها سيتم تدمير ال fragment في حال تمت ازالته او استبداله.

مثال على استبدال fragment باخر:

// Create fragment and give it an argument specifying the article it should show
ArticleFragment newFragment = new ArticleFragment();
Bundle args = new Bundle();
args.putInt(ArticleFragment.ARG_POSITION, position);
newFragment.setArguments(args);

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack so the user can navigate back
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);

// Commit the transaction
transaction.commit();

ياخذ التابع addToBackStack()معامل اضافي عبارة عن سلسلة محرفية , ويقوم هذا المعامل بتحديد اسم فريد يميّز هذه المناقلة. لا تحتاج بشكل عام لهذا الاسم إلا في حال كنت تخطط للقيام بعمليات متقدمة لى ال fragment باستخدام واجهات FragmentManager.BackStackEntry APIs.

لتحميل مثال هذا الدرس انقر هنا

 وإلى اللقاء في الحلقة القادمة من هذه السلسلة والتي تتحدث عن “التواصل بين بقية ال fragments”

وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته.

 المصطلح  الترجمة

transactions

مناقلة

Stack

مكدس

fragment

fragment   سنبقيها كما هي حتى لا تتحول الترجمة إلى ترجمة مضللة

Advertisements

, , , , , , , , , , , , , , , , , , , , , , ,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: