AndroidImageSlider分分钟实现酷炫广告轮询效果

来源:互联网 发布:网络班级 编辑:程序博客网 时间:2024/04/24 17:03

很多App中都有这个广告轮询的效果,不过使用AndroidImageSlider实现这样的功能很简单,这里简单做一下总结,以备后用,AndroidImageSlider地址。

第一步:配置

使用Android Studio,在build.gradle中添加以下依赖:

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'}

在AndroidManifest.xml中添加以下的权限:

//网络访问权限<uses-permission android:name="android.permission.INTERNET" /> //本地sd卡读取图片需要用到的权限<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

第二步:开始使用

AndroidImageSlider提供两种功能,第一种就是单纯的只展示图片轮询的那种,使用DefaultSliderView。第二种就是带描述的图片展示的TextSliderView,一般情况下我们都会使用第二种,第一种使用的较少一些,所以这里只看第二种功能。

首先是布局文件:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.wesley.imagesliderdemo.MainActivity">    <com.daimajia.slider.library.SliderLayout        android:id="@+id/slider"        android:layout_width="match_parent"        android:layout_height="250dp" /></RelativeLayout>

这里还有几个关键参数如下:

custom:pager_animation=”Accordion” 切换动画效果 custom:auto_cycle=”true” 自动播放 custom:indicator_visibility=”visible” 显示指示器

接下来是创建代码:
布局文件中找到sliderShow

SliderLayout sliderShow = (SliderLayout) findViewById(R.id.slider);

然后创建TextSliderView,并且把它加入到sliderShow中

TextSliderView textSliderView = new TextSliderView(this);textSliderView    //添加图片描述信息    .description("Game of Thrones")    //添加图片url,可以是本地的,也可以是网络上的,这个是官方示例    .image("http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");//最后把TextSliderView添加到sliderShow中进行展示sliderShow.addSlider(textSliderView);

SliderLayout还可以设置以下属性:

        // 设置默认过渡效果(可在xml中设置)        sliderShow.setPresetTransformer(SliderLayout.Transformer.Accordion);        // 设置默认指示器位置(默认指示器白色,位置在sliderlayout底部)        sliderShow.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);        // 设置自定义指示器(位置自定义)        sliderShow.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));        // 设置TextView自定义动画        sliderShow.setCustomAnimation(new DescriptionAnimation());        //sliderShow.setCustomAnimation(new ChildAnimationExample());         // 多种效果,进入该类修改,参考效果github/daimajia/AndroidViewAnimations        // 设置持续时间        sliderShow.setDuration(2000);         sliderShow.addOnPageChangeListener(this);//设置页面改变监听

完整的代码如下:

package com.wesley.imagesliderdemo;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import com.daimajia.slider.library.SliderLayout;import com.daimajia.slider.library.SliderTypes.BaseSliderView;import com.daimajia.slider.library.SliderTypes.TextSliderView;public class MainActivity extends AppCompatActivity {    SliderLayout sliderShow;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        sliderShow = (SliderLayout) findViewById(R.id.slider);        TextSliderView textSliderView = new TextSliderView(this);        textSliderView                .description("小可爱")                .setScaleType(BaseSliderView.ScaleType.Fit)                .image(R.mipmap.my);        sliderShow.addSlider(textSliderView);        TextSliderView textSliderView1 = new TextSliderView(this);        textSliderView1.description("瓷娃娃")                .setScaleType(BaseSliderView.ScaleType.Fit)                .image(R.mipmap.my1);        sliderShow.addSlider(textSliderView1);        TextSliderView textSliderView2 = new TextSliderView(this);        textSliderView2.description("小爱多")                .setScaleType(BaseSliderView.ScaleType.Fit)                .image(R.mipmap.myto);        sliderShow.addSlider(textSliderView2);    }    @Override    protected void onStop() {        sliderShow.stopAutoCycle();        super.onStop();    }}

官方建议:为了防止图片轮询的时候内存溢出,在activity或者fragment被销毁前调用stopAutoCycle()方法来确保sliderShow停止图片轮询

@Overrideprotected void onStop() {    sliderShow.stopAutoCycle();    super.onStop();}

效果图如下:
这里写图片描述

这里是使用默认的indicator,接下来自己来自定义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="#FF5500"         <!--没选中的颜色-->        custom:unselected_color="#55333333"         <!--indicator形状:矩形(或圆形)-->        custom:shape="rect"        <!--选中的点距离左边距-->        custom:selected_padding_left="2dp"        <!--选中的点距离又边距-->        custom:selected_padding_right="2dp"        <!--未选中的点距离左边距-->        custom:unselected_padding_left="2dp"        <!--未选中的点距离又边距-->        custom:unselected_padding_right="2dp"        <!--选中的点宽度-->        custom:selected_width="16dp"        <!--选中的点高度-->        custom:selected_height="3dp"        <!--未选中的点宽度-->        custom:unselected_width="16dp"        <!--未选中的点高度-->        custom:unselected_height="3dp"        />

具体的注释代码里面也有了,都是一些普通的属性。

好了,以上就是AndroidImageSlider最普通的用法和一些基础的属性介绍,想要更多的更华丽的效果,请移步github。

0 0
原创粉丝点击