当前位置: 开发笔记 > Android > 正文

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

作者：刘诗宪668964 | 来源：互联网 | 2022-10-04 08:50

这篇文章给大家介绍了利用Android使用RecyclerView实现水平滚动的效果，本文做了一个年龄滚动控件的例子，对大家开发Android具有一定参考借鉴价值，有需要的可以参考借鉴。

前言

相信大家都知道Android滚动控件的实现方式有很多, 使用RecyclerView也比较简单. 做了一个简单的年龄滚动控件, 让我们来看看RecyclerView的使用方式, 主要有以下几点:

(1) 对齐控件中心位置.

(2) 计算滚动距离.

(3) 高亮中心视图.

(4) 实时显示中心数据.

(5) 停止时自动对齐.

(6) 滚动时, 设置按钮状态开关.

效果

1. 框架

主要关注RecyclerView部分逻辑.

 /**
  * 初始化年龄滑动条
  */
 private void initAgeList() {
  LinearLayoutManager mLayoutManager =
    new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false);
  mRvAgeList.setLayoutManager(mLayoutManager);
  mAgeAdapter = new PersonAgeAdapter(START_NUM, END_NUM);
  mRvAgeList.setAdapter(mAgeAdapter);
  mRvAgeList.addOnScrollListener(new RecyclerView.OnScrollListener() {
   @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
    super.onScrollStateChanged(recyclerView, newState);

    mBDownStep.setEnabled(false);

    // 效果在暂停时显示, 否则会导致重绘异常
    if (newState == RecyclerView.SCROLL_STATE_IDLE) {
     mAgeAdapter.highlightItem(getMiddlePosition());
     mRvAgeList.scrollToPosition(getScrollPosition());
     mLastValue = getMiddlePosition();
     UserInfoManager.setAge(getMiddlePosition() + START_NUM);

     mBDownStep.setEnabled(true); // 滑动时不可用, 停止时才可以
    }
   }

   @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    // 值是实时增加
    mTvAgeValue.setText(String.valueOf(getMiddlePosition() + START_NUM));
   }
  });

  mAgeAdapter.highlightItem(getMiddlePosition());
 }

设置一个水平布局

LinearLayoutManager mLayoutManager =
    new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false);
  mRvAgeList.setLayoutManager(mLayoutManager);

添加Adapter, 设置起始和结束位置.

  mAgeAdapter = new PersonAgeAdapter(START_NUM, END_NUM);
  mRvAgeList.setAdapter(mAgeAdapter);

2. Adapter

Adapter定制一些功能, 如标示指向中心位置, 数据联动显示, 高亮Item等.

/**
 * 年龄的适配器
 * 
 * Created by wangchenlong on 15/11/12.
 */
public class PersonAgeAdapter extends RecyclerView.Adapter {

 public static final int ITEM_NUM = 7; // 每行拥有的Item数, 必须是奇数

 private int mFrom; // 起始
 private int mTo; // 终止
 private int mHighlight = -1; // 高亮

 public PersonAgeAdapter(int from, int to) {
  mFrom = from;
  mTo = to;
 }

 @Override public AgeItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  View item = LayoutInflater.from(parent.getContext()).
    inflate(R.layout.view_age_item, parent, false);

  // 设置Item的宽度
  ViewGroup.LayoutParams lp = item.getLayoutParams();
  lp.width = getItemStdWidth();

  return new AgeItemViewHolder(item);
 }

 @Override public void onBindViewHolder(AgeItemViewHolder holder, int position) {
  holder.getTextView().setText(String.valueOf(mFrom + position));

  // 高亮显示
  if (isSelected(position)) {
   holder.getTextView().setTextSize(30);
   holder.getTextView().setTextColor(ChunyuApp.getAppContext().getResources().getColor(R.color.black));
  } else {
   holder.getTextView().setTextSize(20);
   holder.getTextView().setTextColor(ChunyuApp.getAppContext().getResources().getColor(R.color.gray_line));
  }
 }

 // 高亮中心, 更新前后位置
 public void highlightItem(int position) {
  mHighlight = position;
  int offset = ITEM_NUM / 2;
  for (int i = position - offset; i <= position + offset; ++i)
   notifyItemChanged(i);
 }

 // 判断是否是高亮
 public boolean isSelected(int position) {
  return mHighlight == position;
 }


 @Override public int getItemCount() {
  return mTo - mFrom + 1;
 }

 // 获取标准宽度
 public static int getItemStdWidth() {
  DisplayMetrics displayMetrics = ChunyuApp.getAppContext().getResources().getDisplayMetrics();
  return displayMetrics.widthPixels / ITEM_NUM;
 }

 // ViewHolder
 public class AgeItemViewHolder extends RecyclerView.ViewHolder {

  private TextView mTextView;

  public AgeItemViewHolder(View itemView) {
   super(itemView);

   mTextView = (TextView) itemView.findViewById(R.id.item_age_value);
   mTextView.setTag(this);
  }

  public TextView getTextView() {
   return mTextView;
  }
 }
}

