Android_RecyclerView实现上下滚动广告条实例(带图片)

前言

公司新项目首页有个类似京东/淘宝滚动广告条,查了一下大概都是两种实现方式,一是textview,如果只有文字的话是可行的,但我们这个上面还有个小图片,所以pass;二是两个viewGroup,使用动画交替滚动,可以实现,就是显得很麻烦,于是偷懒的我就想着用recyclerView来解决这个小问题!

思路

这个滚动广告条高度通常是固定的,用一个固定高度的viewGroup来包裹一个recyclerView,recylerView的item布局设置一个minHeight为viewGroup的高度,这样刚好能看到一个完整的item,然后使用recyclerView自带的方法 smoothScrollBy()来滚动recyclerView;他需要两个参数,x轴的滚动距离和y轴的滚动距离,我们是上下滚动,所以x轴传入1就好啦!y轴距离传入你的item高度,然后使用handler写一个循环任务就可以实现一直滚动啦!

/**
   * Animate a scroll by the given amount of pixels along either axis.
   *
   * @param dx Pixels to scroll horizontally
   * @param dy Pixels to scroll vertically
   */
  public void smoothScrollBy(int dx, int dy) {
    smoothScrollBy(dx, dy, null);
  }

遇到的问题

写好之后发现这个控件是不能够触摸滑动的,但是又需要点击事件。想了想如果在onTouchEvent之类的方法中处理的话很麻烦,还不能保证完全禁止一点点都不能滑,所以就又想了个偷懒的办法。给recyclerView上加一层透明的蒙板,彻底禁用掉recyclerView的touch事件,给蒙板设置点击事件……下面是代码

布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="60dp"
       android:background="@color/colorWhite"
       android:orientation="horizontal">

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginLeft="18dp"
    android:gravity="center"
    android:text="养车\n宝典"
    android:textColor="@color/colorTitle"
    android:textSize="12sp"/>

  <View
    android:layout_width="0.5dp"
    android:layout_height="match_parent"
    android:layout_marginBottom="12dp"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="12dp"
    android:background="@color/colorTitle"/>

  <!--禁用了recyclerView的触摸事件,他的点击事件交由一个透明的蒙版来实现-->
  <RelativeLayout
    android:layout_marginLeft="6dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.xinshiwi.mycar.view.AutoScrollRecyclerView
      android:id="@+id/rv_home_maintain"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

    <View
      android:id="@+id/view_home_maintain"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@android:color/transparent"/>

  </RelativeLayout>

</LinearLayout>

Adapter:

public class MaintainInfoAdapter extends RecyclerView.Adapter<MaintainInfoAdapter.MyViewHolder> {

  List<String> list;
  public MaintainInfoAdapter(List<String> list) {
    this.list = list;
  }

  @Override
  public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_home_maintain, null);

    return new MyViewHolder(view);
  }

  @Override
  public void onBindViewHolder(MyViewHolder holder, int position) {
    holder.tv.setText(list.get(position % 4));
  }

  @Override
  public int getItemCount() {
    return Integer.MAX_VALUE;
  }

  public static class MyViewHolder extends RecyclerView.ViewHolder {

    public TextView tv;

    public MyViewHolder(View itemView) {
      super(itemView);
      tv = (TextView) itemView.findViewById(R.id.tv_maintain);
    }

  }
}

设置recyclerView:

/**
   * 滚动养车宝典
   */
  private void initMaintainData() {
    mList = new ArrayList<>();
    mList.add("如何做好队汽车的轮胎养护0");
    mList.add("如何做好队汽车的轮胎养护1");
    mList.add("如何做好队汽车的轮胎养护2");
    mList.add("如何做好队汽车的轮胎养护3");
    mRvHomeMaintain.setLayoutManager(new LinearLayoutManager(mActivity));
    mAdapter = new MaintainInfoAdapter(mList);
    mRvHomeMaintain.setAdapter(mAdapter);
    Message msg = new Message();
    msg.what = MAINTAIN_INFO;
    sHandler.sendMessageDelayed(msg, 3000);
    //通过一个透明的蒙板来设置点击事件
    mViewHomeMaintain.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        Toast.makeText(mActivity, "pos % 4:" + (pos % 4), Toast.LENGTH_SHORT).show();
      }
    });
  }
