Android开发丶历史界面时光轴的实现

最新推荐文章于 2021-05-29 03:36:06 发布

Fantasychong丶

最新推荐文章于 2021-05-29 03:36:06 发布

阅读量883

点赞数 2

分类专栏： Android 文章标签：时光轴

本文链接：https://blog.csdn.net/u014078990/article/details/79377871

版权

Android 专栏收录该内容

34 篇文章 2 订阅

订阅专栏

一般在资讯类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();
        }
    }
}

至此就全部完成了！

源码下载：点击打开链接

Fantasychong丶

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Android开发丶历史界面时光轴的实现

一般在资讯类app的项目需求中，我们会经常面临着历史界面，呈现浏览记录等等，一般在每条资讯上面都会出现一个时间，当我看到时光轴这种界面，瞬间被吸引到了，觉得这么炫酷的效果，是不是用的什么开源库或者控件，于是在网上搜索了大量资料，但是发现却比较匮乏，也许是我搜索的方式不对吧哈哈~~后来开发技能越加熟练后，仔细分析了该界面，发现其实不是什么太复杂的东西，手动就可以自己画一个，决定整理了下发出来。我们先...
复制链接

扫一扫