Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline

简介: Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline在Android开发中时间线/时间轴/时光轴现在很常见,尤其涉及到进度、物流信息、进展和时态发展的图表信息等,时间线/时间轴/时光轴生动表现这一类需求。
Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline


在Android开发中时间线/时间轴/时光轴现在很常见,尤其涉及到进度、物流信息、进展和时态发展的图表信息等,时间线/时间轴/时光轴生动表现这一类需求。
在RecyclerView的基础上,我使用ItemDecoration刻画一条在RecyclerView左侧的时间线/时间轴/时光轴。运行结果如图:


在顶部显示一张与众不同的icon,区别表示事件或者进展已经完成。
下面是代码。

RVActivity.java是本例运行的Activity:

package zhangphil.test;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class RVActivity extends AppCompatActivity {
    RecyclerViewAdapter mAdapter;
    private ArrayList<Integer> mItems;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.rv_activity);

        mItems = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            mItems.add(i);
        }

        RecyclerView mRecyclerView = findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(layoutManager);

        mAdapter = new RecyclerViewAdapter();
        mRecyclerView.setAdapter(mAdapter);

        mRecyclerView.addItemDecoration(new RVItemDecoration(getApplicationContext()));
    }

    private class RecyclerViewAdapter extends RecyclerView.Adapter<MyVH> {

        @NonNull
        @Override
        public MyVH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.rv_item, parent, false);
            return new MyVH(view);
        }

        @Override
        public void onBindViewHolder(@NonNull MyVH holder, int position) {
            holder.title.setText("时间:" + position);
            holder.content.setText("事件进度 -> " + mItems.get(position));
            holder.indicator_icon.setImageResource(position == 0 ? R.mipmap.ic_launcher : R.drawable.ic_launcher_background);
        }

        @Override
        public int getItemCount() {
            return mItems.size();
        }
    }

    private class MyVH extends RecyclerView.ViewHolder {
        public TextView title;
        public TextView content;
        public ImageView indicator_icon;

        public MyVH(View itemView) {
            super(itemView);
            title = itemView.findViewById(R.id.title);
            content = itemView.findViewById(R.id.content);
            indicator_icon = itemView.findViewById(R.id.indicator_icon);
        }
    }

    private class RVItemDecoration extends RecyclerView.ItemDecoration {

        private Paint mPaint;

        public RVItemDecoration(Context context) {
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setStrokeWidth(2); //时间轴线的宽度。
            mPaint.setColor(Color.BLUE); //时间轴线的颜色。
        }

        @Override
        public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
            super.onDraw(c, parent, state);

            int childCount = parent.getChildCount();

            for (int i = 0; i < childCount; i++) {
                View view = parent.getChildAt(i);

                //int index = parent.getChildAdapterPosition(view);

                float left = dip2px(getApplicationContext(), 14 + 10);
                float bottom = view.getBottom();

                c.drawLine(left, dip2px(getApplicationContext(), (50 - 20) / 2), left, bottom, mPaint);
            }
        }
    }

    public static int dip2px(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}


其中R.layout.rv_activity.xml:

<?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="match_parent"
    android:orientation="horizontal">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

其实就只有一个Android的RecyclerView。


RecyclerView的Adapter用到的item布局R.layout.rv_item.xml:

<?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:paddingLeft="14dp"
    android:paddingRight="14dp">

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

        <ImageView
            android:id="@+id/indicator_icon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:scaleType="centerInside"
            android:src="@drawable/ic_launcher_background" />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginLeft="10dp"
            android:background="@android:color/holo_blue_bright"
            android:gravity="left|center_vertical"
            android:text="时间"
            android:textColor="@android:color/white"
            android:textSize="26dp" />

    </LinearLayout>

    <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="6dp"
        android:layout_marginLeft="30dp"
        android:text="事件进度"
        android:textColor="@android:color/darker_gray"
        android:textSize="14dp" />

</LinearLayout>


相关文章
|
2月前
|
Android开发 开发者 索引
Android实战经验之如何使用DiffUtil提升RecyclerView的刷新性能
本文介绍如何使用 `DiffUtil` 实现 `RecyclerView` 数据集的高效更新,避免不必要的全局刷新,尤其适用于处理大量数据场景。通过定义 `DiffUtil.Callback`、计算差异并应用到适配器,可以显著提升性能。同时,文章还列举了常见错误及原因,帮助开发者避免陷阱。
141 9
|
2月前
|
存储 缓存 Android开发
Android RecyclerView 缓存机制深度解析与面试题
本文首发于公众号“AntDream”,详细解析了 `RecyclerView` 的缓存机制,包括多级缓存的原理与流程,并提供了常见面试题及答案。通过本文,你将深入了解 `RecyclerView` 的高性能秘诀,提升列表和网格的开发技能。
65 8
|
3月前
|
存储 Android开发 开发者
Android项目架构设计问题之定义RecyclerView的ViewHolder如何解决
Android项目架构设计问题之定义RecyclerView的ViewHolder如何解决
41 0
|
3月前
|
数据可视化 Java 数据挖掘
Android项目架构设计问题之设置RecyclerView的LayoutManager如何解决
Android项目架构设计问题之设置RecyclerView的LayoutManager如何解决
32 0
|
5月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
62 2
|
5月前
|
Android开发 Kotlin
Android面试题 之 Kotlin DataBinding 图片加载和绑定RecyclerView
本文介绍了如何在Android中使用DataBinding和BindingAdapter。示例展示了如何创建`MyBindingAdapter`,包含一个`setImage`方法来设置ImageView的图片。布局文件使用`&lt;data&gt;`标签定义变量,并通过`app:image`调用BindingAdapter。在Activity中设置变量值传递给Adapter处理。此外,还展示了如何在RecyclerView的Adapter中使用DataBinding,如`MyAdapter`,在子布局`item.xml`中绑定User对象到视图。关注公众号AntDream阅读更多内容。
94 1
|
5月前
|
XML Java Android开发
Android RecyclerView用代码动态设置item的selector
Android RecyclerView用代码动态设置item的selector
40 0
|
5月前
|
XML Android开发 UED
|
6月前
|
存储 缓存 Android开发
构建高效的Android应用:采用RecyclerView优化列表显示
【4月更文挑战第2天】 在移动开发领域,列表显示是最常见的用户界面组件之一。对于Android平台而言,RecyclerView因其高效、灵活的特点而备受开发者青睐。本文将深入探讨如何利用RecyclerView在Android应用中实现流畅的列表滚动,以及通过各种优化策略来提升性能和用户体验。我们将从基本概念出发,逐步展开如何自定义适配器、视图持有者,以及利用布局管理器来实现复杂的列表布局。此外,还将讨论如何通过异步加载、缓存机制和动态数据更新来进一步优化性能。
90 1
|
6月前
|
缓存 监控 Android开发
Android中的RecyclerView优化策略与实践
【4月更文挑战第5天】本文深入探讨了在安卓开发中,如何针对RecyclerView进行性能优化。通过分析常见的滚动卡顿、内存泄漏等问题,提出了相应的解决方案,并结合实际案例展示了优化过程。文章不仅涵盖了使用RecyclerView时应当遵循的最佳实践,还提供了高级技巧以供进阶开发者参考,旨在帮助读者构建更加流畅和高效的列表显示。