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'
Step2:
Add permissions (if necessary) to your AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
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"/>
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" />
关键参数设置:
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"/>
自定义指示器:
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"> <item name="unselected_color"> <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 mDemoSlider1mDemoSlider1 = (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()) // 设置持续时间 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