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

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

Crossfading two views

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

1. إنشاء ال views
2. اعداد التحريك set up the Animation
3. تلاشي ال views Crossfade the Views

ملاحظة : بالامكان تجريب المثال عبر تحميله من الرابط التالي : Download the sample app

التحريك بطريقة التلاشي Crossfade animation  (يعرف عادة بالانحلال dissolve): بتم بشكل تدريجي عبر تلاشي احد مكونات واجهة المستخم UI وفي نفس الاثناء تظهر مكونات اخرى من مكونات واجهة المستخدم UI components.

تعتبر طريقة التحريك هذه مفيدة في الحالات التي ترغب فيها بالانتقال من محتوى لاخر بين ال views ضمن تطبيقك.

يعتبر التلاشي بسيطا وقصيرا ولكنه يقدم لنا انتقال سلس من شاشة إلى الشاشة الاخرى.

على كل الاحوال , عندما لا نستخدم هذه الطريقة في الانتقال والتحريك , فسوف تظهر الانتقالات مفاجئة وسريعة.

فيما يلي مثال على تلاشي المؤشر الذي ينقلنا إلى النص

 التحريك بطريقة التلاشي Crossfade animation

إذا رغبت بتجاوز المراحل هنا ورؤية المثال كاملا يعمل , بإمكانك تحميله من الرابط التالي download  وتشغيل التطبيق الموجود فيه , ومن ثم قم باختيار مثال “التلاشي” crossfade.

سوف تجد الملفات التالية التي تحوي على  الكود :

• src/CrossfadeActivity.java
• layout/activity_crossfade.xml
• menu/activity_crossfade.xml

إنشاء ال views:Create the Views

قم بإنشاء Two views التي ترغب بأن تطبق التلاشي عليها. يقوم المثال التالي بإنشاء مؤشر تقدم progress indicator ومساحة نصية قابلة للانزلاق scrollable text view:

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

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

        <TextView style="?android:textAppearanceMedium"
            android:lineSpacingMultiplier="1.2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum"
            android:padding="16dp" />

    </ScrollView>

    <ProgressBar android:id="@+id/loading_spinner"
        style="?android:progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

اعداد التحريك Set up the Animation

لاعداد التحريك يتوجب عليك القيام بما يلي :

1. إنشاء متحولات اعضاء member variables لل views التي نرغب بجعلها تتلاشي. سوف تحتاج إلى هذه المراجع references في وقت لاحق , وذلك عندما تقول بتعديل ال view خلال التحريك.
2. بالنسبة لل view الذي نرغب بأن يظهر بشكل متلاشي, نسند قيمة visibility إلى القيمة GONE (بالتالي يكون هذا الview مخفي في البداية ولا يأخذ أي حيز ضمن التنسيق).إن اسناد هذه القيمة لل view تجعل من ال view  غير مرئي ولا يأخذ حيز ضمن التنسيق , ويتم تجاهله اثناء حسابات توزع الاماكن في التنسيق, ويسرع المعالجة.
3. نقوم بخزن خاصية النظام التي تدعى config_shortAnimTime  ضمن متحول عضو member variable. تقوم هذه الخاصية بتعريف فترة زمنية “قصيرة” قياسية للتحريك. تعتبر هذه الفترة مثالية فيما يخص التحريك البسيط أو انواع التحريك التي تحدث بشكل متكرر.
4. كذلك هنالك كل من خاصيتي config_longAnimTimeو config_mediumAnimTimeوهما ايضا متاحتان للاستخدام في حال رغبت باستخدامهما.

فيما يلي مثال يقوم باستخدام التنسيق الوارد في المثال السابق على انه التنسيق الاساسي ضمن فعالية :

public class CrossfadeActivity extends Activity {

    private View mContentView;
    private View mLoadingView;
    private int mShortAnimationDuration;

    ...

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

        mContentView = findViewById(R.id.content);
        mLoadingView = findViewById(R.id.loading_spinner);

        // Initially hide the content view.
        mContentView.setVisibility(View.GONE);

        // Retrieve and cache the system's default "short" animation time.
        mShortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }

تلاشي ال views Crossfade the

الآن , وبعد اعداد ال views, نقوم بجعلهم يتلاشون عبر اتباع الخطوات التالية :

• بالنسبة لل views التي نرغب بجعلها تظهر بشكل متلاشي fading in , نسند قيمة 0 للخاصية alpha , ونسند القيمة VISIBLE لخاصية visibility.(تذكر بأننا في البداية اسندنا القيمة GONEإلى الخاصية visibility).هذا يجعل ال view مرئي ولكنه شفاف تماما.
• بالنسبة لل view الذي نرغب بان يظهر بشكل متلاشي, نحرك قيمةalpha  من القيمة 0 للقيمة 1.وفي نفس الوقت, بالنسبة لل view الذي يتلاشى ليختفي , نحرك قيمة alpha  من القيمة 1 للقيمة 0.
• باستخدام التابع onAnimationEnd()وذلك ضمن المتنصت Animator.AnimatorListener, نسند القيمة GONE لخاصية visibility الخاصة ب view الذي يجب ان يتلاشى ليختفي. بالرغم من ان قيمة alpha مساوية للصفر, ولكن اسناد القيمة لخاصية visibility للعنصر الذي نرغب باختفاءه , يمنع الview من ان ياخذ حيز ضمن التنسيق, ويحذفه من ضمن حسابات التنسيق في توزيع المساحة , وبالتالي يسرع المعالجة.

المثال التالي ادناه يبين كيف يتم الامر:

private View mContentView;
private View mLoadingView;
private int mShortAnimationDuration;

...

private void crossfade() {

    // Set the content view to 0% opacity but visible, so that it is visible
    // (but fully transparent) during the animation.
    mContentView.setAlpha(0f);
    mContentView.setVisibility(View.VISIBLE);

    // Animate the content view to 100% opacity, and clear any animation
    // listener set on the view.
    mContentView.animate()
            .alpha(1f)
            .setDuration(mShortAnimationDuration)
            .setListener(null);

    // Animate the loading view to 0% opacity. After the animation ends,
    // set its visibility to GONE as an optimization step (it won't
    // participate in layout passes, etc.)
    mHideView.animate()
            .alpha(0f)
            .setDuration(mShortAnimationDuration)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mHideView.setVisibility(View.GONE);
                }
            });
}

بالامكان العودة إلى المثال الوادر في الملف المرفق لتطبيقك السيناريو كاملا

وإلى لقاء قريب في الحلقة القادمة التي تتحدث ايضا عن موضوع جديد في مجال التحريك ” ViewPager”

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