• Home
  • Courses
  • Portfolio
  • Contact
    Tiger 4 CodeTiger 4 Code
    • Home
    • Courses
    • Portfolio
    • Contact

      Android اندرويد

      • Home
      • Blog
      • Android اندرويد
      • 37 -اندرويد : التلاشي عند الانتقال بين ال views

      37 -اندرويد : التلاشي عند الانتقال بين ال views

      • Posted by Schwarztiger
      • Categories Android اندرويد
      • Date April 19, 2013
      • Comments 0 comment
       

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

      اندرويد : التلاشي عند الانتقال بين ال views 

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

      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
      بالامكان رؤية المثال من الرابط التالي : انقر هنا 

       

       التحريك بطريقة التلاشي 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”

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

      الترجمة

      المصطلح

      متحول عضو

      Member variable

      مرجع – أي مرجع للغرض الذي تم انشائه

      reference

      تحريك

      Animation

      Tag:Android, android animation, Android development, Android linux, Android Market, android operation system, Android Programming, Android system, corssfading views android, Google, Google play, internal storage, التحريك ضمن اندرويد, برمجة اندرويد, تطوير وبرمجة اندرويد, نظام اندرويد

      • Share:
      author avatar
      Schwarztiger

      Previous post

      36 -اندرويد :اضافة التحريك Adding Animation
      April 19, 2013

      Next post

      38 -اندرويد : استخدام ViewPager للانتقال بين الشاشات Using ViewPager for Screen Slides
      April 19, 2013

      You may also like

      56 : اندرويد : استخدام “واجهة برمجة التطبيقات” API الخاصة بالنسخ الاحتياطي Backup
      20 August, 2013

        ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development اندرويد :  استخدام واجهة برمجة التطبيقات API الخاصة بالنسبخ الاحتياطي Backup السلام عليكم ورحمة الله وبركاته  سوف نتعلم في هذا الدرس مايلي : تسجيل التطبيق …

      56 : اندرويد : التزامن مع السحابة الالكترونية Syncing to the Cloud
      20 August, 2013

        ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development اندرويد :  التزامن مع السحابة الالكترونية Syncing to the Cloud السلام عليكم ورحمة الله وبركاته  سنتطرق ضمن هذه الحلقات إلى موضوع حديث نسبيا , الا …

      55 : اندرويد : ارسال طلبات عمل إلى الخدمة التي تعمل في الخلفية sending work request to the background service
      4 July, 2013

        ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development اندرويد :  ارسال طلبات عمل إلى الخدمة التي تعمل في الخلفية Sending work requests to the background service السلام عليكم ورحمة الله وبركاته سوف نتعلم …

      Leave A Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Search

      Latest Courses

      Android Development

      Android Development

      $950.00
      HTML Tutorial: HTML & CSS for Beginners

      HTML Tutorial: HTML & CSS for Beginners

      $800.00
      Learn WordPress Content Management System

      Learn WordPress Content Management System

      Coming soon
      logo-eduma-the-best-lms-wordpress-theme

      info@tiger4code.com

      Links

      • Courses
      • Portfolio

      Copyright 2019 | Educational, Web & Mobile Development Platform By Tiger 4 Code