自定义recyclerView实现时光轴效果

2024-06-24 05:38
文章标签 自定义 recyclerview 时光 效果 实现

本文主要是介绍自定义recyclerView实现时光轴效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

时光轴效果在很多app上都有出现，例如淘宝中快递的跟踪，本文将使用recyclerView实现时光轴效果，我们会到自定义控件，首先先看一下效果图：


接下来是步骤分析

1自定义属性

这个大家应该都了解了，根据我们之前的分析，直接在attrs.xml中进行声明

<declare-styleable name="TimeLine"><attr name="beginLine" format="reference|color"></attr><attr name="endLine" format="reference|color"></attr><attr name="lineWidth" format="dimension"></attr><attr name="timeLineImage" format="color|reference"></attr><attr name="timeLineImageSize" format="dimension"></attr>
</declare-styleable>

进行一下各个属性的声明

•   beginLine:开始的线条

•   endLine:下面的线条

•   lineWidth:线条的宽度

•   timeLineImage:中间的圆形

•  timeLineImageSize:中间的圆形的大小，这里默认他的宽高一致

2.自定义TimeLine继承View，构造方法如下

private int lineWidth;
private Drawable mBeginLine;
private Drawable mEndLine;
private Drawable mTimeLineImage;
private int mTimeLineImageSize;public TimeLine(Context context) {this(context,null);
}public TimeLine(Context context, AttributeSet attrs) {this(context,attrs,0);
}public TimeLine(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TimeLine);lineWidth = a.getDimensionPixelOffset(R.styleable.TimeLine_lineWidth,15);mBeginLine = a.getDrawable(R.styleable.TimeLine_beginLine);mEndLine = a.getDrawable(R.styleable.TimeLine_endLine);mTimeLineImage = a.getDrawable(R.styleable.TimeLine_timeLineImage);mTimeLineImageSize = a.getDimensionPixelSize(R.styleable.TimeLine_timeLineImageSize,25);a.recycle();}

3.复写onMeasure方法

我们都知道自定义控件，一般需要重写onMeasure，onDraw,onLayout方法,这里onMeasure需要对wrap_content的情况进行特殊处理，具体原因请看源码

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int w = timeLineMarkerSize + getPaddingLeft() + getPaddingRight();int h = timeLineMarkerSize + getPaddingTop() + getPaddingBottom();int widthSize = resolveSizeAndState(w, widthMeasureSpec, 0);int heightSize = resolveSizeAndState(h, heightMeasureSpec, 0);int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);// 处理宽高都为 wrap_content 的情况if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {setMeasuredDimension(DEFAULT_WIDTH, DEFAULT_HEIGHT);}// 处理宽为 wrap_content 的情况else if (widthSpecMode == MeasureSpec.AT_MOST) {setMeasuredDimension(DEFAULT_WIDTH, widthSize);}// 处理高为 wrap_content 的情况else if (heightSpecMode == MeasureSpec.AT_MOST) {setMeasuredDimension(heightSize, DEFAULT_HEIGHT);}}

看过View源码的同学应该知道，在控件进行测量的时候，需要根据

specMode来进行具体的操作，View中提供了resolveSizeAndState方法来进行判断，该方法源码如下：

public static int resolveSizeAndState(int size, int measureSpec, int childMeasuredState) {int result = size;int specMode = MeasureSpec.getMode(measureSpec);int specSize =  MeasureSpec.getSize(measureSpec);switch (specMode) {case MeasureSpec.UNSPECIFIED:result = size;break;case MeasureSpec.AT_MOST:if (specSize < size) {result = specSize | MEASURED_STATE_TOO_SMALL;} else {result = size;}break;case MeasureSpec.EXACTLY:result = specSize;break;}return result | (childMeasuredState&MEASURED_STATE_MASK);}

4.onDraw方法

@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);if (mBeginLine != null) {mBeginLine.draw(canvas);}if (mEndLine != null) {mEndLine.draw(canvas);}if (mTimeLineImage!=null){mTimeLineImage.draw(canvas);}
}