每个单元格宽度是屏幕宽度的奇数分之一, 填充屏幕, 则起始指向中心.

 @Override public AgeItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  View item = LayoutInflater.from(parent.getContext()).
    inflate(R.layout.view_age_item, parent, false);

  // 设置Item的宽度
  ViewGroup.LayoutParams lp = item.getLayoutParams();
  lp.width = getItemStdWidth();

  return new AgeItemViewHolder(item);
 }

单数Item数量, 则中心的指示器必指向中心Item的中心.

根据选中状态, 更新Item样式.

 @Override public void onBindViewHolder(AgeItemViewHolder holder, int position) {
  holder.getTextView().setText(String.valueOf(mFrom + position));

  // 高亮显示
  if (isSelected(position)) {
   holder.getTextView().setTextSize(30);
   holder.getTextView().setTextColor(ChunyuApp.getAppContext().getResources().getColor(R.color.black));
  } else {
   holder.getTextView().setTextSize(20);
   holder.getTextView().setTextColor(ChunyuApp.getAppContext().getResources().getColor(R.color.gray_line));
  }
 }

设置高亮, 把中心位置高亮, 两边恢复, 通知Adapter重绘ViewHolder.

 // 高亮中心, 更新前后位置
 public void highlightItem(int position) {
  mHighlight = position;
  int offset = ITEM_NUM / 2;
  for (int i = position - offset; i <= position + offset; ++i)
   notifyItemChanged(i);
 }

 // 判断是否是高亮
 public boolean isSelected(int position) {
  return mHighlight == position;
 }
notifyItemChanged()会重绘所选择的页面.

获取宽度, 把一行显示Item数量设置为单数, 则中心指向一个Item.

 // 获取标准宽度
 public static int getItemStdWidth() {
  DisplayMetrics displayMetrics = ChunyuApp.getAppContext().getResources().getDisplayMetrics();
  return displayMetrics.widthPixels / ITEM_NUM;
 }

注意RecyclerView不能移动半个单元, 每行数量是单数时, 则必会指向中心.

3. 滚动逻辑

在滚动时, 实时更新页面显示; 在停止时, 更新高亮和存储数据; 滚动结束时, 激活按钮.

  mRvAgeList.addOnScrollListener(new RecyclerView.OnScrollListener() {
   @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
    super.onScrollStateChanged(recyclerView, newState);
    mBDownStep.setEnabled(false);

    // 效果在暂停时显示, 否则会导致重绘异常
    if (newState == RecyclerView.SCROLL_STATE_IDLE) {
     mAgeAdapter.highlightItem(getMiddlePosition());
     mRvAgeList.scrollToPosition(getScrollPosition());
     mLastValue = getMiddlePosition();
     UserInfoManager.setAge(getMiddlePosition() + START_NUM);

     mBDownStep.setEnabled(true); // 滑动时不可用, 停止时才可以
    }
   }

   @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    // 值是实时增加
    mTvAgeValue.setText(String.valueOf(getMiddlePosition() + START_NUM));
   }
  });

  mAgeAdapter.highlightItem(getMiddlePosition());
 }

 /**
  * 获取中间位置
  *
  * @return 当前值
  */
 private int getMiddlePosition() {
  return getScrollPosition() + (PersonAgeAdapter.ITEM_NUM / 2);
 }

 /**
  * 获取滑动值, 滑动偏移 / 每个格子宽度
  *
  * @return 当前值
  */
 private int getScrollPosition() {
  return (int) ((double) mRvAgeList.computeHorizontalScrollOffset()
    / (double) PersonAgeAdapter.getItemStdWidth());
 }

判断滚动的距离单位, 偏移总距离/单个Item宽度.

 private int getScrollPosition() {
  return (int) ((double) mRvAgeList.computeHorizontalScrollOffset()
    / (double) PersonAgeAdapter.getItemStdWidth());
 }

computeHorizontalScrollOffset()获取RecyclerView的偏移总位移.

中间位置, 还要加上半行Item数量

 private int getMiddlePosition() {
  return getScrollPosition() + (PersonAgeAdapter.ITEM_NUM / 2);
 }

