自定义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。
                            
                        

                    

                    
                    

                        
                            
                        
                    

                

                

                    相关文章
                

                    

                        

                            

                                

                                    
                                        Python实现精准提取 PDF中的文本,表格与图片
                                    
                                

                            

                            

                                

                                    Python实现精准提取 PDF中的文本,表格与图片
                                

                                

                                    《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实...																									目录安装 python 库提取 PDF 文本内容：获取整页文本与指定区域内容获取页面上的所有文本内容获取
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        基于Python实现一个Windows Tree命令工具
                                    
                                

                            

                            

                                

                                    基于Python实现一个Windows Tree命令工具
                                

                                

                                    《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现...																									目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一：创建批处理文件并添加到PATH1
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Java使用HttpClient实现图片下载与本地保存功能
                                    
                                

                            

                            

                                

                                    Java使用HttpClient实现图片下载与本地保存功能
                                

                                

                                    《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都...																									目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        canal实现mysql数据同步的详细过程
                                    
                                

                            

                            

                                

                                    canal实现mysql数据同步的详细过程
                                

                                

                                    《canal实现mysql数据同步的详细过程》：本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的...																									目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Nexus安装和启动的实现教程
                                    
                                

                            

                            

                                

                                    Nexus安装和启动的实现教程
                                

                                

                                    《Nexus安装和启动的实现教程》：本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教...																									目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接：DownloadWindows系统根
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程
                                    
                                

                            

                            

                                

                                    SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程
                                

                                

                                    《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大...																									目录一、基础概念1.1 组件（Component）1.2 规则（Rule）1.3 上下文（Conte
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        MySQL 横向衍生表(Lateral Derived Tables)的实现
                                    
                                

                            

                            

                                

                                    MySQL 横向衍生表(Lateral Derived Tables)的实现
                                

                                

                                    《MySQL横向衍生表(LateralDerivedTables)的实现》横向衍生表适用于在需要通过子查询获取中间结果集的场景,相对于普通衍生表,横向衍生表可以引用在其之前出现过的表名,本文就来...																									目录一、横向衍生表用法示例1.1 用法示例1.2 使用建议前面我们介绍过mysql中的衍生表（From子句
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Mybatis的分页实现方式
                                    
                                

                            

                            

                                

                                    Mybatis的分页实现方式
                                

                                

                                    《Mybatis的分页实现方式》MyBatis的分页实现方式主要有以下几种,每种方式适用于不同的场景,且在性能、灵活性和代码侵入性上有所差异,对Mybatis的分页实现方式感兴趣的朋友一起看看吧...																									目录​1. 原生 SQL 分页（物理分页）​​2. RowBounds 分页（逻辑分页）​​3. Page
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Python基于微信OCR引擎实现高效图片文字识别
                                    
                                

                            

                            

                                

                                    Python基于微信OCR引擎实现高效图片文字识别
                                

                                

                                    《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一...																									目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        MYSQL查询结果实现发送给客户端
                                    
                                

                            

                            

                                

                                    MYSQL查询结果实现发送给客户端
                                

                                

                                    《MYSQL查询结果实现发送给客户端》：本文主要介绍MYSQL查询结果实现发送给客户端方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教...																									目录mysql取数据和发数据的流程（边读边发）Sending to clientSending DataLRU(Least Rec
                                

                                

                                    阅读更多...
                                

                            

                        

                    

            

        

    


    


    

        

            Copyright China编程   23002807@qq.com
        

        

            沪ICP备2023033072号-2