إنشاء واجهة مستخدم مرنة

الإعلانات

إنشاء واجهة مستخدم مرنة

 

 

إنشاء واجهة مستخدم مرنة

عندما تقوم بتصميم تطبيقك ليدعم نطاق واسع من أحجام الشاشات، يمكنك إعادة إستخدام الشظايا في تكوينات مخطط مختلفة..

لتحسين تجربة المستخدم بناءً على مساحة الشاشة المتاحة.

مثال، قد يكون من المناسب، على جهاز الهاتف، عرض شظية واحدة فقط في كل مرة لواجهة مستخدم أحادية اللوح.

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

توفر فئة FragmentManager دوال تسمح لك بإضافة شظايا أو إزالتها أو إستبدالها إلى نشاط أثناء وقت التشغيل لإنشاء تجربة حيوية.

لمزيد من المعلومات حول تنفيذ الشظايا، راجع المصادر التالية.

الشظايا
دعم الأجهزة اللوحية والهواتف
نموذج تطبيق

 

 

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

 

 

 

 

 

إضافة شظية إلى نشاط أثناء وقت التشغيل


بدلاً من تعيين الشظايا لنشاط ما في ملف المخطط – كما هو موضح في الدرس السابق بإستخدام عنصر <fragment>

يمكنك إضافة شظية إلى النشاط أثناء وقت تشغيل النشاط. يعد ذلك ضرورياً إذا كنت تخطط لتغيير الشظايا خلال فترة النشاط.

لتنفيذ معاملة مثل إضافة أو إزالة شظية، يجب إستخدام “مدير الشظايا” FragmentManager لإنشاء “إجراء الشظايا” FragmentTransaction ..

والذي يوفر واجهات برمجة تطبيقات لإضافة، إزالة، إستبدال، وتنفيذ معاملات شظايا أخرى.

إذا كان نشاطك يسمح بإزالة وإستبدال الشظايا، يجب عليك إضافة الشظية (الشظايا) الأولية إلى النشاط أثناء دالة ()onCreate للنشاط.

إحدى القواعد المهمة عند التعامل مع الشظايا – خاصة عند إضافة شظايا أثناء وقت التشغيل – هي أن..

مخطط النشاط الخاص بك يجب أن يتضمن “حاوية عرض” يمكنك فيها إدخال الشظية.

يُعد المخطط التالي بديلاً للمخطط الموضح في الدرس السابق والذي يعرض شظية واحده فقط في كل مرة.

من أجل إستبدال شظية بشظية أخرى، يتضمن مخطط النشاط على إطار FrameLayout فارغ يعمل كحاوية للشظية.

لاحظ أن اسم الملف هو نفس اسم ملف المخطط في الدرس السابق، لكن دليل المخطط لا يحتوي على المؤهل الكبير..

لذا يتم إستخدام هذا المخطط عندما تكون شاشة الجهاز أصغر من الحجم كبير لأن الشاشة لا تناسب كلتا الشظايا في نفس الوقت.

 

res/layout/news_articles.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 

بداخل نشاطك، قم بإستدعاء ()getSupportFragmentManager للحصول على “مدير الشظايا” FragmentManager بإستخدام…

واجهات برمجة تطبيقات مكتبة الدعم. ثم قم بإستدعاء “بدء الإجراء” ()startTransaction لإنشاء “إجراء شظية” FragmentTransaction ثم إستدعاء ()add لإضافة شظية.

 

يمكنك إجراء معاملات شظايا متعددة للنشاط، بإستخدام نفس “إجراء الشظايا” FragmentTransaction.

عندما تكون مستعداً لإجراء التغييرات، يجب عليك إستدعاء دالة الإلتزام ()commit.

 

مثال، فيما يلي كيفية إضافة شظية إلى المخطط السابق: إنشاء واجهة مستخدم مرنة إنشاء واجهة مستخدم مرنة

 

KOTLIN

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

class MainActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        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 a new Fragment to be placed in the activity layout
            val firstFragment = HeadlinesFragment()

            // In case this activity was started with special instructions from an
            // Intent, pass the Intent's extras to the fragment as arguments
            firstFragment.arguments = intent.extras

            // Add the fragment to the 'fragment_container' FrameLayout
            supportFragmentManager.beginTransaction()
                    .add(R.id.fragment_container, firstFragment).commit()
        }
    }
}

JAVA

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 a new Fragment to be placed in the activity layout
            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();
        }
    }
}

 

لأنه تمت إضافة الشظية إلى حاوية FrameLayout أثناء وقت التشغيل — بدلاً من تعيينها في مخطط النشاط..

بإستخدام عنصر <fragment> – يمكن للنشاط إزالة وإستبدال الشظية بشظية مختلفه.

 

 

 

 

إستبدال شظية بشظية أخرى


إجراء إستبدال الشظية يشبه إجراء إضافة شظية، ولكنه يتطلب دالة الإستبدال ()replace بدلاً من دالة الإضافة ()add.

ضع في إعتبارك أنه عند إجراء معاملات الشظية، مثل إستبدال أو إزالة شظية، يكون من المناسب دائماً السماح للمستخدم..

بالتنقل إلى الخلف و “التراجع” عن التغيير. للسماح للمستخدم بالإنتقال إلى الخلف خلال معاملات الشظايا..

يجب عليك إستدعاء ()addToBackStack قبل إلزامك لـ FragmentTransaction.

 

ملاحظة: عند إزالة أو استبدال شظية وإضافة المعاملة إلى الكومة الخلفية، يتم إيقاف الشظية الذي تمت إزالتها (وليس تدميرها).

إذا أنتقل المستخدم مرة أخرى لإستعادة الشظية، فسيتم إعادة تشغيلها. إذا لم تقم بإضافة المعاملة إلى الكومة الخلفية، فسيتم تدمير الشظية عند إزالتها أو إستبدالها.

 

مثال على إستبدال شظية بشظية أخرى: 

 

KOTLIN

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

val transaction = supportFragmentManager.beginTransaction().apply {
  // 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
  replace(R.id.fragment_container, newFragment)
  addToBackStack(null)
}

// Commit the transaction
transaction.commit();

JAVA

// 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 معامل سلسلة إختياري والذي يحدد أسم فريد للمعاملة.

الأسم غير مطلوب إلا إذا كنت تخطط لتنفيذ عمليات شظايا متقدمة بإستخدام واجهات برمجة التطبيقات FragmentManager.BackStackEntry.

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

الإعلانات

اترك رد