判断滚动是否停止.

if (newState == RecyclerView.SCROLL_STATE_IDLE)

在滚动停止时, 自动对齐.

mRvAgeList.scrollToPosition(getScrollPosition());

调用需要高亮显示的Item.

mAgeAdapter.highlightItem(getMiddlePosition());

注意在滚动停止时, 更新高亮比较好, 否则重绘速度较慢, 会影响滚动效果.

滑动效果

总结

好了，以上就是这篇文章的全部内容了，我们可以根据这些定制各式各样的滚动条了!希望这篇文章对大家能有所帮助。

android

推荐阅读

android
九宫格计算

九宫格计算. ... [详细]

蜡笔小新 2024-09-30 19:37:45
android
22.Container With Most Water（能装最多水的容器）

thecontainercontainsthemos ... [详细]

蜡笔小新 2024-09-30 18:33:10
android
每日一练ACM 2019.04.14

2019.4.14第1001题：SumProblemProblemDescriptionHey,welcometoHDOJ(HangzhouDianziUniversityOnli ... [详细]

蜡笔小新 2024-09-30 14:09:13
android
Git（1）

安装Git完毕（在开始菜单打开的话，打开的不是你想要的路径，切换路径很麻烦）1.D盘新建GitTest文件夹2.打开GitTest,在空白的地方右键，3.单击GitBashHere ... [详细]

蜡笔小新 2024-09-30 14:07:01
android
python基础（二、pycharm安装、卸载）

3.在Ubuntu中安装PyCharmPyCharm的官方网站地址是：https:www.jetbrains.compycharm注意：安装时不要使用root用户安装，否则后期使用 ... [详细]

蜡笔小新 2024-09-30 13:43:10
android
在Android源码环境下编译系统App使用第三方jar包的方法（备忘）

1将要使用的jar包放入App的根目录，即Android.mk所在目录2按如下方式编写Android.mk文件（########之间的行用于编译和使用jar包）LOCAL_PATH:$(ca ... [详细]

蜡笔小新 2024-09-30 13:41:23
android
jQuery源码学习2——初始化篇

这一篇主要总结一下jQuery这个js在引入的时候做的一些初始化工作第一句window.undefinedwindow.undefined;是为了兼容低版本的IE而写的因为在低版本 ... [详细]

蜡笔小新 2024-09-30 13:40:32
android
spotify engineering culture part 1

原文，因为原视频说的太快太长，又没有字幕，于是借助youtube，把原文听&打出来了。中文版日后有时间再翻译。oneofthebigsucceessfactorshereatSpo ... [详细]

蜡笔小新 2024-09-30 13:36:17
android
MyBatis模糊查询和多条件查询

MyBatis模糊查询和多条件查询一、ISmbmsUserDao层根据姓名模糊查询publicListgetUser();多条件查询publicList ... [详细]

蜡笔小新 2024-09-30 13:26:10
android
载波|等份_NR SRS时频域位置

篇首语：本文由编程笔记#小编为大家整理，主要介绍了NRSRS时频域位置相关的知识，希望对你有一定的参考价值。微信同步更新欢迎关注同名modem协议笔记S ... [详细]

蜡笔小新 2024-09-30 11:54:38
android
Mac下Flutter安装AndroidStudio配置

补一个Mac下Flutter安装AndroidStudio配置(官网地址：https:flutter.devdocsget-startedinstallmacos)1.下载安装包； ... [详细]

蜡笔小新 2024-09-30 11:18:45
android
vscode里的html标签导航的一系列问题

哈喽，我今天带来的经验是，vscode在18年10月更新后的1.29以后，编辑html文档时，会发现最上面有个类似于HTML标签导航的玩意儿，可能部分同学和我一样不习惯用它们，现在 ... [详细]

蜡笔小新 2024-09-30 11:07:06
android
Android Rxbus事件总线

我的视频课程：《FFmpeg打造Android万能音频播放器》最近在项目中使用了Rxjava和RxAndroid，确实感觉挺不错的，然后听说可以用RxBus来替换 ... [详细]

蜡笔小新 2024-09-30 09:58:16
android
Illustrator绘制逼真的愤怒的小鸟实例教程

Illustrator教程： ... [详细]

蜡笔小新 2024-09-30 07:16:37
android
Android 自定义控件基础 canvas paint

1、首先说一下canvas类：ClassOverviewTheCanvasclassholdsthedrawcalls.Todrawsomething,youne ... [详细]

蜡笔小新 2024-09-30 07:06:19

刘诗宪668964

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章