یک فنجان مشاوره
مهـمـان مــا باشیـد

شـمـــاره تــمــاس
031-36644146

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

انتشار 23 دی 1397
دیدگاه ها 0
زمان تقریبی مطالعه
گردآوری پدیده تجارت

برای ساخت اسلایدر در اندروید نیاز است ابتدا کتابخانه ای بنام 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 کردیم.

 

 

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

مقالات مرتبط

شاید علاقمند به دیدن این مقالات نیز باشید
(آرشیو کامل)

طراحی سایت فروشگاهی با وردپرس دراصفهان طراحی سایت فروشگاهی با وردپرس دراصفهان مقالات تجارت الکترونیک

پدیده تجارت

24 اسفند 1400

ذخیره-سازی-اشیا-object-storage-چیست؟ ذخیره-سازی-اشیا-object-storage-چیست؟ مقالات طراحی وب سایت

پدیده تجارت

24 اسفند 1400

اینفلوئنسر مارکتینگ چیست؟ اینفلوئنسر مارکتینگ چیست؟ مقالات برندینگ

پدیده تجارت

22 دی 1398

بهترین فریم ورک ها برای ایجاد برنامه های وب پیشرفته (PWA) بهترین فریم ورک ها برای ایجاد برنامه های وب پیشرفته (PWA) مقالات طراحی وب سایت

پدیده تجارت

24 اسفند 1400

آموزش تنظیمات افزونه yoast seo در وب سایت آموزش تنظیمات افزونه yoast seo در وب سایت مقالات طراحی وب سایت

پدیده تجارت

06 دی 1397

مهاجرت برنامه نویسان و شرایط برتر آن مهاجرت برنامه نویسان و شرایط برتر آن مقالات

پدیده تجارت

06 مرداد 1397

برترین زبان های برنامه نویسی برای موبایل برترین زبان های برنامه نویسی برای موبایل مقالات موبایل

پدیده تجارت

24 اسفند 1400

دامنه ی ir یا com? دامنه ی ir یا com? مقالات طراحی وب سایت

پدیده تجارت

11 آذر 1392

تفاوت طراحی سایت اختصاصی با عمومی در چیست؟ تفاوت طراحی سایت اختصاصی با عمومی در چیست؟ مقالات تجارت الکترونیک

پدیده تجارت

06 دی 1396

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

پدیده تجارت

20 آذر 1398

ارزش پیشنهادی چیست؟ ارزش پیشنهادی چیست؟ مقالات تجارت الکترونیک

پدیده تجارت

16 فروردین 1401

دیدگاه کاربران

0

0 0 رای ها
امتیازدهی به مقاله
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها