آموزش ساخت اسلایدر متریال دیزان در برنامه نویسی اندروید

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

این اسلایدر در برنامه های خارجی بسیار استفاده می شود.
برای استفاده از این آموزش ابتدا باید یکسری کتاب خانه را اضافه کنید.
پس وارد فایل Build.gradle از نوع module شده و در بخش dependencies اضافه کنید.

compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'

compile 'com.android.support:appcompat-v7:24.2.1'

compile 'com.squareup.picasso:picasso:2.3.2'

compile 'com.nineoldandroids:library:2.4.0'

compile 'com.daimajia.slider:library:1.1.5@aar'

بعد از این کار پروژه را sync کنید.
وارد فایل AndroidManifest.xml شده و دسترسی های زیر را اضافه کنید.

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

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

وارد فایل layout خود شده و کد های زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=.MainActivity">
    <com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="fill_parent"
        android:layout_height="320dp"
        />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=.MainActivity">

<com.daimajia.slider.library.SliderLayout

android:id="@+id/slider"

android:layout_width="fill_parent"

android:layout_height="320dp"

</RelativeLayout>

و کد مربوط به MainActivity.java

package ir.programchi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;
import java.util.HashMap;
public class MainActivity extends AppCompatActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{
    SliderLayout sliderLayout;
    HashMap<String,String> Hash_file_maps ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Hash_file_maps = new HashMap<String, String>();
        sliderLayout = (SliderLayout)findViewById(R.id.slider);
        Hash_file_maps.put("Android CupCake", "http://androidblog.esy.es/images/cupcake-1.png");
        Hash_file_maps.put("Android Donut", "http://androidblog.esy.es/images/donut-2.png");
        Hash_file_maps.put("Android Eclair", "http://androidblog.esy.es/images/eclair-3.png");
        Hash_file_maps.put("Android Froyo", "http://androidblog.esy.es/images/froyo-4.png");
        Hash_file_maps.put("Android GingerBread", "http://androidblog.esy.es/images/gingerbread-5.png");
        for(String name : Hash_file_maps.keySet()){
            TextSliderView textSliderView = new TextSliderView(MainActivity.this);
            textSliderView
                    .description(name)
                    .image(Hash_file_maps.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);
            textSliderView.bundle(new Bundle());
            textSliderView.getBundle()
                    .putString("extra",name);
            sliderLayout.addSlider(textSliderView);
        }
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);
        sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
        sliderLayout.setCustomAnimation(new DescriptionAnimation());
        sliderLayout.setDuration(3000);
        sliderLayout.addOnPageChangeListener(this);
    }
    @Override
    protected void onStop() {
        sliderLayout.stopAutoCycle();
        super.onStop();
    }
    @Override
    public void onSliderClick(BaseSliderView slider) {
        Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();
    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
    @Override
    public void onPageSelected(int position) {
        Log.d("Slider Demo", "Page Changed: " + position);
    }
    @Override
    public void onPageScrollStateChanged(int state) {}
}

package ir.programchi;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log;

import android.widget.Toast;

import com.daimajia.slider.library.Animations.DescriptionAnimation;

import com.daimajia.slider.library.SliderLayout;

import com.daimajia.slider.library.SliderTypes.BaseSliderView;

import com.daimajia.slider.library.SliderTypes.TextSliderView;

import com.daimajia.slider.library.Tricks.ViewPagerEx;

import java.util.HashMap;

public class MainActivity extends AppCompatActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{

SliderLayout sliderLayout;

HashMap<String,String> Hash_file_maps ;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Hash_file_maps = new HashMap<String, String>();

sliderLayout = (SliderLayout)findViewById(R.id.slider);

Hash_file_maps.put("Android CupCake", "http://androidblog.esy.es/images/cupcake-1.png");

Hash_file_maps.put("Android Donut", "http://androidblog.esy.es/images/donut-2.png");

Hash_file_maps.put("Android Eclair", "http://androidblog.esy.es/images/eclair-3.png");

Hash_file_maps.put("Android Froyo", "http://androidblog.esy.es/images/froyo-4.png");

Hash_file_maps.put("Android GingerBread", "http://androidblog.esy.es/images/gingerbread-5.png");

for(String name : Hash_file_maps.keySet()){

TextSliderView textSliderView = new TextSliderView(MainActivity.this);

textSliderView

.description(name)

.image(Hash_file_maps.get(name))

.setScaleType(BaseSliderView.ScaleType.Fit)

.setOnSliderClickListener(this);

textSliderView.bundle(new Bundle());

textSliderView.getBundle()

.putString("extra",name);

sliderLayout.addSlider(textSliderView);

}

sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);

sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);

sliderLayout.setCustomAnimation(new DescriptionAnimation());

sliderLayout.setDuration(3000);

sliderLayout.addOnPageChangeListener(this);

}