5.onSizeChange

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {int paddingLeft = getPaddingLeft();int paddingRight = getPaddingRight();int paddingTop = getPaddingTop();int paddingBottom = getPaddingBottom();//父容器的宽高int width = getWidth();int height = getHeight();int childWidth = width - paddingLeft - paddingRight;int childHeight = height - paddingTop - paddingBottom;mTimeLineImageSize = Math.min(mTimeLineImageSize, Math.min(childHeight, childWidth));if (mTimeLineImage != null) {mTimeLineImage.setBounds(paddingLeft, paddingTop, paddingLeft + mTimeLineImageSize, paddingTop + mTimeLineImageSize);bounds = mTimeLineImage.getBounds();} else {bounds = new Rect(paddingLeft, paddingTop, paddingLeft + childWidth, paddingTop + childHeight);}if (mBeginLine != null) {int lineLeft = mTimeLineImage.getBounds().centerX() - (lineWidth >> 1);mBeginLine.setBounds(lineLeft, 0, lineLeft + lineWidth, mTimeLineImage.getBounds().top);}if (mEndLine != null) {int lineLeft = mTimeLineImage.getBounds().centerX() - (lineWidth >> 1);mEndLine.setBounds(lineLeft, mTimeLineImage.getBounds().bottom, lineLeft + lineWidth, height);}
}

这里需要说明的是，我们的mBeginLine的长度，其实是我们自定义控件的paddingTop高度，同理mEndLine的长度是paddingBottom高度，所以我们在使用这个控件时，一般都会设置paddingTop和paddingBottom

6.使用TimeLine控件

以下是recyclerView中一个item的布局，多个item拼接起来就是一条时光轴，这里需要说明的是，我们的 LinearLayout使用的高度模式是wrap_content，这里我的TextView设置了android:paddingTop="30dp"，如果不对TextView设置android:paddingTop，会发现TimeLineView控件是看不见的，这是由于父控件wrap_content，那么父控件包裹TextView的内容，那么父控件的高度就是TextView的高度，这样TimeLineView设置了android:paddingTop="34dp"，这个高度是大于父控件的高度的，所以就看不到TimeLineView了，除非我们给LinearLayout的android:layout_height="wrap_content"，修改成固定的高度

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingLeft="16dp"android:paddingRight="16dp"><com.example.jikeyoujikeyou.timelinedemo2.TimeLineViewandroid:id="@+id/timeLineView"android:layout_width="wrap_content"android:layout_height="match_parent"android:clickable="true"android:focusable="true"android:focusableInTouchMode="true"android:paddingBottom="8dp"android:paddingLeft="4dp"android:paddingRight="4dp"android:paddingTop="34dp"app:beginLine="#ff0000"app:endLine="#ff0000"app:lineWidth="3dp"app:timeLineMarker="@drawable/timeline_marker"app:timeLineMarkerSize="24dp" /><TextViewstyle="@style/Base.TextAppearance.AppCompat.Title"android:id="@+id/timeLineName"android:layout_width="wrap_content"android:layout_height="wrap_content"android:ellipsize="end"android:paddingTop="30dp"android:singleLine="true"android:text="name"android:textColor="@color/grey_700"android:textSize="16sp" />
</LinearLayout>

7.最后就是recyclerView的使用

recyclerView的使用大家应该都很熟悉了，无非就是设置adapter,viewHolder等，这里不再赘述，还有一点需要强调的是ItemViewType有四种情况，第一个，最后一个，中间，还有只有一个四种情况情况，根据这几种情况，有选择设置mBeginLine与 mEndLine是否进行绘制

TimeLineAdapter代码：

