教你3分钟了解Android 简易时间轴的实现方法

一.有段时间没更了，因为一直在思索，应该写点什么，真的是无比纠结。这一回，就给大家分享一款简便好用的，小编自制的土晾时间轴。

附上XML预览图：

效果图 注：小黄鸭不是效果哈，是为了保护个人隐私P上去的：

1.新建一个自定义控件：

public class WorkExcView extends LinearLayout {
private TextView dataLeft;
private TextView dataRight;
private TextView company;
private TextView job;
private TextView jobAsses;
private TextView xiTong;
private TextView ziTian;
private LinearLayout jobContentContainer;
private TextView jobContent;
private LinearLayout commentContainer;
private LinearLayout nianContentContainer;
private TextView nianContent;
private LinearLayout base;
private LinearLayout yueXingContainer;
private TextView yueContent;
private LinearLayout nianXingContainer;
private TextView yueMoreContent;
private TextView nianMoreContent;
private String company_id;

public WorkExcView(Context context) {
 this(context,null);
}

public WorkExcView(Context context, AttributeSet attrs) {
 super(context, attrs);
 init();
}

private void init() {
 View inflate = View.inflate(getContext(), R.layout.activity_four_workexcview, this);
 dataLeft = (TextView) inflate.findViewById(R.id.workexcview_data_left);
 dataRight= (TextView) inflate.findViewById(R.id.workexcview_data_right);
 company = (TextView) inflate.findViewById(R.id.workexcview_company);
 job = (TextView) inflate.findViewById(R.id.workexcview_job);
 jobAsses = (TextView) inflate.findViewById(R.id.workexcview__job_asses);
 xiTong = (TextView) inflate.findViewById(R.id.workexcview_xitong);
 ziTian = (TextView) inflate.findViewById(R.id.workexcview_zitian);
 jobContent = (TextView) inflate.findViewById(R.id.workexcview_jobcontent);
 nianContent = (TextView) inflate.findViewById(R.id.workexcview_niancontent);
 jobContentContainer = (LinearLayout)inflate.findViewById(R.id.workexcview_jobcontent_container);
 commentContainer = (LinearLayout)inflate.findViewById(R.id.workexcview__comment_container);
 nianContentContainer= (LinearLayout)inflate.findViewById(R.id.workexcview__niancontent_container);
 base = (LinearLayout)inflate.findViewById(R.id.workexcview__base);
 yueXingContainer = (LinearLayout)inflate.findViewById(R.id.workexcview_yuexing_container);
 yueContent = (TextView)inflate.findViewById(R.id.workexcview_yuecontent);
 nianXingContainer = (LinearLayout)inflate.findViewById(R.id.workexcview_nianxing_container);
 yueMoreContent = (TextView)inflate.findViewById(R.id.workexcview_yuecontentmore);
 nianMoreContent = (TextView)inflate.findViewById(R.id.workexcview_niancontentmore);
}

public void initData(final FourBean.JobsBean jobsBean) {
  //赋值代码
}

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="vertical"
android:id="@+id/workexcview__base"
android:paddingLeft="8dp">

<RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">

<ImageView
   android:id="@+id/workexcview_landian"
   android:layout_width="15dp"
   android:layout_height="15dp"
   android:layout_centerVertical="true"
   android:src="@mipmap/landian" />

<TextView
   android:id="@+id/workexcview_data_left"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerVertical="true"
   android:layout_marginLeft="3dp"
   android:layout_toRightOf="@+id/workexcview_landian"
   android:text="2016.03"
   android:textColor="@color/text"
   android:textSize="15sp" />

<TextView
   android:id="@+id/workexcview__data_zhong"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_toRightOf="@id/workexcview_data_left"
   android:text=" —— "
   android:textColor="@color/text" />

<TextView
   android:id="@+id/workexcview_data_right"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerVertical="true"
   android:layout_toRightOf="@+id/workexcview__data_zhong"
   android:text="2016.03"
   android:textColor="@color/text"
   android:textSize="15sp" />

<TextView
   android:id="@+id/workexcview_zitian"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:background="@drawable/four_select"
   android:padding="4dp"
   android:paddingRight="6dp"
   android:text="自填"
   android:textColor="@color/red"
   android:textSize="12sp"
   android:visibility="gone" />

<!--    <ImageView
       android:id="@+id/workexcview_xitong"
       android:layout_width="40dp"
       android:layout_height="20dp"
       android:layout_alignParentRight="true"
       android:layout_centerVertical="true"
       android:paddingRight="10dp"
       android:src="@mipmap/xitong"
       android:visibility="gone" />-->
 <TextView
   android:id="@+id/workexcview_xitong"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:background="@drawable/textview_shape"
   android:padding="4dp"
   android:paddingRight="6dp"
   android:text="系统"
   android:textColor="@color/holo_blue_light"
   android:textSize="12sp"
   android:visibility="gone" />

<RelativeLayout
   android:id="@+id/four_setting_workexc_container"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:visibility="gone">

<TextView
     android:id="@+id/four_setting_workexc_logo"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentRight="true"
     android:layout_centerVertical="true"
     android:text="编辑"
     android:textColor="@android:color/holo_blue_light"
     android:textSize="16sp" />

<ImageView
     android:layout_width="20dp"
     android:layout_height="20dp"
     android:layout_centerVertical="true"
     android:layout_toLeftOf="@+id/four_setting_workexc_logo"
     android:src="@drawable/xierijidianji3x" />
 </RelativeLayout>
</RelativeLayout>

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

<RelativeLayout
   android:layout_width="wrap_content"
   android:layout_height="match_parent">

<TextView
     android:layout_width="1dp"
     android:layout_height="match_parent"
     android:layout_marginLeft="7dp"
     android:background="@color/black" />

</RelativeLayout>

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

<RelativeLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:padding="8dp">

<TextView
       android:id="@+id/workexcview_company"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:text="某某公司"
       android:textColor="@color/text"
       android:textSize="14sp" />

<TextView
       android:id="@+id/workexcview_company_zhong"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:layout_toRightOf="@id/workexcview_company"
       android:text=" / "
       android:textColor="@color/text"
       android:textSize="14sp" />

<TextView
       android:id="@+id/workexcview_job"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:layout_toRightOf="@id/workexcview_company_zhong"
       android:text="web前段工程师"
       android:textColor="@color/text"
       android:textSize="14sp" />

</RelativeLayout>

<LinearLayout
     android:id="@+id/workexcview_jobcontent_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginLeft="5dp"
     android:orientation="vertical"
     android:padding="8dp">

<TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="工作描述："
       android:textColor="@color/text" />

<TextView
       android:id="@+id/workexcview_jobcontent"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="3dp"
       android:text="巴拉巴拉" />

</LinearLayout>
   <LinearLayout
     android:id="@+id/workexcview__yuecontent_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginLeft="5dp"
     android:orientation="vertical"
     android:padding="8dp"
     android:visibility="visible">

<RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <TextView
         android:id="@+id/workexcview_yuecontent_logo"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerVertical="true"
         android:text="最新月评价："
         android:textColor="@color/text" />
       <LinearLayout
         android:layout_centerVertical="true"
         android:id="@+id/workexcview_yuexing_container"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:layout_toRightOf="@+id/workexcview_yuecontent_logo"
         >

</LinearLayout>
       <TextView
         android:layout_alignParentRight="true"
         android:id="@+id/workexcview_yuecontentmore"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="3dp"
         android:gravity="center"
         android:padding="2dp"
         android:layout_centerVertical="true"
         android:background="@drawable/textview_shape"
         android:text="更多"
         android:textColor="@color/blue_title" />
     </RelativeLayout>

<TextView
       android:id="@+id/workexcview_yuecontent"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="3dp"
       android:text="无"
       android:textColor="@color/gray" />

</LinearLayout>
   <LinearLayout
     android:id="@+id/workexcview__niancontent_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginLeft="5dp"
     android:orientation="vertical"
     android:padding="8dp"
     android:visibility="visible">

<RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <TextView
         android:id="@+id/workexcview_niancontent_logo"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerVertical="true"
         android:text="最新年评价："
         android:textColor="@color/text" />
       <LinearLayout
         android:layout_centerVertical="true"
         android:id="@+id/workexcview_nianxing_container"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:layout_toRightOf="@id/workexcview_niancontent_logo"
         >

</LinearLayout>
       <TextView
         android:id="@+id/workexcview_niancontentmore"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="3dp"
         android:padding="2dp"
         android:layout_centerVertical="true"
         android:background="@drawable/textview_shape"
         android:text="更多"
         android:layout_alignParentRight="true"
         android:textColor="@color/blue_title" />
     </RelativeLayout>

<TextView
       android:id="@+id/workexcview_niancontent"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="3dp"
       android:text="无"
       android:textColor="@color/gray" />

</LinearLayout>

<LinearLayout
     android:id="@+id/workexcview__comment_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_margin="5dp"

android:orientation="vertical"
     android:padding="8dp"
     android:visibility="visible">

<TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="离职评价："
       android:textColor="@color/text" />

<TextView
       android:id="@+id/workexcview__job_asses"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="3dp"
       android:text=""
       android:textColor="@color/gray" />
   </LinearLayout>

</LinearLayout>
</LinearLayout>
</LinearLayout>      

2.使用方式：其实很简单，直接for循环new出来赋值就行啦，因为本身就是一个自定义控件~

 fourWorkexcContainer.removeAllViews();
 for (int i = 0; i < jobs.size(); i++) {
   FourBean.JobsBean jobsBean = jobs.get(i);
   WorkExcView workExcView = new WorkExcView(getContext());
   workExcView.initData(jobsBean);
   fourWorkexcContainer.addView(workExcView);
 }

3.适合自己的才是最好的，大家可以根据自己的情况进行修改，也可以查阅更多的资料，以上只是一种实现的方式，随手分享。

来源：http://www.jianshu.com/p/a66ba20e1df5?utm_source=tuicool&utm_medium=referral