5.轮播广告AndroidImageSlider的使用(包括自定义indicator，和sliderview的点击监听事件，架构分析)

最新推荐文章于 2026-03-29 16:36:31 发布

原创最新推荐文章于 2026-03-29 16:36:31 发布 · 2.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

模拟淘宝专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何在Android应用中实现滑动广告轮播组件，包括依赖添加、权限配置、布局设置及交互事件处理等步骤，并展示了如何自定义指示器样式。

第一步：在build中dependence相应的以来（导入的包在build中也有相应的依赖）

第二部：设置权限

第三部：在布局文件中加入<sliderLayout></sliderLayout>

第四部：在Activity中实例化对象

第五步：在Activty中使用封装好了的slider，在里面添加图片还有文字说明，还可以设置slider的属性

下面为代码：

//andoirdimageslider的依赖
dependencies {
    compile "com.android.support:support-v4:+"
    compile 'com.squareup.picasso:picasso:2.3.2'
    compile 'com.nineoldandroids:library:2.4.0'
    compile 'com.daimajia.slider:library:1.1.5@aar'
}

<!-- androidimageslider的权限if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- androidimageslider的权限if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="match_parent"
        app:pager_animation="Accordion"
        app:auto_cycle="true"
        app:indicator_visibility="visible"
        app:pager_animation_span="1100"
        android:layout_height="150sp"/>

</LinearLayout>

4.这个不是activity,是独立的类

package zuo.com.ui.fragment;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.TextSliderView;

import zuo.com.ui.R;

/**
 * Created by Administrator on 2016/10/6.
 */
public class HomeFragment extends Fragment {

    private SliderLayout sliderLayout;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view=inflater.inflate(R.layout.fragment_home,container,false);
        sliderLayout= (SliderLayout) view.findViewById(R.id.slider);
        initSlider();
        return view;


    }

    private void initSlider() {
        TextSliderView textSliderView = new TextSliderView(this.getActivity());
        textSliderView
                .description("新品男装")
                .image(R.mipmap.slider_mani);
        TextSliderView textSliderView1 = new TextSliderView(this.getActivity());
        textSliderView1
                .description("潮流女装")
                .image(R.mipmap.slider_woman);
        TextSliderView textSliderView2 = new TextSliderView(this.getActivity());
        textSliderView2
                .description("时尚男装")
                .image(R.mipmap.slider_man);
        TextSliderView textSliderView3 = new TextSliderView(this.getActivity());
        textSliderView3
                .description("青春女装")
                .image(R.mipmap.slider_yu);
        sliderLayout.addSlider(textSliderView);
        sliderLayout.addSlider(textSliderView1);
        sliderLayout.addSlider(textSliderView2);
        sliderLayout.addSlider(textSliderView3);
        sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);      //设置下标的点，所在的位置在底部正中间
        sliderLayout.setCustomAnimation(new DescriptionAnimation());
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp);              //设置转动模式，下面的文字说明自动出来
        sliderLayout.setDuration(3000);              //设置动画效果3秒自动转动

    }

}

效果图：

二：修改sliderview中的indicator:

1.首先从github上copy代码，地址为：https://github.com/daimajia/AndroidImageSlider/wiki/Custom-Indicators，放入到layout布局中

2.然后在Activity中创建indicator的对象

3.设置indicator的属性setcoustomIndaicator();

代码：

<!--设置slider中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"
    custom:selected_color="#0095BF"
    custom:unselected_color="#55333333"
    custom:selected_drawable="@drawable/bird"
    custom:shape="oval"
    custom:selected_padding_left="6dp"
    custom:selected_padding_right="6dp"
    custom:unselected_padding_left="2dp"
    custom:unselected_padding_right="2dp"
    custom:selected_width="6dp"
    custom:selected_height="6dp"
    custom:unselected_width="6dp"
    custom:unselected_height="6dp"
    />

public class HomeFragment extends Fragment {

    private SliderLayout sliderLayout;
    private PagerIndicator pagerIndicator;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view=inflater.inflate(R.layout.fragment_home,container,false);
        sliderLayout= (SliderLayout) view.findViewById(R.id.slider);
        pagerIndicator= (PagerIndicator) view.findViewById(R.id.custom_indicator);
        initSlider();
        return view;


    }

        sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);    //这个为默认的indicator
//        sliderLayout.setCustomIndicator(pagerIndicator);     //设置下标的点，所在的位置在底部正中间
        sliderLayout.setCustomAnimation(new DescriptionAnimation());                       //动画效果
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp);              //设置转动模式，下面的文字说明自动出来
        sliderLayout.setDuration(3000);              //设置动画效果3秒自动转动

