daimajia的图片轮播开源项目配置

来源:互联网 发布:mac系统idea下载git 编辑:程序博客网 时间:2024/06/06 02:33

daimajia一个关于图片轮播开源项目AndroidImageSlider,先看下效果图

这里写图片描述 
幻灯片切换动画效果,可直接从网络或本地文件中获取图片。点击图片开始/暂停,滑动等待几秒后重新开始轮播。

Step1: 
Gradle

compile "com.android.support:support-v4:+"compile 'com.squareup.picasso:picasso:2.5.2'compile 'com.nineoldandroids:library:2.4.0'compile 'com.daimajia.slider:library:1.1.5@aar'compile 'com.daimajia.androidanimations:library:1.1.3@aar'
  • 1
  • 2
  • 3
  • 4
  • 5

Step2: 
Add permissions (if necessary) to your AndroidManifest.xml

<!-- if you want to load images from the internet --><uses-permission android:name="android.permission.INTERNET" /> <!-- if you want to load images from a file OR from the internet --><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  • 1
  • 2
  • 3
  • 4
  • 5

Step3: 
Add the Slider to your layout:

<com.daimajia.slider.library.SliderLayout        android:id="@+id/slider"        android:layout_width="match_parent"        android:layout_height="200dp"/>
  • 1
  • 2
  • 3
  • 4
  • 5

There are some default indicators. If you want to use a provided 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"        />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

关键参数设置: 
custom:pager_animation=”Accordion” 切换动画效果 
custom:auto_cycle=”true” 自动播放 
custom:indicator_visibility=”visible” 显示指示器

<com.daimajia.slider.library.SliderLayout    android:id="@+id/slider1"    android:layout_width="match_parent"    custom:pager_animation="Accordion"     custom:auto_cycle="true"    custom:indicator_visibility="visible"    custom:pager_animation_span="1100"    android:layout_height="200dp"/>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

自定义指示器: 
custom:shape=”oval” 或 rect 圆形,矩形

<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="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="40dp"        />        <!-- style 在lib里面 -->    <com.daimajia.slider.library.Indicators.PagerIndicator        android:id="@+id/custom_indicator2"        style="@style/AndroidImageSlider_Corner_Oval_Orange"        android:layout_centerHorizontal="true"        android:layout_alignParentBottom="true"        android:layout_marginBottom="20dp"        />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

可用 style设置基本参数 
默认提供三种 
AndroidImageSlider_Corner_Oval_Orange,AndroidImageSlider_Attractive_Rect_Blue,AndroidImageSlider_Magnifier_Oval_Black

<style name="AndroidImageSlider_Corner_Oval_Orange">        <item name="android:layout_width">wrap_content</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:gravity">center</item>        <item name="android:background">@drawable/indicator_corner_bg</item>        <item name="android:paddingLeft">2dp</item>        <item name="android:paddingRight">2dp</item>        <item name="shape">oval</item>        <item name="padding_left">3dp</item>        <item name="padding_right">3dp</item>        <item name="padding_top">4dp</item>        <item name="padding_bottom">4dp</item>        <item name="selected_color">#f60</item>        <item name="unselected_color">#ffffff</item>        <item name="selected_width">6dp</item>        <item name="selected_height">6dp</item>        <item name="unselected_width">6dp</item>        <item name="unselected_height">6dp</item>    </style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

用代码设置:

private SliderLayout mDemoSlider1;mDemoSlider1 = (SliderLayout)findViewById(R.id.slider1);HashMap<String,String> url_maps = new HashMap<String, String>();        url_maps.put("Hannibal", "http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");        url_maps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");        url_maps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");        url_maps.put("Game of Thrones", "http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");//        HashMap<String,Integer> file_maps = new HashMap<String, Integer>();//        file_maps.put("Hannibal",R.drawable.nemo);//        file_maps.put("Big Bang Theory",R.drawable.up);//        file_maps.put("House of Cards",R.drawable.wall);//        file_maps.put("Game of Thrones", R.drawable.toystory);for(String name : url_maps.keySet()){            TextSliderView textSliderView = new TextSliderView(this);            // initialize a SliderLayout            textSliderView                    .description(name)                    .image(url_maps.get(name))                    .setScaleType(BaseSliderView.ScaleType.Fit)                    .setOnSliderClickListener(this);            //add your extra information 点击图片时可用到            textSliderView.bundle(new Bundle());            textSliderView.getBundle()                    .putString("extra",name);            mDemoSlider1.addSlider(textSliderView);        }         // 设置默认过渡效果(可在xml中设置)      mDemoSlider1.setPresetTransformer(SliderLayout.Transformer.Accordion);        // 设置默认指示器位置(默认指示器白色,位置在sliderlayout底部)        mDemoSlider1.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);        // 设置自定义指示器(位置自定义)        mDemoSlider1.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));        // 设置TextView自定义动画        mDemoSlider1.setCustomAnimation(new DescriptionAnimation());        //mDemoSlider2.setCustomAnimation(new ChildAnimationExample()); // 多种效果,进入该类修改,参考效果github/daimajia/AndroidViewAnimations        // 设置持续时间        mDemoSlider1.setDuration(2000);        mDemoSlider1.addOnPageChangeListener(this);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

如果想改变默认Indicator颜色等,修改library相关xml文件。 
这里写图片描述

提示:既然能自定义下方指示器,是不是可以用做导航页的开发?

代码下载

转自:http://blog.csdn.net/shenyingzgd/article/details/46455387

0 0
原创粉丝点击