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

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

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

انتشار 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 کردیم.

 

 

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

مقالات مرتبط

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

وایر فریم wireframe چیست؟ وایر فریم wireframe چیست؟ مقالات طراحی وب سایت

پدیده تجارت

24 مهر 1396

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

پدیده تجارت

01 مرداد 1397

دیجیتال مارکتر کیست ؟ دیجیتال مارکتر کیست ؟ مقالات تجارت الکترونیک

پدیده تجارت

16 فروردین 1401

نگرشی نو بر بازار طراحی سایت نگرشی نو بر بازار طراحی سایت مقالات طراحی وب سایت

پدیده تجارت

20 آبان 1393

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

پدیده تجارت

17 تیر 1399

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

پدیده تجارت

10 دی 1396

آموزش برنامه نویسی, کلاسهای خصوصی یا عمومی؟ آموزش برنامه نویسی, کلاسهای خصوصی یا عمومی؟ مقالات طراحی وب سایت

پدیده تجارت

14 آذر 1397

آموزش ساخت اکولایزر در افترافکت آموزش ساخت اکولایزر در افترافکت مقالات تجارت الکترونیک

پدیده تجارت

04 اردیبهشت 1397

طراحی سایت فروشگاه اینترنتی طراحی سایت فروشگاه اینترنتی مقالات طراحی وب سایت

پدیده تجارت

12 مهر 1396

یادگیری اندروید و کسب درآمد از آن یادگیری اندروید و کسب درآمد از آن مقالات موبایل

پدیده تجارت

08 تیر 1398

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

پدیده تجارت

06 خرداد 1396

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

پدیده تجارت

24 اسفند 1400

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

0

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