Android实现广告页图片无限轮播
一.概述
对于一个联网的Android应用, 首页广告无限轮播基本已经成为标配了.
那么它是怎么实现的呢?
有几种实现方式呢?
二.无限轮播的实现
1.最常规的手段是用 ViewPager来实现
2.比较原始的手段是: Gallery 画廊来实现
3.最简单的实现手段是: Android image slider第三方库
下面由简到难依次实现
第三方库 Android image slider
github:https://github.com/daimajia/AndroidImageSlider/
只看图片就发现,非常绚丽, 有很多轮播方式可以选择,并且指示器图标也有很多选择方式, DIY 非常自由化.
步骤一:如果用AS开发需引入下面的库:
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'
}
步骤二:添加权限:
<!-- 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" />
步骤三: xml 的写法
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"
/>
最后奉上代码:
package com.daimajia.slider.demo; import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;
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 java.util.HashMap; public class MainActivity extends ActionBarActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{ private SliderLayout mDemoSlider; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDemoSlider = (SliderLayout)findViewById(R.id.slider); 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.hannibal);
file_maps.put("Big Bang Theory",R.drawable.bigbang);
file_maps.put("House of Cards",R.drawable.house);
file_maps.put("Game of Thrones", R.drawable.game_of_thrones); for(String name : file_maps.keySet()){
TextSliderView textSliderView = new TextSliderView(this);
// initialize a SliderLayout
textSliderView
.description(name)
.image(file_maps.get(name))
.setScaleType(BaseSliderView.ScaleType.Fit)
.setOnSliderClickListener(this); //add your extra information
textSliderView.bundle(new Bundle());
textSliderView.getBundle()
.putString("extra",name); mDemoSlider.addSlider(textSliderView);
}
mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);
mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
mDemoSlider.setCustomAnimation(new DescriptionAnimation());
mDemoSlider.setDuration(4000);
mDemoSlider.addOnPageChangeListener(this);
ListView l = (ListView)findViewById(R.id.transformers);
l.setAdapter(new TransformerAdapter(this));
l.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
mDemoSlider.setPresetTransformer(((TextView) view).getText().toString());
Toast.makeText(MainActivity.this, ((TextView) view).getText().toString(), Toast.LENGTH_SHORT).show();
}
}); } @Override
protected void onStop() {
// To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed
mDemoSlider.stopAutoCycle();
super.onStop();
} @Override
public void onSliderClick(BaseSliderView slider) {
Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.main,menu);
return super.onCreateOptionsMenu(menu);
} @Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.action_custom_indicator:
mDemoSlider.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));
break;
case R.id.action_custom_child_animation:
mDemoSlider.setCustomAnimation(new ChildAnimationExample());
break;
case R.id.action_restore_default:
mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
mDemoSlider.setCustomAnimation(new DescriptionAnimation());
break;
case R.id.action_github:
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://github.com/daimajia/AndroidImageSlider"));
startActivity(browserIntent);
break;
}
return super.onOptionsItemSelected(item);
} @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {} @Override
public void onPageSelected(int position) {
Log.d("Slider Demo", "Page Changed: " + position);
} @Override
public void onPageScrollStateChanged(int state) {}
}
注意一点: 如果 图片不带标题, 可以使用DefaultSliderView , 如果图片有标题 就用TextSliderView
分割线-------------------------------------------------------------------------------------------------------
方式2: 使用Gallery 画廊来实现图片无限轮播
Android实现广告页图片无限轮播的更多相关文章
- iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)
这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...
- iOS开发之ImageView复用实现图片无限轮播
在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...
- iOS 两种不同的图片无限轮播
代码地址如下:http://www.demodashi.com/demo/11608.html 前记 其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵, ...
- Android真正意义上的无限轮播Banner
在android开发的时候,经常会使用到轮播图,对于这种效果,一般情况下,我们都会使用一种叫做ViewPager的来实现. 传统的实现逻辑是自定义一个View继承ViewPager,在适配器中 将co ...
- iOS实现图片无限轮播之使用第三方库SDCycleScrollView(转)
下载链接:github不断更新地址:https://github.com/gsdios/SDCycleScrollView #import "ViewController.h" # ...
- ViewPager—02图片无限轮播
布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- Swift应用案例 1.无限轮播
从今天开始,我学习的重点开始转向Swift,并且会分享一些自己学习的心得体会,今天给大家带来的的是无限轮播.广告页的无限轮播是非常常见的一个功能,大多数APP都有,大多数程序员也都实现过,今天我们 ...
- Android之仿京东淘宝的自动无限轮播控件
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...
- 利用RecyclerView实现无限轮播广告条
代码地址如下:http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在实 ...
随机推荐
- 【KakaJSON手册】03_JSON转Model_03_key处理
有时候,服务器返回的JSON数据的key跟客户端模型的属性名可能不一致,比如客户端遵守驼峰规范叫做nickName,而服务器端返回的JSON可能叫做nick_name.这时候为了保证数据转换成功,就需 ...
- TDH 安装 TDH-Client
1. TDH-Client 下载 (下载分享:链接:https://pan.baidu.com/s/1ZmP4BUCiuRypCtsoAuvKRA 提取码:xsbl ) tar -vxf td ...
- spring data jpa 的使用
使用spring data jpa 开发时,发现国内对spring boot jpa全面介绍的文章比较少案例也比较零碎,因此写文章总结一下. spring data jpa介绍 首先了解JPA是什么? ...
- 浏览器兼容问题-vue.js
前端时间和其他公司人合作,认识了vue.起初我们做手机端一般用这个技术.后来发现在web也可以使用. 然后自己摸索了下,发现这个技术对于数据的绑定果真很神奇,所在在一些绑定数据比较多,比较零散的画面时 ...
- js 设计模式&&query
1. 语法: try{ //需要执行的代码 }catch(e){ //错误处理 e程序遇到错误时的报错信息 } 2.惰性函数: 函数在第一次 ...
- Java虚拟机详解(七)------虚拟机监控和分析工具(1)——命令行
通过前面的几篇博客,我们介绍了Java虚拟机的内存分配以及内存回收等理论知识,了解这些知识对于我们在实际生产环境中提高系统的运行效率是有很大的帮助的.但是话又说回来,在实际生产环境中,线上项目正在运行 ...
- 安装yarn集群
安装yarn集群 # mapreduce运行平台YARN mapreduce程序应该是在很多机器上并行启动,而且先执行map task,当众多的maptask都处理完自己的数据 后,还需要启动众多的r ...
- vue+vscode+nodejs 开发环境搭建
nodejs安装配置 1.下载 地址:https://nodejs.org/en/ 2.默认安装 安装完成后,执行npm -v 出现版本号则表示安装成功. 3.配置 在node安装目录下新建两个文件夹 ...
- CentOS 源码安装MySQL5.7
一.安装方式源码安装,源码包名称mysql-boost-5.7.27.tar.gz,此版本包含boost库,在解压后的boost路径下.安装时,可以-DDOWNLOAD_BOOST=1 -DWITH_ ...
- 洛谷P2577 [ZJOI2005]午餐 打饭时间作为容量DP
P2577 [ZJOI2005]午餐 )逼着自己做DP 题意: 有n个人打饭,每个人都有打饭时间和吃饭时间.有两个打饭窗口,问如何安排可以使得总用时最少. 思路: 1)可以发现吃饭时间最长的要先打饭. ...