热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android自定义控件实现优雅的广告轮播图

这篇文章主要为大家详细介绍了Android自定义控件实现优雅的广告轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

今天给大家带来一个新的控件–轮播图,网上已经有很多这类的博客来讲解如何实现的,那么我的这个有哪些特点呢?或是说有哪些不同呢?

满足了轮播图的基本要求,循环滑动,在最后一张切到第一张时可以平稳的过渡
简洁简洁简洁
扩展性强

如何使用

下面我们先展示两种效果图

1 默认效果

代码实现

//布局代码


//java代码
BannerM banner = (BannerM) findViewById(R.id.bm_banner);
if (banner != null) {
 banner.setBannerBeanList(bannerList).show();
}

//初始化数据
private void initData() {
 bannerList = new ArrayList<>(4);
 BannerBean banner1 = new BannerBean("测试图片1", url1, "");
 BannerBean banner2 = new BannerBean("测试图片2", url2, "");
 BannerBean banner3 = new BannerBean("测试图片3", url3, "");
 BannerBean banner4 = new BannerBean("测试图片4", url4, "");
 bannerList.add(banner1);
 bannerList.add(banner2);
 bannerList.add(banner3);
 bannerList.add(banner4);
}

其实关键代码就一行,这里面用到了BannerBean的实体类,有三个参数,分别是图片的描述文字,图片地址,点击后对应的链接

以上全部都是默认值,下面来看一下都哪些可以自定义

2 自定义效果

图1和图2主要有以下几点不同

1 指示器和文字的位置结构,这里面我只实现了两种,大家也可以下载源码后扩展
2 圆点指示器选中后的颜色
3 自动播放的时间间隔
4 支持图片未加载出来之前显示默认图片

自定义效果的代码实现

下面通过xml和java代码来分别演示一下图2的实现

1 xml



BannerM banner = (BannerM) findViewById(R.id.bm_banner);
if (banner != null) {
 banner.setBannerBeanList(bannerList)
   .setOnItemClickListener(new BannerM.OnItemClickListener() {
    @Override
    public void onItemClick(int position) {
     Log.e("landptf", "position = " + position);
    }
   })
   .show();
}

2 java



BannerM banner = (BannerM) findViewById(R.id.bm_banner);
if (banner != null) {
 banner.setBannerBeanList(bannerList)
   .setDefaultImageResId(R.drawable.default_image)
   .setIndexPosition(BannerM.INDEX_POSITION_BOTTOM)
   .setIndexColor(getResources().getColor(R.color.colorPrimary))
   .setIntervalTime(3)
   .setOnItemClickListener(new BannerM.OnItemClickListener() {
    @Override
    public void onItemClick(int position) {
     Log.e("landptf", "position = " + position);
    }
   })
   .show();
}

以上两种代码实现的效果完全等价,在java代码中都是通过链式调用,使代码看起来更加的简洁。
有木有很方便,大大的减少了代码量,而且是可以直接拿来用的。好了下面我们来看一下实现的代码。

实现

图片下载集成了Picasso,有对Picasso不熟悉的童鞋可以看一下我之前的博客图片加载利器之Picasso(二)基本用法

<&#63;xml version="1.0" encoding="utf-8"&#63;>


 

 

 


ViewStub的引用代码这里就不给出,大家可以访问我的git查看,文末会给出地址

package com.landptf.view;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.GradientDrawable;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.view.ViewStub;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.landptf.R;
import com.landptf.bean.BannerBean;
import com.landptf.util.ConvertM;
import com.squareup.picasso.MemoryPolicy;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
 * Created by landptf on 2017/03/06.
 * 轮播图控件
 */
public class BannerM extends RelativeLayout {
 /**
  * 圆点指示器的位置,文字在左,圆点在右
  */
 public static final int INDEX_POSITION_RIGHT = 0x100;
 /**
  * 圆点指示器的位置,文字在上,圆点在下
  */
 public static final int INDEX_POSITION_BOTTOM = 0x101;

