使用FlaycoBanner实现图片轮播效果(加载网络图片)
FlaycoBanner是一个开源图片轮播框架,支持android2.2及以上;
git地址:https://github.com/H07000223/FlycoBanner_Master
在androidStudio中导入:
dependencies{
compile 'com.android.support:support-v4:22.2.1'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.flyco.banner:FlycoBanner_Lib:2.0.2@aar'
}
需要注意module和app中库的版本统一;
以 在Fragment中使用为例:
先需要自定义banner继承BaseIndicatorBanner,设置数据:
package widget; import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView; import com.bumptech.glide.Glide;
import com.flyco.banner.widget.Banner.BaseIndicatorBanner; import enity.BannerItem;
import mj.zk.com.okhttpdemo.R;
import utils.ViewFindUtils; public class SimpleImageBanner extends BaseIndicatorBanner<BannerItem, SimpleImageBanner> {
private ColorDrawable colorDrawable; public SimpleImageBanner(Context context) {
this(context, null, 0);
} public SimpleImageBanner(Context context, AttributeSet attrs) {
this(context, attrs, 0);
} public SimpleImageBanner(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
colorDrawable = new ColorDrawable(Color.parseColor("#555555"));
} @Override
public void onTitleSlect(TextView tv, int position) {
final BannerItem item = mDatas.get(position);
tv.setText(item.title);
} @Override
public View onCreateItemView(int position) {
View inflate = View.inflate(mContext, R.layout.adapter_simple_image, null);
ImageView iv = ViewFindUtils.find(inflate, R.id.iv); final BannerItem item = mDatas.get(position);
int itemWidth = mDisplayMetrics.widthPixels;
int itemHeight = (int) (itemWidth * 360 * 1.0f / 640);
iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
iv.setLayoutParams(new LinearLayout.LayoutParams(itemWidth, itemHeight)); String imgUrl = item.imgUrl; if (!TextUtils.isEmpty(imgUrl)) {
Glide.with(mContext)
.load(imgUrl)
.override(itemWidth, itemHeight)
.centerCrop()
.placeholder(colorDrawable)
.into(iv);
} else {
iv.setImageDrawable(colorDrawable);
} return inflate;
}
}
数据javabean实体类:
package enity; public class BannerItem {
public String imgUrl;
public String title;
}
数据url提供:
package utils; import android.support.v4.view.ViewPager; import com.flyco.banner.transform.DepthTransformer;
import com.flyco.banner.transform.FadeSlideTransformer;
import com.flyco.banner.transform.FlowTransformer;
import com.flyco.banner.transform.RotateDownTransformer;
import com.flyco.banner.transform.RotateUpTransformer;
import com.flyco.banner.transform.ZoomOutSlideTransformer; import java.util.ArrayList; import enity.BannerItem;
import mj.zk.com.okhttpdemo.R; public class DataProvider {
public static String[] titles = new String[]{
"欢乐颂:五美破案总动员",
"无心法师:生死离别!月牙遭虐杀",
"花千骨:尊上沦为花千骨",
"综艺饭:胖轩偷看夏天洗澡掀波澜",
"碟中谍4:阿汤哥高塔命悬一线,超越不可能",
};
public static String[] urls = new String[]{//640*360 360/640=0.5625
"http://r2.ykimg.com/050C0000571EB4F867BC3D14E908D907",//"欢乐颂:五美破案总动员"
"http://photocdn.sohu.com/tvmobilemvms/20150907/144158380433341332.jpg",//无心法师:生死离别!月牙遭虐杀
"http://photocdn.sohu.com/tvmobilemvms/20150907/144160286644953923.jpg",//花千骨:尊上沦为花千骨
"http://photocdn.sohu.com/tvmobilemvms/20150902/144115156939164801.jpg",//综艺饭:胖轩偷看夏天洗澡掀波澜
"http://photocdn.sohu.com/tvmobilemvms/20150907/144159406950245847.jpg",//碟中谍4:阿汤哥高塔命悬一线,超越不可能
}; public static ArrayList<BannerItem> getList() {
ArrayList<BannerItem> list = new ArrayList<>();
for (int i = 0; i < urls.length; i++) {
BannerItem item = new BannerItem();
item.imgUrl = urls[i];
item.title = titles[i]; list.add(item);
} return list;
} public static ArrayList<Integer> geUsertGuides() {
ArrayList<Integer> list = new ArrayList<>();
list.add(R.mipmap.guide_img_1);
list.add(R.mipmap.guide_img_2);
list.add(R.mipmap.guide_img_3);
list.add(R.mipmap.guide_img_4); return list;
} public static Class<? extends ViewPager.PageTransformer> transformers[] = new Class[]{
DepthTransformer.class,
FadeSlideTransformer.class,
FlowTransformer.class,
RotateDownTransformer.class,
RotateUpTransformer.class,
ZoomOutSlideTransformer.class,
};
}
在布局中使用此banner如下:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:banner="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="fragment.FragmentTest"> <widget.SimpleImageBanner
android:id="@+id/sib_simple_usage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
banner:bb_indicatorGravity="RIGHT"
banner:bb_scale="0.4"/> </FrameLayout>
在Fragment中:
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_fragment_test,container,false); SimpleImageBanner sib = (SimpleImageBanner) view.findViewById(R.id.sib_simple_usage);
sib.setSource(DataProvider.getList())
.startScroll(); //获取图片列表并滚动 sib.setOnItemClickL(new SimpleImageBanner.OnItemClickL(){
@Override
public void onItemClick(int position) {
Toast.makeText(getContext(),"position->"+position,Toast.LENGTH_SHORT).show();
}
});
return view;
}
出来的效果为:
使用FlaycoBanner实现图片轮播效果(加载网络图片)的更多相关文章
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- JQ 实现轮播图(3D旋转图片轮播效果)
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- ios图片轮播效果
代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- axure 动态面板实现图片轮播效果(淘宝)
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料 axure7.0 方法/步骤 下载需要轮播的图片 将图片引入至axure中,将引入的第一张图片转为 ...
- WPF3D图片轮播效果
原文:WPF3D图片轮播效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/68059169 ...
随机推荐
- C/C++回调函数
C/C++回调函数 在理解“回调函数”之前,首先讨论下函数指针的概念. 函数指针 (1)概念:指针是一个变量,是用来指向内存地址的.一个程序运行时,所有和运行相关的物件都是需要加载到内存中,这就决定了 ...
- 浅谈对Js闭包的理解
理解Js的闭包,首先让我们先看几个概念 执行环境(executive environment)每个函数都有自己的执行环境,匿名函数默认为全局环境. 作用域链(scope chain)子函数继承父函数, ...
- javascript理解js中的闭包
在javascript中变量有其作用域,如果在函数内部var一个变量,那么在函数外部一般情况下是不能被引用的. function outerFun() { ; alert(a); } ; outerF ...
- httpd服务的安装、配置和关于php留言本网站的搭建
搭建本地yum仓库的方法 http://www.cnblogs.com/lql123/p/5952788.html yum install httpd -y #安装httpd yum install ...
- 以forin的方式遍历数组时进行删除操作的注意点
今天在修改某项需求的时候,需要在遍历的时候将匹配项移除掉,采用的时forin的方式遍历,然后运行的时候却crash掉了 for (NSString*str in self.btnArray) { if ...
- 几种jQuery 实现无限滚动的插件
1.EndLess Scroll 2.infinite-scroll插件的使用
- Atom使用到的插件
atom-beautify atom-css-class-checker atom-css-comb atom-css-unit-converter atom-csscomb atom-csslint ...
- Android Monkey 压力测试 介绍
Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monkey会发送伪随机的用户事件流,适合对app做压力测试 阅读目录 ...
- C# 发送HttpWebRequest获得网络图片的大小、尺寸
可以通过HttpWebRequest的方式发送一个网络图片的请求,再通过HttpWebResponse接收返回的数据,分析数据流得到图片的大小以及尺寸,代码如下: /// <summary> ...
- oracle 查看锁死的表,锁死的进程
select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.locked_mode f ...