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

برای ساخت اسلایدر در اندروید نیاز است ابتدا کتابخانه ای بنام daimajia داخل گردل اضافه کنیم :

compile "com.android.support:support-v4:27.1.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'

 

اگر بخواهیم تصاویر اسلایدر را از سرور یا حافظه ی گوشی بگیریم نیاز به دو permission داریم که بصورت زیر داخل manifests  کدهای زیر را وارد می کنیم:

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

 

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

<com.daimajia.slider.library.SliderLayout
    android:id="@+id/slider"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    />

 

اگر می خواهید زیر اسلایدرindicator  داشته باشید( یعنی همان نقطه هایی که زیر اسلایدر نشان داده می شود و با جابجایی اسلایدر آن ها هم جابجا می شوند ) کافیست کد زیر را بعد از لایه ی اسلایدر وارد کنید:

<com.daimajia.slider.library.Indicators.PagerIndicator
    android:id="@+id/custom_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    />

نحوه ی استفاده از اسلایدر

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

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


    private SliderLayout slider;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        slider = findViewById(R.id.slider);

        HashMap<String,Integer> image_maps = new HashMap<>();
        image_maps.put("slide1" , R.drawable.slide1 );
        image_maps.put("slide2" , R.drawable.slide2);

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

            DefaultSliderView textSliderView = new DefaultSliderView(getApplicationContext());
            textSliderView
                        .description(name)
                        .image(image_maps.get(name))
                        .setScaleType(BaseSliderView.ScaleType.Fit)
                        .setOnSliderClickListener(this);

            textSliderView.bundle(new Bundle());
            textSliderView.getBundle().putString("extra", name);


            slider.addSlider(textSliderView);

        }

        slider.setPresetTransformer(SliderLayout.Transformer.Accordion);
        slider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
        slider.setCustomAnimation(new DescriptionAnimation());
        slider.setDuration(4000);
        slider.addOnPageChangeListener(this);
{   
        
@Override
public void onSliderClick(BaseSliderView slider) {

    String s = slider.getBundle().get("extra").toString();

    if(s.contains("slide1")){

        Toast.makeText(getApplicationContext() , s ,Toast.LENGTH_LONG).show();
    }
    else if(s.contains("slide2")){

        Toast.makeText(getApplicationContext() , s ,Toast.LENGTH_LONG).show();
    }

}

 

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

}

@Override
public void onPageSelected(int position) {
   

}

@Override
public void onPageScrollStateChanged(int state) {

}

 

همانطور که می بینید ابتدا باید اکتیویتی را implements  کنیم  به BaseSliderView و ViewPagerEx که در اینصورت اروری ظاهر می شود و از ما می خواهد متدهای آن را import کنیم. پس از import کردن متدها، یک SliderLayout تعریف کرده و آن را findViewById می کنیم .

مرحله ی بعدی ایجاد آرایه ی HashMap می باشد.این آرایه یک آرایه ی دو قسمتی است به این معنی که هر خانه ی آن دو قسمت دارد یکی key و دیگری value . تعریف آن مانند آرایه می باشد با این تفاوت که باید مشخص کنیم هرقسمت از چه نوعی است مثلا قسمت key از نوع String وقسمت value از نوع Integer.

HashMap<String,Integer> image_maps = new HashMap<>();

چرا باید از این آرایه بجای آرایه ی معمولی استفاده کنیم؟

هر اسلایدر یک نام و یک تصویر دارد به همین دلیل از آرایه ی HashMap استفاده کرده، نام اسلایدر را برای قسمت key  و تصویر اسلایدر را برای قسمت value تنظیم می کنیم.

مزیتی که این نوع آرایه دارد این است که با استفاده از key می توانیم مقادیر را پیدا کنیم.

با استفاده از کد زیر مقادیر را داخل آرایه می ریزیم که “slide1” همان key  و R.drawable.slide1 همان value می باشد.

اگر می خواهید تصاویر را از سرور بگیرید باید بجای R.drawable.slide1 یک url بنویسید.

image_maps.put("slide1" , R.drawable.slide1 );
image_maps.put("slide2" , R.drawable.slide2);

 

مرحله ی بعد تعریف یک حلقه ی for است که مخصوص آرایه ها می باشد:

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

    DefaultSliderView textSliderView = new DefaultSliderView(getApplicationContext());
    textSliderView
                .description(name)
                .image(image_maps.get(name))
                .setScaleType(BaseSliderView.ScaleType.Fit)
                .setOnSliderClickListener(this);

    textSliderView.bundle(new Bundle());
    textSliderView.getBundle().putString("extra", name);

    slider.addSlider(textSliderView);
}

عملکرد این حلقه به چه صورت است؟

در کدهای قبلی یک HashMap بنام image_maps ایجاد کردیم که در این حلقه از داخل image_maps ، با دستور keyset یکی یکی key ها را می گیرد و داخل متغیری از نوع String بنام name می ریزد، سپس به ازای هر key یک textSliderView ساخته می شود و مقادیر آن ست می شود.

اگر بخواهیم نام اسلایدر پایین اسلایدر نوشته شود از description استفاده می کنیم و برای تصویر اسلایدر از image .

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

setOnSliderClickListener نیز برای ایجاد  امکان کلیک روی هر اسلاید می باشد.

هر اسلاید یک سری اطلاعات دارد، ممکن است بخواهیم با کلیک بر روی هر اسلاید وارد یک اکتیویتی دیگر شویم پس نیاز است بدانیم روی کدام اسلاید کلیک شده. با استفاده از دو خط زیر نام اسلاید (name) را putstring کرده تا به کمک نام اسلاید، متوجه شویم روی کدام اسلاید کلیک شده.

textSliderView.bundle(new Bundle());
textSliderView.getBundle().putString("extra", name);

 

و در آخر textSliderView را داخل اسلایدر add می کنیم.

slider.addSlider(textSliderView);

 

مرحله ی آخر اینه که برای اسلایدر یک سری تنظیمات انجام دهیم:

slider.setPresetTransformer(SliderLayout.Transformer.Accordion);
slider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
slider.setCustomAnimation(new DescriptionAnimation());
slider.setDuration(4000);

 

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

 

کلیک روی هر اسلاید

ممکن است بخواهید با کلیک بر روی هر اسلاید یک اتفاقی رخ دهد مثلا به اکتیویتی دیگری برود ، بدین منظور از متد onSliderClick که قبلا آن را import کرده بودیم استفاده می کنیم.

@Override
public void onSliderClick(BaseSliderView slider) {

    String s = slider.getBundle().get("extra").toString();

    if(s.contains("slide1")){

        Toast.makeText(getApplicationContext() , s ,Toast.LENGTH_LONG).show();
    }
    else if(s.contains("slide2")){

        Toast.makeText(getApplicationContext() , s ,Toast.LENGTH_LONG).show();
    }

}

 

مثلا در کد بالا با کلیک  روی هر اسلاید، نام اسلاید را Toast کردیم.

 

 

نویسنده: الهه ابراهیمی