 private static final int HANDLE_UPDATE_INDEX = 0;

 private Context mContext;
 private ViewPager vpBanner;
 private ViewPagerAdapter adapter;
 private OnItemClickListener mOnItemClickListener;

 //装载ImageView控件的list
 private List ivList;
 //圆点指示器控件
 private List vList;
 //控制圆点View的形状,未选中的颜色
 private GradientDrawable gradientDrawable;
 //控制圆点View的形状,选中的颜色
 private GradientDrawable gradientDrawableSelected;
 //选中圆点的颜色值,默认为#FF3333
 private int indexColorResId;
 //图片对应的文字描述
 private TextView tvText;
 //自动滑动的定时器
 private ScheduledExecutorService scheduledExecutorService;
 //当前加载到第几页
 private int currentIndex = 0;
 //默认背景图
 private int defaultImageResId;
 private Drawable defaultImageDrawable = null;
 //自动轮播的时间间隔(s)
 private int intervalTime = 5;
 //轮播图需要的数据列表
 private List bannerBeanList;
 //圆点指示器的位置,提供两种布局
 private int indexPosition = INDEX_POSITION_RIGHT;

 public BannerM(Context context) {
  this(context, null);
 }

 public BannerM(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public BannerM(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs, defStyleAttr);
 }

 private void init(Context context, AttributeSet attrs, int defStyle) {
  mCOntext= context;
  LayoutInflater.from(context).inflate(R.layout.view_banner_m, this, true);
  vpBanner = (ViewPager) findViewById(R.id.vp_banner);
  TypedArray a = getContext().obtainStyledAttributes(
    attrs, R.styleable.bannerM, defStyle, 0);
  if (a != null) {
   defaultImageDrawable = a.getDrawable(R.styleable.bannerM_defaultImageDrawable);
   intervalTime = a.getInteger(R.styleable.bannerM_intervalTime, 5);
   indexPosition = a.getInteger(R.styleable.bannerM_indexPosition, INDEX_POSITION_RIGHT);
   ColorStateList indexColorList = a.getColorStateList(R.styleable.bannerM_indexColor);
   if (indexColorList != null) {
    indexColorResId = indexColorList.getColorForState(getDrawableState(), 0);
   }
   a.recycle();
  }
 }

 /**
  * 设置图片加载之前默认显示的图片
  *
  * @param defaultImageResId
  * @return BannerM
  */
 public BannerM setDefaultImageResId(int defaultImageResId) {
  this.defaultImageResId = defaultImageResId;
  return this;
 }

 /**
  * 设置图片加载之前默认显示的图片
  *
  * @param defaultImageDrawable
  * @return BannerM
  */
 public BannerM setDefaultImageDrawable(Drawable defaultImageDrawable) {
  this.defaultImageDrawable = defaultImageDrawable;
  return this;
 }

 /**
  * 设置轮播的时间间隔,单位为s,默认为5s
  *
  * @param intervalTime
  * @return BannerM
  */
 public BannerM setIntervalTime(int intervalTime) {
  this.intervalTime = intervalTime;
  return this;
 }

 /**
  * 设置圆点指示器的位置
  * #BannerM.INDEX_POSITION_RIGHT or #BannerM.INDEX_POSITION_BOTTOM
  *
  * @param indexPosition
  * @return BannerM
  */
 public BannerM setIndexPosition(int indexPosition) {
  this.indexPosition = indexPosition;
  return this;
 }

 /**
  * 选中圆点的颜色值,默认为#FF3333
  *
  * @param indexColor
  * @return BannerM
  */
 public BannerM setIndexColor(int indexColor) {
  this.indexColorResId = indexColor;
  return this;
 }

 /**
  * 设置轮播图需要的数据列表
  *
  * @param bannerBeanList
  * @return BannerM
  */
 public BannerM setBannerBeanList(List bannerBeanList) {
  this.bannerBeanList = bannerBeanList;
  return this;
 }

