自定义ViewPager和RecyclerView指示器 Indicator

2024-06-01 16:32
文章标签 自定义 指示器 recyclerview viewpager indicator

本文主要是介绍自定义ViewPager和RecyclerView指示器 Indicator，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

现在好多App首页都会有这样的条目

在这里插入图片描述
这种的实现方式要么是viewpager翻页滚动，要么就是recyclerView持续滚动。下面的指示器系统的太丑 ，所以就自定义了一个。下面是demo简单的效果图：
在这里插入图片描述
在这里插入图片描述

ViewPagerIndicator

因为嫌麻烦这里的指示器没有用Canvas进行绘制，用了布局文件代替：

指示器布局文件 view_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/root"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000000"><Viewandroid:id="@+id/ind_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#ff0000"/></FrameLayout>

ViewPagerIndicator.java

public class ViewPagerIndicator extends FrameLayout {private View rootView;private View indView;public ViewPagerIndicator(@NonNull Context context) {this(context, null);}public ViewPagerIndicator(@NonNull Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public ViewPagerIndicator(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);View root = inflate(context, R.layout.app_viewpager_indicator, this);rootView = root.findViewById(R.id.root);indView = root.findViewById(R.id.ind_view);}int indViewWidth = 0;@Overridepublic void draw(Canvas canvas) {super.draw(canvas);}public void setWithViewPager(ViewPager viewPager) {//如果没有adapter，则隐藏不显示if (null == viewPager.getAdapter()) {setVisibility(GONE);Log.e(getClass().getSimpleName(), "no adapter");return;}//获取viewPager中fragment的数量final int count = viewPager.getAdapter().getCount();if (count == 0) {return;}//加载到window之后再进行view宽度的获取rootView.post(new Runnable() {@Overridepublic void run() {//获取当前滑块的宽度indViewWidth = getWidth() / count;FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) indView.getLayoutParams();layoutParams.width = indViewWidth;indView.setLayoutParams(layoutParams);}});viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {/**** @param position* @param positionOffset [0，1]中的值，指示在位置处与页面的偏移百分比。* @param positionOffsetPixels 以像素为单位的值，表示与位置的偏移量。*/@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//获取滑块距父布局左侧的距离int left = (int) (position * indViewWidth + positionOffset * indViewWidth);//重新布局滑块viewindView.layout(left, indView.getTop(), left + indViewWidth, indView.getBottom());}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {}});}
}

步骤如下
1.计算出滑块的宽高
2.为viewPager添加滑动监听事件，监听滑动距离，计算出移动距离重新布局滑块

RecyclerViewIndicator

indicator 布局同上

RecyclerViewIndicator.java

public class RecyclerViewIndicator extends FrameLayout {private View rootView;private View indView;public RecyclerViewIndicator(@NonNull Context context) {this(context, null);}public RecyclerViewIndicator(@NonNull Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public RecyclerViewIndicator(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);View root = inflate(context, R.layout.app_viewpager_indicator, this);rootView = root.findViewById(R.id.root);indView = root.findViewById(R.id.ind_view);}int indViewWidth = 0;int indViewHeight = 0;float rate = 0f;/*** 绑定recyclerView* @param recyclerView* @param orientation 排列方向**  这里用到的recyclerView的三个方法*  computeHorizontalScrollExtent/computeVerticalScrollExtent 当前显示在屏幕上的总长度*  computeHorizontalScrollOffset/computeVerticalScrollOffset 当前滑动的总长度*  computeHorizontalScrollRange/computeVerticalScrollRange recylerView内部的总长度*/public void setWithRecyclerView(final RecyclerView recyclerView, int orientation) {final boolean isHorizontal = orientation == RecyclerView.HORIZONTAL;rootView.post(new Runnable() {@Overridepublic void run() {float scrollRange = isHorizontal ? recyclerView.computeHorizontalScrollRange() : recyclerView.computeVerticalScrollRange();float scrollExtent = isHorizontal ? recyclerView.computeHorizontalScrollExtent() : recyclerView.computeVerticalScrollExtent();LayoutParams layoutParams = (LayoutParams) indView.getLayoutParams();if (isHorizontal) {//算出比例rate = (float) getWidth() / scrollRange;//由显示在屏幕上的总长度算出滑块长度indViewWidth = (int) (scrollExtent * rate);layoutParams.height = LayoutParams.MATCH_PARENT;layoutParams.width = indViewWidth;} else {rate = (float) getHeight() / scrollRange;layoutParams.width = LayoutParams.MATCH_PARENT;indViewHeight = (int) (scrollExtent * rate);layoutParams.height = indViewHeight;}indView.setLayoutParams(layoutParams);}});recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {@Overridepublic void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {super.onScrolled(recyclerView, dx, dy);int scrollOffset = isHorizontal ? recyclerView.computeHorizontalScrollOffset() : recyclerView.computeVerticalScrollOffset();//由recyclerView滑动距离算出滑块移动距咯if (isHorizontal) {int left = (int) (scrollOffset * rate);indView.layout(left, indView.getTop(), left + indViewWidth, indView.getBottom());} else {int top = (int) (scrollOffset * rate);indView.layout(indView.getLeft(), top, indView.getRight(), top + indViewHeight);}}});}
}

步骤基本上和recyclerView的实现步骤一致，
这里主要用到了recyclerView的三个方法进行计算

computeHorizontalScrollExtent/computeVerticalScrollExtent 当前显示在屏幕上的总长度
computeHorizontalScrollOffset/computeVerticalScrollOffset 当前滑动的总长度
computeHorizontalScrollRange/computeVerticalScrollRange recylerView内部的总长度

通过 orientation 来区分recyclrView 的排列方式

demo地址

demo只是做了实现的方式，界面有点丑，自己可以更改背景进行修改。也可以是用绘制的方式，添加自定义view的参数。

这篇关于自定义ViewPager和RecyclerView指示器 Indicator的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1021525。

相关文章

SpringBoot 自定义消息转换器使用详解

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明： 首次发表日期：2024-09-08PlantUML官网： https://plantuml.com/zh/PlantUML命令行文档： https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi
阅读更多...
argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

一、问题描述 一位同学反馈，他写的argo存过中调用了一个自定义函数，函数会加载hdfs上的一个文件，但有些节点会报FileSystem closed异常，同时有时任务会成功，有时会失败。 二、问题分析 argodb的计算引擎是基于spark的定制化引擎，对于自定义函数的调用跟hive on spark的是一致的。udf要通过反射生成实例，然后迭代调用evaluate。通过代码分析，udf在
阅读更多...
鸿蒙开发中实现自定义弹窗 (CustomDialog)

鸿蒙开发中实现自定义弹窗 (CustomDialog)

效果图 #思路 创建带有 @CustomDialog 修饰的组件 ，并且在组件内部定义controller: CustomDialogController 实例化CustomDialogController，加载组件，open()-> 打开对话框 ， close() -> 关闭对话框 #定义弹窗 (CustomDialog)是什么？ CustomDialog是自定义弹窗，可用于广告、中
阅读更多...
mybatis框架基础以及自定义插件开发

mybatis框架基础以及自定义插件开发

文章目录 框架概览框架预览MyBatis框架的核心组件MyBatis框架的工作原理MyBatis框架的配置MyBatis框架的最佳实践 自定义插件开发1. 添加依赖2. 创建插件类3. 配置插件4. 启动类中注册插件5. 测试插件 参考文献 框架概览 MyBatis是一个优秀的持久层框架，它支持自定义SQL、存储过程以及高级映射，为开发者提供了极大的灵活性和便利性。以下是关于M
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2