▲ 实现一个简单的快递时间轴效果

▲ 实现一个简单的快递时间轴效果

用RecycleView实现的时间轴效果。
先看一下效果
在这里插入图片描述
【实现思路】

使用一个RecycleView,在item中分成两个部分一部分画这个线,另一部分显示功能布局。其实没有什么难度,重点就在于xml布局中了

【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="wrap_content"
    android:orientation="vertical">

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

        <RelativeLayout
            android:id="@+id/rl_left"
            android:layout_width="20dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp">

            <TextView
                android:id="@+id/tv_line_a"
                android:layout_width="1px"
                android:layout_height="24dp"
                android:layout_centerHorizontal="true"
                android:background="#ccc" />

            <ImageView
                android:id="@+id/iv_tag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="24dp"
                android:src="@mipmap/icon_a" />

            <TextView
                android:id="@+id/tv_line"
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:layout_below="@+id/iv_tag"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="-1dp"
                android:background="#ccc" />
        </RelativeLayout>

        <LinearLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginRight="26dp"
            android:layout_toRightOf="@+id/rl_left"
            android:background="@mipmap/icon_bg"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:text="商家同意退款"
                android:textColor="#333"
                android:textSize="18sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="4dp"
                android:text="4天23小时56分 后系统自动退款"
                android:textColor="#999999"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:text="收货人:平平"
                android:textColor="#666"
                android:textSize="14sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="4dp"
                android:text="联系电话:1392XXXXX"
                android:textColor="#666"
                android:textSize="14sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="10dp"
                android:text="2019-08-11 11:36:47"
                android:textColor="#999"
                android:textSize="12sp" />

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

【业务代码】

public class TimeAdapter extends RecyclerView.Adapter<TimeAdapter.ViewHolderX> {
    private Context mContext;
    private List<String> mList;

    public TimeAdapter(Context context, List<String> list) {
        this.mContext = context;
        this.mList = list;
    }

    @NonNull
    @Override
    public TimeAdapter.ViewHolderX onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(mContext).inflate(R.layout.item_recycler_list, parent, false);
        ViewHolderX viewHoldX = new ViewHolderX(inflate);
        return viewHoldX;
    }

    @Override
    public void onBindViewHolder(@NonNull TimeAdapter.ViewHolderX holder, int position) {
        if (position==0){
            holder.ivTag.setImageResource(R.mipmap.icon_b);
            holder.tvLine_a.setVisibility(View.GONE);
        }else {
            holder.ivTag.setImageResource(R.mipmap.icon_a);
            holder.tvLine_a.setVisibility(View.VISIBLE);
        }

    }

    @Override
    public int getItemCount() {
        return mList == null ? 0 : mList.size();
    }

    class ViewHolderX extends RecyclerView.ViewHolder {

          TextView tvLine_a;
          TextView tvLine;
          ImageView ivTag;

        public ViewHolderX(@NonNull View itemView) {
            super(itemView);
            tvLine_a = itemView.findViewById(R.id.tv_line_a);
            tvLine = itemView.findViewById(R.id.tv_line);
            ivTag = itemView.findViewById(R.id.iv_tag);
        }
    }
}

可根据自己公司的业务更换Adapter,完善业务。

[希望这篇文章可以帮到你]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/2834.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • vue和jQuery一起使用「建议收藏」

    vue和jQuery一起使用「建议收藏」vue使用了虚拟DOM,它的功能就是不需要开发者直接做dom操作,所以不建议使用vue同时还使用jQuery。然后说正题,当vue组件被创建时,它会把组件渲染到页面中,而jQuery通过绑定DOM才能进行操作jQuery代码在Mounted周期内进行,此时vue已经渲染完毕,jQuery才可以找到对应的DOM如果需要JQuery更新DOM,则在Mounted周期内不被允许,需要通过…

    2022年10月15日
  • Idea激活码永久有效Idea2019.2.4激活码教程-持续更新,一步到位「建议收藏」

    Idea激活码永久有效Idea2019.2.4激活码教程-持续更新,一步到位「建议收藏」Idea激活码永久有效2019.2.4激活码教程-Windows版永久激活-持续更新,Idea激活码2019.2.4成功激活

    2022年6月17日
  • 麻将公式一定要背下来「大全」

    麻将公式一定要背下来「大全」麻将计算公式:一、可胡牌情况1:N*(ABC)+M*(AAA)+AA,N+M<=4.2:7*AA(又叫七对)二、倍数计算:一倍:杂色平胡,即:N*(ABC)+M*(AAA)+AA,1<=N<=4两倍:1:一砍,即手上或旁边(AAAA)2:大对子,即:M*(AAA)+AA,1<=M<=43:海底捞,即桌上最后一张牌自摸四倍:1:清一色,即所有麻将花色一样2:金钩钓,即AA3:小七对,即7*(AA)4:杠上花,即开杠后自摸注:以上

    2022年5月5日
  • linux 抓包命令tcpdump

    linux 抓包命令tcpdump一、概述顾名思义,tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或者端口的过滤,并提供and\or\not等逻辑语句来帮助你去掉无用的信息。二、选项介绍-a 将网络地址和广播地址转变成名字; -b 在数据-链路层上选择协议,包括ip、arp、rarp、ipx都是这一层的。 -c 指定要监听的数据包数量,在收

    2022年8月22日
  • beanutils.copyproperties原理_beanutils工具类

    beanutils.copyproperties原理_beanutils工具类常用的BeanUtils.copyProperties方法,你知道它的实现原理吗?

    2022年10月3日
  • OllyDBG 激活成功教程入门教程「建议收藏」

    OllyDBG 激活成功教程入门教程「建议收藏」原链接:https://www.cnblogs.com/ECJTUACM-873284962/p/7653285.html一、OllyDBG的安装与配置OllyDBG版的发布版本是个ZIP压缩包,只要解压到一个目录下,运行OllyDBG.exe就可以了。汉化版的发布版本是个RAR压缩包,同样只需解压到一个目录下运行OllyDBG.exe即可:OllyDBG中各个窗口的功能如上图。简单解释一下各个窗口的功能,更详细的内容可以参考TT小组翻译的中文帮助:反汇编窗口:显示被调试

    2022年9月21日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号