Kotlin 实现新闻时间轴效果

简介

最近做一个新闻列表功能时，设计师设计了一个时间轴新闻列表，同一个日期第一条显示月日，并且滑动到顶端时悬浮，效果如下：

效果图

看了效果之后，考虑过第一条可见悬停，发现右侧还有时间且可以看到整个滑动过程，所以这条方案就pass，还是使用最简单实现方式，悬浮的时间布局在Activity布局上。

实现

Activity布局

RecyclerView与时间空间叠加布局，LinearLayout包裹可以控制布局在父布局的位置，保证RecycleView第一个item与其重合，这样视觉看不出是同一个。

<?xml version="1.0" encoding="utf-8"?>
<com.scwang.smartrefresh.layout.SmartRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/refreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!--内容-->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rl_new"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!--悬浮时间控件-->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_10"
            android:layout_marginLeft="@dimen/dp_10"
            android:paddingTop="@dimen/dp_10">

            <include layout="@layout/item_time_layout" />
        </LinearLayout>

    </FrameLayout>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>

悬浮时间空间布局

悬浮控件可自定义不同颜色样式

<?xml version="1.0" encoding="utf-8"?>
<!--            时间框-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/time_layout"
    android:layout_width="@dimen/dp_30"
    android:layout_height="wrap_content"
    android:background="@drawable/time_bg_color"
    android:paddingStart="@dimen/dp_5"
    android:paddingEnd="@dimen/dp_5">

    <!--            日-->
    <TextView
        android:id="@+id/tv_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:maxLines="2"
        android:text="@string/defalut_"
        android:textColor="@color/colorAccent"
        android:textSize="@dimen/text_size_12"
        android:textStyle="bold" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_day"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-2dp">

        <!--                月-->
        <TextView
            android:id="@+id/tv_month"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="2"
            android:text="@string/defalut_"
            android:textColor="@color/colorAccent"
            android:textSize="@dimen/text_size_10" />

        <!--                月单位-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="2"
            android:text="@string/month"
            android:textColor="@color/colorAccent"
            android:textSize="@dimen/text_size_10" />
    </androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>

Adapter布局

其中父布局使用LinearLayout可以动态的根据子控件的内容宽度决定🔗线的长度，考虑item之间需用细线连接，父布局上下不能出现间隔样式。

