自定义 View 结合 RecyclerView 实现时光轴效果

3. 重写 onMeasure 方法

自定义控件通常需要重写 onMeasure 方法。这里需要对 wrap_content 的情况进行特殊处理，确保控件能根据内容正确测量自身大小。

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    // 计算默认宽高，基于圆形节点大小和 Padding
    int w = mTimeLineImageSize + getPaddingLeft() + getPaddingRight();
    int h = mTimeLineImageSize + 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);
    }
}

4. 重写 onDraw 方法

在 onDraw 中绘制线条和圆形节点。注意先设置好 Drawable 的 Bounds。

@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. 重写 onSizeChanged 方法

当视图尺寸改变时，需要重新计算各个 Drawable 的位置和范围（Bounds），以确保绘制位置准确。

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    int paddingLeft = getPaddingLeft();
    int paddingRight = getPaddingRight();
    int paddingTop = getPaddingTop();
    int paddingBottom = getPaddingBottom();
    
    int childWidth = w - paddingLeft - paddingRight;
    int childHeight = h - paddingTop - paddingBottom;

    // 限制圆形节点最大不超过父容器可用区域
    mTimeLineImageSize = Math.min(mTimeLineImageSize, Math.min(childHeight, childWidth));
    
    Rect bounds = new Rect();
    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 = bounds.centerX() - (lineWidth >> 1);
        mBeginLine.setBounds(lineLeft, 0, lineLeft + lineWidth, bounds.top);
    }
    // 设置下线条范围
    if (mEndLine != null) {
        int lineLeft = bounds.centerX() - (lineWidth >> 1);
        mEndLine.setBounds(lineLeft, bounds.bottom, lineLeft + lineWidth, h);
    }
}

注意：mBeginLine 的长度实际上对应 paddingTop 的高度，mEndLine 对应 paddingBottom 的高度。因此在使用该控件时，通常建议设置 paddingTop 和 paddingBottom。

6. 布局使用

在 RecyclerView 的 Item 布局中使用该控件。多个 Item 拼接起来就是一条时光轴。

<com.example.timelinedemo.TimeLine
    android: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:timeLineImage="@drawable/timeline_marker"
    app:timeLineImageSize="24dp" />

注意事项：父布局建议使用 LinearLayout 且高度模式设为 wrap_content。如果 TextView 设置了较大的 paddingTop，需确保父容器高度足够包裹 TimeLine 控件，否则可能导致 TimeLine 不可见。

7. RecyclerView Adapter 适配逻辑

RecyclerView 的 Adapter 需要处理四种情况：第一条、最后一条、中间项、以及只有一条数据的情况。根据这些状态动态控制线条的显示与隐藏。

public class TimeLineAdapter extends RecyclerView.Adapter<TimeLineAdapter.ViewHolder> {
    private List<TimeLineItem> datas;

    public TimeLineAdapter(List<TimeLineItem> datas) {
        this.datas = datas;
    }

    @Override
    public 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);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        TimeLineItem timeLineItem = datas.get(position);
        holder.tv_name.setText(timeLineItem.getTimeLineName());
    }

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

    @Override
    public 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; // 中间
        }
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        private TextView tv_name;
        private TimeLine timeLine;

        public ViewHolder(View itemView, Context context, int viewType) {
            super(itemView);
            tv_name = itemView.findViewById(R.id.name);
            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);
            }
        }
    }

    static class TimeLineItemType {
        public final static int NORMAL = 0;
        public final static int START = 1;
        public final static int END = 2;
        public final static int ATOM = 3;
    }
}

8. MainActivity 初始化

public class MainActivity extends AppCompatActivity {
    private List<TimeLineItem> mDatas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        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 的时光轴效果。核心在于自定义 View 对线条和圆点的精确绘制，以及在 Adapter 中根据不同位置状态动态调整 UI 表现。这种方案灵活性强，易于扩展其他样式，适用于各种时间线展示场景。

在实际开发中，建议将自定义 View 封装为库组件，方便在不同项目中复用。同时注意性能优化，避免在 onDraw 中进行过多的对象创建操作。