خانه اندروید

800 ساعت آموزش اختصاصی

بیش از 30 هزار دانشجو

آموزش های پروژه محور

مطالب پیشنهادی حتما مشاهده کنید :

طراحی اسلایدر مشابه اپلیکیشن دیجی کالا Android Slider Image

طراحی اسلایدر مشابه اپلیکیشن دیجی کالا Android Slider Image

طراحی اسلایدر مشابه اپلیکیشن دیجی کالا Android Slider Image

فیلم آموزشی طراحی اسلایدر Android Studio

Android Slider Image ، عرض سلام وقت بخیر خدمت همراهان همیشگی سایت خانه اندروید توی این جلسه از معرفی کتابخانه اندروید می خواهیم بپردازیم به طراحی اسلایدر مشابه اپلیکیشن دیجی کالا که خیلی از دوستان درخواستی توی این زمینه داشتن و با توجه به وقتی داشتم فیلم آموزشی این قسمت رو تهیه کرده ام ودر اختیار شما عزیزان قرار میدیم. اولین نکته وجود داره اینکه ما از یک کتابخانه استفاده کرده ایم لذا توضیحات توی این زمینه خدمتون ارائه میدم.

میریم سراغ آموزش طراحی اسلایدر دیجی کالا Android Slider Image :

اول کتابخانه های زیر را به گردل خودتون اضافه کنید .

compile 'com.android.support:support-v4:+'
compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'

پس از اضافه کردن کتابخانه ها وارد قسمت xml یا activitymain.xml شوید و سپس لایه اسلایدر را ایجاد کنید. سورس کد زیر را کپی و در قسمتی که دوست دارید پیست کنید .

<com.daimajia.slider.library.SliderLayout
    android:id="@+id/slider"
    android:layout_width="wrap_content"
    android:layout_height="220dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true" />

پس از اضافه کردن کتابخانه فوق حال نوبت به سطح دسترسی میرسه که شما باید این مورد رو در بخش manifest.xml اضافه کنید.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

دقت کنید اگر پرمیژن های بالا رو ست نکنید امکان لود کردن تصویر وجود نداره از آدرس اینترنتی و برنامه شما اجرا نمیشه دلیلشم به خاطر سطح دسترسی هست که کاربر باید این مورد قبول کنه تا دسترسی داده بشه به اپلیکیشن تا بتونه از آدرس اینترنتی تصاویر رو بارگذاری کنه.

حال در بخش java لطفا موارد زیر را اضافه کنید. دقت کنید در فیلم اموزشی که ارائه دادم فقط داخل اکتیویتی main اومدیم کد نویسی کرده ایم که کاملا اشتباه ولی در این آموزش که به صورت متنی هست به صورت شی گرایی این کارو انجام میدیم یعنی با کلاس ها و سازنده ها این کارو پیش می گیرم.پس کلاسی با نام Slider ایجاد کنید.و سورس کد زیر را در ان پیست کنید.

public class slider implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener {

    ArrayList<String> urlpick, names;
    Context context;

    public void slider(Context context, SliderLayout sliderShow) {
        this.context = context;
        urlpick = new ArrayList<>();
        names = new ArrayList<>();
        names.add("phone");
        names.add("tell");
        names.add("shirt");
        names.add("car");
        names.add("home");
        urlpick.add("https://file.digikala.com/digikala/image/webstore/banner/1396/1/30/e96d24a2.jpg");
        urlpick.add("https://file.digikala.com/digikala/image/webstore/banner/1396/1/28/629d8804.jpg");
        urlpick.add("https://file.digikala.com/digikala/Image/Webstore/Banner/1396/1/29/5092f7cb.jpg");
        urlpick.add("https://file.digikala.com/digikala/Image/Webstore/Banner/1396/1/29/538f2045.jpg");
        urlpick.add("https://file.digikala.com/digikala/image/webstore/banner/1396/2/2/8d4a9d6f.jpg");
        for (int i = 0; i < urlpick.size(); i++) {
            TextSliderView textSliderView = new TextSliderView(context);
            textSliderView.image(urlpick.get(i)).setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);
            textSliderView.bundle(new Bundle());
            textSliderView.getBundle().putString("extra", names.get(i));
            sliderShow.addSlider(textSliderView);
        }
    }

    @Override
    public void onSliderClick(BaseSliderView slider) {
        Toast.makeText(context, slider.getBundle().get("extra")+"", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
}

حال در بخش Mainactivity اسلایدر را کست و هم چنین کلاس مربوط به اسلایدر را فراخوانی می کنیم.

package com.rss.homeandroidir.myapplication.Activity;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;
import com.rss.homeandroidir.myapplication.R;
import com.rss.homeandroidir.myapplication.Slider.slider;

public class MainActivity extends AppCompatActivity {
    SliderLayout sliderShow;
    CoordinatorLayout coordinatorLayout;
    slider slider=new slider();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);
        sliderShow=(SliderLayout) findViewById(R.id.slider);
        slider.slider(this,sliderShow);

    }
}

این مورد به صورت حرفه ای کد نویسی شده و کلیک کردن کاربر رو هم بررسی می کنیم که همان طور که دقت کنیدموقع اجرا اگر روی اسلایدر کلیک کنید با توجه به position محصول مورد نظر را بر می گردونه نامش رو حالا شما می تونید اکتیویتی دیگه رو داشته باشین و به اون هدایت کنید.هدف از تهیه این آموزش این بود که برخی از عزیزان ممکنه متوجه منظور بنده توی فیلم آموزشی نشده باشن و به خاطر همین این مورد رو کد نویسی کردم ام و در اختیار شماعزیزان قرار دادم.

خانه اندروید دانلود فیلم آموزشی  لطفا فیلم آموزشی رو هم ببنید برای توضیحات بیشتر :