<?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="wrap_content"
    android:layout_marginStart="@dimen/dp_10"
    android:layout_marginEnd="@dimen/dp_10"
    android:orientation="horizontal">

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

        <!-- 普通时间线-->
        <LinearLayout
            android:id="@+id/rl_line"
            android:layout_width="@dimen/dp_30"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <!--            上半部分竖线-->
            <View
                android:id="@+id/view_top"
                android:layout_width="@dimen/dp_1"
                android:layout_height="@dimen/dp_10"
                android:layout_gravity="center_horizontal"
                android:background="@color/colorAccent" />

            <!--            中间点-->
            <ImageView
                android:id="@+id/dot_img"
                android:layout_width="@dimen/dp_10"
                android:layout_height="@dimen/dp_10"
                android:layout_gravity="center_horizontal"
                android:contentDescription="@string/contentDescription"
                android:src="@drawable/ic_hongdian" />

            <!--下半部分竖线-->
            <View
                android:id="@+id/v_line"
                android:layout_width="@dimen/dp_1"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:background="@color/colorAccent" />

        </LinearLayout>

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/ll_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="-10dp"
            android:layout_marginLeft="-10dp"
            android:layout_marginTop="@dimen/dp_5"
            android:layout_toEndOf="@+id/rl_line"
            android:layout_toRightOf="@+id/rl_line"
            android:orientation="horizontal">
            <!--横向线-->
            <View
                android:id="@+id/view_line"
                android:layout_width="@dimen/dp_20"
                android:layout_height="@dimen/dp_1"
                android:layout_gravity="center_vertical"
                android:layout_toEndOf="@+id/dot_img"
                android:layout_toRightOf="@+id/dot_img"
                android:background="@color/colorAccent" />

            <!--详细时间-->
            <TextView
                android:id="@+id/tv_title_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@+id/view_line"
                android:layout_toRightOf="@+id/view_line"
                android:background="@drawable/shape_time_bg"
                android:gravity="center"
                android:paddingLeft="@dimen/dp_8"
                android:paddingTop="@dimen/dp_2"
                android:paddingRight="@dimen/dp_8"
                android:paddingBottom="@dimen/dp_2"
                android:text="@string/defalut_"
                android:textColor="@android:color/white"
                android:textSize="@dimen/text_size_10" />
        </androidx.appcompat.widget.LinearLayoutCompat>

        <!--            时间框-->
        <include layout="@layout/item_time_layout" />

        <!--    内容-->
        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ll_time"
            android:layout_marginStart="@dimen/dp_10"
            android:layout_marginLeft="@dimen/dp_10"
            android:layout_marginTop="@dimen/dp_5"
            android:layout_toEndOf="@+id/rl_line"
            android:layout_toRightOf="@+id/rl_line"
            android:orientation="vertical"
            android:paddingBottom="@dimen/dp_8">

            <!--        新闻标题-->
            <TextView
                android:textColor="@android:color/black"
                android:id="@+id/tv_news_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lineSpacingExtra="@dimen/dp_5"
                android:maxLines="2"
                android:textSize="@dimen/text_size_14" />

            <!--            底部详细信息-->
            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_5"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tv_tag"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="@dimen/dp_5"
                    android:layout_marginRight="@dimen/dp_5"
                    android:textSize="@dimen/text_size_12" />

                <TextView
                    android:id="@+id/tv_source"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="@dimen/dp_5"
                    android:layout_marginRight="@dimen/dp_5"
                    android:textSize="@dimen/text_size_12" />

                <TextView
                    android:id="@+id/tv_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/dp_5"
                    android:layout_marginLeft="@dimen/dp_5"
                    android:textSize="@dimen/text_size_12" />
            </androidx.appcompat.widget.LinearLayoutCompat>

            <!--        新闻图片-->
            <ImageView
                android:id="@+id/new_pic"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_80"
                android:layout_marginTop="@dimen/dp_8"
                android:contentDescription="@string/contentDescription"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher" />
        </androidx.appcompat.widget.LinearLayoutCompat>
    </RelativeLayout>
</LinearLayout>

Adapter数据绑定

这里我们为了简化adapter的使用，依赖

com.github.CymChad:BaseRecyclerViewAdapterHelper:3.0.0-beta11

在里面实现时间框的显示、隐藏，时间标签的颜色改变，条目内容的数据绑定，内容详情显示隐藏，图片显示

package com.zj.timeaxis

/**
 * 新闻适配器
 *
 * @author zj
 */
