背景

最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码。于是自己封装了一下。本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了。

效果图

实现分析

轮播图的功能就是实现左右滑动的广告、图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图。指示器我们可以用一个线性布局来根据要展示的轮播图设置显示的View,我们要做这样的一个控件没有什么特殊的效果,其实就是两个控件的组合,只是我们要在内部处理好它们之间的交互关系(其实就是ViewPager滚动的时候,下面指示器的展示),所以我们就用自定义控件当中的组合方式来实现。 
下面开始

1、定义一个控件继承FrameLayout,写一个xml文件

public class CarouselView extends FrameLayout implements ViewPager.OnPageChangeListener {

    private Context context;

    private int totalCount =100;//总数,这是为实现无限滑动设置的

    private int showCount;//要显示的轮播图数量

    private int currentPosition =0;//当前ViewPager的位置

    private ViewPager viewPager;

    private LinearLayout carouselLayout;//展示指示器的布局

    private Adapter adapter;
private int pageItemWidth;//每个指示器的宽度
private boolean isUserTouched = false; public CarouselView(Context context) {
super(context);
this.context = context;
} public CarouselView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
} public CarouselView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
}
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/gallery"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:unselectedAlpha="1">
</android.support.v4.view.ViewPager>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center|bottom"
android:id="@+id/CarouselLayoutPage"
android:padding="10dip">
</LinearLayout>
</FrameLayout>

上面的代码把两个要用到的控件ViewPager和carouselLayout都包含在定义的CarouselView里面了,下面就是要获取

2、onFinishInflate()中获取我们需要的控件

@Override
protected void onFinishInflate() {
super.onFinishInflate();
View view = LayoutInflater.from(context).inflate(R.layout.carousel_layout,null);
this.viewPager = (ViewPager) view.findViewById(R.id.gallery);
this.carouselLayout = (LinearLayout)view.findViewById(R.id.CarouselLayoutPage);
pageItemWidth = ConvertUtils.dip2px(context,5);
this.viewPager.addOnPageChangeListener(this);
addView(view);
}

onFinishInflate()方法是自定义控件中常用的一个方法,它表示从XML加载组件完成了,在该方法中我们通过LayoutInflater.from(context).inflate 获取到个ViewPager对象和carouselLayout对象,并对pageItemWidth进行了赋值。 
同时为viewPager设置addOnPageChangeListener。这里别忘记调用addView();否则控件就展示不了啦!

3、通过设置set方法来获取数据,同时初始化界面效果

到这一步我们已经获取到了展示轮播图的ViewPager对象,那接下来要让它展示你肯定想到了写个类继承PagerAdapter,然后重写getCount,isViewFromObject,isViewFromObject,destroyItem等方法来让ViewPager展示轮播图。但是我们又不能写得太固定,因为可能每个人想要展示的数据不一样,所以我们定义一个接口来给外部使用的人写自己的逻辑。上代码:

//定义一个接口让外部设置展示的View
public interface Adapter{
boolean isEmpty();
View getView(int position);
int getCount();
}
//ViewPager的适配器
class ViewPagerAdapter extends PagerAdapter { @Override
public int getCount() {
return totalCount;
} @Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
} @Override
public Object isViewFromObject(ViewGroup container, int position) {
position %= showCount;
//调用接口的getView()获取使用者要展示的View;
View view = adapter.getView(position);
container.addView(view);
return view;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
} @Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
} @Override
public void finishUpdate(ViewGroup container) {
super.finishUpdate(container); int position = viewPager.getCurrentItem();
//实现Viewpager到第一页的实现能向左滑动
if (position==0){
position=showCount;
viewPager.setCurrentItem(position,false); }else if (position==totalCount-1){//ViewPager到最后一页的实现向又滑动
position = showCount - 1;
viewPager.setCurrentItem(position,false);
}
}
}
//为外部提供设置数据源的方法,同时为ViewPager做展示
public void setAdapter(Adapter adapter){
this.adapter = adapter;
if (adapter!=null){
init();
}
}

上面的代码就是定义了一个接口让外部来设置数据,提供setAdapter来为adapter赋值,同时初始化界面效果,init()方法中就是数据的初始化,代码如下:

private void init() {
viewPager.setAdapter(null);
carouselLayout.removeAllViews();//清空之前的数据
if (adapter.isEmpty()){
return;
}
int count = adapter.getCount();
showCount = adapter.getCount();
for (int i=0;i<count;i++){
View view = new View(context);
//用来做指示器的View,通过state来做展示效果
if (currentPosition==i){
view.setPressed(true);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pageItemWidth + ConvertUtils.dip2px(context,3),pageItemWidth + ConvertUtils.dip2px(context,3));
params.setMargins(pageItemWidth, 0, 0, 0);
view.setLayoutParams(params);
}else {
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pageItemWidth,pageItemWidth);
params.setMargins(pageItemWidth,0,0,0);
view.setLayoutParams(params);
}
view.setBackgroundResource(R.drawable.carousel_layout_page);
carouselLayout.addView(view);
}
viewPager.setAdapter(new ViewPagerAdapter());
viewPager.setCurrentItem(0); //让手指触碰到的时候自动轮播不起效
this.viewPager.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
isUserTouched = true;
break;
case MotionEvent.ACTION_UP:
isUserTouched = false;
break;
}
return false;
}
});
mTimer.schedule(mTimerTask, 3000, 3000);
}

