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

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

 

 

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

مقالات مرتبط

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

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

پدیده تجارت

07 بهمن 1396

تولید محتوا در اصفهان تولید محتوا در اصفهان مقالات سئو

پدیده تجارت

28 مرداد 1396

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

پدیده تجارت

30 اردیبهشت 1397

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

پدیده تجارت

28 فروردین 1396

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

پدیده تجارت

29 آبان 1396

تیم برنامه نویسی اندروید در اصفهان تیم برنامه نویسی اندروید در اصفهان مقالات موبایل

پدیده تجارت

24 مرداد 1398

آموزش مقدماتی HTML آموزش مقدماتی HTML مقالات طراحی وب سایت

پدیده تجارت

09 آبان 1398

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

پدیده تجارت

20 آذر 1396

عوامل موثر بر افزایش اعتبار وب سایت عوامل موثر بر افزایش اعتبار وب سایت مقالات طراحی وب سایت

پدیده تجارت

11 آذر 1392

طراحی اپلیکیشن اندروید از ایده تا اجرا! طراحی اپلیکیشن اندروید از ایده تا اجرا! مقالات تجارت الکترونیک

پدیده تجارت

17 مهر 1397

آموزش دیجیتال برندینگ اصفهان آموزش دیجیتال برندینگ اصفهان مقالات برندینگ

پدیده تجارت

31 تیر 1398

آموزش ویژگیهای اندروید 10 آموزش ویژگیهای اندروید 10 مقالات موبایل

پدیده تجارت

07 اسفند 1398

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

0

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