Android项目实战(四十七):轮播图效果Viewpager
简易、常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V
需求如下:
不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最后一张图片自动切换后的为第一张图片,手指触摸可以滑动。
思路:
初始化Viewpager和轮播点之后 , 开启一个子线程,每隔3秒判断一次 当前位置是不是轮播图数据个数的最后一个位置,是的话切换到第一张图片,不是的话切换到下一张图片
一、先看布局文件,根容器为相对布局,里面放一个ViewPager控件,并在ViewPager 控件右下角位置放一个线性布局,用于动态添加轮播点
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xqx.magikare.viewpagerdemo.MainActivity"> <!--轮播图区域-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<!--轮播图-->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_height="200dp"
android:layout_width="match_parent"
/>
<!--位置点父容器-->
<LinearLayout
android:id="@+id/lyDot"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
></LinearLayout> </RelativeLayout> </RelativeLayout>
二、Activity 几个生命周期以及关键方法
1、initData()方法
private void initData() {
viewPagerData = new ArrayList<>();
ImageView imageView = new ImageView(this);
/*添加图片资源,实际开发中为for循环即可 ,这里demo麻烦了*/
// 第一张图片
imageView.setBackgroundResource(R.mipmap.aaa);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
viewPagerData.add(imageView); // 第二张图片
ImageView imageView2 = new ImageView(this);
imageView2.setBackgroundResource(R.mipmap.bbb);
imageView2.setScaleType(ImageView.ScaleType.FIT_XY);
viewPagerData.add(imageView2); // 第三张图片
ImageView imageView3 = new ImageView(this);
imageView3.setBackgroundResource(R.mipmap.ccc);
imageView3.setScaleType(ImageView.ScaleType.FIT_XY);
viewPagerData.add(imageView3);
}
2、initDots()方法
/**
* 动态创建轮播图位置点显示
*/
private void initDots() {
// 动态添加轮播图位置点 , 默认第0个位置 为当前轮播图的颜色
for (int i = ; i < viewPagerData.size(); i++) {
imageView = new ImageView(this);
if (i==) {
imageView.setBackgroundColor(Color.parseColor(SelectColor));
}else{
imageView.setBackgroundColor(Color.parseColor(unSelectColor));
}
imageView.setLayoutParams(new LinearLayout.LayoutParams(dip2px(), dip2px()));
setMargins(imageView,dip2px(),,dip2px(),);
lyDot.addView(imageView);
}
}
3、initViewPager()方法
private void initViewpager() {
//数据适配器
viewPagerAdapter = new PagerAdapter() {
private int mChildCount = ; @Override
public void notifyDataSetChanged() {
mChildCount = getCount();
super.notifyDataSetChanged();
} @Override
public int getItemPosition(Object object) {
if (mChildCount > ) {
mChildCount--;
return POSITION_NONE;
}
return super.getItemPosition(object);
} @Override
//获取当前窗体界面数
public int getCount() {
// TODO Auto-generated method stub
return viewPagerData.size();
} @Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
} //是从ViewGroup中移出当前View
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView(viewPagerData.get(arg1));
} //返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
public Object instantiateItem(View arg0, int arg1) {
((ViewPager) arg0).addView(viewPagerData.get(arg1));
return viewPagerData.get(arg1);
}
}; viewpager.setAdapter(viewPagerAdapter);
viewpager.setCurrentItem();
viewpager.setOffscreenPageLimit();
viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
} @Override
public void onPageSelected(int position) {
currentPosition = position;
for (int i = ; i < lyDot.getChildCount(); i++) {
if (i == currentPosition) {
lyDot.getChildAt(i).setBackgroundColor(Color.parseColor("#1d2939"));
} else {
lyDot.getChildAt(i).setBackgroundColor(Color.parseColor("#476990"));
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
// 没有滑动的时候 切换页面
}
});
}
4、initHandler()方法
private void initHandler() {
handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == ) {
if (currentPosition==viewPagerData.size()-){ // 如果当前位置是轮播图的最后一个位置,则调到轮播图数据源的第一张图片
currentPosition = ;
viewpager.setCurrentItem(,false);
}else{
currentPosition ++; // 否则切换到下一张图片
viewpager.setCurrentItem(currentPosition,true);
}
}
}
};
}
5、autoViewPager()方法
/**
* 开启子线程,实现3000毫秒 切换一次 ,viewpager自动播放
*/
private void autoViewPager() {
new Thread() {
@Override
public void run() {
super.run();
while (actIsAlive) {
try {
sleep();
handler.sendEmptyMessage();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();
}
-----------------------------------------------------------------------------------------------------------
Android项目实战(四十七):轮播图效果Viewpager的更多相关文章
- 第二百五十一节,Bootstrap项目实战--响应式轮播图
Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...
- Bootstrap 学习笔记 项目实战 响应式轮播图
左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...
- (转载)Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow
Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow 这是一张QQ空间说说详情的截图. 分析: 1.点击右上角三个点的图标,在界面底部弹出一个区域,这个 ...
- 小程序实践(二):swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- jQuey实现轮播图效果
再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...
- js原生实现轮播图效果(面向对象编程)
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
随机推荐
- iOS学习——(转)iOS中关于通知的使用
在移动端开打过程中,经常会用到通知和推送,例如有短信来了需要通知提示,手机横屏了需要通知提示,插上耳机了需要通知提示等等,我们可以根据这些通知采取对应的动作.iOS系统自身定义了很对通知,但是在开发过 ...
- Fiddler修改请求、返回数据
相信你们有听过说“绕过前端”,但是可能想不到要怎样才能绕过前端呢? 首先,我们要知道什么是绕过前端?比如:登录用户名限制数字.6位,用户在登录页面填写用户名符合要求,使用Fiddler作为代理,拦截登 ...
- AndroidStudio项目提交(更新)到github最详细步骤
在使用studio开发的项目过程中有时候我们想将项目发布到github上,以前都是用一种比较麻烦的方式(cmd)进行提交,最近发现studio其实是自带这种功能的,终于可以摆脱命令行了. 因为自己也没 ...
- karma测试实践
karma是Google团队开发的一套前端测试运行框架,它不同于测试框架(jasmine,mocha等),它运行在这些测试框架之上,主要完成的工作有: 1.karma启动一个web服务器,生成包含js ...
- 如何用vue-router为每个路由配置各自的title
传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无 ...
- leetcode — powx-n
/** * Source : https://oj.leetcode.com/problems/powx-n/ * * Created by lverpeng on 2017/7/18. * * Im ...
- 一览js模块化:从CommonJS到ES6
本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块 ...
- docker 构建 https 私有仓库 Registry
1.安装docker # docker install docker 2.拉取仓库镜像 # docker pull registry 3.生成认证certificate # mkdir ~/certs ...
- nginx proxy_pass 代理域名
一.描述 1.nginx配置转发的时候使用的是域名,即使用dns服务方便配置和负载.但是nginx默认会进行缓存,当域名对应的服务出问题的时候就会报错,只有默认的缓存时间到了才会再次进行解析,ngin ...
- 监控报I/O问题,怎么办?
Linux系统出现了性能问题,一般我们可以通过top.iostat.free.vmstat等命令来查看初步定位问题.其中iostat可以给我们提供丰富的IO状态数据. 一.查询命令基本使用 1.命令介 ...