class NewsListAdapter(layoutResId: Int) :
    BaseQuickAdapter<NewsBean?, BaseViewHolder>(layoutResId) {
    @SuppressLint("SimpleDateFormat")
    var sdfDay = SimpleDateFormat("yyyy-MM-dd")
    @SuppressLint("SimpleDateFormat")
    var sdfHour = SimpleDateFormat("HH:mm:ss")


    override fun convert(helper: BaseViewHolder, item: NewsBean?) {
        item?.let {
            val position = helper.adapterPosition
            //前个条目时间
            val datePre: Long = data[Math.max(position - 1, 0)]!!.time
            //当前条目
            val date: Long = item.time

            val ca: Calendar = Calendar.getInstance()
            ca.timeInMillis = date

            //当前条目时间
            val caPre: Calendar = Calendar.getInstance()
            caPre.timeInMillis = datePre

            //item绑定数据
            helper.setText(R.id.tv_news_title, item.title)
                .setText(R.id.tv_title_time, sdfHour.format(ca.time))
                .setText(R.id.tv_source, item.source)

            val viewTop: View = helper.getView(R.id.view_top)
            val monthRl: RelativeLayout = helper.getView(R.id.time_layout)
            val tvDay: TextView = helper.getView(R.id.tv_day)
            val tvMonth: TextView = helper.getView(R.id.tv_month)
            val tvTAG: TextView = helper.getView(R.id.tv_tag)
            val titleTime: TextView = helper.getView(R.id.tv_title_time)
            if (0 == position) {
                //设置首个条目上间距
                helper.itemView.setPadding(0, ScreenUtil.dip2px(context, 10f), 0, 0)
                val color = ContextCompat.getColor(context, android.R.color.holo_red_light)
                tvTAG.setTextColor(color)
                tvTAG.text = "推荐"
                tvTAG.visibility = View.VISIBLE
                titleTime.setBackgroundResource(R.drawable.shape_time_bg)
            } else if (1 == position) {
                helper.itemView.setPadding(0, 0, 0, 0)
                val color = ContextCompat.getColor(context, android.R.color.holo_blue_bright)
                tvTAG.setTextColor(color)
                tvTAG.text = "热门"
                tvTAG.visibility = View.VISIBLE
                titleTime.setBackgroundResource(R.drawable.shape_time_bg_grey)
            } else { //防止复用设置间距
                helper.itemView.setPadding(0, 0, 0, 0)
                tvTAG.visibility = View.GONE
                titleTime.setBackgroundResource(R.drawable.shape_time_bg_grey)
            }

            //时间框绑定
            val dayInt = ca[Calendar.DATE]
            val day = if (dayInt < 10) "0$dayInt" else dayInt.toString()
            val monthInt = ca[Calendar.MONTH] + 1
            val month = monthInt.toString()

            if (0 == position) {
                //红点
                helper.setImageResource(R.id.dot_img, R.drawable.ic_hongdian)
                //上画线
                viewTop.visibility = View.INVISIBLE
                monthRl.visibility = View.VISIBLE
                tvDay.text = day
                tvMonth.text = month
            } else {
                viewTop.visibility = View.VISIBLE
                //判断前后时间是否一致
                val condition = TextUtils.equals(sdfDay.format(ca.time), sdfDay.format(caPre.time))
                if (condition) {
                    helper.setImageResource(R.id.dot_img, R.drawable.ic_huidian)
                    //这里为了区分是不是没有还是临时隐藏
                    monthRl.visibility = View.GONE
                } else {
                    helper.setImageResource(R.id.dot_img, R.drawable.ic_hongdian)
                    titleTime.setBackgroundResource(R.drawable.shape_time_bg)
                    monthRl.visibility = View.VISIBLE
                    tvDay.text = day
                    tvMonth.text = month
                }
            }
        }
    }
}

悬浮时间框的逻辑控制

package com.zj.timeaxis

class MainActivity : AppCompatActivity() {
    lateinit var adpter: NewsListAdapter
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         // 这里为了区别adapter布局时间控件的id使用findViewById
        val timeLayout = findViewById<RelativeLayout>(R.id.time_layout)
        val tvDay = findViewById<TextView>(R.id.tv_day)
        val tvMonth = findViewById<TextView>(R.id.tv_month)

        //设置下拉刷新
        refreshLayout.setOnRefreshListener(object : OnRefreshListener {
            override fun onRefresh(refreshlayout: RefreshLayout) {
                val initData = initData()
                adpter.setNewData(initData)
                refreshlayout.finishRefresh(2000 /*,false*/) //传入false表示刷新失败
            }
        })

        //上拉加载更多
        refreshLayout.setOnLoadMoreListener(object : OnLoadMoreListener {
            override fun onLoadMore(refreshlayout: RefreshLayout) {
                val initData = initData()
                initData?.let { adpter.addData(it) }
                refreshlayout.finishLoadMore(2000 /*,false*/) //传入false表示加载失败
            }
        })
        
