android 时间轴 listview,android 时间轴listview的UI界面实现

1.效果图

2. 实现方式

使用listview，需要处理item的view，分为三种处理(在adapter中处理)：

第一条item ：圈-直线

最后一条item ：直线-圈

其他item：直线-圈-直线

3.code

布局文件：

//activity_main.xml

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:background="@color/colorAccent"

tools:context="app.oradt.szm.com.mypage.MainActivity">

android:id="@+id/list_time"

android:layout_width="match_parent"

android:cacheColorHint="@null"

android:divider="@null"

android:dividerHeight="0dp"

android:scrollbars="none"

android:listSelector="@android:color/transparent"

android:layout_height="match_parent" />

在drawable文件下放圆圈的xml文件：

android:shape="oval">

android:width="3dp"

android:color="#ffffff" />

android:width="15dp"

android:height="15dp" />

item布局文件：

android:layout_width="match_parent"

android:layout_height="60dp"

android:orientation="horizontal">

android:id="@+id/time_tv"

android:layout_width="wrap_content"

android:layout_height="60dp"

android:gravity="center_vertical"

android:textSize="16dp" />

android:layout_width="40dp"

android:layout_height="match_parent">

android:id="@+id/line_up"

android:layout_width="4dp"

android:layout_height="match_parent"

android:layout_above="@+id/quan"

android:layout_centerHorizontal="true"

android:layout_marginBottom="-2dp"

android:background="#fff" />

android:id="@+id/quan"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:src="@drawable/quan_item" />

android:id="@+id/line_dowm"

android:layout_width="4dp"

android:layout_height="match_parent"

android:layout_below="@+id/quan"

android:layout_centerHorizontal="true"

android:layout_marginTop="-2dp"

android:background="#fff" />

android:id="@+id/msg_tv"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_marginLeft="20dp"

android:gravity="center_vertical"

android:textSize="25dp" />

adapter中处理第一个和最后一个的显示方式：

public class MyAdapter extends BaseAdapter {

private List mList;

private Context mContext;

public MyAdapter(Context context, List mListBean) {

this.mList = mListBean;

this.mContext = context;

}

@Override

public int getCount() {

return mList.size();

}

@Override

public Object getItem(int position) {

return mList.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder;

if (convertView == null) {

holder = new ViewHolder();

convertView = View.inflate(mContext, R.layout.list_item, null);

holder.time = (TextView) convertView.findViewById(R.id.time_tv);

holder.msg = (TextView) convertView.findViewById(R.id.msg_tv);

holder.up = (View) convertView.findViewById(R.id.line_up);

holder.down = (View) convertView.findViewById(R.id.line_dowm);

holder.quan = (ImageView) convertView.findViewById(R.id.quan);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

if (position == 0) {//第一条隐藏上边的线

holder.up.setVisibility(View.INVISIBLE);

} else if (position == mList.size() - 1) {//最后一条影藏下边的线

holder.down.setVisibility(View.INVISIBLE);

} else {

holder.up.setVisibility(View.VISIBLE);

holder.down.setVisibility(View.VISIBLE);

}

SimpleDateFormat simpleDateFormat = new SimpleDateFormat("MM-dd hh:mm:ss");

String time = simpleDateFormat.format(new Date(System.currentTimeMillis()));

String msg = mList.get(position);

holder.time.setText(time);

holder.msg.setText(msg);

return convertView;

}

private static class ViewHolder {

private TextView time;

private TextView msg;

private View up;

private View down;

private ImageView quan;

}

}

最后一哆嗦出效果：

public class MainActivity extends AppCompatActivity {

private ListView mListView;

private List mListBean;

private MyAdapter mAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mListView = (ListView) findViewById(R.id.list_time);

mListBean = new ArrayList();

for (int i = 0; i < 9; i++) {

mListBean.add("数据第" + i + "条");

}

mAdapter = new MyAdapter(this, mListBean);

mListView.setAdapter(mAdapter);

}

}