package com.example.jikeyoujikeyou.timelinedemo;import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import java.util.ArrayList;
import java.util.List;
import java.util.Random;/*** Created by jikeyoujikeyou on 16/7/22.*/
public class TimeLineAdapter extends RecyclerView.Adapter<TimeLineAdapter.ViewHolder> {private List<TimeLineItem> datas ;public TimeLineAdapter(List<TimeLineItem> datas) {super();this.datas = datas;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());View view = layoutInflater.inflate(R.layout.item_timeline, null);return new ViewHolder(view, parent.getContext(), viewType);}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {TimeLineItem timeLineItem = datas.get(position);holder.tv_name.setText(timeLineItem.getTimeLineName());}@Overridepublic int getItemCount() {return datas.size();}@Overridepublic int getItemViewType(int position) {int size = datas.size() - 1;if (size == 0) {return TimeLineItemType.ATOM;} else if (position == 0) {return TimeLineItemType.START;} else if (position == size) {return TimeLineItemType.END;} else {return TimeLineItemType.NORMAL;}}class ViewHolder extends RecyclerView.ViewHolder {private TextView tv_name;private TimeLine timeLine;public ViewHolder(View itemView, Context context, int viewType) {super(itemView);tv_name = (TextView) itemView.findViewById(R.id.name);timeLine = (TimeLine) itemView.findViewById(R.id.timeLineView);Drawable drawable = context.getResources().getDrawable(R.drawable.timeline_marker);Drawable drawable2 = context.getResources().getDrawable(R.drawable.timeline_marker2);Drawable drawable3 = context.getResources().getDrawable(R.drawable.timeline_marker3);Drawable drawable4 = context.getResources().getDrawable(R.drawable.timeline_marker4);Drawable drawable5 = context.getResources().getDrawable(R.drawable.timeline_marker5);Random random = new Random();final int i = random.nextInt(5);final Drawable drawables[] = {drawable, drawable2, drawable3, drawable4, drawable5};timeLine.setTimeLineImage(drawables[i]);if (viewType == TimeLineItemType.START) {timeLine.setBeginLine(null);} else if (viewType == TimeLineItemType.END) {timeLine.setEndLine(null);} else if (viewType == TimeLineItemType.ATOM) {timeLine.setBeginLine(null);timeLine.setEndLine(null);}}}class TimeLineItemType {//正常public final static int NORMAL = 0;//开始public final static int START = 1;//结束public final static int END = 2;//只有一条数据,那么beginLine和endLine都没有public final static int ATOM = 3;}}

MainActivity代码：

<pre name="code" class="java">public class MainActivity extends AppCompatActivity {private List<TimeLineItem> mDatas;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initData();RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);recyclerView.setLayoutManager(linearLayoutManager);TimeLineAdapter adapter = new TimeLineAdapter(mDatas);recyclerView.setAdapter(adapter);}private void initData() {mDatas = new ArrayList<>();mDatas.add(new TimeLineItem("爸爸生日"));mDatas.add(new TimeLineItem("妈妈生日"));mDatas.add(new TimeLineItem("姐姐生日"));mDatas.add(new TimeLineItem("女神生日"));mDatas.add(new TimeLineItem("前任生日"));}
}



 

