基于Android平台的开源项目PlanBetter设计篇之一 核心功能
之前介绍过自己大学时期做过的一些项目,里面有一个基于Android平台的项目叫PlanBetter,项目的详细介绍请参见 《项目回顾之一:PlanBetter时间管理软件(基于Android平台)》 ,里面附有本项目的一些截图。如果您对本项目的设计实现感兴趣,欢迎您继续看下去!
这个项目是一年前做的,时间隔得比较久,而且之前也没做过什么总结,所以对于项目的具体设计实现可能记得不是很清楚,但是我会尝试着将它完整地呈现给大家。
这个项目的核心功能是计划这一块 ,通过三个连续的视图将昨天任务完成情况、今天任务完成情况以及未来任务提醒表现出来。用户可以通过滑动屏幕在这三个连续的视图之间进行切换,透过事先的规划作为一种提醒和指引,督促用户在规定的时间内把事情做好。可以给大家简单看一下计划这一块的截图:
均为 昨天视图 ,左图为没有活动的显示效果,右图为有活动的显示效果
均为 今天视图 ,左图为没有活动的显示效果,右图为有活动的显示效果
上图为 未来视图 ,这里只截了有活动的效果图
截图演示到此为止。由于这里是设计篇,所以我着重介绍这里的设计思路。
对于一个活动, 比较重要的三点就是时间、地点和活动内容 。当然地点可以不用确定,有的时候只用了解时间和活动内容即可。
关于昨天
对于昨天, 我们往往关心的是昨天都做了哪些事情,有哪些事情没有完成,哪些事情是比较重要的 。当然你可以看完之后将其删除,保护您的隐私。
所以你们看到的昨天视图,即是将这些信息提供给用户。之前的设计图是在纸上画的,就不提供给大家了。画图说明如下图所示:
昨天视图的布局代码如下所示,其中yesterday_task_layout.xml为整个布局的文件,yesterday_task_item.xml为单个活动的布局,因为活动列表是用ListView来实现的。
yesterday_task_layout.xml
<? xml version="1.0" encoding="utf-8" ?> 2 < ScrollView android:layout_width ="fill_parent" 3 xmlns:android ="http://schemas.android.com/apk/res/android" 4 android:layout_height ="fill_parent" android:layout_weight ="1" android:background ="@drawable/task_yesterday_bg" 5 android:fillViewport ="true" > 6 < LinearLayout android:orientation ="vertical" 7 android:layout_width ="@dimen/day_container_width" android:paddingLeft ="15.0dp" android:paddingTop ="7.0dp" 8 android:paddingRight ="15.0dp" android:paddingBottom ="15.0dp" 9 android:layout_height ="fill_parent" > 10 < RelativeLayout android:layout_width ="fill_parent" 11 android:layout_height ="wrap_content" > 12 < TextView android:textSize ="30.0sp" android:typeface ="serif" 13 android:textColor ="@android:color/black" android:id ="@+id/textView_yesterday" 14 android:focusable ="true" android:focusableInTouchMode ="true" 15 android:layout_width ="wrap_content" android:layout_height ="wrap_content" 16 android:text ="@string/label_yesterday" android:layout_alignParentLeft ="true" /> 17 < TextView android:textSize ="18.0sp" android:typeface ="serif" 18 android:textColor ="@android:color/black" android:id ="@+id/textView_yesterday_date" 19 android:layout_width ="wrap_content" android:layout_height ="wrap_content" 20 android:layout_below ="@id/textView_yesterday" /> 21 22 </ RelativeLayout > 23 < ListView android:id ="@+id/yesterday_task_listview" 24 android:layout_width ="fill_parent" android:layout_height ="wrap_content" 25 android:layout_marginTop ="5dp" android:layout_marginBottom ="10dp" 26 android:cacheColorHint ="@android:color/transparent" android:dividerHeight ="10dp" 27 android:divider ="@android:color/transparent" android:listSelector ="@android:color/transparent" 28 android:drawSelectorOnTop ="false" /> 29 </ LinearLayout > 30 </ ScrollView >
yesterday_task_item.xml
1 <? xml version="1.0" encoding="utf-8" ?> 2 < LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android" 3 android:orientation ="horizontal" android:layout_width ="fill_parent" 4 android:layout_height ="fill_parent" 5 android:padding ="5dp" 6 android:background ="@drawable/layoutbg" 7 android:gravity ="center_vertical" 8 > 9 10 <!-- 任务名称、时间和地点 时间提醒和地点提醒图标 --> 11 < LinearLayout android:orientation ="vertical" 12 android:layout_width ="wrap_content" android:layout_height ="wrap_content" > 13 < RelativeLayout android:orientation ="horizontal" 14 android:layout_width ="@dimen/task_item_name_width" android:layout_height ="wrap_content" > 15 < com.planbetter.view.AlwaysMarqueeTextView android:ellipsize ="marquee" android:marqueeRepeatLimit ="marquee_forever" 16 android:focusableInTouchMode ="true" android:focusable ="true" 17 android:id ="@+id/yesterday_task_info" android:layout_width ="160dp" 18 android:layout_height ="wrap_content" android:textColor ="@android:color/black" 19 android:scrollHorizontally ="true" 20 android:singleLine ="true" 21 android:textSize ="20sp" /> 22 < LinearLayout android:orientation ="horizontal" android:layout_marginTop ="5dp" 23 android:layout_marginLeft ="10dp" android:layout_alignParentRight ="true" android:layout_toRightOf ="@id/yesterday_task_info" 24 android:layout_width ="wrap_content" android:layout_height ="wrap_content" > 25 < ImageView android:id ="@+id/yesterday_star_rank" 26 android:layout_width ="wrap_content" android:layout_height ="wrap_content" 27 /> 28 </ LinearLayout > 29 </ RelativeLayout > 30 < LinearLayout android:orientation ="horizontal" 31 android:layout_width ="@dimen/task_item_name_width" android:layout_height ="wrap_content" > 32 < com.planbetter.view.AlwaysMarqueeTextView android:ellipsize ="marquee" android:marqueeRepeatLimit ="marquee_forever" 33 android:focusableInTouchMode ="true" android:focusable ="true" android:scrollHorizontally ="true" 34 android:layout_width ="210dp" android:id ="@+id/yesterday_task_time_position_textview" 35 android:layout_height ="wrap_content" android:textColor ="@android:color/black" 36 android:singleLine ="true" 37 android:textSize ="15sp" /> 38 39 </ LinearLayout > 40 </ LinearLayout > 41 42 < LinearLayout android:gravity ="right" android:orientation ="vertical" 43 android:layout_width ="fill_parent" android:layout_height ="fill_parent" > 44 < LinearLayout android:orientation ="horizontal" android:layout_width ="fill_parent" 45 android:layout_height ="fill_parent" > 46 < Button android:id ="@+id/yesterday_task_edit_btn" android:layout_width ="fill_parent" 47 android:layout_marginLeft ="2dp" android:background ="@drawable/yesterday_delete_btn_bg" 48 android:layout_height ="fill_parent" /> 49 </ LinearLayout > 50 </ LinearLayout > 51 </ LinearLayout >
关于今天
今天对比昨天而言,需求又不一样。随着新的空白的一天的开始,你可以随时添加当天需要完成的任务,除了 活动内容和时间地点 以外,你还可以指定 活动周期 (即该活动持续多少天)、 活动优先级 (即活动重要性)以及 是否设置活动提醒 (即闹钟提醒)。如果当天存在活动未完成,且设置了活动提醒,状态栏会显示一个小闹钟的图标,可以参见上面今天视图右边那张图片。
同样, 活动的完成情况 可以根据颜色的明暗来区分,颜色为暗色的表示活动已完成。用户可以通过 单击某个活动 来修改活动的是否完成情况,也可以 长按该活动 来对它进行进一步的操作,包括“编辑活动”、“删除活动”和“推迟活动”。
今天视图的布局代码如下所示,同样活动列表也是用ListView来实现。
today_task_layout.xml
1 <? xml version="1.0" encoding="utf-8" ?> 2 < ScrollView android:layout_width ="fill_parent" 3 xmlns:android ="http://schemas.android.com/apk/res/android" 4 android:layout_height ="fill_parent" android:layout_weight ="1" android:background ="@drawable/task_today_bg" 5 android:fillViewport ="true" > 6 < LinearLayout android:orientation ="vertical" 7 android:layout_width ="@dimen/day_container_width" android:paddingLeft ="15.0dp" android:paddingTop ="7.0dp" 8 android:paddingRight ="15.0dp" android:paddingBottom ="15.0dp" 9 android:layout_height ="fill_parent" > 10 < RelativeLayout android:layout_width ="fill_parent" 11 android:layout_height ="wrap_content" > 12 < TextView android:textSize ="30.0sp" android:typeface ="serif" 13 android:textColor ="@android:color/black" android:id ="@+id/textView_today" 14 android:focusable ="true" android:focusableInTouchMode ="true" 15 android:layout_width ="wrap_content" android:layout_height ="wrap_content" 16 android:text ="@string/label_today" android:layout_alignParentLeft ="true" /> 17 < TextView android:textSize ="18.0sp" android:typeface ="serif" 18 android:textColor ="@android:color/black" android:id ="@+id/textView_today_date" 19 android:layout_width ="wrap_content" android:layout_height ="wrap_content" 20 android:layout_below ="@id/textView_today" /> 21 < FrameLayout android:layout_width ="wrap_content" 22 android:layout_height ="wrap_content" android:layout_marginTop ="35.0dp" 23 android:layout_alignParentRight ="true" > 24 < Button android:textSize ="15.0sp" android:typeface ="serif" 25 android:id ="@+id/today_add_task_btn" android:background ="@drawable/bg_add_task_btn" 26 android:layout_width ="wrap_content" android:layout_height ="40.0dp" 27 android:text ="@string/add_task_label" android:layout_alignBaseline ="@id/textView_today_date" /> 28 </ FrameLayout > 29 </ RelativeLayout > 30 < ListView android:id ="@+id/today_task_listview" 31 android:layout_width ="fill_parent" android:layout_height ="wrap_content" 32 android:layout_marginTop ="5dp" android:layout_marginBottom ="10dp" 33 android:cacheColorHint ="@android:color/transparent" android:dividerHeight ="10dp" 34 android:divider ="@android:color/transparent" android:listSelector ="@android:color/transparent" 35 android:drawSelectorOnTop ="false" /> 36 </ LinearLayout > 37 </ ScrollView >
today_task_item.xml
1 <? xml version="1.0" encoding="utf-8" ?> 2 < LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android" 3 android:orientation ="horizontal" android:layout_width ="fill_parent" 4 android:layout_height ="fill_parent" android:padding ="5dp" 5 android:background ="@drawable/layoutbg" android:gravity ="center_vertical" > 6 7 <!-- 任务名称、时间和地点 时间提醒和地点提醒图标 --> 8 < LinearLayout android:orientation ="vertical" 9 android:layout_width ="wrap_content" android:layout_height ="wrap_content" > 10 < RelativeLayout android:orientation ="horizontal" 11 android:layout_width ="@dimen/task_item_name_width" 12 android:layout_height ="wrap_content" > 13 < TextView 14 android:id ="@+id/today_task_info" android:layout_width ="150dp" 15 android:layout_height ="wrap_content" android:textColor ="@android:color/black" 16 android:singleLine ="true" 17 android:textSize ="20sp" /> 18 < LinearLayout android:orientation ="horizontal" 19 android:layout_marginTop ="5dp" android:layout_marginLeft ="2dp" 20 android:layout_alignParentRight ="true" android:layout_toRightOf ="@id/today_task_info" 21 android:layout_width ="wrap_content" android:layout_height ="wrap_content" > 22 < TextView android:id ="@+id/today_repeat_days" android:background ="@drawable/bg_quick_dial" 23 android:textColor ="@android:color/white" android:textSize ="10sp" android:gravity ="center" 24 android:layout_width ="15dp" 25 android:layout_height ="15dp" /> 26 < ImageView android:id ="@+id/today_star_rank" android:layout_marginLeft ="5dp" 27 android:layout_width ="wrap_content" android:layout_height ="wrap_content" /> 28 </ LinearLayout > 29 </ RelativeLayout > 30 < LinearLayout android:orientation ="horizontal" 31 android:layout_width ="@dimen/task_item_name_width" 32 android:layout_height ="wrap_content" > 33 < TextView 34 android:layout_width ="210dp" 35 android:id ="@+id/today_task_time_position_textview" 36 android:layout_height ="wrap_content" android:textColor ="@android:color/black" 37 android:singleLine ="true" android:textSize ="15sp" /> 38 < ImageView android:id ="@+id/today_time_alert" android:src ="@drawable/clock" 39 android:layout_marginTop ="8dp" android:layout_marginLeft ="5dp" 40 android:layout_width ="wrap_content" android:layout_height ="wrap_content" /> 41 </ LinearLayout > 42 </ LinearLayout > 43 44 < LinearLayout android:gravity ="right" android:orientation ="vertical" 45 android:layout_width ="fill_parent" android:layout_height ="fill_parent" > 46 < LinearLayout android:orientation ="horizontal" 47 android:layout_width ="fill_parent" android:layout_height ="fill_parent" > 48 < ImageView android:id ="@+id/today_task_complete_state" 49 android:layout_width ="fill_parent" android:layout_marginLeft ="1dp" 50 android:layout_height ="fill_parent" /> 51 </ LinearLayout > 52 </ LinearLayout > 53 </ LinearLayout >
关于未来
这里未来相对来说比较容易。关于未来,只要起到 提醒的作用 就可以了。只要明白 活动内容 和 日期 ,我们就很容易掌握将要到来的事情。你也可以指定具体的时间点,在未来的某时刻进行活动提醒。这里通过 倒计时 的方式显示,更容易让用户接受,一目了然。
如下图所示,对比昨天和今天视图, 比较大的一个区别 在于,多了一个 活动详细 。你可以通过点击某个活动,活动详细里就可以把详细信息显示出来,在这里你可以查看具体的日期。另外,你可以通过长按某个活动来对活动进行编辑和删除操作。
tomorrow_task_layout.xml
1 <? xml version="1.0" encoding="utf-8" ?> 2 < ScrollView android:layout_width ="fill_parent" 3 xmlns:android ="http://schemas.android.com/apk/res/android" 4 android:layout_height ="fill_parent" android:layout_weight ="1" android:background ="@drawable/task_tomorrow_bg" 5 android:fillViewport ="true" > 6 < LinearLayout android:orientation ="vertical" 7 android:layout_width ="fill_parent" android:layout_height ="fill_parent" > 8 < LinearLayout android:orientation ="horizontal" 9 android:layout_height ="wrap_content" android:layout_marginLeft ="5dp" 10 android:layout_width ="fill_parent" android:layout_marginTop ="10dp" 11 android:layout_marginBottom ="5dp" android:layout_gravity ="center_horizontal" > 12 < TextView android:textColor ="@android:color/black" 13 android:layout_width ="wrap_content" android:layout_marginLeft ="8dp" 14 android:layout_height ="wrap_content" android:typeface ="serif" 15 android:text ="未来" android:layout_alignParentLeft ="true" 16 android:textSize ="28.0sp" android:id ="@+id/textView_future" ></ TextView > 17 < TextView android:textColor ="@android:color/black" 18 android:layout_width ="wrap_content" android:layout_marginLeft ="8dp" 19 android:layout_height ="wrap_content" android:typeface ="serif" 20 android:text ="掌握在我们手中……" android:textSize ="15.0sp" 21 android:layout_below ="@id/textView_future" android:id ="@+id/textView_futuremessage" ></ TextView > 22 < Button android:layout_height ="wrap_content" 23 android:layout_width ="wrap_content" android:id ="@+id/addTask" android:text ="增加活动" 24 android:textSize ="13sp" android:background ="@drawable/bg_add_task_btn" 25 android:drawableLeft ="@drawable/tomorrowtask_love" 26 android:layout_marginLeft ="5dp" android:layout_below ="@id/textView_future" 27 android:textColor ="#000" ></ Button > 28 </ LinearLayout > 29 < RelativeLayout android:layout_height ="wrap_content" android:layout_marginTop ="5dp" 30 android:layout_width ="fill_parent" android:layout_gravity ="left" > 31 < com.planbetter.view.AlwaysMarqueeTextView 32 android:textColor ="@android:color/black" android:layout_width ="200dp" 33 android:layout_marginLeft ="8dp" android:layout_height ="wrap_content" 34 android:scrollHorizontally ="true" android:ellipsize ="marquee" 35 android:typeface ="serif" 36 android:singleLine ="true" android:layout_alignParentLeft ="true" 37 android:focusable ="true" android:textSize ="20.0sp" android:id ="@+id/textView_datematter" ></ com.planbetter.view.AlwaysMarqueeTextView > 38 < TextView android:textColor ="@android:color/black" 39 android:layout_width ="200dp" android:layout_marginLeft ="8dp" 40 android:layout_height ="wrap_content" android:typeface ="serif" 41 android:layout_alignParentLeft ="true" 42 android:textSize ="15.0sp" android:layout_below ="@id/textView_datematter" 43 android:id ="@+id/textView_datemattermessage" ></ TextView > 44 < TextView android:textColor ="@android:color/black" 45 android:layout_width ="85dp" android:layout_marginLeft ="2dp" 46 android:gravity ="center_horizontal" android:layout_height ="wrap_content" 47 android:layout_toLeftOf ="@+id/textView_tomorrow_day" 48 android:typeface ="serif" android:textSize ="50.0sp" 49 android:layout_alignBaseline ="@+id/textView_datemattermessage" 50 android:id ="@+id/textView_daysleft" ></ TextView > 51 < TextView android:textColor ="@android:color/black" 52 android:layout_width ="wrap_content" android:gravity ="center" 53 android:layout_height ="wrap_content" 54 android:layout_alignParentRight ="true" android:typeface ="serif" 55 android:text ="天" android:textSize ="20.0sp" android:id ="@+id/textView_tomorrow_day" ></ TextView > 56 </ RelativeLayout > 57 < ListView 58 android:id ="@+id/tomorrow_task_listview" android:layout_height ="wrap_content" 59 android:layout_width ="fill_parent" android:layout_marginTop ="5dp" 60 android:dividerHeight ="10dp" android:layout_marginBottom ="10dp" 61 android:cacheColorHint ="@android:color/transparent" 62 android:divider ="@android:color/transparent" android:listSelector ="@android:color/transparent" 63 android:drawSelectorOnTop ="false" > 64 </ ListView > 65 </ LinearLayout > 66 </ ScrollView >
tomorrow_task_item.xml
1 <? xml version="1.0" encoding="utf-8" ?> 2 < LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android" 3 android:orientation ="horizontal" android:layout_width ="fill_parent" 4 android:layout_height ="fill_parent" 5 android:padding ="5dp" 6 android:background ="@drawable/recommend_bg" 7 android:gravity ="center_vertical" 8 > 9 10 <!-- 任务名称、距离的天数图标 --> 11 < RelativeLayout android:layout_width ="fill_parent" android:layout_alignParentLeft ="true" 12 android:layout_height ="50dp" android:layout_gravity ="left" > 13 14 < TextView 15 android:layout_marginLeft ="8dp" android:layout_marginTop ="8dp" 16 android:textSize ="25.0sp" android:typeface ="serif" android:gravity ="center_vertical" 17 android:textColor ="@android:color/white" android:id ="@+id/tomorrow_item_textView_datematter" 18 android:layout_width ="200dp" android:layout_height ="wrap_content" 19 android:singleLine ="true" 20 android:layout_alignParentLeft ="true" 21 /> 22 23 < TextView android:textSize ="35.0sp" android:typeface ="serif" 24 android:layout_marginLeft ="2dp" android:textColor ="@android:color/white" 25 android:id ="@+id/tomorrow_item_textView_daysleft" android:layout_width ="85dp" 26 android:layout_height ="wrap_content" 27 android:layout_toLeftOf ="@+id/tomorrow_item_textView_tomorrow_day" 28 android:gravity ="center_horizontal" /> 29 30 < TextView android:textSize ="25.0sp" android:typeface ="serif" android:layout_marginTop ="8dp" 31 android:textColor ="@android:color/white" android:id ="@+id/tomorrow_item_textView_tomorrow_day" 32 android:layout_width ="wrap_content" android:layout_height ="wrap_content" 33 android:singleLine ="true" android:text ="天" 34 android:layout_alignParentRight ="true" /> 35 </ RelativeLayout > 36 </ LinearLayout >
数据存储
谈完了数据的显示,再说说数据的存储。有关活动的数据都是存储在数据库当中的,相信做过Android开发的都不陌生,我也不班门弄斧了。
下面是建数据表的SQL语句,写在DatabaseHelper类中:
DatabaseHelper.java
1 // 创建任务表 2 private static String CREATE_TASK_TABLE_SQL = "CREATE TABLE IF NOT EXISTS " + TaskBean.TABLE_NAME + "(" 3 + TaskBean.ID + " INTEGER PRIMARY KEY," 4 + TaskBean.DATETIME + " TEXT," 5 + TaskBean.TASK_NAME + " TEXT," 6 + TaskBean.POSITION_NAME + " TEXT," 7 + TaskBean.TIME_ALERT_FLAG + " INTEGER," 8 + TaskBean.PRIORITY + " INTEGER," 9 + TaskBean.IF_COMPLETE + " INTEGER," 10 + TaskBean.REPEAT_DAYS + " INTEGER," 11 + TaskBean.IF_FUTURE+ " INTEGER," 12 + TaskBean.PARENT +" INTEGER)";
见名思义,通过上面的代码可以知道这个表中各个字段的含义,但我还是详细说一下。下面是task表的详细属性说明和表图:
Name
Comment
Default
DataType
P
F
M
task_id
任务编号
INTEGER
√
√
task_datetime
任务时间
TEXT
task_name
任务内容
TEXT
position_name
任务地点
TEXT
time_alert
是否提醒
INTEGER
task_priority
任务优先级
INTEGER
if_complete
是否完成
INTEGER
repeat_days
重复天数
INTEGER
parent
父亲编号
INTEGER
可能大家会比较好奇 为什么会有一个parent字段 。因为在今天视图中创建活动时可以设置活动周期,即重复天数。当用户创建了一个活动周期大于1天的活动时,后台数据库需要创建相同数量的记录,此时parent父亲编号同为当天活动的编号。这样在进行后续的修改和删除时根据repeat_days和parent这两个字段就可以有效地进行操作。
待续
作者: 黑剑
出处: http://www.cnblogs.com/blacksword/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
标签: Android
作者: Leo_wl
出处: http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
版权信息查看更多关于基于Android平台的开源项目PlanBetter设计篇之一 核心功能的详细内容...