//当前显示的item
private int pos = 0;
private Handler sHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
      super.handleMessage(msg);
      switch (msg.what) {
        case MAINTAIN_INFO:
          mRvHomeMaintain.smoothScrollBy(0, SizeUtils.dp2px(60));
          pos++;
          Message message = new Message();
          message.what = MAINTAIN_INFO;
          sHandler.removeMessages(MAINTAIN_INFO);
          sHandler.sendMessageDelayed(message, 3000);
          break;
      }
    }
  };

只是一个小demo,很多细节没太考虑……有什么问题还望大佬们指出,不胜感激,也希望大家多多支持我们。

(0)

相关推荐

  • Android使用RecyclerView实现水平滚动控件

    前言 相信大家都知道Android滚动控件的实现方式有很多, 使用RecyclerView也比较简单. 做了一个简单的年龄滚动控件, 让我们来看看RecyclerView的使用方式, 主要有以下几点: (1) 对齐控件中心位置. (2) 计算滚动距离. (3) 高亮中心视图. (4) 实时显示中心数据. (5) 停止时自动对齐. (6) 滚动时, 设置按钮状态开关. 效果 1. 框架 主要关注RecyclerView部分逻辑. /** * 初始化年龄滑动条 */ private void ini

  • Android中RecyclerView实现分页滚动的方法详解

    一.需求分析 最近公司项目要实现一个需求要满足以下功能: 1)显示一个 list 列表, item 数量不固定. 2)实现翻页功能,一次翻一页. 3)实现翻至某一页功能. 下面介绍通过 RecyclerView 实现该需求的实现过程(效果图如下). 二.功能实现 2.1 OnTouchListener 记录当前开始滑动位置 要实现翻页滑动首先我们要确定是向前翻页还是向后翻页,这里通过记录开始翻页前当前的位置和滑动后的位置比较即可得知,下面选择手指触摸按下时滑动的位置为当前开始滑动位置: //当前

  • Android代码实现AdapterViews和RecyclerView无限滚动

    应用的一个共同的特点就是当用户欢动时自动加载更多的内容,这是通过用户滑动触发一定的阈值时发送数据请求实现的. 相同的是:信息实现滑动的效果需要定义在列表中最后一个可见项,和某些类型的阈值以便于开始在最后一项到达之前开始抓取数据,实现无限的滚动. 实现无限滚动的现象的重要之处就在于在用户滑动到最低端之前就行数据的获取,所以需要加上一个阈值来帮助实现获取数据的预期. 使用ListView和GridView实现 每个AdapterView 例如ListView 和GridView 当用户开始进行滚动操

  • 功能强大的Android滚动控件RecyclerView

    RecyclerView的使用比ListView的使用是比较复杂的,ListView的使用是五个步骤,而我们的RecyclerView的使用有7个步骤,分别为: 1.在当前项目的build.gradle中的dependencies闭包中加入compile 'com.android.support.recyclerview-v7:xx.x.x'(x是当前最新版本) 2.布局加入RecyclerView控件以及创建子项布局和适配器类. 3.创建适配器 4.定义数据源 5.通过findViewById

  • Android使用Recyclerview实现图片水平自动循环滚动效果

    简介: 本篇博客主要介绍的是如何使用RecyclerView实现图片水平方向自动循环(跑马灯效果) 效果图:  思路: 1.准备m张图片 1.使用Recyclerview实现,返回无数个(实际Interge.MAXVALUE)item,第n个item显示第n%m张图片 3.使用recyclerview.scrollBy  每个一段时间水平滚动一段距离 4.通过layoutManager.findFirstVisibleItemPosition()获取当前显示的第一个View是第几个item,上面

  • Android RecylerView入门教程

    今年Google I/0大会,Google开放了两个全新的视图:RecyclerView和CardView.这篇文章会提供关于RecylerView的简介. RecylerView作为support-library发布出来,这对开发者来说绝对是个好消息.因为可以在更低的Android版本上使用这个新视图.下面我们看如何获取RecylerView.首先打开Android SDK Manager,然后更新Extras->Android Support Library即可. 然后在本地../sdk/e

  • Android RecyclerView滚动定位

    概述 RecyclerView在安卓开发中非常实用,而且简单易用,但是在实际开发中一直有一个问题困扰着我,就是定位问题,实际的项目中总是会遇到这样的需求:检索RecyclerView的某一项(各个项的高度不确定),然后定位这一项,将它显示在顶部.用RecyclerView的默认移动的方法并不能实现这一点(个人感觉官方可能出于性能考虑才不实现这一点).这篇博客就讲解下我个人是如何实现这个需求的. Demo演示 敲代码前的思考 RecyclerView提供的用于控制移动的方法有2个 - scroll

  • Android_RecyclerView实现上下滚动广告条实例(带图片)

    前言 公司新项目首页有个类似京东/淘宝滚动广告条,查了一下大概都是两种实现方式,一是textview,如果只有文字的话是可行的,但我们这个上面还有个小图片,所以pass:二是两个viewGroup,使用动画交替滚动,可以实现,就是显得很麻烦,于是偷懒的我就想着用recyclerView来解决这个小问题! 思路 这个滚动广告条高度通常是固定的,用一个固定高度的viewGroup来包裹一个recyclerView,recylerView的item布局设置一个minHeight为viewGroup的高

  • Android控件ViewFlipper仿淘宝头条垂直滚动广告条

    ViewFlipper的使用,仿淘宝头条垂直滚动广告条,供大家参考,具体内容如下 学习,学习,学以致用 ViewFlipper是安卓自带的控件,很多人可能很少知道这个控件,这个控件很简单,也很好理解,能不能用上实战就看你们的本事了.下面是淘宝头条广告的原效果 下面是我们今天要实现的效果,图片是Gif,运行效果是很流畅的,由于这个图片反应有点慢,会浪费大家点时间,所以我把它调快了,大家可以掏出手机打开淘宝看,一模一样的 从源码可以看出,其实ViewFlipper间接的继承了FrameLayout,

  • Android自定义View实现仿1号店垂直滚动广告条代码

    效果图展示,图片有点卡,耐心看会,原程序是很流畅的 实现步骤: 声明变量 初始化画笔.文本大小和坐标 onMeasure()适配wrap_content的宽高 onDraw()画出根据坐标画出两段Text 监听点击事件 在Activity中实现点击事件 实现原理(坐标变换原理):整个过程都是基于坐标Y的增加和交换进行处理的,Y值都会一直增加到endY,然后进行交换逻辑 步骤一:声明变量 由于1号店是两句话的滚动,所以我们也是使用两句话来实现的 private Paint mPaint; priv

  • 基于bootstrap实现广告轮播带图片和文字效果

    代码如下所示: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de

  • Android仿淘宝头条向上滚动广告条ViewFlipper

    所谓前人栽树,后人乘凉,在此感谢博主的贡献. 参考博文: 仿淘宝首页的淘宝头条View垂直滚动 欢迎关注我的微信公众号 不只是原创技术文章,更多的是对生活的思考总结 我在博主的基础上做了如下工作: 修复了滚动条第二条点击事件无法触发这个bug: 充分简化了自定义ViewFlipper类的代码: 添加了直接使用ViewFlipper控件实现同样效果: 先上效果图: 这里使用了一个比较少用的控件:ViewFlipper 学习一个未知的东西,第一步就是要搞懂what:学的这个东西是什么以及能够实现什么

  • jQuery实现广告条滚动效果

    本文实例为大家分享了jQuery实现广告条滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{padding: 0px;margin: 0px;} #list{width: 150px;height: 310px;margin: 0px auto;bor

  • 使用Ajax实现简单的带百分比进度条实例

    需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签 <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" borderco

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • jQuery多文件异步上传带进度条实例代码

    先给大家展示下效果图: ///作者:柯锦 ///完成时间:2016.08.16 ///多文件异步上传带进度条 (function ($) { function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, // or 1000 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes)

  • Android自定义控件之广告条滚动效果

    在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

随机推荐