Android-----時光軸效果

時光軸

時光軸（Time Line）：從開始使用到結束的一段路程，就可以被看做爲時光軸。在Android的開發中，時光軸也是一個經常會被列入開發需求的功能。例如：查詢信息進度、申辦證書進度、瀏覽歷史痕跡等等都可以使用時光軸來處理。時光軸界面就好像一部電影，一點一點的把你一種回憶的感覺，美好。我們先欣賞一下界面

效果圖如下：

看過這個界面之後，可以大概分析一下，這個界面不是太複雜，應該也就是一個lv或者rv顯示的，然後通過計算把數據顯示到item上就可以啦。

下面的就是代碼啦~~

首先xml文件的佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="activity.cc.com.demo009.activity.cc.com.TimeLineActivity">

    <LinearLayout
        android:id="@+id/id_layout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@mipmap/timeline"
        android:orientation="vertical" />

    <RelativeLayout
        android:id="@+id/Re_layout"
        android:layout_below="@+id/id_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" >

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:srcCompat="@mipmap/addtime"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/txt_addtime"
            android:layout_toStartOf="@+id/txt_addtime" />

        <TextView
            android:id="@+id/txt_addtime"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="15dp"
            android:layout_marginRight="15dp"
            android:gravity="center"
            android:text="添加時光軸"
            android:textColor="@color/black"
            android:textSize="15dp" />

    </RelativeLayout>

    <View
        android:id="@+id/view"
        android:layout_below="@+id/Re_layout"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="@color/gray"/>

    <LinearLayout
        android:id="@+id/lin_layout"
        android:layout_below="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@mipmap/timeline_title" />

        <TextView
            android:layout_width="match_parent"
            android:layout_marginTop="10dp"
            android:layout_height="match_parent"
            android:textColor="@color/black"
            android:gravity="center"
            android:textSize="20dp"
            android:text="我的時光軸" />

    </LinearLayout>

    <RelativeLayout
        android:layout_below="@+id/lin_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical">

        <View
            android:id="@+id/group_tiao"
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:layout_marginLeft="55dp"
            android:background="@color/time_line_bg"
            android:layout_below="@+id/courses_title" />

        <TextView
            android:id="@+id/courses_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="70dp"
            android:layout_marginTop="10dp"
            android:text="記錄美好的瞬間"
            android:textColor="@android:color/black"
            android:textSize="15dp" />

        <ExpandableListView
            android:id="@+id/timeline_listView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/courses_title">

        </ExpandableListView>

    </RelativeLayout>

</RelativeLayout>

注：這裏我是用了lv的加強版view（ExpandableListView）

在activity中通過adapter將數據填充到每一個item中（我的數據時保存在數據庫中的，這裏就不貼數據庫的代碼了，比較多，可以下載源碼看看）

activity.class

statusAdapter = new StatusExpandAdapter(this, getListData());
timeline_listView.setAdapter(statusAdapter);
timeline_listView.setGroupIndicator(null); // 去掉默認帶的箭頭
timeline_listView.setSelection(0);// 設置默認選中項

// 遍歷所有group,將所有項設置成默認展開
int groupCount = timeline_listView.getCount();
for (int i = 0; i < groupCount; i++) {
    timeline_listView.expandGroup(i);
}

timeline_listView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {

    @Override
    public boolean onGroupClick(ExpandableListView parent, View v,
                                int groupPosition, long id) {
        // TODO Auto-generated method stub
        return true;
    }
});


/**
* 填充時光軸上的級數據
 * @return
 */
private List<GroupStatusEntity> getListData() {
    List<GroupStatusEntity> groupList;
    groupList = new ArrayList<GroupStatusEntity>();
//        String[][] childTimeArray = new String[][]{ { "小一", "小二" }, { "二一", "二二" },{ "三一", "三二" }, { "四一", "四兒" } };
    for (int i = 0; i < datas.size(); i++) {
        GroupStatusEntity groupStatusEntity = new GroupStatusEntity();
        groupStatusEntity.setGroupName(datas.get(i).getData());

        List<ChildStatusEntity> childList = new ArrayList<ChildStatusEntity>();

        for (int j = 0; j < childTimeArray[i].length; j++) {
            ChildStatusEntity childStatusEntity = new ChildStatusEntity();
            childStatusEntity.setCompleteTime(childTimeArray[i][j]);
            childStatusEntity.setIsfinished(true);
            childList.add(childStatusEntity);
        }

        groupStatusEntity.setChildList(childList);
        groupList.add(groupStatusEntity);
    }
    return groupList;
}

注：註釋簡單明瞭。

adapter.class

package adapter.cc.com;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;

import java.util.List;

import activity.cc.com.demo009.R;
import info.cc.com.ChildStatusEntity;
import info.cc.com.GroupStatusEntity;

/**
 * Created by admin on 2017/12/4.
 */

public class StatusExpandAdapter extends BaseExpandableListAdapter {

    StatusExpandAdapter statusExpandAdapter;
    LayoutInflater inflater;
    List<GroupStatusEntity> groupList;

    /**
     * 構造方法
     *
     * @param context
     * @param group_list
     */
    public StatusExpandAdapter(Context context,
                               List<GroupStatusEntity> group_list) {
        this.groupList = group_list;
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    /**
     * 返回一級Item總數
     */
    @Override
    public int getGroupCount() {
        // TODO Auto-generated method stub
        return groupList.size();
    }

    /**
     * 返回二級Item總數
     */
    @Override
    public int getChildrenCount(int groupPosition) {
        if (groupList.get(groupPosition).getChildList() == null) {
            return 0;
        } else {
            return groupList.get(groupPosition).getChildList().size();
        }
    }

    /**
     * 獲取一級Item內容
     */
    @Override
    public Object getGroup(int groupPosition) {
        // TODO Auto-generated method stub
        return groupList.get(groupPosition);
    }

    /**
     * 獲取二級Item內容
     */
    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return groupList.get(groupPosition).getChildList().get(childPosition);
    }

    @Override
    public long getGroupId(int groupPosition) {
        // TODO Auto-generated method stub
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        // TODO Auto-generated method stub
        return childPosition;
    }

    @Override
    public boolean hasStableIds() {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
                             View convertView, ViewGroup parent) {

        GroupViewHolder holder = new GroupViewHolder();

        if (convertView == null) {
            convertView = inflater.inflate(R.layout.group_status_item, null);
        }
        holder.groupName = (TextView) convertView
                .findViewById(R.id.one_status_name);

        holder.groupName.setText(groupList.get(groupPosition).getGroupName());

        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition,
                             boolean isLastChild, View convertView, ViewGroup parent) {
        ChildViewHolder viewHolder = null;
        ChildStatusEntity entity = (ChildStatusEntity) getChild(groupPosition,
                childPosition);
        if (convertView != null) {
            viewHolder = (ChildViewHolder) convertView.getTag();
        } else {
            viewHolder = new ChildViewHolder();
            convertView = inflater.inflate(R.layout.child_status_item, null);
            viewHolder.twoStatusTime = (TextView) convertView
                    .findViewById(R.id.two_complete_time);
        }
        viewHolder.twoStatusTime.setText(entity.getCompleteTime());

        convertView.setTag(viewHolder);
        return convertView;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        // TODO Auto-generated method stub
        return false;
    }

    private class GroupViewHolder {
        TextView groupName;
    }

    private class ChildViewHolder {
        public TextView twoStatusTime;
    }
}

注：源碼在後面

其實時光軸效果就相當於一個自定義版的lv、rv，通過定製化佈局和操作來達到功能的實現

下面這裏是源碼

GitHub地址：https://github.com/cctxwan/Demo009
CSDN地址：https://download.csdn.net/download/qq_35840038/11014389

q：486789970
email：[email protected]

Android-----時光軸效果

時光軸

效果圖如下：

下面的就是代碼啦~~

下面這裏是源碼

如果有什麼問題，歡迎大家指導。並相互聯繫，希望能夠通過文章互相學習。

安卓Tablayout自定義文字、指示器長度和顏色

Android使用LineChart實現貝塞爾曲線圖

Android實現VideoView重複播放本地視頻（無縫播放）

Android基於viewpager和tablayout實現類似今日頭條和騰訊新聞的界面

Android實現下拉刷新和上拉加載數據（網絡請求數據）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結