android 实现自动滚动的 Banner 横幅

最新推荐文章于 2021-05-26 01:10:19 发布
最新推荐文章于 2021-05-26 01:10:19 发布
阅读量714 收藏
点赞数
分类专栏： Android

很多音乐播放器如qq音乐，kugou音乐等都有一个专辑推荐的那个横幅，它扩展了软件的空间，也为用户带来了更好的交互感受。

在此，我也模仿着实现了此效果，不足之处请大家见谅，欢迎提出问题，和大家一起学习。

我给他取名叫【BannerLayout】，主要是觉得它也如其他layout特性差不多吧。

复制代码 
public class BannerLayout extends ViewGroup {

public BannerLayout(Context context) {
        super(context);

        // TODO Auto-generated constructor stub
    }

    public BannerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    public BannerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }
}
复制代码 
BannerLayout 继承与 ViewGroup. 
这个BannerLayout可以自动滚动，所以我们需要一个滚动器Scroller .
this.scroller = new Scroller(context, new DecelerateInterpolator(2));

我给scroller设置了一个插值器DecelerateInterpolator，就可以再滚动的时候实现滚动速度是中间快，开始和结束的时候慢的效果，个人觉得这个效果显得比较优雅。

要实现自动滚动，因此，我们可以使用handler还帮我们起到计时的作用。此外也可以使用timer等其他方式。

复制代码 
private Handler handler=new Handler()
    {
        @Override
        public void handleMessage(Message msg) {
　　　　　　 //autoScroll是一标志boolean亮,用来标志是否需要滚动，因此就能手动控制其滚动了，

            if(autoScroll && currentWhat==msg.what)
            {
                currentScreenIndex=(currentScreenIndex+1)%getChildCount();
                scrollToScreen(currentScreenIndex);
                
                Log.i("TAG","handleMessage scrollToScreen:"+currentScreenIndex);
                
                if(autoScroll)//给自身发送延时消息，
                    handler.sendEmptyMessageDelayed(currentWhat, scrollTime);
            }
        }
    };
复制代码

由于BannerLayout里面的子元素如图片都是水平布局的，所以我们需要手动控制它们在此布局的位置了，

重写onMeasure函数：

复制代码 
@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int maxHeight=-1;
        
        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
            
            maxHeight=Math.max(maxHeight, getChildAt(i).getMeasuredHeight());
            
        }
//
        maxHeight=Math.min(maxHeight, MeasureSpec.getSize(heightMeasureSpec));
        
        Log.e("TAG","onMeasure Height:"+maxHeight);
        
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),maxHeight);
    }
复制代码
复制代码 
@Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {

        final int count = getChildCount();

        int cLeft = 0;
        
        
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == View.GONE)
                continue;
            
//            child.setVisibility(View.VISIBLE);
            final int childWidth = child.getMeasuredWidth();
            child.layout(cLeft, 0, cLeft +childWidth, child.getMeasuredHeight());

            cLeft += childWidth;
        }
    }
复制代码

此外，我们需要处理用户触摸事件，实现用户按下的时候停止滚动，用户拖动的时候能够随之移动，

复制代码 
@Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (getChildCount() == 0)
            return false;
        final int action = ev.getAction();
        final float x = ev.getX();
        switch (action) {
        case MotionEvent.ACTION_DOWN:

            autoScroll=false;
            
            currentWhat++;
            
            mLastMotionX = x;
            if (!scroller.isFinished()) {
                scroller.abortAnimation();
            }
            
//            Log.i("TAG","ACTION_DOWN");
            
            return true;

        case MotionEvent.ACTION_MOVE:
            final int deltaX = (int) (mLastMotionX - x);
//            boolean xMoved = Math.abs(deltaX) > mTouchSlop;
            mLastMotionX = x;
            
            if((0==currentScreenIndex && deltaX<0) || (getChildCount()-1==currentScreenIndex && deltaX>0))
                scrollBy(deltaX/4, 0);//此处实现了越界时候的阻尼效果
            else
//            Log.i("TAG","ACTION_MOVE");
//            if (xMoved)
                scrollBy(deltaX, 0);
            
            
            final int screenWidth = getWidth();
            currentScreenIndex=(getScrollX() + (screenWidth / 2))/ screenWidth;
            
            return true;
        case MotionEvent.ACTION_UP:
            snapToDestination();
            
            if(!autoScroll)
            {
                autoScroll=true;
                handler.sendEmptyMessageDelayed(currentWhat, scrollTime);
            }
            break;
        case MotionEvent.ACTION_CANCEL:
            snapToDestination();
            if(!autoScroll)
            {
                autoScroll=true;
                handler.sendEmptyMessageDelayed(currentWhat, scrollTime);
            }
            
        }
        return false;
    }