 /**
  * 设置图片的点击事件
  * @param listener
  */
 public BannerM setOnItemClickListener(@Nullable OnItemClickListener listener) {
  mOnItemClickListener= listener;
  return this;
 }

 public void show() {
  if (bannerBeanList == null || bannerBeanList.size() == 0) {
   throw new IllegalArgumentException("bannerBeanList == null");
  }
  initImageViewList();
  initIndexList();
  vpBanner.addOnPageChangeListener(new OnPageChangeListener());
  adapter = new ViewPagerAdapter();
  vpBanner.setAdapter(adapter);
  //定时器开始工作
  startPlay();
 }

 /**
  * 初始化圆点指示器,根据indexPosition来加载不同的布局
  */
 private void initIndexList() {
  int count = bannerBeanList.size();
  vList = new ArrayList<>(count);
  LinearLayout llIndex;
  if (indexPosition == INDEX_POSITION_RIGHT) {
   ViewStub vsIndexRight = (ViewStub) findViewById(R.id.vs_index_right);
   vsIndexRight.inflate();
   llIndex = (LinearLayout) findViewById(R.id.ll_index_right);
   tvText = (TextView) findViewById(R.id.tv_text);
  } else {
   ViewStub vsIndexBottom = (ViewStub) findViewById(R.id.vs_index_bottom);
   vsIndexBottom.inflate();
   llIndex = (LinearLayout) findViewById(R.id.ll_index_bottom);
   tvText = (TextView) findViewById(R.id.tv_text);
  }
  //默认第一张图片的文字描述
  tvText.setText(bannerBeanList.get(0).getText());
  //使用GradientDrawable构造圆形控件
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.OVAL);
  gradientDrawable.setColor(mContext.getResources().getColor(R.color.text));
  gradientDrawableSelected = new GradientDrawable();
  gradientDrawableSelected.setShape(GradientDrawable.OVAL);
  if (indexColorResId != 0) {
   gradientDrawableSelected.setColor(indexColorResId);
  } else {
   gradientDrawableSelected.setColor(mContext.getResources().getColor(R.color.mainColor));
  }

  for (int i = 0; i (count);
  for (int i = 0; i 

这篇文章就介绍到这里了,点击这里查看源码

下面是测试用的图片:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 解决微信电脑版无法刷朋友圈问题:使用安卓远程投屏方案
    在工作期间想要浏览微信和朋友圈却不太方便?虽然微信电脑版目前不支持直接刷朋友圈,但通过远程投屏技术,可以轻松实现在电脑上操作安卓设备的功能。 ... [详细]
  • 本文详细介绍了 Java 中 org.apache.xmlbeans.SchemaType 类的 getBaseEnumType() 方法,提供了多个代码示例,并解释了其在不同场景下的使用方法。 ... [详细]
  • 本文深入探讨了 com.example.android.sunshine.data.TestUtilities 中 validateThenCloseCursor() 方法的使用方法及其代码示例,旨在帮助开发者更好地理解和应用该方法。 ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 本文介绍如何使用布局文件在Android应用中排列多行TextView和Button,使其占据屏幕的特定比例,并提供示例代码以帮助理解和实现。 ... [详细]
  • 本文介绍了Android开发中Intent的基本概念及其在不同Activity之间的数据传递方式,详细展示了如何通过Intent实现Activity间的跳转和数据传输。 ... [详细]
  • 优化 Android 按钮状态下的背景和文本颜色变化
    本文介绍如何通过 Android 的 Selector 实现按钮在不同状态下(如按压)的背景和文本颜色动态变化。我们将详细讲解实现步骤,并提供完整的代码示例。 ... [详细]
  • 资源推荐 | TensorFlow官方中文教程助力英语非母语者学习
    来源:机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南,帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
author-avatar
停止离开静悄悄
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有