شرح كيفية اضافة تأثير التحميل كالذي في الفيسبوك داخل Recyclerview (اندرويد ستوديو بالعربي)

Ahmed Mahmoud

اخر تحديث :

شرح كيفية اضافة تأثير التحميل كالذي في الفيسبوك داخل Recyclerview (اندرويد ستوديو بالعربي)

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

متابعي موقعنا الاعزاء مرحبا بكم في مقالة جديدة في برنامج android studio في هذة المقالة سأشرح لكم كيفة اضافة تأثير التحميل كالذي في برنامج وتطبيق الفيسبوك لتطبيقك على الاندرويد ستوديو كما في صورة المقالة بالاعلى , حيث يتم استخدام هذا البرنامج لتطوير (development) وبرمجة تطبيقات الاندرويد حيث يعمل اندرويد ستوديو في بيئة xml للتصميم ويمكن تطويرالتطبيق الخاص بك بلغة الجافا او الكوتلن وقد سبق وان قدمنا لكم اكواد برمجية لي كلاتا اللغتين ، حيث يتعد لغة الكوتلن تطوير من جوجل للجافا وتعد اللغة الرسمية لتطوير التطبيقات لدى جوجل ولكن ما يعيبها ان البرنامج يكون مساحتة كبيرة خلافا عن الجافا الذي تكون مساحتة قليلة ، ويفضل تحميل اخر نسخة من الاندرويد استديو لانها تحوي مميزات رهيبة وتسهل على المطور عملية تطوير التطبيقات .

عن الاندرويد ستوديو

يعد برنامج أندرويد ستوديو من اقوى البرامج الـ برمجة المخصصة في مجال تطوير تطبيق او تطبيقات الاندرويد كما ذكرنا ، ويمكن أن تقوم بي تحميل البرنامج مجانا من خلال الموقع الرسمي ، واذا كنت تبحث عن شرح او كورس تطوير تطبيقات الأندرويد فنحن نقدم لكم مجموعة كبيرة من المشاريع الجاهزة والاكواد التي سوف تساعدك على تعلم تطوير تطبيقات أندرويد إلى الوصول الى مرحلة الاحتراف بإذن الله

تاريخ الاندرويد ستوديو

كانت بداية الاندرويد عام 2003 على يد آندي روبين وعدد من المبروجين الاخرين حيث تعد أندرويد استوديو ‏ منصة لكتابة و انشاء التطبيقات ( apps ) والتي تسهل على المطورين كتابة الشيفرة المصدرية لتطبيقات أندرويد سواء بلغة جافا ( java ) في بيئة ide ، كما تسمح للمطور بمعاينة الهيئة التطبيقه الخاصة على مختلف قياسات الشاشات بشكل فوري أثناء التطوير ألتطبيقات والبرامج ، وتسهّل البرمجة تطوير التطبيقات متعددة اللغات ويمكنك تنزيل المحرر من خلال الموقع الرسمي للبرنامج ويمكنك الـ بداية في البرمجة وتعلم البرمجة باستخدام لغة الجافا ويوجد دروس في موقعنا وشروحات في الجافا يمكنك الاطلاع عليها ويوجد كتاب او مجموعة كتب لتعلم كيفية الكتابة بالجافا .

اولا توجة لاضافة هذة المكتبة

dependencies {
      implementation 'com.facebook.shimmer:shimmer:0.5.0'
}

وبعدها توجة الى ملف الذي تريد عمل التأثير بة , ويكون هذا الملف الذي قمت بعمل التصميم الخاص بك بداخلة سواء كان cardview او image او غيرها ( الملف الذي يرث recyclerview منة ) ويكون xml ساجدة في layout واضف هذا الكود

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerFrameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
###
    </com.facebook.shimmer.ShimmerFrameLayout>

لتصبح بهذا الشكل

قم بعمل android:background="@color/colorshimer"
قم بتغيير @color/colorshimer وضع مكانها #DDDDDD (او اختيار اي لون اخر ولكن هنا انا اخترت اللون الرمادي)

الان توجة الى ملف Adaptoreqrbas الخاص بالـ recyclerview وقم بإضافة الاكواد التالية اسفل

public class PersonAdaptoreqrbas extends RecyclerView.Adapter<PersonAdaptoreqrbas.Holder>

    boolean isShimer=true;
    int noOfitemtopshow =8;

يمكنك تغير رقم 8 وهو العدد الذي تريدة ان يظهر اثناء عملية التحميل

لتصبح بهذا الشكل

واسفل

class Holder extends RecyclerView.ViewHolder {

اضف التالي

ShimmerFrameLayout shimmerFrameLayout;

وأسفل

public Holder(@NonNull View itemView) {

super(itemView);

اضف

shimmerFrameLayout=itemView.findViewById(R.id.shimmerFrameLayout);

قم بتغيير shimmerFrameLayout بإسم الاي دي الذي قمت بوضعه في id الموجود في الصورة الاولى بالاعلى

اسفل public void onBindViewHolder

 if (isShimer) {
holder.shimmerFrameLayout.startShimmer();
        }

        else {
            holder.shimmerFrameLayout.stopShimmer();
            holder.shimmerFrameLayout.setShimmer(null);
###

}

قم بكتابة كودك مكان ### مثل الذي بالصورة

والان توجة الى

public int getItemCount() {

واضف الكود التالي

return isShimer ? noOfitemtopshow:personal.size();

الان توجة الى ملف MainActivity وابحث عن

protected void onCreate(Bundle savedInstanceState) {

واصف الكود التالي اسفلة

recyclerView.setHasFixedSize(true);

وايضا هذا الكود

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {

###

                personAdapterr.isShimer = false;
                personAdapterr.notifyDataSetChanged();
            }
        }, 3000);

يمنكك تغير 3000 وهو عدد الانتظار بالميلي ثانية

استبدل ### بالكود والاوامر الخاصة بك كما في الصورة