一般在资讯类app的项目需求中,我们会经常面临着历史界面,呈现浏览记录等等,一般在每条资讯上面都会出现一个时间,当我看到时光轴这种界面,瞬间被吸引到了,觉得这么炫酷的效果,是不是用的什么开源库或者控件,于是在网上搜索了大量资料,但是发现却比较匮乏,也许是我搜索的方式不对吧哈哈~~后来开发技能越加熟练后,仔细分析了该界面,发现其实不是什么太复杂的东西,手动就可以自己画一个,决定整理了下发出来。
我们先看看效果:
这些都是我手动添加的固定数据,用recyclerview+cardview来实现,除了大前天这个日期下有三条数据,其它日期都只有一条数据。
我们来看看实现步骤:
首先我们搭建主界面布局activity_main,没什么特别的,放一个recyclerview即可。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context="com.fantasychong.timeline0206.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/main_rv"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
接下来是比较重要也是繁琐的一步了,就是画recyclerview的item布局。
我们先分析下各部分是由什么组成的。
总体分为上下两个布局,上面的布局由左边两个view和右边的textView组成,左边两个view上面是一个imageview,下方是宽度为1px颜色为黄色的view。右边则是个黄色的textview。
下面的布局由左边的两个view和右边的cardview组成,左边两个view上面是一个黄色小点的imageview,下面是一个宽度为1px颜色为黄色的view,右边的cardview内部则是一图一文。
在一个日期下多条资讯的情况下,我们只需要判断当前位置的时间和上一个位置的时间相同,就把当前的上面包含时间的布局隐藏掉就OK。
item_main.xml的详细代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#f0f0f0"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/main_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="30dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="1dp"
android:src="@drawable/timeline_group_divider" />
<View
android:layout_width="1px"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="2dp"
android:background="#996600" />
</LinearLayout>
<TextView
android:id="@+id/main_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:layout_weight="1"
android:text="昨天"
android:textColor="#996600" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="30dp"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/template213_time_spot" />
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:background="#996600" />
</LinearLayout>
</RelativeLayout>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_marginRight="15dp"
android:layout_weight="1"
android:background="#fff"
android:layout_marginBottom="10dp"
android:elevation="5dp"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/main_pic"
android:layout_width="100dp"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@color/colorPrimaryDark"/>
<TextView
android:id="@+id/main_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="思念刮着背脊打着冷颤,眼神依旧为你而点燃"
android:padding="5dp"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
这样布局就画完了,接下来我们在主活动MainActivity里编辑。
这里最主要就是adapter的编辑了。给item各元素赋值时候,主要是时间这块。遵循上面所说的赋值原则。
@Override
public void onBindViewHolder(HistoryAdapter.ViewHolder holder, int position) {
holder.pic.setImageResource(historyList.get(position).getPic());
holder.title.setText(historyList.get(position).getTitle());
holder.time.setText(historyList.get(position).getTime());
if (position== 0){
holder.ll.setVisibility(View.VISIBLE);
} else if (historyList.get(position).getTime().equals(historyList.get(position- 1).getTime())){
holder.ll.setVisibility(View.GONE);
} else {
holder.ll.setVisibility(View.VISIBLE);
}
}
这里可见,当position为0也就是第一条item,时间所处的布局是正常显示的,当当前position和上一个position的时间相同时候,就把当前position的时间所处布局设置gone隐藏掉,其余正常显示。
MainActivity.java的详细代码:
package com.fantasychong.timeline0206;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import org.w3c.dom.Text;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView rv;
private List<HistoryBean> historyList= new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rv= findViewById(R.id.main_rv);
initData();
LinearLayoutManager manager= new LinearLayoutManager(this);
rv.setLayoutManager(manager);
HistoryAdapter adapter= new HistoryAdapter(historyList);
rv.setAdapter(adapter);
}
private void initData() {
for (int i= 0; i< 5; i++){
HistoryBean bean= new HistoryBean("昨天", R.drawable.pic11, "是你给了我一把伞,撑住倾盆洒落的孤单");
historyList.add(bean);
HistoryBean bean2= new HistoryBean("前天", R.drawable.pic15, "所以好像送你一弯河岸,洗涤腐蚀心灵的遗憾");
historyList.add(bean2);
HistoryBean bean3= new HistoryBean("大前天", R.drawable.pic13, "给你我所有的温暖,脱下唯一挡风的衣衫");
historyList.add(bean3);
HistoryBean bean4= new HistoryBean("大前天", R.drawable.pic17, "思念刮过背脊打着冷颤,眼神依旧为你而点燃");
historyList.add(bean4);
HistoryBean bean5= new HistoryBean("大前天", R.drawable.pic0, "我一直追寻着你心情的足迹,被所有的人误解都要理解你");
historyList.add(bean5);
HistoryBean bean6= new HistoryBean("01-11", R.drawable.pic16, "准备好等擦亮你,天际的浮云");
historyList.add(bean6);
}
}
class HistoryAdapter extends RecyclerView.Adapter<HistoryAdapter.ViewHolder>{
public HistoryAdapter(List<HistoryBean> historyBeanList) {
historyList= historyBeanList;
}
class ViewHolder extends RecyclerView.ViewHolder {
private final LinearLayout ll;
private final TextView time;
private final ImageView pic;
private final TextView title;
public ViewHolder(View itemView) {
super(itemView);
ll= itemView.findViewById(R.id.main_ll);
time= itemView.findViewById(R.id.main_time);
pic= itemView.findViewById(R.id.main_pic);
title= itemView.findViewById(R.id.main_title);
}
}
@Override
public HistoryAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view= LayoutInflater.from(getApplicationContext()).inflate(R.layout.item_main, null);
ViewHolder holder= new ViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(HistoryAdapter.ViewHolder holder, int position) {
holder.pic.setImageResource(historyList.get(position).getPic());
holder.title.setText(historyList.get(position).getTitle());
holder.time.setText(historyList.get(position).getTime());
if (position== 0){
holder.ll.setVisibility(View.VISIBLE);
} else if (historyList.get(position).getTime().equals(historyList.get(position- 1).getTime())){
holder.ll.setVisibility(View.GONE);
}else {
holder.ll.setVisibility(View.VISIBLE);
}
}
@Override
public int getItemCount() {
return historyList.size();
}
}
}
至此就全部完成了!