基于Android平台的开源项目PlanBetter设计篇之一 核心功能

之前介绍过自己大学时期做过的一些项目，里面有一个基于Android平台的项目叫PlanBetter，项目的详细介绍请参见《项目回顾之一：PlanBetter时间管理软件（基于Android平台）》，里面附有本项目的一些截图。如果您对本项目的设计实现感兴趣，欢迎您继续看下去！

      这个项目是一年前做的，时间隔得比较久，而且之前也没做过什么总结，所以对于项目的具体设计实现可能记得不是很清楚，但是我会尝试着将它完整地呈现给大家。

      这个项目的核心功能是计划这一块，通过三个连续的视图将昨天任务完成情况、今天任务完成情况以及未来任务提醒表现出来。用户可以通过滑动屏幕在这三个连续的视图之间进行切换，透过事先的规划作为一种提醒和指引，督促用户在规定的时间内把事情做好。可以给大家简单看一下计划这一块的截图：

                                                 

                                                                       均为昨天视图，左图为没有活动的显示效果，右图为有活动的显示效果

                                                 

                                                                       均为今天视图，左图为没有活动的显示效果，右图为有活动的显示效果

                                                                              

                                                                                   上图为未来视图，这里只截了有活动的效果图

      截图演示到此为止。由于这里是设计篇，所以我着重介绍这里的设计思路。

      对于一个活动，比较重要的三点就是时间、地点和活动内容。当然地点可以不用确定，有的时候只用了解时间和活动内容即可。

关于昨天

     对于昨天，我们往往关心的是昨天都做了哪些事情，有哪些事情没有完成，哪些事情是比较重要的。当然你可以看完之后将其删除，保护您的隐私。

      所以你们看到的昨天视图，即是将这些信息提供给用户。之前的设计图是在纸上画的，就不提供给大家了。画图说明如下图所示：

                         

昨天视图的布局代码如下所示，其中yesterday_task_layout.xml为整个布局的文件，yesterday_task_item.xml为单个活动的布局，因为活动列表是用ListView来实现的。

 <?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>

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来实现。

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>

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>  

关于未来

      这里未来相对来说比较容易。关于未来，只要起到提醒的作用就可以了。只要明白活动内容和日期，我们就很容易掌握将要到来的事情。你也可以指定具体的时间点，在未来的某时刻进行活动提醒。这里通过倒计时的方式显示，更容易让用户接受，一目了然。

      如下图所示，对比昨天和今天视图，比较大的一个区别在于，多了一个活动详细。你可以通过点击某个活动，活动详细里就可以把详细信息显示出来，在这里你可以查看具体的日期。另外，你可以通过长按某个活动来对活动进行编辑和删除操作。

                                  

 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>

 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类中：

 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