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

实现轮转广告带底部指示的自定义ViewPager控件

在项目中经常需要使用轮转广告的效果,在android-v4版本中提供的ViewPager是一个很好的工具,而一般我们使用Viewpager的时候,都会选择在底部有一排指示物指示当前显示的是哪一个page,下面我们就做这个功能的实现

有许多博客和开源项目都致力于这项工作,但是他们的工作大都是为了制作类似于启动页的效果,ViewPager全屏显示,或者自己可操作的属性难以满足要求,因此我想把ViewPager和底部的指示物封装在一个自定义的View中,作为一个新的控件在xml中使用,所以自己来实现了一个。
而且,在用自定义视图封装ViewPager时,出现了一个问题,就是ViewPager的所有页不能全部显示的问题,不知道是因为这个问题太简单还是什么其它原因,在网上并没有搜到这个问题的解决方法(事实上连提问的人都没有……),困扰了我半个多星期,终于解决,这一点在正文里会介绍,先来贴一下效果图:

下面来介绍我的实现过程:

首先在res/values/目录下创建attrs.xml文件,用来定义新View自定义的属性:

代码如下:



   
       
       
       
       
       
       
       
       
       
   


其中:

dotsViewHeight定义底部指示物所在视图(我定义为一个LinearLayout)的高度,也就是示例图中圆圈所在灰色透明部分的高度,默认为40像素;

dotsSpacing定义底部指示物之间的间距,默认为0;

dotsFocusImage定义代表当前页的指示物的样子;

dotsBlurImage定义代表非当前页的指示物的样子;

android:scaleType定义ViewPager中ImageView的scale类型,如果ViewPager中的View不是ImageView,则此属性没有效果,默认为ScaleType.FIT_XY;

android:gravity定义底部指示物在父View(即示例灰色透明部分)的gravity属性;

dotsBackground定义底部指示物的背景颜色或背景图;

dotsBgAlpha定义底部指示物的背景颜色或背景图的透明度,取值为0-1,0代表透明;

changeInteval定义ViewPager自动切换的时间间隔,单位为ms,默认为1000ms(这个地方实际的间隔比设置的要大,不知道是什么原因,望高手解答);

下一步,定义PageAdapter,为ViewPager提供内容:

代码如下:

public class ViewPagerAdapter extends PagerAdapter {

    private List views = null;
    private ScaleType scaleType;

    public ViewPagerAdapter(List views) {
        this(views, ScaleType.CENTER);
    }

    public ViewPagerAdapter(List views, ScaleType scaleType) {
        super();
        this.views = views;
        this.scaleType = scaleType;
    }

定义一个views来存储要显示的View,然后定义一个ScaleType来规定如果ViewPager是用来显示ImageView的,ImageView应该怎样呈现在ViewPager当中,如果调用的构造函数不传ScaleType信息,则默认使用ScaleType.CENTER。
根据官方API描述,需要重写PageAdapter的getCount,isViewFromObject,instantiateItem和destroyItem这四个方法,在instantiateItem中设置ScaleType,其它几个方法,都是用官方描述的写法,没有做什么新的改动:

代码如下:

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return views.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
    // TODO Auto-generated method stub
    return arg0 == arg1;
}

@Override
public Object instantiateItem(View container, int position) {
    // TODO Auto-generated method stub
    View view = views.get(position);
    ViewPager viewPager = (ViewPager) container;
    if (view instanceof ImageView){
        ((ImageView) view).setScaleType(scaleType);
    }
    viewPager.addView(view, 0);
    return view;
}

@Override
public void destroyItem(View container, int position, Object object) {
    // TODO Auto-generated method stub
    ((ViewPager) container).removeView((View) object);
}

下面就是重头戏了,核心类,被封装的底部带指示物的ViewPager,基本思路是自定义一个类继承LinearLayout,在里面加入两个子视图ViewPager和LinearLayout(放置指示物),并且,因为要定期轮转,还实现了Runnable接口,定义了以下的变量:

代码如下:

public class MyViewPager extends LinearLayout implements Runnable {

    private ViewPager viewPager;
    private LinearLayout viewDots;
    private List dots;
    private List views;

    private int position = 0;
    private boolean isCOntinue= true;

    private float dotsViewHeight;
    private float dotsSpacing;
    private Drawable dotsFocusImage;
    private Drawable dotsBlurImage;
    private ScaleType scaleType;
    private int gravity;
    private Drawable dotsBackground;
    private float dotsBgAlpha;
    private int changeInterval;

viewPager是要显示的ViewPager对象,viewDots是放置指示物的子视图,dots是viewDots上的指示物项,views是ViewPager项,position指示当前正在显示第几张图,isContinue表示可不可以自动轮转(当手指触摸时不轮转),在下面的就是雨attrs.xml中定义的属性相对应的值。作为一个能够在xml布局文件中直接使用的View,必须重写拥有Context和AttributeSet参数的构造函数:

代码如下:

public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
    // TODO Auto-generated constructor stub
    TypedArray a = context.obtainStyledAttributes(attrs,
            R.styleable.MyViewPager, 0, 0);

try {
        dotsViewHeight = a.getDimension(
                    R.styleable.MyViewPager_dotsViewHeight, 40);
            //这里依次获取所有的属性值,此处省略,可参看最后附上的全部代码
        } finally {
            a.recycle();
        }

    initView();
}

最后调用的函数initView,用来初始化ViewPager和LinearLayout这两个子视图,同时,如果xml中给指示物设置了背景,在这里进行设置:

代码如下:

@SuppressLint("NewApi")
private void initView() {
    // TODO Auto-generated method stub
    viewPager = new ViewPager(getContext());
    viewDots = new LinearLayout(getContext());

    LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
            LayoutParams.MATCH_PARENT);
    addView(viewPager, lp);
    if (dotsBackground != null) {
        dotsBackground.setAlpha((int) (dotsBgAlpha * 255));
        viewDots.setBackground(dotsBackground);
    }
    viewDots.setGravity(gravity);
    addView(viewDots, lp);
}


使用这个类时,关键就是创建一个List,并作为参数传进来供ViewPager(PagerAdapter)使用,对外的接口就是这个setViewPagerViews:

代码如下:

public void setViewPagerViews(List views) {
    this.views = views;
    addDots(views.size());

    viewPager.setAdapter(new ViewPagerAdapter(views, scaleType));

    viewPager.setOnPageChangeListener(new OnPageChangeListener() {
        @Override
        public void onPageSelected(int index) {
            // TODO Auto-generated method stub
            position = index;
            switchToDot(index);
        }
        //override的两个空方法,此处省略
    });

    viewPager.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View view, MotionEvent motionevent) {
            // TODO Auto-generated method stub
            switch (motionevent.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                isCOntinue= false;
                break;
            case MotionEvent.ACTION_UP:
                isCOntinue= true;
                break;
            default:
                isCOntinue= true;
                break;
            }
            return false;
        }
    });
    new Thread(this).start();
}

addDots就是在底部添加多少个小点,默认第一个处于被选中状态,关键是OnPageChangeListener的onPageSelected方法,这个方法在viewPager进行切换时调用,做的工作就是把底部的指示物切换到对应的标识上,在这个方法的最后,启动了轮转的线程。

代码如下:

@Override
public void run() {
    // TODO Auto-generated method stub
    while (true) {
        if (isContinue) {
            pageHandler.sendEmptyMessage(position);
            position = (position + 1) % views.size();
            try {
                Thread.sleep(changeInterval);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }
}

Handler pageHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        // TODO Auto-generated method stub
        viewPager.setCurrentItem(msg.what);
        super.handleMessage(msg);
    }
};

在这个线程中,每隔固定秒数,就向Handler队列中发送一个消息,内容就是要显示的view项的index,然后再handler中调用viewPager的setCurrentItem方法进行跳转。至此,最核心的类就完成了,但还剩很关键的一个方法,作为一个自定义的View,要重写父类的onLayout方法来对子元素进行布局,就是这一个方法中不当的代码,导致每次只能显示前两张图,因为ViewPager在显示时,会默认初始化当前页和前后页,对于第一张来说,没有前一页,所以初始化了两张,在ViewPager滑动时,每次都会调用onLayout方法,而且,changed参数为false,我已开始只判断changed为true时才进行布局,就造成了上述问题,完整的onLayout代码如下:

代码如下:

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    // TODO Auto-generated method stub
    View child = this.getChildAt(0);
    child.layout(0, 0, getWidth(), getHeight());

    if (changed) {
        child = this.getChildAt(1);
        child.measure(r - l, (int) dotsViewHeight);
        child.layout(0, getHeight() - (int) dotsViewHeight, getWidth(),
                getHeight());
    }
}

最后,就是如何使用这个类了,首先,在activity的布局文件中声明这个组件:

代码如下:

    xmlns:daemon="http://schemas.android.com/apk/res/org.daemon.viewpager"
    android:layout_
    android:layout_
    android:background="#666666" >

            android:id="@+id/my_view_pager"
        android:layout_
        android:layout_
        daemon:dotsView
        daemon:dotsFocusImage="@drawable/dot_focused"
        daemon:dotsBlurImage="@drawable/dot_normal"
        daemon:dotsSpacing="5dp"
        daemon:dotsBackground="#999999"
        daemon:dotsBgAlpha="0.5"
        daemon:changeInterval="3000"
        android:scaleType="fitXY"
        android:gravity="center" />


然后,在MainActivity中,创建List数组并设置数据:

代码如下:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initViewPager();
}

private void initViewPager() {
    views = new ArrayList();

    ImageView image = new ImageView(this);
    image.setImageResource(R.drawable.demo_scroll_image);
    views.add(image);
    image = new ImageView(this);
    image.setImageResource(R.drawable.demo_scroll_image2);
    views.add(image);
    image = new ImageView(this);
    image.setImageResource(R.drawable.demo_coupon_image);
    views.add(image);
    image = new ImageView(this);
    image.setImageResource(R.drawable.demo_scroll_image2);
    views.add(image);

    MyViewPager pager = (MyViewPager) findViewById(R.id.my_view_pager);
    pager.setViewPagerViews(views);
}

至此,本示例就全部讲解完了,两个问题,一个就是为什么使用Thread的方法来控制时间间隔,实际值会比设置的值长,是因为Message在排队吗,第二个问题,就是为什么ViewPager滑动时不重新对ViewPager布局,就会不显示任何图,这两个问题还有待大家解答。


推荐阅读
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文将详细介绍如何使用剪映应用中的镜像功能,帮助用户轻松实现视频的镜像效果。通过简单的步骤,您可以快速掌握这一实用技巧。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 本文总结了在使用Ionic 5进行Android平台APK打包时遇到的问题,特别是针对QRScanner插件的改造。通过详细分析和提供具体的解决方法,帮助开发者顺利打包并优化应用性能。 ... [详细]
  • 理解存储器的层次结构有助于程序员优化程序性能,通过合理安排数据在不同层级的存储位置,提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器(SRAM)和动态随机访问存储器(DRAM)的工作原理及其应用场景,并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]
  • 360SRC安全应急响应:从漏洞提交到修复的全过程
    本文详细介绍了360SRC平台处理一起关键安全事件的过程,涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例,展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]
  • 几何画板展示电场线与等势面的交互关系
    几何画板是一款功能强大的物理教学软件,具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程,还能通过定量分析揭示物理现象背后的规律,尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]
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社区 版权所有