طراحی اسلایدر مشابه اپلیکیشن دیجی کالا 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 محصول مورد نظر را بر می گردونه نامش رو حالا شما می تونید اکتیویتی دیگه رو داشته باشین و به اون هدایت کنید.هدف از تهیه این آموزش این بود که برخی از عزیزان ممکنه متوجه منظور بنده توی فیلم آموزشی نشده باشن و به خاطر همین این مورد رو کد نویسی کردم ام و در اختیار شماعزیزان قرار دادم.
لطفا فیلم آموزشی رو هم ببنید برای توضیحات بیشتر :
دانلودطراحی اسلایدر مشابه اپلیکیشن دیجی کالا Android Slider Image
حجم فیلم : ۹۲ مگابایت
پسورد فایل فشرده : homeandroid.ir
منبع آموزش : خانه اندروید
با سلام و احترام.
دوست عزیز من میخوام نوار مشکی رنگ پایین اسلایدر رو حذف کنم چیکار باید کنم؟؟
سلام خدمت شما
باید کتابخانه رو ویرایش کنید
با احترام
سلام و عرض خسته نباشید.
میخوام حافظه کش اسلایدر پاک بشه و تصاویر رو کش نکنه.باید چه کار کنم ؟
سلام خدمت شما
لینک اسلایدر در پست اومده توی github
مشاهده کنید .
با احترام
سلام دوست عزیز
ممنون از آموزش خوبتون
من میخوام به جای اینکه از پوشه drawable عکسارو بخونه
میخوام از دیتابیس روی هاست یا mysql هم عکسا و هم متن رو بخونه
آموزشی در این مورد دارین
ممنون
سلام خدمت شما دوست عزی مرتضی
دقت بفرمایین قبلا تهیه شده و موجود هست در ادرس زیر :
https://homeandroid.ir/android-slider-dynamic-studio
با احترام.
سلام خیلی عالی بود.
فقط یه سوال من میخام به slider
radius بدم لطفا راهنمایی کنید.؟/؟؟؟؟
سلام
باید خود کتابخانه رو دانلود کنید .
تا بتوانید ویرایش کنید .
با احترام
سلام خسته نباید استاد عزیز
بنده با اینکه vpn خریدم بازهم متصل نمیشه و مشکل برخوردم میشه بگید از چه vpnی استفاده کنم؟
سلام و احترام
در تلگرام به بنده پیام بفرستین.
با احترام.
ببخشید من هم توی این قسمت اشکال دارم. ممنون از زحمات شما
که با زدن روی عکس ،عکس بزرگ بشه.
سلام و احترام مجدد خدمت شما
دوست عزیز توی فیلم این موارد رو توضیح دادم.
با احترام.
سلام خسته نباشید ببخشید یک سوالی داشتم ممنون میشم جواب بدید.میشه همزمان با نمایش عکسها روی اونها صدا گذاشت؟ صدا فقط در حد یک کلمه.
میتونم برای اینکار از همین قسمت استفاده کنم یا نه؟
سلام و درود بله میشه دوست عزیز
باید کتابخانه رو ویرایش کنید.
با احترام.
سلام
فایل رو دانلود کردم ولی هر چی اکسترکت میکنم میزنه رمز فایل غلطه
سلام دوست عزیز
زیر پست نوشته پسورد فایل : homeandroid.ir
با احترام.
سلام
ممنون از آموزش هاتون
من این اسلایدر رو توی اکتیویتی قرار دادم که از
NavigationView.OnNavigationItemSelectedListener
ایمپلیمنت شده ولی بعد از اجرا محتویات تولبار مثل اسم اپلیکیشن و دکمه مربوط به نویگیشن دراور حذف شدن و دیگه اینتنت های متصل به آیتم های نویگیشن کار نمیکنن، وقتی کدهای اسلایدر رو کامنت کردم همه چیز درست شد
باید چیکار کنم؟ به نظرتون مشکل از کجاس؟
سلام دوست عزیز
زیر پست یک فیلم آموزشی هست دانلود کنید خدمتون آموزش دادم در یک کلاس مجزا.
با احترام.
سلام
لطفا نحوه کلیک بر روی عکس های اسلایدر رو هم توضیح بدهید
که چجوری با کلیک بر روی عکس اون عکس به صورت بزرگ نمایش داده بشه
یا یک صفحه جدید بره و جزییات رو توضیح بده مثلا همین برنامه دیجیکالا
وقتی رو عکس اسلایدر کلیک میکنیم میره ی صفحه مشخص
برای برنامه های سمت سرور میخواستم
اگه وقت درست کردن این اموزش رو ندارین لطفا یک سایتی که توضیح داده این موضوع رو معرفی کنین
خودم گشتم ولی چیز بدرد بخوری پیدا نکردم
سلام و احترام
دوست عزیزم بله برای این مورد در نظر دارم یک فیلم اموزشی درست کنم حتما دوستم.
با احترام.
سلام
ممنون از آموزش خوبتون
فقط یه سوال چه طور باید این اسلایدر رو در برنامه آفلاین اجرا کنیم؟
سلام دورد خدمت شما
توی فیلم اموزشی توضیح دادم چطور افلاین اجرا کنید ولی خوب عملا راحته کافی توی پوشه drawable تصاویر رو اضافه کنید و آدرس دهی کنید.
R.drawbale.=”نام تصویر”
سلام خسته نباشید
واقعا استاد دستتون درد نکنه مشکل منو در باره این کتابخونه حل کردید
خدا خیرتون بده 🙂
سلام دوست عزیز اسماعیل
وظیفه بود.
موفق باشین.
با احترام.