Android使用RecyclerView实现水平滚动控件
更新时间：2016年09月08日 08:47:54 投稿：daisy
这篇文章给大家介绍了利用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等.
/**
* 年龄的适配器
* <p>
* Created by wangchenlong on 15/11/12.
*/
public class PersonAgeAdapter extends RecyclerView.Adapter<PersonAgeAdapter.AgeItemViewHolder> {
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());
注意在滚动停止时, 更新高亮比较好, 否则重绘速度较慢, 会影响滚动效果.
滑动效果
总结
好了，以上就是这篇文章的全部内容了，我们可以根据这些定制各式各样的滚动条了!希望这篇文章对大家能有所帮助。
您可能感兴趣的文章:
- RecyclerView实现纵向和横向滚动
- RecyclerView实现抖音纵向滚动ViewPager效果
- Android RecyclerView 滚动到中间位置的方法示例
- Android RecyclerView 实现快速滚动的示例代码
- Android使用Recyclerview实现图片水平自动循环滚动效果
- XRecyclerView实现下拉刷新、滚动到底部加载更多等功能
- Android_RecyclerView实现上下滚动广告条实例（带图片）
- Android中RecyclerView实现分页滚动的方法详解
- Android代码实现AdapterViews和RecyclerView无限滚动
- RecyclerView实现横向滚动效果
相关文章
在android开发,我们会常常使用到缩放动画,这篇文章主要给大家介绍了关于Android列表实现单选点击缩放动画效果的相关资料,需要的朋友可以参考下2021-08-08
网络爬虫是捜索引擎抓取系统的重要组成部分。爬虫的主要目的是将互联网上的网页下载到本地形成一个或联网内容的镜像备份。本文的主要内容是讲在Android中如何编写简单的网络爬虫。2016-07-07
这篇文章主要为大家详细介绍了Android仿微信实现评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了Android中删除sdcard里文件的命令,本文讲解了删除android模拟器或手机上的sd卡文件的方法,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了Android 开发实现EditText 光标居右显示的相关资料,需要的朋友可以参考下2017-02-02
本篇文章是对Android"今日事今日毕"的使用进行了详细的分析介绍，需要的朋友参考下2013-05-05
本篇文章主要介绍了android 仿QQ动态背景、视频背景的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本文主要分享了违章查询源码，特附上源码下载地址和测试安装包下载地址。需要的朋友一起来看下吧2016-12-12
如果你的项目需要要区分国内版和国外版甚至还要根据用户是否是VIP会员加上收费和免费的版本，我们可以使用ProductFlavor对UI布局和icon图标进行版本区分，有此类需求的朋友，不妨了解下本文2021-06-06
这篇文章主要为大家详细介绍了Android中TextView实现部分文字可点击跳转的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论