主要的逻辑代码就是这样啦,一个轮播图的控件就做好了。下面来看一下使用:

4、使用

xml中写我们的轮播图控件:

 <com.yangqiangyu.test.carouselview.CarouselView
android:layout_width="match_parent"
android:layout_height="220dp"> </com.yangqiangyu.test.carouselview.CarouselView>

java代码中获取控件,同时设置接口

 CarouselView carouselView = (CarouselView) findViewById(R.id.CarouselView);
carouselView.setAdapter(new CarouselView.Adapter() {
@Override
public boolean isEmpty() {
return false;
} @Override
public View getView(int position) {
View view = mInflater.inflate(R.layout.item,null);
ImageView imageView = (ImageView) view.findViewById(R.id.image);
imageView.setImageResource(mImagesSrc[position]);
return view;
} @Override
public int getCount() {
return mImagesSrc.length;
}
});

返回是否为空,在getView(int position)中return我们想返回的View,就是这么简单了啦。

对你有帮助的话,记得给赞给评论哟!

源码下载请戳--》图片轮播

Android自定义控件之轮播图控件的更多相关文章

  1. Android自己定义控件之轮播图控件

    背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个 ...

  2. BannerDemo【图片轮播图控件】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里简单记录下一个开源库youth5201314/banner的运用.具体用法请阅读<youth5201314/banner& ...

  3. CycleRotationView:自定义控件之轮播图

    CycleRotationView:自定义控件,主要功能是实现类似与各种商城首页的广告轮播图.其实像这种比较常见的自定义控件早就满大街了,虽然说"不要重复发明轮子",但是不代表不用 ...

  4. Android之无限轮播图源代码

    Android轮播广告图是大家经常用到的一个控件今天便撸了一把代码 实现步骤 使用Viewpager进行实现图片滑动 设置ViewPager的数据,让其无限切换 Activity代码 public c ...

  5. android中广告轮播图总结

    功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...

  6. android 使用图片轮播图---banner 使用

    转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...

  7. Android自定义控件(一)——开关控件

    Google 在 API 14 开始才新增了Switch 控件. 因此,我们可以选择自己封装一个Switch . 效果如图: View主要代码: public class SwitchView ext ...

  8. Flutter学习五之网络请求和轮播图的实现

    上期讲到了,怎样实现一个下拉刷新和加载更多的列表,数据更新,需要使用到网络请求,在flutter中,怎样实现一个网络请求呢?官方使用的是dart io中的HttpClient发起的请求,但HttpCl ...

  9. React Native布局实践:开发京东client首页(三)——轮播图的实现

    上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...

随机推荐

  1. [CS231n-CNN] Backpropagation(反向传播算法)

    课程主页:http://cs231n.stanford.edu/ 上节讲到loss function: 引出了求导数使得loss function减小. -Back Propagation :梯度下降 ...

  2. Android应用安全之外部动态加载DEX文件风险

    1. 外部动态加载DEX文件风险描述 Android 系统提供了一种类加载器DexClassLoader,其可以在运行时动态加载并解释执行包含在JAR或APK文件内的DEX文件.外部动态加载DEX文件 ...

  3. LoRaWAN协议(二)--LoRaWAN MAC数据包格式

    名词解析 上行:终端的数据发送经过一个或多个网关中转到达网络服务器. 下行:由网络服务器发送给终端设备,每条消息对应的终端设备是唯一确定的,而且只通过一个网关中转. LoRaWAN Classes L ...

  4. SharePoint 2013 搜索爬网功能

    最近在政府部门介绍SharePoint 2013 新功能,我也准备了很多,比如SharePoint 2013的Search.以后有机会谈谈Office Web App,Workflow等. Share ...

  5. 为什么NOLOCK查询提示是个不明智的想法

    一些人总当NOLOCK查询提示是SQL Server里的加速器,因为它避免了大量的死锁情景.在这篇文章里,我想向你展示下为什么NOLOCK查询提示是个不好的想法. 脏读(Dirty Reads) NO ...

  6. ValidationSugar表单验证框架-支持ASP.NET MVC ASP.NET WebFroM

    ValidationSugar表单验证框架的优点: 1.支持javascript端和后端的双重验证 (前端目前依赖于jquery.validate.js,也可以自已扩展) 2.代码简洁 3.调用方便 ...

  7. css知识

    margin和padding是什么意思 margin外边距,padding内边距,外边距表示一个元素的边到相邻元素的距离,内边距表示元素之间的内容和元素边框的距离. font:12px/1.5 表示什 ...

  8. js页面跳转参考代码大全

    整理一下JS页面跳转参考代码 第一种:     <script language=/"javascript/" type=/"text/javascript/&qu ...

  9. MongoDB安装说明以及MongoVUE使用

    简单介绍mongoDb MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产 ...

  10. ubuntu E: Could not get lock /var/lib/dpkg/lock - open

    sudo rm /var/lib/apt/lists/lock apt-get update