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

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

 

 

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

مقالات مرتبط

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

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

پدیده تجارت

20 فروردین 1401

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

پدیده تجارت

01 بهمن 1396

نقش سئو در افزایش بازدید یک سایت نقش سئو در افزایش بازدید یک سایت مقالات طراحی وب سایت

پدیده تجارت

15 اسفند 1396

بایدهای طراحی سایت بایدهای طراحی سایت مقالات طراحی وب سایت

پدیده تجارت

19 آذر 1397

برای طراحی اپلیکیشن موبایل و سایت باید به چه نکاتی توجه کنیم؟! برای طراحی اپلیکیشن موبایل و سایت باید به چه نکاتی توجه کنیم؟! مقالات طراحی وب سایت

پدیده تجارت

08 اسفند 1397

Toggle Button چیست و چگونه پیاده سازی می شود؟ Toggle Button چیست و چگونه پیاده سازی می شود؟ مقالات موبایل

پدیده تجارت

21 خرداد 1397

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

پدیده تجارت

16 مرداد 1398

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

پدیده تجارت

29 خرداد 1396

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

پدیده تجارت

12 خرداد 1397

چگونه یک طراح سایت حرفه ای  شویم ؟(قسمت اول) چگونه یک طراح سایت حرفه ای شویم ؟(قسمت اول) مقالات طراحی وب سایت

پدیده تجارت

24 اسفند 1400

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

پدیده تجارت

20 آذر 1396

ذخیره سازی اشیا ( Object Storage ) چیست؟ ذخیره سازی اشیا ( Object Storage ) چیست؟ مقالات طراحی وب سایت

پدیده تجارت

23 اسفند 1400

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

0

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