运行项目，就会呈现本文一开始的效果
 

 

 

 

 

 

 

 

 

 


                                    

                                        这篇关于自定义recyclerView实现时光轴效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
                                    

                                    

                                

                            

                            

                        

                    

                    

                        

                            

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

                    

                    
                    

                        
                            
                        
                    

                

                

                    相关文章
                

                    

                        

                            

                                

                                    
                                        C++对象布局及多态实现探索之内存布局（整理的很多链接）
                                    
                                

                            

                            

                                

                                    C++对象布局及多态实现探索之内存布局（整理的很多链接）
                                

                                

                                    本文通过观察对象的内存布局，跟踪函数调用的汇编代码。分析了C++对象内存的布局情况，虚函数的执行方式，以及虚继承，等等 文章链接：http://dev.yesky.com/254/2191254.shtml      论C/C++函数间动态内存的传递 (2005-07-30)   当你涉及到C/C++的核心编程的时候，你会无止境地与内存管理打交道。 文章链接：http://dev.yesky
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        通过SSH隧道实现通过远程服务器上外网
                                    
                                

                            

                            

                                

                                    通过SSH隧道实现通过远程服务器上外网
                                

                                

                                    搭建隧道 autossh -M 0 -f -D 1080 -C -N user1@remotehost##验证隧道是否生效，查看1080端口是否启动netstat -tuln | grep 1080## 测试ssh 隧道是否生效curl -x socks5h://127.0.0.1:1080 -I http://www.github.com 将autossh 设置为服务，隧道开机启动
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        ROS话题通信流程自定义数据格式
                                    
                                

                            

                            

                                

                                    ROS话题通信流程自定义数据格式
                                

                                

                                    ROS话题通信流程自定义数据格式 需求流程实现步骤定义msg文件编辑配置文件编译    在 ROS 通信协议中，数据载体是一个较为重要组成部分，ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:String、Int32、Int64、Char、Bool、Empty… 但是，这些数据一般只包含一个 data 字段，结构的单一意味着功能上的局限性，当传输一些复杂的数据，比如:
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测
                                    
                                

                            

                            

                                

                                    时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测
                                

                                

                                    时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测   目录 时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测基本介绍程序设计参考资料         基本介绍 MATLAB实现LSTM时间序列未来多步预测-递归预测。LSTM是一种含有LSTM区块（blocks）或其他的一种类神经网络，文献或其他资料中LSTM区块可能被描述成智能网络单元，因为
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        vue项目集成CanvasEditor实现Word在线编辑器
                                    
                                

                            

                            

                                

                                    vue项目集成CanvasEditor实现Word在线编辑器
                                

                                

                                    CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor   前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        android一键分享功能部分实现
                                    
                                

                            

                            

                                

                                    android一键分享功能部分实现
                                

                                

                                    为什么叫做部分实现呢，其实是我只实现一部分的分享。如新浪微博，那还有没去实现的是微信分享。还有一部分奇怪的问题：我QQ分享跟QQ空间的分享功能，我都没配置key那些都是原本集成就有的key也可以实现分享，谁清楚的麻烦详解下。  实现分享功能我们可以去www.mob.com这个网站集成。免费的，而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。  开始实现步骤（新浪分享，以下是本人自己实现
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        基于Springboot + vue 的抗疫物质管理系统的设计与实现
                                    
                                

                            

                            

                                

                                    基于Springboot + vue 的抗疫物质管理系统的设计与实现
                                

                                

                                    目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式   📚 前言  📑博客主页：
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        探索蓝牙协议的奥秘：用ESP32实现高质量蓝牙音频传输
                                    
                                

                            

                            

                                

                                    探索蓝牙协议的奥秘：用ESP32实现高质量蓝牙音频传输
                                

                                

                                    蓝牙（Bluetooth）是一种短距离无线通信技术，广泛应用于各种电子设备之间的数据传输。自1994年由爱立信公司首次提出以来，蓝牙技术已经经历了多个版本的更新和改进。本文将详细介绍蓝牙协议，并通过一个具体的项目——使用ESP32实现蓝牙音频传输，来展示蓝牙协议的实际应用及其优点。  蓝牙协议概述  蓝牙协议栈  蓝牙协议栈是蓝牙技术的核心，定义了蓝牙设备之间如何进行通信。蓝牙协议
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        以canvas方式绘制粒子背景效果，感觉还可以
                                    
                                

                            

                            

                                

                                    以canvas方式绘制粒子背景效果，感觉还可以
                                

                                

                                    这个是看到项目中别人写好的，感觉这种写法效果还可以，就存留记录下 就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。 附上demo下载地址。 https://download.csdn.net/download/u012138137/11249872
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        echarts省份标注加散点效果
                                    
                                

                            

                            

                                

                                    echarts省份标注加散点效果
                                

                                

                                    这个是安徽的效果图，鼠标移到红色标注或者对应的市区位置都会显示对应的数值。 先直接上代码： import anhuiMapJson from './anhui.json'getCoords: function(city) {var res = [];if (city != null) {for (var c in this.cityMap.features) {if (this.cityMa
                                

                                

                                    阅读更多...
                                

                            

                        

                    

            

        

    


    


    

        

            Copyright China编程   23002807@qq.com
        

        

            沪ICP备2023033072号-2