        //初始化RecycleView
        val linearLayoutManager = LinearLayoutManager(this)
        rl_new.layoutManager = linearLayoutManager
        adpter = NewsListAdapter(R.layout.item_layout_new)
        rl_new.adapter = adpter
        // 当RecycleView初始化完成复制悬浮框
        rl_new.viewTreeObserver.addOnGlobalLayoutListener(object :
            ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                if (linearLayoutManager.itemCount > 0) {
                    timeLayout.visibility = View.VISIBLE
                    val data = adpter.data
                    //获取第一个可见条目的position
                    val firstVisPos = linearLayoutManager.findFirstVisibleItemPosition()
                    //获取第一个可见条目的position的数据
                    val itemData = data.get(firstVisPos)

                    //格式化时间
                    val ca: Calendar = Calendar.getInstance()
                    ca.timeInMillis = itemData!!.time
                    val dayInt = ca[Calendar.DATE]
                    val day = if (dayInt < 10) "0$dayInt" else dayInt.toString()
                    val monthInt = ca[Calendar.MONTH] + 1
                    val month = monthInt.toString()

                    //时间控件赋值
                    tvDay.text = day
                    tvMonth.text = month
                } else {  
                    // 没有数据隐藏时间悬浮
                    timeLayout.visibility = View.GONE
                }
            }
        })

        rl_new.addOnScrollListener(object : RecyclerView.OnScrollListener() {
            var linearLayoutManager = rl_new.getLayoutManager() as LinearLayoutManager
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                super.onScrolled(recyclerView, dx, dy)
                //获取第一个可见条目的position
                val firstVisPos = linearLayoutManager.findFirstVisibleItemPosition()
                //下滑情况下   下滑为负值  上滑为正值
                val firstVisiableChildView: View? =
                    linearLayoutManager.findViewByPosition(firstVisPos)             //gridLayoutManager布局管理器

                val timeLayout: RelativeLayout? =
                    adpter.getViewByPosition(firstVisPos, R.id.time_layout) as RelativeLayout

                //获取item条目的高度
                val itemHeight = firstVisiableChildView?.getHeight();

                //第一个条目标签滑动瞬间隐藏
                if (firstVisiableChildView!!.getTop() < 0) {
                    //如果显示的状态隐藏 GONE的item不变
                    if (timeLayout?.visibility == View.VISIBLE) {
                        //设置成INVISIBLE 为了区分没有标签和暂时隐藏
                        timeLayout.visibility = View.INVISIBLE
                    }
                }

                //当条目数量大于2个考虑下个显示情况
                if (linearLayoutManager.itemCount > 1) {
                    //获取第一个可见item的下一个
                    val nextVisPos = firstVisPos + 1
                    val timeLayoutNext: RelativeLayout? =
                        adpter.getViewByPosition(nextVisPos, R.id.time_layout) as RelativeLayout

                    //除第一个之外的包含标签的隐藏   Activity 浮动的标签距离顶部10dp
                    if (itemHeight!! + firstVisiableChildView.getTop() <= ScreenUtil.dip2px(
                            this@MainActivity,
                            10f
                        )
                    ) {
                        //滑倒标签位置隐藏 GONE的item不变
                        if (timeLayoutNext?.visibility == View.VISIBLE) {
                            timeLayoutNext.visibility = View.INVISIBLE
                        }
                    } else {
                        //滑出标签位置显示 GONE的item不变
                        if (timeLayoutNext?.visibility == View.INVISIBLE) {
                            timeLayoutNext.visibility = View.VISIBLE
                        }
                    }
                }
            }
        })

        val initData = initData()
        adpter.setNewData(initData)
    }

    /**
     * 模拟不同天的数据
     */
    fun initData(): MutableList<NewsBean?>? {
        val newList: MutableList<NewsBean?> = ArrayList();
        for (index in 1..100) {
            val new: NewsBean;
            when (index / 10) {
                0 -> {
                    new = NewsBean(System.currentTimeMillis(), "新闻标题" + index, "CCTV")
                }
                1 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000, "新闻标题" + index, "湖南卫视")
                }
                2 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000 * 2, "新闻标题" + index, "江苏卫视")
                }
                3 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000 * 3, "新闻标题" + index, "浙江卫视")
                }
                4 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000 * 4, "新闻标题" + index, "江苏卫视")
                }
                5 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000 * 5, "新闻标题" + index, "江苏卫视")
                }
                6 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000 * 6, "新闻标题" + index, "江苏卫视")
                }
                7 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000 * 7, "新闻标题" + index, "江苏卫视")
                }
                8 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000 * 8, "新闻标题" + index, "江苏卫视")
                }
                9 -> {
                    new = NewsBean(System.currentTimeMillis() - 100000000 * 9, "新闻标题" + index, "江苏卫视")
                }
                else -> new =
                    NewsBean(System.currentTimeMillis() - 100000000 * 10, "新闻标题" + index, "CCTV")
            }

            newList.add(new)
        }
        return newList
    }
}

结束

喜欢您就STAR一下～
github 地址