复制代码

接下来，我们需要实现自定滚动到某一屏的效果：

复制代码 
private void scrollToScreen(int whichScreen)
    {
//        if (!scroller.isFinished())
//            return;
//        Log.e("TAG","scrollToScreen:"+whichScreen);
        int delta = 0;
        
        delta = whichScreen * getWidth() - getScrollX();
        
//        scroller.startScroll(getScrollX(), 0, delta, 0, Math.abs(delta) * 2);
        scroller.startScroll(getScrollX(), 0, delta, 0, 1500);
        invalidate();
        
        currentScreenIndex=whichScreen;
    }
    private void snapToDestination()
    {
        final int x=getScrollX();
        final int screenWidth = getWidth();
        
        scrollToScreen((x + (screenWidth / 2))/ screenWidth);
    }
复制代码

差不多就这些了，其实挺简单的，哈哈

下面是全部代码：

复制代码 
public class BannerLayout extends ViewGroup {

    private Scroller scroller;
    private float mLastMotionX;
//    private int mTouchSlop;
    private int currentScreenIndex=0;
    
    private boolean autoScroll=true;
    
    private int scrollTime=3*1000;
    
    private int currentWhat=0;
    
    private Handler handler=new Handler()
    {
        @Override
        public void handleMessage(Message msg) {
            if(autoScroll && currentWhat==msg.what)
            {
                currentScreenIndex=(currentScreenIndex+1)%getChildCount();
                scrollToScreen(currentScreenIndex);
                
                Log.i("TAG","handleMessage scrollToScreen:"+currentScreenIndex);
                
                if(autoScroll)
                    handler.sendEmptyMessageDelayed(currentWhat, scrollTime);
            }
        }
    };
    
    public BannerLayout(Context context) {
        super(context);

        initView(context);
        // TODO Auto-generated constructor stub
    }

    public BannerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        initView(context);
    }

    public BannerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
        // TODO Auto-generated constructor stub
    }

    private void initView(final Context context) {
        this.scroller = new Scroller(context, new DecelerateInterpolator(2));//OvershootInterpolator(1.1f)

        
        handler.sendEmptyMessageDelayed(currentWhat, scrollTime);
        
//        final ViewConfiguration configuration = ViewConfiguration
//                .get(getContext());
//        mTouchSlop = configuration.getScaledTouchSlop();
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int maxHeight=-1;
        
        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
            
            maxHeight=Math.max(maxHeight, getChildAt(i).getMeasuredHeight());
            
        }
        maxHeight=Math.min(maxHeight, MeasureSpec.getSize(heightMeasureSpec));
        
        Log.e("TAG","onMeasure Height:"+maxHeight);
        
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),maxHeight);
    }
    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {

        final int count = getChildCount();

        int cLeft = 0;
        
        
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == View.GONE)
                continue;
            