@Override

protected void onStop() {

sliderLayout.stopAutoCycle();

super.onStop();

}

@Override

public void onSliderClick(BaseSliderView slider) {

Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();

}

@Override

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

@Override

public void onPageSelected(int position) {

Log.d("Slider Demo", "Page Changed: " + position);

}

@Override

public void onPageScrollStateChanged(int state) {}

}

این آموزش هم به پایان رسید.

موفق و موید باشید.

مطالعه بیشتر

مطالب مشابه

ادامه مطلب

آموزش پارس Json + قرار دادن در RecyclerView

ادامه مطلب

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

ادامه مطلب

آموزش Gridview در برنامه نویسی اندروید

ادامه مطلب

آموزش Seekbar به زبان کوتلین در برنامه نویسی اندروید

ادامه مطلب

آموزش ConstraintLayout در برنامه نویسی اندروید

ادامه مطلب

آموزش TextSwitcher در کوتلین

ادامه مطلب

آموزش پنهان کردن کردن اجزا هنگام Scroll در برنامه نویسی اندروید

ادامه مطلب

آموزش تشخیص اتصال شارژر به گوشی در برنامه نویسی اندروید

18 پاسخ به “آموزش ساخت اسلایدر متریال دیزان در برنامه نویسی اندروید”

سلام و خسته نباشید
اینجا لینک عکس ها ثابت هستند و انگار کش هم میشوند
اگه بخوایم عکس عوض کنیم باید چیکار کرد ؟
مثلا هر چند مدت می خوایم یه سری عکس جدید داشته باشیم
ممنون

پاسخ

سلام و درود
عکس ها ثابت نیستند و در حال لود شدن از url هستند و در مرود کش شدن هم باید بگم کتاب خانه picasso به طور معمول کش نمی کند ولی شما می توانید از کد زیر برای غیر فعال کردن استفاده کنید.

Picasso.with(context)
            .load(imageUrl)
            .resize(width, height)
            .memoryPolicy(MemoryPolicy.NO_CACHE)
            .into(mBackgroundTarget);

Picasso.with(context)

.load(imageUrl)

.resize(width, height)

.memoryPolicy(MemoryPolicy.NO_CACHE)

.into(mBackgroundTarget);

و برای اینکه عکس ها هم متغیر باشند شما همه عکس ها را بریزید توی یک json سپس از url پارس کنید و در برنامه قرار دهید.
موفق باشید.

پاسخ

ali.akvn73 گفت:
مهر 28, 1396 در 8:36 ب.ظ
سلام جناب جعفری پور
وقت بخیر
مشکل من اینه که من میخواستم این عکس ها از سرور لود بشه. اما اینا یه طوریه که فقط دفعه اول که میره از سرور دانلود میکنه، دفعه بعدی که برنامه باز میشه دیگه کاری به سرور نداره.
نهایتا من میخوام عملیات خوندن از سرور رو هردفعه که اپ باز میشه انجام بده. ممنون میشم منو راهنمایی کنین
باتشکر
پاسخ
امیرحسین گفت:
آبان 13, 1396 در 5:39 ب.ظ
چطوری میشه اسنک بار اسلایدر یا دسکریپشن رو غیر فعال کردش
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  آبان 24, 1396 در 2:25 ب.ظ
  سلام و درود برای غیر فعال کردن اسنک می توانید از کد زیر استفاده کنید.
  custom:indicator_visibility="invisible"
  1
  custom:indicator_visibility="invisible"
  یا
  custom:indicator_visibility="hide"
  1
  custom:indicator_visibility="hide"
  موفق باشید.
  پاسخ
hewillcome گفت:
اسفند 25, 1396 در 3:55 ب.ظ
باعرض سلام خدمت شما.
در وهله ی اول جا دارد از شما برای آموزش های فوق العادتون تشکر کنم.
بنده با استفاده از یکی دیگر از آموزش هایتان از Viewpager استفاده کرده ام.
که آنرا متصل به یکی دیگر از آموزش هایتان در مورد bottom navigation کرده ام(کلا همه ی کار های من با آموزش های شما جلو میرود!)
حال می خواستم از این اسلایدر در یکی از صفحات pager استفاده کنم.
مشکلی که هست به کد زیر گیر میدهد و ارور:on a null object reference را میدهد:
sliderLayout.addSlider(textSliderView);
ممنون میشوم راهنمایی ام کنید. با سپاس
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  اسفند 25, 1396 در 4:15 ب.ظ
  سلام خواهش می کنم
  logcat قرار دهید بررسی کنم شاید یه view قرار داید find نکردید یا مثلا دسترسی اینترنت را قرار نداید. ممکن است خطاهای شما در خواندن از حافظه باید باشه چون runtimepermission قرار داده نشده است در سایت سرچ کنید آموزش های مختلفی وجود دارد.
  موفق باشید.
  پاسخ
  1. hewillcome گفت:
    اسفند 25, 1396 در 6:09 ب.ظ
    سلام.
    قربان احساس میکنم بنده سوالم را درست نپرسیدم:
    بنده چگونه می توانم یک ویئویی که در یک layout به غیر از layout اصلی هست،ویوئی را فراخوانی کنم.اجازه دهید با یک مثال این مطلب را بیان کنم:
    لایه ی اصلی بنده Main_activity.xml می باشد. بنده در این لایه یک ViewPager تعریف کرده ام که به این Viewpager 4 لایه ی xml دیگر نسبت داده ام.
    حال در یکی از این 4 لایه ی xml که به Viewpager نسبت داده شده است یک دکمه وجود دارد.
    بنده چگونه می توانم کدی بنویسم که زمانی که در mainActivity.class کسی روی دکمه کلیک کرد،مثلا یه Toast صورت گیرد؟
    پاسخ
    1. محمد حسین جعفری پور مدیر سایت گفت:
      اسفند 25, 1396 در 6:30 ب.ظ
      شما باید با LayoutInflater کار کنید آموزشش را قرار میدهم.
      پاسخ
      1. hewillcome گفت:
        اسفند 25, 1396 در 6:34 ب.ظ
        بسیار سپاس گزارم.
o0arash0o گفت:
اردیبهشت 6, 1397 در 5:00 ق.ظ
عااالی بود (:
تا زمانی که قست نداشتم بزارمش توی فرگمنت ):
لطفا یا اموزشش رو قرار بدین اگر مقدوره یا اگر میشه بگین از این چطور توی فرکمنت باید استفاده کرد (: مرسی
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  اردیبهشت 7, 1397 در 2:12 ب.ظ
  سلام و درود فرقی زیادی بین قرار دادن در فرگمنت و اکتیویتی وجود ندارد ابتدا بخش های فرگمت را مطالعه کنید سپس می توانید خودتان آن را قرار دهید.
  موفق باشید.
  پاسخ
حسین گفت:
مهر 7, 1397 در 11:08 ق.ظ
سلام سخته نباشید
برای ترتیب دادن و مشخص کردن نمایش اولین و دومین و .. تصویر کاری میشه کرد ، دقیقا در آموزش شما هم اولیت عکس لود شده کاپ کیک است که در اسلایدر سومین عکس نمایش داده میشه کلا نتونستم ترتیب دلخواه رو بهش بدم ممنون میشم راهنمای کنید
پاسخ
محمدرضا گفت:
آذر 5, 1397 در 11:45 ب.ظ
با سلام و خسته نباشید
من از این کتابخانه در اکتیویتی ها زیاد استفاده کردم و جواب هم گرفتن چه به صورت انلاین چه به صورت ثابت
اما در فرگمنت مشکل داره ، خیلی هم جستجو کردم اما راه حلی پیدا نکردم و به نال بودن اسلایدر اشاره میکنه
ممنون میشم اگر راه حلی هست به اشتراک بزارید، سپاس
پاسخ
Chootroid گفت:
بهمن 6, 1397 در 5:32 ب.ظ
سلام
من میخوام یک کلاس جدا(Slider.java) برایش تعریف کنم و در هرجای از برنامه که خواستم نمایش بدم
برای این کار چه کنم ؟؟؟؟
پاسخ
امید گفت:
اسفند 17, 1397 در 1:32 ق.ظ
سلام بنده میخوام اینو سر فرگمنت اجرا کنم میشه بگین چجوری؟؟
پاسخ
علی گفت:
شهریور 30, 1398 در 11:04 ب.ظ
سلام و خسته نباشید.
پروژه رو که از گیت هاب دانلود و اجرا میکنم میزارم با گریدل سینک بشه .گریدل رو دانلود میکنه ولی ارور زیر رو میده.با فیل شکن هم وصل میشم.
ERROR: Unsupported method: GradleProject.getProjectDirectory().
The version of Gradle you connect to does not support that method.
To resolve the problem you can change/upgrade the target version of Gradle you connect to.
Alternatively, you can ignore this exception and read other information from the model.
پاسخ
ali گفت:
مهر 1, 1398 در 2:07 ب.ظ
با سلام و عرض ادب.
من میخوام عکس هایی که در پوشه هاست قرار داره رو بیاد نمایش بده.و عکس ها هر سری از هاست آپدیت بشه.نه اینکه دونه دونه لینک هاشون رو در سورس قرار بدم.شما در کامنت گفتید :عکس ها رو بریزید داخل json و از url پارس کنید.میشه کدش رو بگید.اپلیکیشن من پنل مخصوص داره .
پاسخ

مطالب مشابه

18 پاسخ به “آموزش ساخت اسلایدر متریال دیزان در برنامه نویسی اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی