Android TimeLine 时间节点轴的实现

效果图

具体实现 (RecyclerView)

1.Adapter

package com.haoren.timeline;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

/**
 * Created by Hh on 2017/3/8.
 */
public class TimeLineAdapter extends RecyclerView.Adapter<TimeLineAdapter.HorizontalVh> {

    private Context context;


    //时间节点数
    private int nodeNum = 0;

    //当前到达节点
    private int currentNode = 1;


    public TimeLineAdapter(Context context, int nodeNum) {
        this.context = context;
        this.nodeNum = nodeNum;
    }

    @Override
    public HorizontalVh onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.time_line, null, false);
        HorizontalVh vh = new HorizontalVh(view);
        return vh;
    }

    @Override
    public void onBindViewHolder(HorizontalVh holder, int position) {
        if (position < currentNode) {
            //当前节点之前的全部设为已经经过
            holder.point.setImageResource(R.mipmap.point_select);
            holder.lineLeft.setBackgroundResource(R.color.colorPrimary);
            holder.lineRight.setBackgroundResource(R.color.colorPrimary);
        }

        // 去掉左右两头的分支
        if (position == 0) {
            holder.lineLeft.setVisibility(View.INVISIBLE);
        }
        if (position == nodeNum - 1) {
            holder.lineRight.setVisibility(View.INVISIBLE);
        }
    }

    @Override
    public int getItemCount() {
        return nodeNum;
    }

    /**
     * 设置当前节点
     * @param currentNode
     */
    public void setCurrentNode(int currentNode) {
        this.currentNode = currentNode;
        this.notifyDataSetChanged();
    }

    class HorizontalVh extends RecyclerView.ViewHolder {
        private ImageView point;

        private View lineLeft, lineRight;


        public HorizontalVh(View itemView) {
            super(itemView);
            this.point = (ImageView) itemView.findViewById(R.id.point);
            this.lineLeft = itemView.findViewById(R.id.line_left);
            this.lineRight = itemView.findViewById(R.id.line_right);
        }
    }
}

1. item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="50dp"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_marginTop="20dp"
        android:layout_width="40dp"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/line_left"
            android:layout_width="20dp"
            android:layout_height="1dp"
            android:layout_centerVertical="true"
            android:background="#A6A6A6" />


        <View
            android:id="@+id/line_right"
            android:layout_width="20dp"
            android:layout_height="1dp"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/line_left"
            android:background="#A6A6A6" />

        <ImageView
            android:id="@+id/point"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_centerHorizontal="true"
            android:scaleType="center"
            android:src="@mipmap/point_normal" />
    RelativeLayout>

    <TextView
        android:id="@+id/show_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="node"
        android:textSize="11sp" />
LinearLayout>

1. MainActivity

package com.haoren.timeline;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;

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

        mRecyclerView = (RecyclerView) findViewById(R.id.mRecyclerView);

        initAdapter();
    }




    private void initAdapter() {
        TimeLineAdapter adapter = new TimeLineAdapter(this, 8);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
        mRecyclerView.setAdapter(adapter);
        adapter.setCurrentNode(5);
    }
}