Android Image Slider is a fantastic and convenient Android image scrolling framework, which we will use to achieve cool rotation advertising in the rookie mall project.

Analysis of Android Image Slider Architecture

First, let's look at the diagram. Below is the architecture analysis diagram of Android Image Slider.

The SlideLayout in the architecture analysis diagram is a custom View inherited from Relative Layout and is also the core of the framework. It consists of SliderView and PagerIndicator. SliderView is divided into DefaultSliderView and TextSliderView. DefaultSliderView only supports image loading and scrolling, while TextSliderView supports not only picture but also text display. Transition effects and Animation are mainly controlled by Animation effects. There are two other important listening events: onSlider ClickListener and onPage ChangeListener. As the name implies, one is click event listening, the other is page switching event listening.

Basic use

Now that you know the basic structure of the framework, here's how to use it. The method is simple.

1. Gradle dependency configuration

We're using Android Studio 2.2.3 development tools here, and Eclipse can refer to specific methods of referencing third-party libraries. Android Image Slider Source Description . Integrating dependencies of third-party libraries in build.gradle files.

dependencies {
    compile 'com.daimajia.slider:library:1.1.5@aar'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.nineoldandroids:library:2.4.0'
    compile 'com.android.support:support-v4:25.2.0'}

2. Adding permissions

In order to use this framework, we need to add corresponding permissions, which are network permissions and file reading permissions.

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

3. Add to Layout Layout

Add SliderLayout to the corresponding layout file Layout.

<com.daimajia.slider.library.SliderLayout
        android:id="@+id/home_slider_ad"
        android:layout_width="match_parent"
        android:layout_height="@dimen/large_height"></com.daimajia.slider.library.SliderLayout>

If you need a custom Pager Indicator, you can customize it, or you can use the framework's own, here is the source code for the custom Pager Indicator.

<com.daimajia.slider.library.Indicators.PagerIndicator
            android:id="@+id/home_indicator_ad"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            custom:selected_color="#0095BF"
            custom:unselected_color="#55333333"
            custom:selected_drawable="@drawable/bird"
            custom:shape="oval"
            custom:selected_padding_left="5dp"
            custom:selected_padding_right="5dp"
            custom:unselected_padding_left="5dp"
            custom:unselected_padding_right="5dp"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            custom:selected_width="6dp"
            custom:selected_height="6dp"
            custom:unselected_width="6dp"
            custom:unselected_height="6dp"
            android:layout_marginBottom="20dp">
        </com.daimajia.slider.library.Indicators.PagerIndicator>

4. Define and configure Slider Layout in Activity/Fragment

The first step is to get the SliderLayout control and the custom Indicator.

mSlider = (SliderLayout) view.findViewById(R.id.home_slider_ad);
indicator =(PagerIndicator)view.findViewById(R.id.home_indicator_ad);

Then I'm ready to test the data. I define an entity class BannerInfo here, which includes the image imgUrl and the description content name. After defining the entity class, we set up the corresponding test data and add it to the list Banner of scrolling picture list.

private void getBannerData() {
        BannerInfo bannerInfo_01 = new BannerInfo();
        bannerInfo_01.setName("Speaker Carnival");
        bannerInfo_01.setImgUrl("http://7mno4h.com2.z0.glb.qiniucdn.com/5608f3b5Nc8d90151.jpg");
        BannerInfo bannerInfo_02 = new BannerInfo();
        bannerInfo_02.setName("National Day Ceremony of Mobile Phone");
        bannerInfo_02.setImgUrl("http://7mno4h.com2.z0.glb.qiniucdn.com/5608eb8cN9b9a0a39.jpg");
        BannerInfo bannerInfo_03 = new BannerInfo();
        bannerInfo_03.setName("IT Life");
        bannerInfo_03.setImgUrl("http://7mno4h.com2.z0.glb.qiniucdn.com/5608cae6Nbb1a39f9.jpg");
        listBanner.add(bannerInfo_01);
        listBanner.add(bannerInfo_02);
        listBanner.add(bannerInfo_03);
    }

The next step is to configure SliderLayout properties, add custom Indicator s, set animation effects, add image list data, and set listening events.

private void initSlider() {
        if (listBanner != null) {
            for (BannerInfo bannerInfo : listBanner) {
                TextSliderView textSliderView = new TextSliderView(this.getActivity());
                textSliderView.image(bannerInfo.getImgUrl())
                        .description(bannerInfo.getName())
                        .setScaleType(BaseSliderView.ScaleType.CenterCrop)
                        .setOnSliderClickListener(this);
                mSlider.addSlider(textSliderView);
            }
        }

        mSlider.setCustomIndicator(indicator);
        mSlider.setCustomAnimation(new DescriptionAnimation());
        mSlider.setPresetTransformer(SliderLayout.Transformer.RotateUp);
        mSlider.setDuration(3000);
        mSlider.addOnPageChangeListener(this);
    }

5. Stop SliderLayout scrolling in onStop()

Before the end of the Activity/Fragment life cycle, you need to stop scrolling pictures to prevent memory overflow and other issues.

@Override
    public void onStop() {
        // To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed
        mSlider.stopAutoCycle();
        super.onStop();
    }

Final effect

Run the code, the effect is as follows.

For more usage and functionality of Android Image Slider, please refer to Android Image Slider Source Description.