使用viewPage实现图片轮播
概述
前期准备
布局
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpage"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
</FrameLayout>
编码
初始化
LayoutInflater.from(context).inflate(R.layout.activtity_viewpage,this);
root = (LinearLayout) findViewById(R.id.root);
viewPager= (ViewPager) findViewById(R.id.viewpage);
adapter=new MyAdapter();
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(this);
@Override
public int getCount() {
return Images.mgIds.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return object==view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imageViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imageViews.get(position));
return imageViews.get(position);
}
imageViews=new ArrayList<>();
for (int i = 0; i< Images.mgIds.length; i++){
ImageView img=new ImageView(context);
img.setImageResource(Images.mgIds[i]);
imageViews.add(img);
}
points = new ArrayList<>();
for (int i = 0; i < Images.mgIds.length; i++) {
ImageView img = new ImageView(context);
if (i == position) {
img.setImageResource(R.drawable.page_indicator_focused);
} else {
img.setImageResource(R.drawable.page_indicator_unfocused);
}
root.addView(img);
points.add(img);
}
/**
* 当前展示的第position张图片
* @param position
*/
@Override
public void onPageSelected(int position) {
this.position=position;
setImageBackGround(position);
}
增加 自动播放功能
timer=new Timer();
if (task!=null){
task.cancel();
}
task=new viweTask();
timer.schedule(task,2000,3000);
/**
* 自动播放任务
*/
private class viweTask extends TimerTask{
@Override
public void run() {
if (position == Images.mgIds.length - 1) {
position = 0;
} else {
position++;
}
handler.sendEmptyMessage(1);
}
}
private Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
viewPager.setCurrentItem(position);
setImageBackGround(position);
}
};
/**
*
* @param state 1手指触摸屏幕;2 滑动;0 滑动完成
*/
@Override
public void onPageScrollStateChanged(int state) {
if (state==1){
playing=false;
}else {
playing=true;
}
}
增加 每一项的点击事件回调
//设置回调接口
private OnPageImageItemClick mOnPageImageItemClick;
public interface OnPageImageItemClick{
public void PageImageItemClick(ImageView imageItem,int position);
}
public void setOnPageImageItemClick(OnPageImageItemClick click){
this.mOnPageImageItemClick=click;
}
final ImageView nowView=imageViews.get(position);
nowView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// Log.d(TAG, "position:" + position+" clicked!");
mOnPageImageItemClick.PageImageItemClick(nowView,position);
}
});
viewPager.setOnPageImageItemClick(new MyViewPager.OnPageImageItemClick() {
@Override
public void PageImageItemClick(ImageView imageItem, int position) {
Log.d("MainActivity", "position:" + position);
}
});
使用viewPage实现图片轮播的更多相关文章
- Android 使用ViewPager 做的半吊子的图片轮播
Android 使用ViewPager 做的半吊子的图片轮播 效果图 虽然不咋样,但是最起码的功能是实现了,下面我们来一步步的实现它. 界面 下面我们来分析一下界面的构成 整体的布局: 因为我们要做出 ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 基于面向对象的图片轮播(js原生代码)
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
- jquery 图片轮播demo实现
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 一分钟搞定AlloyTouch图片轮播
一分钟搞定AlloyTouch图片轮播 轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹.除了一般的竖向滚动,A ...
随机推荐
- js中xml文件加载
- MySQL数据库详解(二)执行SQL更新时,其底层经历了哪些操作?
前面我们系统了解了一个查询语句的执行流程,并介绍了执行过程中涉及的处理模块.相信你还记得,一条查询语句的执行过程一般是经过连接器.分析器.优化器.执行器等功能模块,最后到达存储引擎. 那么,一条更 ...
- Mybatis(1、核心配置文件、Properties、Settings、typeAliases...)
Mybatis(1.核心配置文件.Properties.Settings.typeAliases...) 2017年04月23日 22:52:36 阅读数:1527 此章主要介绍sqlMapConfi ...
- 程序员是天生的软件UI设计师
一个软件项目,谁才是软件开发的主体,是软件UI设计师?还是程序员? 这还用问吗?当然是程序员拉.引用以下alienbat知友的一段评论:对于软件开发而言,码农的工作是必需的.设计师的工作是可选的. 举 ...
- python-网络编程-01
我们常说的计算机网络通信,值得是两台,或者多台计算机间,进行数据传输. 从计算机网络发展至今,人们使用了很多协议,但是最常用的还是tcp/ip协议,实际上这是一组协议. 当然使用python做网络编程 ...
- Matplotlib中文乱码解决办法
Matplotlib中文乱码 解决方法如下: 首先设置源码文件编码方式为UTF-8 #-*- coding: utf-8 -*- 接着设置字体属性字典 font = {'family': 'SimHe ...
- [python][oldboy]list append, extend
# coding=utf8 li = [1, 3, [1, "liu"], "liu"] print li li.append([1, 2]) print li ...
- P2564 生日礼物
生日礼物 洛谷链接 题目描述: 在一段彩带上有不同颜色的彩珠,求出包含所有颜色彩珠的最短彩带长度. 思路: 我们可以把按彩珠的位置把所有彩珠排一下序,然后从1开始遍历这些彩珠,并记录出现过的颜色数目, ...
- java EE技术体系——CLF平台API开发注意事项(2)——后端测试
前言:上篇博客说到了关于开发中的一些情况,这篇博客主要说明一些关于测试的内容. 一.宏观说明 要求:每一个API都必须经过测试. 备注:如果涉及到服务间调用(如权限和基础数据),而对方服务不可用时 ...
- BZOJ-3040 最短路
最短路+堆优化. 普通的堆还不行,自己用的是配对堆(貌似斐波那契堆也行?毕竟理论复杂度) 然后发现自己的配对堆比云神的不知快了多少...我照着他的模版打的喂.. 然后发现前T条边不理都能A... 数据 ...