//            child.setVisibility(View.VISIBLE);
            final int childWidth = child.getMeasuredWidth();
            child.layout(cLeft, 0, cLeft +childWidth, child.getMeasuredHeight());

            cLeft += childWidth;
        }
    }

    @Override
    public void computeScroll() {
        if (scroller.computeScrollOffset()) {
            scrollTo(scroller.getCurrX(), 0);
            postInvalidate();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (getChildCount() == 0)
            return false;
        final int action = ev.getAction();
        final float x = ev.getX();
        switch (action) {
        case MotionEvent.ACTION_DOWN:

            autoScroll=false;
            
            currentWhat++;
            
            mLastMotionX = x;
            if (!scroller.isFinished()) {
                scroller.abortAnimation();
            }
            
//            Log.i("TAG","ACTION_DOWN");
            
            return true;

        case MotionEvent.ACTION_MOVE:
            final int deltaX = (int) (mLastMotionX - x);
//            boolean xMoved = Math.abs(deltaX) > mTouchSlop;
            mLastMotionX = x;
            
            if((0==currentScreenIndex && deltaX<0) || (getChildCount()-1==currentScreenIndex && deltaX>0))
                scrollBy(deltaX/4, 0);
            else
//            Log.i("TAG","ACTION_MOVE");
//            if (xMoved)
                scrollBy(deltaX, 0);
            
            
            final int screenWidth = getWidth();
            currentScreenIndex=(getScrollX() + (screenWidth / 2))/ screenWidth;
            
            return true;
        case MotionEvent.ACTION_UP:
            snapToDestination();
            
            if(!autoScroll)
            {
                autoScroll=true;
                handler.sendEmptyMessageDelayed(currentWhat, scrollTime);
            }
            break;
        case MotionEvent.ACTION_CANCEL:
            snapToDestination();
            if(!autoScroll)
            {
                autoScroll=true;
                handler.sendEmptyMessageDelayed(currentWhat, scrollTime);
            }
            
        }
        return false;
    }
    private void scrollToScreen(int whichScreen)
    {
//        if (!scroller.isFinished())
//            return;
//        Log.e("TAG","scrollToScreen:"+whichScreen);
        int delta = 0;
        
        delta = whichScreen * getWidth() - getScrollX();
        
//        scroller.startScroll(getScrollX(), 0, delta, 0, Math.abs(delta) * 2);
        scroller.startScroll(getScrollX(), 0, delta, 0, 1500);
        invalidate();
        
        currentScreenIndex=whichScreen;
    }
    private void snapToDestination()
    {
        final int x=getScrollX();
        final int screenWidth = getWidth();
        
        scrollToScreen((x + (screenWidth / 2))/ screenWidth);
    }

    @Override
    protected void finalize() throws Throwable {

        Log.e("TAG","finalize===");

        super.finalize();
    }
    
}
复制代码

 ok，附图一张

 

 

附上源码demo:http://files.cnblogs.com/zhouchanwen/bannerDemo.7z

原创文章欢迎转载，转载请注明出处：http://www.cnblogs.com/zhouchanwen
Huilee_CAN
关注
专栏目录
Android Banner自动轮播
z815101的博客
06-13 579
上图 核心类: public class BannerLayout extends RelativeLayout { private ViewPager pager; //指示器容器 private LinearLayout indicatorContainer; private Drawable unSelectedDrawable; pr
android banner停止轮播,Android使用ViewPager实现无限循环banner图，实现手指滑动时轮播停止功能...
weixin_35048609的博客
05-31 1112
先看效果图 banner图示例 可实现自动轮播以及手动左右无限滑动实现的原理是在自己的准备的banner图的首尾再加上两张图，中间的adcde是我们需要轮播的图片，首尾则为特意加上去的，目的是使滑动更加的平滑，并不参与实际的操作。 当页面从编号1滑动到0时，将页面设置为5；当页面从编号5滑动到6时，将页面设置为1；.为了防止页面停顿，突然跳到下一页的情况，将设置页面的代码放到finishUpdat...
Android循环滚动广告banner
05-08
Android循环轮播广告banner, 基于android studio编译运行。 带有多种特效，如横向切换，翻页切换，淡入淡出切换等等
Android图片滑动Banner广告条（自动滑动）
02-24
Android客户端图片左右滑动（自动滑动）
Android 循环轮播 自动滚动 多广告图片
09-23
Android 无限轮播循环和手动滑动循环的广告图片demo,ViewPager实现
Android开发笔记（二十一）横幅轮播页Banner
aqi00的博客
12-17 5925
如今我们打开电商类的APP，首页上方就有很炫的Banner（横幅轮播页），里面放了最新的商品和活动的介绍图片，还能自动轮播，也可左右翻动，着实是吸引眼球。 下面是一个Banner的截图，我们看看这个Banner是如何实现的。 首先看到Banner的界面由两部分组成，一部分是轮播的图片，另一部分是图片下方的几个图标用来表示当前播放的是第几张图片。所以一个Banner需要先初始化两个队列，
banner_recyclerview_android:动画recyclerview横幅Google Play商店
05-16
本项目"banner_recyclerview_android"专注于创建一个类似于2018年Google Play商店列表中的横幅效果，利用RecyclerView这一强大的视图复用组件，结合动画效果，使得用户在浏览应用列表时能有更加生动的视觉体验。...
一款reactnative横幅自动播放循环组件适用于iOS和Android
08-10
React Native 横幅自动播放循环组件是一款专为iOS和Android平台设计的UI组件，它允许开发者在他们的应用中轻松实现广告轮播、通知展示或其他类似功能。该组件结合了React Native的跨平台特性，利用JavaScript开发，...
Android 广告自动滚屏播放应用Demo.zip
07-03
4. **滚屏效果**：为了实现自动滚屏，我们需要使用`Handler`和`Runnable`。创建一个Runnable对象，在run方法中更新广告，并在处理完后重新提交自己到消息队列。例如： ```java private Handler handler = new ...
android实现广告轮播效果，支持自动播放，点击手势滑动
03-26
android实现广告轮播效果，支持自动播放，点击手势滑动
Android横幅轮播页的代码例子
12-17
Android横幅轮播页的代码例子，用于演示电商APP首页商品推介与活动宣传的banner，其中采用ViewPager和ViewFlipper两种方式分别实现了轮播效果
Android 加载广告图片以及广告轮播
08-08
NULL 博文链接：https://technicalsearch.iteye.com/blog/2148976
AutoScrollBanner
10-16
常见的广告Banner。该jar实现了自动左右滚动(封装了多种动画 也可自定义动画)，使用非常简单，和listView使用方法非常相似。压缩包了包含 autoScrollBanner.jar和javaDoc
swift-AutoscrollBanner.无限循环图片文字轮播器。
08-15
Autoscroll Banner. 无限循环图片、文字轮播器。
Android实现Banner自动滑动，支持手动滑动以及滑动bug解决
惜雨犹竹的博客
03-19 3995
不多哔哔，直接上代码，相信我你就复制下来直接用就好！先上xml布局：&lt;RelativeLayout    android :id="@+id/container"    android :layout_width="wrap_content"    android :layout_height="wrap_content" &gt;    &lt;android.support.v4.vie...
Android首页轮播图和滚动广告条
qq_37100606的博客
04-09 847
=====首页轮播图=====第一步：首先我用到的是第三方控件，导入到gradle即可compile 'com.youth.banner:banner:1.4.9'第二步：绑定控件什么的我就不说了，直接设置Banner轮播图的属性了--xml写入的&lt;com.youth.banner.Banner android:id="@+id/banner"...
Android多效果轮播器/Banner实现，支持无限轮播、自动切换、指示器动画
Ever69的博客
06-25 4912
2019.9.12 已封装成控件扔到GitHub上https://github.com/kjt666/Banner 开篇 接上篇文章动手实现你的ViewPager切换动画 本次内容是利用ViewPager实现画廊效果图片轮播器，画廊效果已经在ViewPager上实现了，那么一个标准的轮播器无外乎下面几点要求： 轮播的无限循环 轮播器中最重要的一点就是能够实现无限循环，让图片首尾相连、流...
android studio 横向拖动条,Android ScrollView实现横向和竖向拖动回弹效果
weixin_33656238的博客
05-26 803
本文实例为大家分享了Android ScrollView实现拖动回弹效果的具体代码，供大家参考，具体内容如下原理在android2.3版本中，View类中新增了一个方法：overScrollBy。通过覆盖该方法，就可以达到阻尼回弹的效果。示例1、竖向滚动public class ReboundScrollView extends ScrollView{private static final in...
Flash通栏滚动banner代码实现详解
资源摘要信息: "包含flash的通栏滚动banner.zip_包含flash的通栏滚动banner" ### 标题分析: - "包含flash的通栏滚动banner" 表明这是一个网页设计资源，通栏滚动banner是一种常见的网页广告或展示区域，宽度通常和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值