Android 類似時間軸的實現


想要實現圖片中的的時間軸的效果,設定了三種顏色,但是出來的只有一個黑色,還不是設定好的,而且長度很長的話不能滾動,下面上代碼:

布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/trjectory_today_rl1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    </LinearLayout>
</LinearLayout>

類文件,時間段是從服務器獲取的,多少和大小都是不確定的
主要代碼:

private Handler mHandler = new Handler() {
                @Override
                public void handleMessage(Message msg) {
                        switch (msg.what) {
                        case 0:
                                if (trajectory2 != null) {
                                        if (trajectory2.getResponseCode().equals("200")) {
                                                progressDialog.dismiss();
                                                if (trajectory2.getSegmentNum() != 0) {
                                                        thefirsttime = trajectory2.getList().get(0)
                                                                        .get("BeginTime");// 第一個時間段的開始時間,用作參照物
                                                        Y=new int[trajectory2.getSegmentNum()];
                                                        X=new int[trajectory2.getSegmentNum()];
                                                        high=new int[trajectory2.getSegmentNum()];
                                                        color=new int[trajectory2.getSegmentNum()];

                                                        for (int i = 0; i < trajectory2.getList().size(); i++) {
                                                                name = trajectory2.getList().get(i).get("Name");
                                                                begintime = trajectory2.getList().get(i)
                                                                                .get("BeginTime");
                                                                int begin = TimeToInt(begintime);//將階段開始時間換算為分鍾,計算坐標
                                                                endtime = trajectory2.getList().get(i)
                                                                                .get("EndTime");
                                                                int end = TimeToInt(endtime);
                                                                high = end - begin;// 矩形的高度
                                                                Y = begin - TimeToInt(thefirsttime);// 獲得矩形的開始的Y軸坐標,最初是0
                                                               
                                                                if (name.equals("覺醒")) {
                                                                        color = R.color.red;
                                                                        X = width / 2;// 矩形的軸心的坐標
                                                                } else if (name.equals("淺睡")) {
                                                                        color = R.color.lightblue;
                                                                        X = width / 2;

//                                                                        r1.addView(rectview);
                                                                } else if (name.equals("深度睡眠")) {
                                                                        color = R.color.green;
                                                                        X = width / 2 + 20;
                                                                } else {
                                                                        color = R.color.lightgray;
                                                                        X = width / 2;
                                                                }
                                                        }
                                                        rectview=new RectView(getActivity(),X,Y,high,color);
                                                        r1.addView(rectview);
                                                       
                                                } else {
                                                        progressDialog.dismiss();
                                                        showDialog("提示", "今天沒有睡眠信息...");
                                                }

                                        } else {
                                                progressDialog.dismiss();
                                                showDialog("提示", trajectory2.getResponseDesc());
                                        }

                                } else {
                                        progressDialog.dismiss();
                                        showDialog("提示", "獲取數據失敗...");
                                }
                                break;
                        }
                }  
     
 };

下面上畫圖的類:

熱搜: 二維碼 定時器 手電筒 滑塊 斗地主 書架 定位 買手機 聊天 游戲開發 游戲 股票查詢 機頂盒 通話記錄 二維碼掃描 振動器 listview fragment 音樂播放器 播放器
eoe 移動開發者論壇»社區 › Android開發交流 › Android開發問答 › 類似時間軸的實現
12 / 2 頁下一頁
返回列表 發新帖回復
查看: 988|回復: 17
    
打印 上一主題 下一主題
收起左側
[Android界面] 類似時間軸的實現
[復制鏈接]
    
yalongy58

4
主題    

113
帖子    

511
e幣

    發消息

    
電梯直達 跳轉到指定樓層
樓主
發表於 2013-12-29 21:37:33 | 只看該作者 |只看大圖 回帖獎勵
0基礎的你+1張學習路徑圖+3個月糧餉+9階段系統學習=Android開發大拿
10e幣
想要實現圖片中的的世間軸的效果,設定了三種顏色,但是出來的只有一個黑色,還不是設定好的,而且長度很長的話不能滾動,下面上代碼:布局文件:
[mw_shl_code=java,true]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/trjectory_today_rl1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    </LinearLayout>
</LinearLayout>[/mw_shl_code]

