• Android 时间轴


      最近开发的app中要用到时间轴这东西,需要实现的效果如下:


    想想这个东西应该可以用listview实现吧。然后最近就模拟着去写了:

    首先写  listview的item的布局: 

    listview_item.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical"
        android:paddingRight="20dp" >
    
    
        <View
            android:id="@+id/view_0"
            android:layout_width="1dp"
            android:layout_height="25dp"
            android:layout_below="@+id/layout_1"
            android:layout_marginLeft="71dp"
            android:background="#A6A6A6" />
    
        <View
            android:id="@+id/view_1"
            android:layout_width="1dp"
            android:layout_height="25dp"
            android:layout_below="@+id/layout_2"
            android:layout_marginLeft="71dp"
            android:background="#A6A6A6" />
    
        <TextView
            android:id="@+id/show_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/view_1"
            android:layout_marginLeft="30dp"
            android:text="测试数据"
            android:textSize="12dp" />
    
        <ImageView
            android:id="@+id/image"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_below="@+id/view_1"
            android:layout_marginLeft="65dp"
            android:src="@drawable/timeline_green" />
    
        <View
            android:id="@+id/view_2"
            android:layout_width="1dp"
            android:layout_height="100dp"
            android:layout_below="@+id/image"
            android:layout_marginLeft="71dp"
            android:background="#A6A6A6" />
    
        <RelativeLayout
            android:id="@+id/relative"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image"
            android:layout_marginTop="-20dp"
            android:layout_toRightOf="@+id/image"
            android:background="@drawable/timeline_content"
            android:padding="10dp" >
    
            <ImageView
                android:id="@+id/image_1"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="5dp"
                android:src="@drawable/bg_green_circle_smic" />
    
            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:ellipsize="end"
                android:maxEms="7"
                android:paddingLeft="5dp"
                android:singleLine="true"
                android:text="测试数据"
                android:textSize="12sp" />
    
        </RelativeLayout>
    
    </RelativeLayout>

    接下来就是写listview的adapter了:

    TimelineAdapter.java

    package com.example.timelinetext.test;
    
    import java.util.List;
    import java.util.Map;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.TextView;
    
    public class TimelineAdapter extends BaseAdapter {
    
        private Context context;
        private List<Map<String, Object>> list;
        private LayoutInflater inflater;
    
        public TimelineAdapter(Context context, List<Map<String, Object>> list) {
            super();
            this.context = context;
            this.list = list;
        }
    
        @Override
        public int getCount() {
    
            return list.size();
        }
    
        @Override
        public Object getItem(int position) {
            return position;
        }
    
        @Override
        public long getItemId(int position) {
            return position;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder = null;
            if (convertView == null) {
                inflater = LayoutInflater.from(parent.getContext());
                convertView = inflater.inflate(R.layout.listview_item, null);
                viewHolder = new ViewHolder();
    
                viewHolder.title = (TextView) convertView.findViewById(R.id.title);
                convertView.setTag(viewHolder);
            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }
            
            String titleStr = list.get(position).get("title").toString();
            
        
            viewHolder.title.setText(titleStr);
    
            return convertView;
        }
    
        static class ViewHolder {
            public TextView year;
            public TextView month;
            public TextView title;
        }
    }

    运行效果如图:




    所以模拟着去写一个时间轴,并不是什么复杂的事情,不要被UI设计的图片吓到,其实他就是一个普通的listview而已。

    代码:这里

  • 相关阅读:
    Matlab中如何取出cell型数组里的某一列,和具体某个值
    Matlab 读取dat文件(包含几行多余文本,数据带有数字和字符串,且以逗号分隔)
    批处理txt文件
    Word删除关键字所在行
    移动web页面前端开发总结
    JavaScript 的性能优化:加载和执行
    jq中prop和attr的区别以及各自的使用
    移动web开发经验总结(转)
    JavaScript核心(晋级高手必读篇)
    -webkit-transition: all .2s ease-in-out;
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4236658.html
Copyright © 2020-2023  润新知