三、sliderLayout的点击事件和监听事件

1.sliderLayout的监听事件

    sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);    //这个为默认的indicator
//        sliderLayout.setCustomIndicator(pagerIndicator);     //设置下标的点，所在的位置在底部正中间
        sliderLayout.setCustomAnimation(new DescriptionAnimation());                       //动画效果
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp);              //设置转动模式，下面的文字说明自动出来
        sliderLayout.setDuration(3000);              //设置动画效果3秒自动转动
        //sliderLayout的监听事件，这个监听事件
        sliderLayout.addOnPageChangeListener(new ViewPagerEx.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Log.d(TAG,"onPageScrolled");
            }

            @Override
            public void onPageSelected(int position) {
                Log.d(TAG,"onPageSelected");

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                Log.d(TAG,"onPageScrollStateChanged");

            }
        });

2.textSliderView的点击事件

TextSliderView textSliderView = new TextSliderView(this.getActivity());
textSliderView.description("新品男装").image(R.mipmap.slider_mani);
textSliderView.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
    @Override
    public void onSliderClick(BaseSliderView slider) {
        Toast.makeText(getContext(),"新品男装",Toast.LENGTH_SHORT).show();
    }
});

效果图：

源代码：

package zuo.com.ui.fragment;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.Indicators.PagerIndicator;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;

import zuo.com.ui.R;

/**
 * Created by Administrator on 2016/10/6.
 */
public class HomeFragment extends Fragment {

    private SliderLayout sliderLayout;
    private PagerIndicator pagerIndicator;
    private String TAG="SliderView";
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view=inflater.inflate(R.layout.fragment_home,container,false);
        sliderLayout= (SliderLayout) view.findViewById(R.id.slider);
        pagerIndicator= (PagerIndicator) view.findViewById(R.id.custom_indicator);
        initSlider();
        return view;


    }

    private void initSlider() {
        TextSliderView textSliderView = new TextSliderView(this.getActivity());
        textSliderView.description("新品男装").image(R.mipmap.slider_mani);
        textSliderView.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
            @Override
            public void onSliderClick(BaseSliderView slider) {
                Toast.makeText(getContext(),"新品男装",Toast.LENGTH_SHORT).show();
            }
        });

        TextSliderView textSliderView1 = new TextSliderView(this.getActivity());
        textSliderView1.description("潮流女装").image(R.mipmap.slider_woman);
        textSliderView1.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
            @Override
            public void onSliderClick(BaseSliderView slider) {
                Toast.makeText(getContext(),"潮流女装",Toast.LENGTH_SHORT).show();
            }
        });

        TextSliderView textSliderView2 = new TextSliderView(this.getActivity());
        textSliderView2.description("时尚男装").image(R.mipmap.slider_man);
        textSliderView2.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
            @Override
            public void onSliderClick(BaseSliderView slider) {
                Toast.makeText(getContext(),"时尚男装",Toast.LENGTH_SHORT).show();
            }
        });

        TextSliderView textSliderView3 = new TextSliderView(this.getActivity());
        textSliderView3.description("青春女装").image(R.mipmap.slider_yu);
        textSliderView3.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
            @Override
            public void onSliderClick(BaseSliderView slider) {
                Toast.makeText(getContext(),"青春女装",Toast.LENGTH_SHORT).show();
            }
        });

        sliderLayout.addSlider(textSliderView);
        sliderLayout.addSlider(textSliderView1);
        sliderLayout.addSlider(textSliderView2);
        sliderLayout.addSlider(textSliderView3);
        sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);    //这个为默认的indicator
//        sliderLayout.setCustomIndicator(pagerIndicator);     //设置下标的点，所在的位置在底部正中间
        sliderLayout.setCustomAnimation(new DescriptionAnimation());                       //动画效果
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp);              //设置转动模式，下面的文字说明自动出来
        sliderLayout.setDuration(3000);              //设置动画效果3秒自动转动
        //sliderLayout的监听事件，这个监听事件
        sliderLayout.addOnPageChangeListener(new ViewPagerEx.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Log.d(TAG,"onPageScrolled");
            }

            @Override
            public void onPageSelected(int position) {
                Log.d(TAG,"onPageSelected");

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                Log.d(TAG,"onPageScrollStateChanged");

            }
        });

    }

}

五、修改后的build中的dependence,只有修改了这个才能使用sliderlayout的监听事件

//andoirdimageslider的依赖
dependencies {
    compile "com.android.support:appcompat-v7:23.0.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'
}

六、架构图