القائمة الرئيسية

الصفحات

شرح كيفية عمل Image slider في اندرويد ستوديو | android Studio Tutorial

 

كيفية عمل Image slider في اندرويد ستوديو

كيفية عمل Image slider في اندرويد ستوديو


عند انشائك لتطبيق متجر في الغالب تحتاج الى Image slider لكي تمرر الصور ويستطيع مستخدمي التطبيق التبديل بين صور المنتجات لديك او اذا كان لديك منتج متوفر بأكثر من شكل فيمكنك ارفاق جميع الاشكال الخاص به عن طريق image slider والمميز في في هذة المكتبة انها تساعدك على التبديل بين المنتجات بطريقة  سلسه مع اضافة بعض الanimaions للانتقالات بصورة رائعه وايضا تظهر مؤشر اسفل الصور يحتوي على مجموعة من النقاط وعدد النقاط هو عدد الصور وايضا يوجد نص للصور .


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


الكثير منكم يستخدم لغه java في هذا الوقت لذلك نحاول وضع لكم جميع الافكار والطرق التي قد تؤثر في سلوك تطبيقك وايضا في الايام المقبله سوف نقوم بفعل نفس الامر مع اللغات المختلفه ولكن نرجوا منكم دعم الموقع عن طريق مشاركته مع اصدقائكم لان هذا يساعدنا على الاستمرار في تنزيل الكثير والمزيد من الاكواد المفيده التي تحتاجونها ويهدف الموقع الى مساعده جميع العرب في تطوير تطبيقاتهم ومساعدتهم ايضا في تعلم البرمجه حيث ان علم البرمجه حاليا يعد من اكثر المهارات التي يجب ان تتوفر لدى كل شخص. هذا العلم من العلوم الاساسيه. في المستقبل لانه كما نرى الكثير من الاشياء والادوات التقنيه تتجه بشكل اكبر الى التكنولوجيا وهذا لان اغلب الشروحات نجدها عند الاجانب ولكن العرب لا يتوفر لديهم معرفه كامله بالاكواد او بمعنى اخر من يفهم اللغه بشكل كامل يكون شخص قد تعلمها من الاجانب ونحن نحاول معكم ان ننقل هذا لكم وتوفيره لكم باللغه العربيه الان اترككم مع الاكواد والشرح في مقالة اليوم .


شرح تثبيت واستخدام ImageSlideshow للاندرويد


قم اولا بوضع الاكواد التالية في الاماكن المخصصه لها لكي تتمكن من استخدام المكتبه بدون اي مشاكل 


implementation 'com.github.denzcoskun:ImageSlideshow:0.0.6'

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
    


كود تصميم xml للImageSlider


كود تصميم xml للImageSlider

هذا هو الكود الخاص بتصميم ImageSlider الذي يمكنك استخدامه في xml ويمكنك من عمل الانتقالات بكل بسهوله يمكنك التعديل في حجم الكود التالي والتحكم به بشكل افضل من خلال تعديلك على الكود او يمكنك تركه كما هو موضح بالشكل التالي ادناه .


main.xml


  <com.denzcoskun.imageslider.ImageSlider
            android:id="@+id/imageslider"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_220sdp"
            android:layout_marginTop="@dimen/_15sdp"
            app:auto_cycle="false"
            app:error_image="@drawable/bage1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/img_back"
            app:placeholder="@drawable/bage1" />


الكود الخاص بتشغيل ImageSlider في MainActivity.class


الكود الخاص بتشغيل ImageSlider في MainActivity.class

في هذا الكود قمت بتشغيل ImageSlider عن طريق وضعه داخل List وبعدها قم بتعريفه كما هو موضح بالشكل ادناه وايضا قمت بأخذ reference من الlist لكي اقوم بإضافة شكل المميز في الاضافة انه يمكنك وضع صورة من الانترنت عن طريق وضع الرابط الخاص بها مباشرة او يمكنك استخدام صورة متوفره لديك في drawable كلا الخيارات بين يديك , ولقد قمت بوضع لكم مثال بكل طريقة سواء الرابط او صورة مباشرة من داخل الاندرويد ستوديو .


main code


public class MainActivity extends AppCompatActivity {
List<SlideModel> imageList = new ArrayList<>();
  
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageList = findViewById(R.id.imageList);

// image slider

imageList.add(new SlideModel("www.google.com", "name."));
imageList.add(new SlideModel(R.drawable.bage2, "name."));
imageList.add(new SlideModel(R.drawable.bage3, "name."));
imageslider.setImageList(imageList,true);


لمزيد من الاكواد يمنك مشاهدة باقي المقالات على الموقع

التنقل السريع