類文件,時間段是從服務器獲取的,多少和大小都是不確定的
主要代碼:
[mw_shl_code=java,true]private Handler mHandler = new Handler() {
                @Override
                public void handleMessage(Message msg) {
                        switch (msg.what) {
                        case 0:
                                if (trajectory2 != null) {
                                        if (trajectory2.getResponseCode().equals("200")) {
                                                progressDialog.dismiss();
                                                if (trajectory2.getSegmentNum() != 0) {
                                                        thefirsttime = trajectory2.getList().get(0)
                                                                        .get("BeginTime");// 第一個時間段的開始時間,用作參照物
                                                        Y=new int[trajectory2.getSegmentNum()];
                                                        X=new int[trajectory2.getSegmentNum()];
                                                        high=new int[trajectory2.getSegmentNum()];
                                                        color=new int[trajectory2.getSegmentNum()];

                                                        for (int i = 0; i < trajectory2.getList().size(); i++) {
                                                                name = trajectory2.getList().get(i).get("Name");
                                                                begintime = trajectory2.getList().get(i)
                                                                                .get("BeginTime");
                                                                int begin = TimeToInt(begintime);//將階段開始時間換算為分鍾,計算坐標
                                                                endtime = trajectory2.getList().get(i)
                                                                                .get("EndTime");
                                                                int end = TimeToInt(endtime);
                                                                high = end - begin;// 矩形的高度
                                                                Y = begin - TimeToInt(thefirsttime);// 獲得矩形的開始的Y軸坐標,最初是0
                                                               
                                                                if (name.equals("覺醒")) {
                                                                        color = R.color.red;
                                                                        X = width / 2;// 矩形的軸心的坐標
                                                                } else if (name.equals("淺睡")) {
                                                                        color = R.color.lightblue;
                                                                        X = width / 2;

//                                                                        r1.addView(rectview);
                                                                } else if (name.equals("深度睡眠")) {
                                                                        color = R.color.green;
                                                                        X = width / 2 + 20;
                                                                } else {
                                                                        color = R.color.lightgray;
                                                                        X = width / 2;
                                                                }
                                                        }
                                                        rectview=new RectView(getActivity(),X,Y,high,color);
                                                        r1.addView(rectview);
                                                       
                                                } else {
                                                        progressDialog.dismiss();
                                                        showDialog("提示", "今天沒有睡眠信息...");
                                                }

                                        } else {
                                                progressDialog.dismiss();
                                                showDialog("提示", trajectory2.getResponseDesc());
                                        }

                                } else {
                                        progressDialog.dismiss();
                                        showDialog("提示", "獲取數據失敗...");
                                }
                                break;
                        }
                }

        };
[/mw_shl_code]

下面上畫圖的類:
[mw_shl_code=java,true]package com.ban.chart;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class RectView extends View {
        private int[] width;//矩形的軸心的坐標
        private int[] height;//矩形的高度
        private int[] top;//矩形的頂部坐標
        private int[] bottom;//矩形底部坐標
       
        private Chart chart;
        private Paint paint;
        private int[] color;
       
        public RectView(Context context, AttributeSet attrs) {
                super(context, attrs);
                // TODO Auto-generated constructor stub
        }

        public RectView(Context context) {
                super(context);
                // TODO Auto-generated constructor stub
        }
       
        public RectView(Context context, int[] X,int[] Y,int[] high,int[] color) {
                super(context);
                this.width=X;//矩形軸心坐標
                this.height=high;//矩形高度
                this.top=Y;//矩形頂部坐標
                this.color=color;
                bottom=new int[height.length];
//                bottom=top+height;//矩形底部坐標
                paint = new Paint();
                paint.setAntiAlias(true);
        }
        // 畫柱狀圖
                public void drawChart(Canvas canvas){
                        for(int i=0;i<height.length;i++){
                                bottom=(top+50)+height*10;
                                paint.setColor(color);
                                canvas.drawRect(width-5, top+50, width+5, bottom, paint) ;
                               
                        }
                       
                               
                       
                       
//                        canvas.drawRect(width-5, top, width+5, bottom, paint) ;
                }
                @Override
                public void onDraw(Canvas canvas){
                        canvas.drawColor(Color.WHITE);
                        drawChart(canvas);
                        invalidate();
                }
}

圖片:

時間軸 480副本.png


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM