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

自定义 View 结合 RecyclerView 实现时光轴效果 | 极客日志

<declare-styleable name="TimeLine">
    <attr name="beginLine" format="reference" />
    <attr name="endLine" format="reference" />
    <attr name="lineWidth" format="dimension" />
    <attr name="timeLineImage" format="reference" />
    <attr name="timeLineImageSize" format="dimension" />
</declare-styleable>

public class TimeLine extends 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();
    }
}

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);
    }
}

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

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

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

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;
    }
}

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("前任生日"));
    }
}

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

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

更多推荐文章

相关免费在线工具

1. 自定义属性

2. 自定义 TimeLine 控件

3. 重写 onMeasure 方法

4. 重写 onDraw 方法

5. 重写 onSizeChanged 方法

6. 布局使用

7. RecyclerView Adapter 适配逻辑

8. MainActivity 初始化

总结

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

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

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

1. 自定义属性

2. 自定义 TimeLine 控件

3. 重写 onMeasure 方法

4. 重写 onDraw 方法

5. 重写 onSizeChanged 方法

6. 布局使用

7. RecyclerView Adapter 适配逻辑

8. MainActivity 初始化

总结