Android实现自定义轮播图片控件示例
作者：android_c 发布时间：2021-09-19 01:27:05
标签：android,轮播图
要完成一个轮播图片，首先想到的应该是使用ViewPager来实现。ViewPager已经有了滑动的功能，我们只要让它自己滚动。再加上下方的小圆点就行了。所以我们本次的自定义控件就是由ViewPager和LinearLayout叠加起来组成的。
直接先上效果图：
创建一个自定义的ViewPager
先上完整的代码
package com.kcode.autoscrollviewpager.view;
import android.content.Context;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import java.util.Timer;
import java.util.TimerTask;
/**
* Created by caik on 2016/10/10.
*/
public class AutoViewPager extends ViewPager {
private static final String TAG = "AutoViewPager";
private int currentItem;
private Timer mTimer;
private AutoTask mTask;
private boolean isFirst = true;
public AutoViewPager(Context context) {
super(context);
}
public AutoViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void start(){
if (mTimer == null) {
mTimer = new Timer();
}
mTimer.schedule(new AutoTask(),3000,3000);
}
private Runnable runnable = new Runnable() {
@Override
public void run() {
currentItem = getCurrentItem();
if(currentItem == getAdapter().getCount() - 1){
currentItem = 0 ;
}else {
currentItem++ ;
}
setCurrentItem(currentItem);
}
};
private AutoHandler mHandler = new AutoHandler();
public void updatePointView(int size) {
if (getParent() instanceof AutoScrollViewPager){
AutoScrollViewPager pager = (AutoScrollViewPager) getParent();
pager.initPointView(size);
}else {
Log.e(TAG,"parent view not be AutoScrollViewPager");
}
}
public void onPageSelected(int position) {
AutoScrollViewPager pager = (AutoScrollViewPager) getParent();
pager.updatePointView(position);
}
private class AutoTask extends TimerTask{
@Override
public void run() {
mHandler.post(runnable);
}
}
private final static class AutoHandler extends android.os.Handler{
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
}
}
public void onStop(){
//先取消定时器
if (mTimer != null) {
mTimer.cancel();
mTimer = null;
}
}
public void onDestroy(){
onStop();
}
public void onResume(){
start();
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
Log.i(TAG,"down");
onStop();
break;
case MotionEvent.ACTION_MOVE:
Log.i(TAG,"move");
break;
case MotionEvent.ACTION_UP:
Log.i(TAG,"up");
onResume();
break;
}
return super.onTouchEvent(ev);
}
}
AutoViewPager 继承至ViewPager，我们通过Timer来启动一个定时器。
public void start(){
if (mTimer == null) {
mTimer = new Timer();
}
mTimer.schedule(new AutoTask(),3000,3000);
}
private Runnable runnable = new Runnable() {
@Override
public void run() {
currentItem = getCurrentItem();
if(currentItem == getAdapter().getCount() - 1){
currentItem = 0 ;
}else {
currentItem++ ;
}
setCurrentItem(currentItem);
}
};
每隔三秒去更新一下页面。这样就能起到一个自己滚动的效果。
设置Adapter
要实现无限循环，只要把Adapter中的getCount()方法返回无限大，直接返回Integer.MAX_VALUE就可以了。
完整的Adapter代码：
package com.kcode.autoscrollviewpager.view;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.kcode.autoscrollviewpager.R;
import java.util.ArrayList;
import java.util.List;
/**
* Created by caik on 2016/10/11.
*/
public abstract class BaseViewPagerAdapter<T> extends PagerAdapter implements ViewPager.OnPageChangeListener{
private List<T> data = new ArrayList<>();
private Context mContext;
private AutoViewPager mView;
private OnAutoViewPagerItemClickListener listener;
public BaseViewPagerAdapter(List<T> t) {
this.data = t;
}
public BaseViewPagerAdapter(Context context, AutoViewPager viewPager) {
this.mContext = context;
mView = viewPager;
mView.setAdapter(this);
mView.addOnPageChangeListener(this);
mView.setCurrentItem(0);
}
public BaseViewPagerAdapter(Context context, AutoViewPager viewPager,OnAutoViewPagerItemClickListener listener) {
this.mContext = context;
mView = viewPager;
this.listener = listener;
mView.setAdapter(this);
mView.addOnPageChangeListener(this);
mView.setCurrentItem(0);
}
public BaseViewPagerAdapter(Context context, List<T> data,AutoViewPager viewPager,OnAutoViewPagerItemClickListener listener) {
this.mContext = context;
mView = viewPager;
this.data = data;
this.listener = listener;
mView.setAdapter(this);
mView.addOnPageChangeListener(this);
mView.setCurrentItem(0);
mView.start();
mView.updatePointView(getRealCount());
}
public void add(T t){
data.add(t);
notifyDataSetChanged();
mView.updatePointView(getRealCount());
}
@Override
public int getCount() {
return data == null ? 0 : Integer.MAX_VALUE;
}
public int getRealCount(){
return data == null ? 0 : data.size();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((ImageView) object);
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
ImageView view = (ImageView) LayoutInflater.from(mContext)
.inflate(R.layout.imageview,container,false);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (listener != null) {
listener.onItemClick(position ％ getRealCount(),data.get(position ％ getRealCount()));
}
}
});
loadImage(view,position, data.get(position ％ getRealCount()));
container.addView(view);
return view;
}
public abstract void loadImage(ImageView view,int position,T t);
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mView.onPageSelected(position ％ getRealCount());
}
@Override
public void onPageScrollStateChanged(int state) {
}
public interface OnAutoViewPagerItemClickListener<T> {
void onItemClick(int position,T t);
}
}
这里我们使用了泛型，因为有时候我们可能只传一个url集合进来，也可能是对象集合，方便拓展。加载图片的方法也是一个抽象方法
public abstract void loadImage(ImageView view,int position,T t);
因为每个App使用的图片加载框架都不一样，所以这里的加载就留个App自己实现。使用的时候创建Adapter只要继承这里的BaseViewPagerAdapter，然后重写loadImage(ImageView view,int position,T t)方法，在这里进行图片的加载就行了。
如果你需不要底部的小圆点标示的话，这里就已经完成了。使用的时候，直接使用
<com.kcode.autoscrollviewpager.view.AutoViewPager
android:layout_width="match_parent"
android:layout_height="200dp">
</com.kcode.autoscrollviewpager.view.AutoViewPager>
代替
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
就可以了。需要底部的小圆点标示的话，继续往下
添加小圆点标示
需要添加小圆点标示的话。其实就是在ViewPager上再加一层。我们新建一个View，继承至RelativeLayout
完整代码如下：
package com.kcode.autoscrollviewpager.view;
import android.content.Context;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import com.kcode.autoscrollviewpager.R;
import static android.view.Gravity.CENTER;
/**
* Created by caik on 2016/10/17.
*/
public class AutoScrollViewPager extends RelativeLayout{
private AutoViewPager mViewPager;
private Context mContext;
private LinearLayout layout;
public AutoScrollViewPager(Context context) {
super(context);
init(context);
}
public AutoScrollViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context){
mContext = context;
mViewPager = new AutoViewPager(context);
layout = new LinearLayout(mContext);
addView(mViewPager);
}
public AutoViewPager getViewPager() {
return mViewPager;
}
public void initPointView(int size){
layout = new LinearLayout(mContext);
for (int i = 0; i < size; i++) {
ImageView imageView = new ImageView(mContext);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
params.leftMargin = 8;
params.gravity = CENTER;
imageView.setLayoutParams(params);
if (i == 0) {
imageView.setBackgroundResource(R.drawable.point_checked);
}else {
imageView.setBackgroundResource(R.drawable.point_normal);
}
layout.addView(imageView);
}
LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.addRule(ALIGN_PARENT_BOTTOM);
layoutParams.addRule(ALIGN_PARENT_RIGHT);
layoutParams.setMargins(12,20,12,20);
layout.setLayoutParams(layoutParams);
addView(layout);
}
public void updatePointView(int position) {
int size = layout.getChildCount();
for (int i = 0; i < size; i++) {
ImageView imageView = (ImageView) layout.getChildAt(i);
if (i == position){
imageView.setBackgroundResource(R.drawable.point_checked);
}else {
imageView.setBackgroundResource(R.drawable.point_normal);
}
}
}
}
初始化的时候创建一个ViewPager,一个LinearLayout（用来放小圆点）
public AutoScrollViewPager(Context context) {
super(context);
init(context);
}
public AutoScrollViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context){
mContext = context;
mViewPager = new AutoViewPager(context);
layout = new LinearLayout(mContext);
addView(mViewPager);
}
再通过addView(mViewPager);添加。
需要准备两张图片，这里用Shape进行绘制,Shape的使用可以查看Android Shape使用.
初始化小圆点：
public void initPointView(int size){
layout = new LinearLayout(mContext);
for (int i = 0; i < size; i++) {
ImageView imageView = new ImageView(mContext);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
params.leftMargin = 8;
params.gravity = CENTER;
imageView.setLayoutParams(params);
if (i == 0) {
imageView.setBackgroundResource(R.drawable.point_checked);
}else {
imageView.setBackgroundResource(R.drawable.point_normal);
}
layout.addView(imageView);
}
LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.addRule(ALIGN_PARENT_BOTTOM);
layoutParams.addRule(ALIGN_PARENT_RIGHT);
layoutParams.setMargins(12,20,12,20);
layout.setLayoutParams(layoutParams);
addView(layout);
}
更新小圆点：
public void updatePointView(int position) {
int size = layout.getChildCount();
for (int i = 0; i < size; i++) {
ImageView imageView = (ImageView) layout.getChildAt(i);
if (i == position){
imageView.setBackgroundResource(R.drawable.point_checked);
}else {
imageView.setBackgroundResource(R.drawable.point_normal);
}
}
}
带小圆点的使用以下控件
<com.kcode.autoscrollviewpager.view.AutoScrollViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="220dp">
</com.kcode.autoscrollviewpager.view.AutoScrollViewPager>
0
投稿猜你喜欢
写在前面：上周末抽点时间把自己写的一个简单Socket聊天程序的初始设计和服务端细化设计记录了一下，周二终于等来毕业 * 的软考证书，然后接下- 在使用Unity中的Debug.Log()进行日志输出时很不方便，在打包出来的可执行文件中没有办法看到输出，所有就想自己实现一个简易的日志输
- 一、 lib文件的简介.lib是一种文件后缀，是Windows操作系统的库文件，有静态lib和动态lib之分：1）、静态lib文件
- 提到java里的注解，和我们平时的注释还是有很大的区别，主要是作为java特性来使用的，跟我们常见的类是同一个使用的层面。关于java注解的
- 一、Spring Bean 集合注入在【Spring学习笔记(三)】已经讲了怎么注入基本数据类型和引用数据类型，接下来介绍如何注入比较特殊的
- 本文实例为大家分享了C#实现简单的计算器小功能的具体代码，供大家参考，具体内容如下先来张效果图吧（5分钟写好，莫怪)代码:数字按钮绑定的是b
- 本文实例讲述了C#多线程与跨线程访问界面控件的方法。分享给大家供大家参考。具体分析如下：在编写WinForm访问WebService时，常会
- 文件的上传与下载（一）在实现文件上传和下载之前我们需要做一些准备工作，在Apache官网去下载文件上传下载的两个组件，下载链接这里给出：co
- 在Android开发中我们经常有这样的需求，从服务器上下载xml或者JSON类型的数据，其中包括一些图片资源，本demo模拟了这个需求，从网
- 1、简介双重检查锁定（也叫做双重检查锁定优化）是一种软件设计模式。它的作用是减少延迟初始化在多线程环境下获取锁的次数，尤其是单例模式下比较突
- 如果有哪一个做程序员的小伙伴说自己没有遇到中文乱码问题，我是不愿意相信的。今天在做微信订阅号的智能回复时，又一时迷乱的跳进了中文乱码这个火坑
- 1、自定义消息转换器MessageConverter在WebMvcAutoConfiguration类中有一个方法configureMess
- 如题，主要使用AsReadOnly这个方法就可以了List<int> a = new List<int> {1, 2
- 方法一：递归算法/// <summary>/// 一列数的规则如下: 1、1、2、3、5、8、13、21、34求第30位数是多少
- 本文实例为大家分享了C#操作INI配置文件示例的具体代码，供大家参考，具体内容如下源文件地址：C#操作INI配置文件示例创建如图所示的控件：
- 一、题目描述题目实现：不同的客户端之间需要进行通信，一个客户端与指定的另一客户端进行通信，实现一对一聊天功能。实现一个客户端与指定的另一客户
- 本文实例为大家分享了Java实现简单猜拳游戏的具体代码，供大家参考，具体内容如下看网上的猜拳游戏那么多，但都是用switch输入数字，所以用
- 1.项目简绍本项目使用SpringBoot开发，jdbc5.1.48 Mybatis 源码可下载其中涉及功能有：Mybatis的使用，Thy
- Android自带的跑马灯效果不太好控制，还必须要满足条件才能有效果，而且速度不受控制。前面我的博客中有一篇就是用Android自带的跑马灯
- 来看一个具体的习题实践：题目根据二叉树前序遍历序列例如：7,-7,8,#,#,-3,6,#,9,#,#,#,-5,#,#，构建二叉树，并且用
