前言

最近项目需要有个时间轴记录一下进程，研究了一下，有何不足之处望各路大神指正.
废话不多说，先上效果图

提示：以下是本篇文章正文内容，下面案例可供参考

一、功能

大标题、小标题、正文、图片显示

二、使用步骤

1.引入库

不需要引入任何库，原生代码
RecyclerView使用的是
import androidx.recyclerview.widget.RecyclerView;

2.图片显示RecyclerView

首先xml布局
超级简单了，就一个图片
custom_one_picture_recycler

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="2dp"><ImageViewandroid:id="@+id/custom_one_picture_recycler_picture"android:layout_width="80dp"android:layout_height="80dp"android:scaleType="centerCrop"/></LinearLayout>

然后，Adapter样式
AdapterOnePictureInfoRecycler

import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;import com.bumptech.glide.Glide;
import com.clc.R;
import com.clc.mystyle.custom.page.PageBigPhotoTwoActivity;
import com.clc.myutils.datato.DataHolder;import java.util.List;/*** 显示时间轴内的图片*/
public class AdapterOnePictureInfoRecycler extends RecyclerView.Adapter<AdapterOnePictureInfoRecycler.OnePictureViewHolder>{private List<MyImages> images;private OnPictureClickLintener pictureClickLintener;private Context context;/*** 构造方法，* @param context 上下文* @param images 图片LIST* @param pictureClickLintener  图片点击事件回调，不回调可以为NULL*/public AdapterOnePictureInfoRecycler(Context context,List<MyImages> images,OnPictureClickLintener pictureClickLintener){this.images = images;this.pictureClickLintener = pictureClickLintener;this.context = context;}@NonNull@Overridepublic OnePictureViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {OnePictureViewHolder viewHolder = new OnePictureViewHolder(LayoutInflater.from(context).inflate(R.layout.custom_one_picture_recycler,parent,false));//这里可给给图片设置统一的跳转，但是我不知道怎么获取到当前点击的是第几个图片，所以并没有设置，知道的大神，请自行修改，顺便告诉我一下  QAQreturn viewHolder;}@Overridepublic void onBindViewHolder(@NonNull OnePictureViewHolder holder, int position) {Glide.with(context).load(images.get(position).urlPath).placeholder(R.mipmap.zhanweitu).error(R.mipmap.error_network_image).into(holder.imageView);holder.imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if (pictureClickLintener != null) {pictureClickLintener.onPictureClick(position);} }});}@Overridepublic int getItemCount() {return images.size();}/*** 图片点击事件* 我这里返回的ID是标记的第几个图片* 用来大图展示的* 如使用自己的图片moudel，请自行修改返回值*/public interface OnPictureClickLintener{void onPictureClick(int id);}static class OnePictureViewHolder extends RecyclerView.ViewHolder{ImageView imageView;public OnePictureViewHolder(@NonNull View itemView) {super(itemView);imageView = itemView.findViewById(R.id.custom_one_picture_recycler_picture);}}}

3.单个时间轴内容展示

xml文件
custom_adpter_time_axis

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal">
//这个是左侧事件轴的定义，不符合您要求的请自行修改<LinearLayoutandroid:layout_width="40dp"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"><TextViewandroid:layout_width="2dp"android:layout_height="5dp"android:background="@drawable/custom_style_button_grey_grey"android:shadowRadius="20"/><TextViewandroid:layout_width="15dp"android:layout_height="15dp"android:background="@drawable/adpater_time_axis_radiu"android:shadowRadius="20"/><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="@drawable/custom_style_button_grey_grey"android:shadowRadius="20"/></LinearLayout>//这里是右侧文本、标题，图片展示的<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:id="@+id/time_axis_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="15dp"android:textColor="#000000"android:text="标题栏标题栏标题栏标题栏标题栏标题栏标题栏"android:layout_weight="1"android:lines="1"android:layout_gravity="center"android:singleLine="true"/><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#A6A6A6"android:layout_gravity="center"android:layout_marginLeft="5dp"android:layout_marginRight="10dp"/><TextViewandroid:id="@+id/time_axis_date"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="15dp"android:textColor="@color/colpr_dialog_rfid_selectid_message"android:text="2021020020015"android:gravity="right"android:lines="1"android:layout_gravity="center"android:layout_marginRight="5dp"/></LinearLayout><TextViewandroid:id="@+id/time_axis_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:layout_marginBottom="5dp"android:layout_marginRight="5dp"android:textSize="18dp"android:text="文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框文本框"/><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/time_axis_rec"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="10dp"/></LinearLayout>
</LinearLayout>

自定义Adapter
AdapterTimeAxis
其中TimeAxis类会再最后附上

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.clc.R;
import com.clc.mystyle.custom.moudle.TimeAxis;
import java.util.List;/*** 时间轴RecyclerView的Adapter*/
public class AdapterTimeAxis extends RecyclerView.Adapter<AdapterTimeAxis.TimeAxisViewHolder>{private List<TimeAxis> timeAxes;private Context context;/*** 构造方法* @param context 上下文* @param timeAxes 时间轴相关内容*/public AdapterTimeAxis(Context context, List<TimeAxis> timeAxes){this.timeAxes = timeAxes;this.context = context;}@NonNull@Overridepublic TimeAxisViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {TimeAxisViewHolder view = new AdapterTimeAxis.TimeAxisViewHolder(LayoutInflater.from(context).inflate(R.layout.custom_adpter_time_axis, parent, false));GridLayoutManager layoutManager = new GridLayoutManager(context,4);view.recyclerView.setLayoutManager(layoutManager);return view;}@Overridepublic void onBindViewHolder(@NonNull TimeAxisViewHolder holder, int position) {holder.date.setText(timeAxes.get(position).date);holder.text.setText(timeAxes.get(position).text);holder.title.setText(timeAxes.get(position).title);//这个就是展示图片的Recycler了，设置的Adapter就是第一步中的，其中第三个参数可以回调图片点击事件holder.recyclerView.setAdapter(new AdapterOnePictureInfoRecycler(context, timeAxes.get(position).images, new AdapterOnePictureInfoRecycler.OnPictureClickLintener() {@Overridepublic void onPictureClick(int id) {//你的图片点击事件}}));}@Overridepublic int getItemCount() {return timeAxes.size();}static class TimeAxisViewHolder extends RecyclerView.ViewHolder {private TextView date,text,title;private RecyclerView recyclerView;public TimeAxisViewHolder(@NonNull View itemView) {super(itemView);date = itemView.findViewById(R.id.time_axis_date);text = itemView.findViewById(R.id.time_axis_text);title = itemView.findViewById(R.id.time_axis_title);recyclerView = itemView.findViewById(R.id.time_axis_rec);}}
}

4.自定义时间轴控件

xml文件
diaplay_time_axis_scrolview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:layout_marginTop="15dp"><TextViewandroid:id="@+id/diaplay_time_axis_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="20dp"android:layout_marginBottom="15dp"android:text="标题标题标题标题标题标题"/><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/diaplay_time_axis_rec"android:layout_width="match_parent"android:layout_height="wrap_content"/>
</LinearLayout>

代码实现
DisplayTimeAxisOnScroView

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.LinearLayout;
import android.widget.TextView;import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;import com.clc.R;
import com.clc.mystyle.custom.adapter.AdapterTimeAxis;
import com.clc.mystyle.custom.moudle.TimeAxis;import java.util.List;/*** 时间轴*/
public class DisplayTimeAxisOnScroView extends LinearLayout {private TextView title;private RecyclerView recyclerView;private List<TimeAxis> timeAxes;private Context context;public DisplayTimeAxisOnScroView(Context context, AttributeSet attrs) {super(context, attrs);LayoutInflater.from(context).inflate(R.layout.diaplay_time_axis_scrolview,this);title = findViewById(R.id.diaplay_time_axis_title);recyclerView = findViewById(R.id.diaplay_time_axis_rec);LinearLayoutManager layoutManager = new LinearLayoutManager(context);layoutManager.setOrientation(RecyclerView.VERTICAL);recyclerView.setLayoutManager(layoutManager);if (timeAxes != null){recyclerView.setAdapter(new AdapterTimeAxis(context,timeAxes));}}public TextView getTitle() {return title;}public void setTitle(String title) {this.title.setText(title);}public List<TimeAxis> getTimeAxes() {return timeAxes;}public void setTimeAxes(List<TimeAxis> timeAxes) {this.timeAxes = timeAxes;if (timeAxes != null){recyclerView.setAdapter(new AdapterTimeAxis(getContext(),timeAxes));} else {recyclerView.setAdapter(null);}}
}

5.应用

应用就很简单了
再自己的布局文件中添加第四步的自定义控件就行了
依旧先上XML文件

<com.clc.mystyle.custom.display.DisplayTimeAxisOnScroViewandroid:id="@+id/fragment_bdz_information_time_axis"android:background="@color/white"android:layout_width="match_parent"android:layout_height="wrap_content"/>

然后是代码部分

DisplayTimeAxisOnScroView timeAxis = findViewById(R.id.fragment_bdz_information_time_axis);
//这是标题
timeAxis.setTitle("标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏");//设置标题//随便造点数据
List<TimeAxis> timeAxisList = new ArrayList<>();timeAxis.setTitle("标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏");for (int i=0;i<5;i++){TimeAxis timeAxis2 = new TimeAxis();timeAxis2.title = i+"小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题";timeAxis2.text = i+"正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文";timeAxis2.date = i+"2022 04 05 15:58";//设置图片数据，图片数据是我从服务器获取的，请自行获取图片数据//timeAxis2.images = images;timeAxisList.add(timeAxis2);}//设置展示数据timeAxis.setTimeAxes(timeAxisList);

6.其他moudle

自定义时间轴显示内容TimeAxis

package com.clc.mystyle.custom.moudle;import com.clc.mystyle.custom.adapter.MyImages;import java.util.List;public class TimeAxis {public String text;public String title;public String date;public List<MyImages> images;
}

自定义图片moudle

package com.clc.mystyle.custom.adapter;import android.net.Uri;import java.net.URL;public class MyImages {public Uri uri;//图片Uripublic int sqlId;//数据库图片IDpublic String name;//图片名称public String uploadName;//图片上传名称public String path;//图片全路径public String type;//图片类型public int width;//图片宽度public int height;//图片高度public long size;//图片文件大小，单位：Bytespublic int imageType;//图片类型  0:本地图片  1：图片url链接  2:本地图片idpublic URL url; //弃用public String urlPath; //这个里面放入可直接访问图片的URL链接public long paiSheTime;//拍摄日期public int iamgeId;//用来标记是第几个图片}

总结

以上就是所有的啦~

Android时间轴，RecyclerView实现相关推荐

Android 时间轴
效果图: 数据是随便填的,显得有点乱,但是不影响效果.实现方面主要是用ListView来实现,主要是根据ListView的item位置与上一条数据进行比较,来控制时间的显示隐藏效果.思路很简单,下面看 ...
android时间轴折线图,echarts时间轴折线图
当使用echarts折线图时,每个数据会打点,在数据量小的时候,美观又快捷,但是当数据量过大时,会非常的卡,以及不美观例如: series: { symbol:'circle', } > EC ...
Android 时间轴的实现
时间轴时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴(如图),想必大家都不陌生. 时间轴的初探初次见到这种UI,感觉整个布局 ...
Android时间轴(Timeline)效果的实现
1.时间轴效果我们要实现的时间轴效果如下图所示,这是锤子手机的查看物流信息界面的截图. 2.主要布局的实现在TraceActivity关联的布局文件activity_trace.xml中放置一个L ...
android时间轴折线图,带时间轴的折线图
8.20折线图数据 click document.getElementById('btn').οnclick=function() { // 基于准备好的dom,初始化echarts实例 var my ...
android时间轴左右交叉布局,快速简单的定制一个时间轴布局（LinearLayout）
github: 先上图: 很多情况下,我们都会遇到需要类似于时间轴的一个布局,网上也有很多,但是很多情况下我们其实并不需要那么多库,毕竟64k限制就在那,不管我们用还是不用,它依然在那... 而且更多 ...
android如何动态显示时间轴,Android时间轴的实现
做项目的过程中呢,有个需求,要做出一个跟时间轴差不多的效果的页面,于是找了部分资料,基本上都是用ExpandableListView来实现这一效果的,于是开始着手了,我也要开始写我的项目了,先写个De ...
android 时间轴动画教程,android 时间轴（listview实现）源码
l 目录 0 2014-03-28 11:04 TimelineText\assets\ 目录 0 2014-03-28 11:04 TimelineT ...
android列表时间轴,Android实现列表时间轴
本文实例为大家分享了Android列表时间轴展示的具体代码,供大家参考,具体内容如下实现的效果图如下: 实现的方式是利用recycleview的ItemDecoration这个抽象类,就是我们经常用 ...
android listview 不显示_Android使用ExpandableListview实现时间轴
背景公司新项目中有一个功能要实现时间轴效果,网上也找了很多教程和Demo,但都不是我想要的,大部分用的是RecyclerView实现的,但这些都是一层的数据结构,但我需要的是两层的结构,用Recyc ...

Android时间轴，RecyclerView实现

文章目录

前言