homeandroid.ir  دانلودطراحی اسلایدر مشابه اپلیکیشن دیجی کالا Android Slider Image

حجم فیلم آموزشی   حجم فیلم : ۹۲ مگابایت

پسورد فایل   پسورد فایل فشرده : homeandroid.ir

خانه اندروید منبع آموزش : خانه اندروید

درباره نویسنده

جواد محمدی هستم بنیان‌گذار سایت خانه اندروید در خدمتون هستیم با آموزش و مفاهیم برنامه نویسی اندروید-نزدیک به 10 سال هست در حوزه برنامه نویسی فعالیت می کنم. مسلط به kotlin,java,flutter,php هستم . در خانه اندروید دانستی های خودم را در اختیار تمامی علاقمندان به برنامه نویسی قرار میدم.تشکر از اینکه خانه اندرورید رو دنبال می کنید.

قبل از ارسال دیدگاه

  • قبل از ارسال دیدگاه: لطفا دیدگاه خودتون رو فقط در مورد این مطلب بنویسید.سپاسگزارم.

    دیدگاه های طولانی نادیده گرفته می شوند لذا دیدگاه خودتان را در دو خط خلاصه کنید.

    دیدگاه های که شامل توهین یا متن توهین آمیز اصلا تایید نمی شود.

    به دیدگاه های بی نام و نشان که ایمیل فیک و نام فیک وارد می کنند پاسخ داده نمی شود

24 دیدگاه

  1. محمد گفت:

    با سلام و احترام.
    دوست عزیز من میخوام نوار مشکی رنگ پایین اسلایدر رو حذف کنم چیکار باید کنم؟؟

  2. ali گفت:

    سلام و عرض خسته نباشید.
    میخوام حافظه کش اسلایدر پاک بشه و تصاویر رو کش نکنه.باید چه کار کنم ؟

  3. مرتضی گفت:

    سلام دوست عزیز
    ممنون از آموزش خوبتون
    من میخوام به جای اینکه از پوشه drawable عکسارو بخونه
    میخوام از دیتابیس روی هاست یا mysql هم عکسا و هم متن رو بخونه
    آموزشی در این مورد دارین
    ممنون

  4. محمد گفت:

    سلام خیلی عالی بود.
    فقط یه سوال من میخام به slider
    radius بدم لطفا راهنمایی کنید.؟/؟؟؟؟

  5. پورتقی گفت:

    سلام خسته نباید استاد عزیز
    بنده با اینکه vpn خریدم بازهم متصل نمیشه و مشکل برخوردم میشه بگید از چه vpnی استفاده کنم؟

  6. قلی پور گفت:

    ببخشید من هم توی این قسمت اشکال دارم. ممنون از زحمات شما
    که با زدن روی عکس ،عکس بزرگ بشه.

  7. قلی پور گفت:

    سلام خسته نباشید ببخشید یک سوالی داشتم ممنون میشم جواب بدید.میشه همزمان با نمایش عکسها روی اونها صدا گذاشت؟ صدا فقط در حد یک کلمه.
    میتونم برای اینکار از همین قسمت استفاده کنم یا نه؟

  8. مهدی گفت:

    سلام
    فایل رو دانلود کردم ولی هر چی اکسترکت میکنم میزنه رمز فایل غلطه

  9. م.دشتی زاده گفت:

    سلام
    ممنون از آموزش هاتون
    من این اسلایدر رو توی اکتیویتی قرار دادم که از
    NavigationView.OnNavigationItemSelectedListener
    ایمپلیمنت شده ولی بعد از اجرا محتویات تولبار مثل اسم اپلیکیشن و دکمه مربوط به نویگیشن دراور حذف شدن و دیگه اینتنت های متصل به آیتم های نویگیشن کار نمیکنن، وقتی کدهای اسلایدر رو کامنت کردم همه چیز درست شد
    باید چیکار کنم؟ به نظرتون مشکل از کجاس؟

    • Admin گفت:

      سلام دوست عزیز
      زیر پست یک فیلم آموزشی هست دانلود کنید خدمتون آموزش دادم در یک کلاس مجزا.
      با احترام.

  10. علی گفت:

    سلام

    لطفا نحوه کلیک بر روی عکس های اسلایدر رو هم توضیح بدهید

    که چجوری با کلیک بر روی عکس اون عکس به صورت بزرگ نمایش داده بشه
    یا یک صفحه جدید بره و جزییات رو توضیح بده مثلا همین برنامه دیجیکالا
    وقتی رو عکس اسلایدر کلیک میکنیم میره ی صفحه مشخص
    برای برنامه های سمت سرور میخواستم

    اگه وقت درست کردن این اموزش رو ندارین لطفا یک سایتی که توضیح داده این موضوع رو معرفی کنین
    خودم گشتم ولی چیز بدرد بخوری پیدا نکردم

    • Admin گفت:

      سلام و احترام
      دوست عزیزم بله برای این مورد در نظر دارم یک فیلم اموزشی درست کنم حتما دوستم.
      با احترام.

  11. محمود گفت:

    سلام
    ممنون از آموزش خوبتون
    فقط یه سوال چه طور باید این اسلایدر رو در برنامه آفلاین اجرا کنیم؟

    • Admin گفت:

      سلام دورد خدمت شما
      توی فیلم اموزشی توضیح دادم چطور افلاین اجرا کنید ولی خوب عملا راحته کافی توی پوشه drawable تصاویر رو اضافه کنید و آدرس دهی کنید.
      R.drawbale.=”نام تصویر”

  12. اسماعیل گفت:

    سلام خسته نباشید

    واقعا استاد دستتون درد نکنه مشکل منو در باره این کتابخونه حل کردید

    خدا خیرتون بده 🙂