Android时间轴，RecyclerView实现

weixin_41782226

已于 2022-04-15 13:08:52 修改

阅读量3.2k

点赞数

分类专栏： Android工具文章标签： android java

于 2022-04-15 12:58:43 首次发布

本文链接：https://blog.csdn.net/weixin_41782226/article/details/124192021

版权

Android工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、功能
二、使用步骤
总结

前言

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

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

一、功能

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

二、使用步骤

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"
    >

    <ImageView
        android: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
    @Override
    public OnePictureViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        OnePictureViewHolder viewHolder = new OnePictureViewHolder(LayoutInflater.from(context).inflate(R.layout.custom_one_picture_recycler,parent,false));
        //这里可给给图片设置统一的跳转，但是我不知道怎么获取到当前点击的是第几个图片，所以并没有设置，知道的大神，请自行修改，顺便告诉我一下  QAQ
        return viewHolder;
    }

    @Override
    public 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() {
            @Override
            public void onClick(View view) {
                if (pictureClickLintener != null) {
                    pictureClickLintener.onPictureClick(position);
                } 
            }
        });
    }

    @Override
    public 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"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
//这个是左侧事件轴的定义，不符合您要求的请自行修改
    <LinearLayout
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        >
        <TextView
            android:layout_width="2dp"
            android:layout_height="5dp"
            android:background="@drawable/custom_style_button_grey_grey"
            android:shadowRadius="20"
            />
        <TextView
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/adpater_time_axis_radiu"
            android:shadowRadius="20"
            />
        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@drawable/custom_style_button_grey_grey"
            android:shadowRadius="20"
            />
    </LinearLayout>

//这里是右侧文本、标题，图片展示的
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >

            <TextView
                android: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"
                />
            <TextView
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#A6A6A6"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="10dp"
                />

            <TextView
                android: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>



        <TextView
            android: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.RecyclerView
            android: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
    @Override
    public 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;
    }

    @Override
    public 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() {
            @Override
            public void onPictureClick(int id) {
                //你的图片点击事件
            }
        }));
    }

    @Override
    public 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"?>
<LinearLayout
    xmlns: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"
    >

    <TextView
        android: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.RecyclerView
        android: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.DisplayTimeAxisOnScroView
               android: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;//图片Uri
    public int sqlId;//数据库图片ID
    public String name;//图片名称
    public String uploadName;//图片上传名称
    public String path;//图片全路径
    public String type;//图片类型
    public int width;//图片宽度
    public int height;//图片高度
    public long size;//图片文件大小，单位：Bytes
    public int imageType;//图片类型  0:本地图片  1：图片url链接  2:本地图片id
    public URL url; //弃用
    public String urlPath; //这个里面放入可直接访问图片的URL链接
    public long paiSheTime;//拍摄日期
    public int iamgeId;//用来标记是第几个图片



}

总结

以上就是所有的啦~

weixin_41782226

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Android时间轴，RecyclerView实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、功能二、使用步骤1.引入库2.图片显示RecyclerView3.单个时间轴内容展示4.自定义时间轴控件5.应用6.其他moudle总结前言最近项目需要有个时间轴记录一下进程，研究了一下，有何不足之处望各路大神指正.废话不多说，先上效果图提示：以下是本篇文章正文内容，下面案例可供参考一、功能大标题、小标题、正文、图片显示二、使用步骤1.引入库不需要引入任何库，原生代码RecyclerView使用的.
复制链接

扫一扫