Android实现ViewPage轮播图效果
在android移动端的开发中，首页轮播图是一个特别常见的功能，所以今天就来将最近写的一个小demo记录一下。
首先当然是新建一个项目代码如下：
activity_main.xml文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yzp.viewpagedemo.MainActivity"
android:background="#f6f6f6">
<!--轮播图-->
<RelativeLayout
android:id="@+id/topPanel_vpg"
android:layout_width="match_parent"
android:layout_height="190dp"
>
<android.support.v4.view.ViewPager
android:id="@+id/ViewPage_Detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
<LinearLayout
android:id="@+id/point_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
MainActivity
package com.yzp.viewpagedemo;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ViewPager ViewPage_Detail;
private LinearLayout point_detail;
private Context context;
private View view;
//轮播图图片资源
private final int[] viewpage_images = {R.mipmap.two, R.mipmap.three, R.mipmap.four, R.mipmap.fifve};
private ArrayList<ImageView> viewpage_imageList;
//判断是否自动滚动ViewPage
private boolean isRunning = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Instantiation();
}
public void Instantiation() {
ViewPage_Detail = (ViewPager)findViewById(R.id.ViewPage_Detail);
point_detail = (LinearLayout)findViewById(R.id.point_detail);
//初始化图片资源
viewpage_imageList = new ArrayList<ImageView>();
for (int i : viewpage_images) {
// 初始化图片资源
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(i);
viewpage_imageList.add(imageView);
// 添加指示小点
ImageView point = new ImageView(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(15,
15);
params.rightMargin = 10;
params.bottomMargin = 15;
point.setLayoutParams(params);
point.setBackgroundResource(R.mipmap.light_blue_point);
if (i == R.mipmap.two) {
//默认聚焦在第一张
point.setBackgroundResource(R.mipmap.blue_point);
point.setEnabled(true);
} else {
point.setEnabled(false);
}
point_detail.addView(point);
}
//首页轮播
CarouselShow carouselShow = new CarouselShow(context, viewpage_imageList);
carouselShow.CarouselShow_Info_Detail(this);
handler.sendEmptyMessageDelayed(0, 3000);
}
private Handler handler = new Handler() {
public void handleMessage(Message msg) {
// 执行滑动到下一个页面
ViewPage_Detail.setCurrentItem(ViewPage_Detail.getCurrentItem() + 1);
if (isRunning) {
// 在发一个handler延时
handler.sendEmptyMessageDelayed(0, 3000);
}
}
};
@Override
public void onDestroy() {
// 停止滚动
isRunning = false;
super.onDestroy();
}
}
CarouselShow类(轮播功能实现)：
package com.yzp.viewpagedemo;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
/**
* 轮播展示公共类
* 作者: yzp on 2016-09-07.
* E-mail: 15111424807@163.com
* QQ: 486492302
*/
public class CarouselShow {
private final Context context;
private LinearLayout point_group;
private ArrayList<ImageView> viewpage_imageList;
protected int lastPosition = 0;
private ViewPager ViewPage_Detail;
private LinearLayout point_detail;
public CarouselShow(Context context, ArrayList<ImageView> viewpage_imageList) {
this.context = context;
this.viewpage_imageList = viewpage_imageList;
}
/**
* 当需要多个轮播功能的时候 建立一个类来调用 并实现此方法
*/
public void CarouselShow_Info_Detail(MainActivity view){
ViewPage_Detail = (ViewPager)view.findViewById(R.id.ViewPage_Detail);
point_detail = (LinearLayout) view.findViewById(R.id.point_detail);
ViewPage_Detail.setAdapter(new TeaNetPageAdapter(viewpage_imageList));
// 设置当前viewPager的位置
ViewPage_Detail.setCurrentItem(Integer.MAX_VALUE / 2
- (Integer.MAX_VALUE / 2 % viewpage_imageList.size()));
ViewPage_Detail.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// 页面切换后调用， position是新的页面位置
// 实现无限制循环播放
position %= viewpage_imageList.size();
// 把当前点设置为true,将上一个点设为false；并设置point_group图标
point_detail.getChildAt(position).setEnabled(true);
point_detail.getChildAt(position).setBackgroundResource(R.mipmap.blue_point);//设置聚焦时的图标样式
point_detail.getChildAt(lastPosition).setEnabled(false);
point_detail.getChildAt(lastPosition).setBackgroundResource(R.mipmap.light_blue_point);//上一张恢复原有图标
lastPosition = position;
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
TeaNetPageAdapter(适配器)：
package com.yzp.viewpagedemo;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.ArrayList;
/**
* 作者: yzp on 2016-09-07.
* E-mail: 15111424807@163.com
* QQ: 486492302
*/
public class TeaNetPageAdapter extends PagerAdapter {
private ArrayList<ImageView> viewpage_imageList;
public TeaNetPageAdapter(ArrayList<ImageView> viewpage_imageList) {
this.viewpage_imageList = viewpage_imageList;
}
// 需要实现以下四个方法
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
// 判断view和Object对应是否有关联关系
if (view == object) {
return true;
} else {
return false;
}
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// 获得相应位置上的view； container view的容器，其实就是viewpage自身,
// position: viewpager上的位置
// 给container添加内容
container.addView(viewpage_imageList.get(position % viewpage_imageList.size()));
return viewpage_imageList.get(position % viewpage_imageList.size());
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// 销毁对应位置上的Object
// super.destroyItem(container, position, object);
container.removeView((View) object);
object = null;
}
}
简单的几个类，首页轮播的功能就实现了，不过主类的图片资源就没有贴出来了，到时候可以自己下载几张图片，贴到mipmap文件夹下就OK了。
效果图展示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- Android自定义控件实现简单的轮播图控件
- Android自定义控件实现优雅的广告轮播图
- Android ViewPager实现轮播图效果
- Android如何使用RecyclerView打造首页轮播图
- Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件
- Android开发在轮播图片上加入点击事件的方法
- Android实现轮播图无限循环效果
- Android下拉刷新与轮播图滑动冲突解决方案
- Android实现自定义轮播图片控件示例
- Android中用RxJava和ViewPager实现轮播图
相关推荐
-
Android开发在轮播图片上加入点击事件的方法
这是我加在里面的代码,用Switch(position) 来获取当前图片,在相应的图片上加入点击事件, case 0:, case 1: 时代码如下,当点击第一张图片时,想实现case 0里面的代码,但是直接直接报错,退出,当点击第二张实现case 1中的代码时却是没问题,我想知道到底哪里不对啊. 对了,这些代码是在Fragemnt内写的,点击图片时是要从一个Fragment转到一个Activity,求大神指教
-
Android如何使用RecyclerView打造首页轮播图
先看看效果图: 停在中间自动翻页 序言:最近接到一个任务,做一个类似上面自动翻页的功能.可以看到,这一屏中有三张图片显示出来了,有两张没有显示完全,看到设计图的时候第一反应是可以用viewpager来实现,但是任务却跟你开了一个天大的玩笑,要求是以最左边的图片为基准,也就是说,左边的图片也得显示完全,就像下图所示,后来仔细想想viewpager好像没有这样的功能,也有可能是我不知道,我也没有找到这样的文章或者信息,希望知道的简友私戳交流一下,感激不尽,好了,言归正传 停在左边 在开始之前呢,首先
-
Android中用RxJava和ViewPager实现轮播图
前言 很多人要实现轮播图都会想到使用ViewPager + Handler来完成轮播图的效果.但是在RxJava快速发展的情况下,已经可以使用RxJava来代替Handler完成这样任务了. 下面我们就来介绍如何实现RxJava+ViewPager的轮播图. 效果图如下 ViewPager的操作 说到ViwePager应该大家都不陌生,它可以结合普通的View也可以结合Fragment一起使用.在此我也就不对它的使用方法进行过多的介绍了.直接开始介绍轮播的方法. 常见的轮播操作 private
-
Android实现自定义轮播图片控件示例
要完成一个轮播图片,首先想到的应该是使用ViewPager来实现.ViewPager已经有了滑动的功能,我们只要让它自己滚动.再加上下方的小圆点就行了.所以我们本次的自定义控件就是由ViewPager和LinearLayout叠加起来组成的. 直接先上效果图: 创建一个自定义的ViewPager 先上完整的代码 package com.kcode.autoscrollviewpager.view; import android.content.Context; import android.os
-
Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件
最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version
-
Android实现轮播图无限循环效果
本文实例为大家分享了Android轮播图无限循环的具体代码,供大家参考,具体内容如下 实现无限循环 在getCount()方法中,返回一个很大的值,Integer.MAX_VALUE 在instantiateItem()方法中,获取当前View的索引时,进行取于操作,传递进来的int position是个非常大的数,对他进行求余数 在destroyItem()方法中,同样 在onPageSelected()监听方法中,对传递进来的索引进行取于 反向的无限循环 调用ViewPager对象的setC
-
Android自定义控件实现简单的轮播图控件
最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮播图
-
Android ViewPager实现轮播图效果
先上一张效果图: 说到ViewPager实现轮播图效果,那么肯定会用到PagerAdapter,下面先介绍下这个类. PagerAdapter简介 PagerAdapter是Android.support.v4包中的类,是一个抽象类,直接继承于Object,导入包android.support.v4.view.PagerAdapter即可使用. PagerAdapter主要是viewpager的适配器,而viewPager则也是在android.support.v4扩展包中新添加的一个强大的控件
-
Android下拉刷新与轮播图滑动冲突解决方案
最近在开发中遇到了这样一个问题,在下拉刷新组件中包含了一个轮播图组件,当左右滑动的图片时很容易触发下拉刷新,如下图所示: 如图中红色箭头所示方向切换轮播图,很容易触发下拉刷新.网上查了很多方法,发现都不能很好的解决,于是自己研究了下. 我选用的第三方控件 1.下拉刷新我选用的是chanven的CommonPullToRefresh(系统自带的SwipeRefreshLayout也应该是一样的道理); 2.轮播图选用的是daimajia的AndroidImageSlider(用ViewPager也
-
Android自定义控件实现优雅的广告轮播图
前言 今天给大家带来一个新的控件–轮播图,网上已经有很多这类的博客来讲解如何实现的,那么我的这个有哪些特点呢?或是说有哪些不同呢? 满足了轮播图的基本要求,循环滑动,在最后一张切到第一张时可以平稳的过渡 简洁简洁简洁 扩展性强 如何使用 下面我们先展示两种效果图 1 默认效果 代码实现 //布局代码 <com.landptf.view.BannerM android:id="@+id/bm_banner" android:layout_width="match_pare