Android 日历开发教程[四]

这节开始制作 Activity 视图。

视图的设计，在原理上可以借鉴 HTML 设计，目前大家的共识是内容与样式分离，也就是内容在 HTML 文件中定义，样式在 CSS 文件中对应。

同样，Android 的视图也可以分为 Activity XML 文件 与 style.xml 及其它资源文件(color, dimens, string, share ...)，尽可能将布局样式的定义属性转移到 style.xml 文件中。

由于刚开始在 Android 平台上开发，对视图及样式的了解不是很深入，下面的内容有可能不是最佳实现，如有不同意见，希望能在回复中告知。

activity_main.xml

打开在创建 Project 时，ADT 帮我们建立的 activity_main.xml 文件。

在开始编辑之前，作以下设置：

将目标设备设为 Nexus 7屏幕方向设置为横屏设置 Theme 为 Holo.Light.NoActionBar

我们要更改根节点的 Layout 类型，切换到 xml 编辑器，直接将 RelativeLayout 改成 LinearLayout。

按下图右边的树结构，依次添加各个组件。其中，最后一个 pager 我在左边的 Palette 面板上未找到，所以直接在 xml 文件中手工输入。

设计样式，加入到 style.xml 中，再在画面上为各组件指定样式。

最后，检查 activity_main.xml 文件，清理不必要的定义，或考虑转移到 style.xml 中。

最终完成的画面：

最终的 activity_main.xml 文件：

<LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/img_main_background"android:orientation="vertical"tools:context=".MainActivity" ><LinearLayout style="@style/style_calendar_titlebar" ><LinearLayout style="@style/style_calendar_title_gregorian_container" ><ImageViewandroid:id="@+id/imgPreviousMonth"android:layout_width="wrap_content"android:layout_height="wrap_content"android:clickable="true"android:contentDescription="@string/desc_previous_month"android:onClick="onMenuImageClick"android:src="@drawable/img_arrow_left" /><TextViewandroid:id="@+id/txtTitleGregorian"style="@style/style_calendar_title_gregorian_text"android:text="@string/demo" /><ImageViewandroid:id="@+id/imgNextMonth"android:layout_width="wrap_content"android:layout_height="wrap_content"android:contentDescription="@string/desc_next_month"android:onClick="onMenuImageClick"android:src="@drawable/img_arrow_right" /></LinearLayout><LinearLayout style="@style/style_calendar_title_detail_container" ><TextViewandroid:id="@+id/txtTitleLunar"style="@style/style_calendar_title_lunar_text"android:text="@string/demo" /><TextViewandroid:id="@+id/txtTitleAddition"style="@style/style_calendar_title_addition_text"android:text="@string/demo" /></LinearLayout><LinearLayout style="@style/style_calendar_title_command_container" ><ImageViewandroid:id="@+id/imgToday"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_marginRight="30dp"android:contentDescription="@string/desc_today"android:onClick="onMenuImageClick"android:src="@drawable/img_today" /><ImageViewandroid:id="@+id/imgPopupMenu"android:layout_width="wrap_content"android:layout_height="match_parent"android:contentDescription="@string/desc_popup_menu"android:onClick="onMenuImageClick"android:src="@drawable/img_option_menu" /></LinearLayout></LinearLayout><android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout>

style.xml 文件，在完成其它 view 之后再列出。

view_calendar_table.xml

点击 下图 菜单 Search 下面的图标(New Android XML File)

选择 Resource Type -> Layout，输入文件名 -> view_calendar_table，选择 Root Element -> TableLayout，点击 Finish。

这次，我们设置编辑器的 Theme 为 Holo.NoActionBar，因为我们的样式，定义的边框线和文字颜色是白色，在白色背景下观察不到，这个主题的背景色是黑色。

完成后的画面：

xml 文件内容：

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:id="@+id/tableViewCalendar"android:layout_width="fill_parent"android:layout_height="fill_parent"android:stretchColumns="1,2,3,4,5,6,7" ><!-- 这里会有一个警告，提示 TableRow 不必要，因为只有一行内容。但是，日历的其它行是动态添加的，所以这里必须保留，这样 TableHeader 和 TableBody 的列才能对齐。--><TableRowandroid:layout_width="match_parent"android:layout_height="wrap_content" ><LinearLayoutstyle="@style/style_calendar_header_container"android:background="@drawable/shape_calendar_cell_weekindex" ><TextViewstyle="@style/style_calendar_header_text"android:layout_width="38dp" /></LinearLayout><LinearLayoutstyle="@style/style_calendar_header_container"android:background="@drawable/shape_calendar_cell_weekend" ><TextViewstyle="@style/style_calendar_header_text"android:text="@string/calendar_sunday" /></LinearLayout><LinearLayout style="@style/style_calendar_header_container" ><TextViewstyle="@style/style_calendar_header_text"android:text="@string/calendar_monday" /></LinearLayout><LinearLayout style="@style/style_calendar_header_container" ><TextViewstyle="@style/style_calendar_header_text"android:text="@string/calendar_tuesday" /></LinearLayout><LinearLayout style="@style/style_calendar_header_container" ><TextViewstyle="@style/style_calendar_header_text"android:text="@string/calendar_wednsday" /></LinearLayout><LinearLayout style="@style/style_calendar_header_container" ><TextViewstyle="@style/style_calendar_header_text"android:text="@string/calendar_thursday" /></LinearLayout><LinearLayout style="@style/style_calendar_header_container" ><TextViewstyle="@style/style_calendar_header_text"android:text="@string/calendar_firday" /></LinearLayout><LinearLayoutstyle="@style/style_calendar_header_container"android:background="@drawable/shape_calendar_cell_weekend" ><TextViewstyle="@style/style_calendar_header_text"android:text="@string/calendar_saturday" /></LinearLayout></TableRow></TableLayout>

view_calendar_day_cell.xml

按上一段的步骤，创建 view_calendar_day_cell.xml，但选择 LinearLayout 作为根节点。

完成的画面：

xml 文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"style="@style/style_calendar_cell.normal" ><FrameLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><TextViewandroid:id="@+id/txtCellGregorian"style="@style/style_calendar_gregorian.normal"android:text="@string/demo" /><ImageViewandroid:id="@+id/imgCellHint"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="1dp"android:contentDescription="@string/desc_cell_hint" /></FrameLayout><TextViewandroid:id="@+id/txtCellLunar"style="@style/style_calendar_lunar.normal"android:text="@string/demo" /></LinearLayout>

view_calendar_week_index.xml

画面：

xml 文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"style="@style/style_calendar_cell.weekindex"android:orientation="vertical" ><TextViewandroid:id="@+id/txtWeekIndex"style="@style/style_calendar_weekindex_text"android:text="@string/demo" /><TextViewstyle="@style/style_calendar_weekindex_text"android:text="@string/chinese_week" /></LinearLayout>

当前状态下的 style.xml 文件(编写代码时，可能会对其进行更新)：

<resources xmlns:android="/apk/res/android"><!--Base application theme, dependent on API level. This theme is replacedby AppBaseTheme from res/values-vXX/styles.xml on newer devices.--><style name="AppBaseTheme" parent="android:Theme.Light"><!--Theme customizations available in newer API levels can go inres/values-vXX/styles.xml, while customizations related tobackward-compatibility can go here.--></style><!-- Application theme. --><style name="AppTheme" parent="AppBaseTheme"><!-- All customizations that are NOT specific to a particular API-level can go here. --></style><style name="style_calendar_titlebar"><item name="android:layout_width">match_parent</item><item name="android:layout_height">wrap_content</item><item name="android:background">@drawable/shape_calendar_titlebar</item><item name="android:layout_gravity">bottom</item><item name="android:orientation">horizontal</item></style><style name="style_calendar_title_gregorian_container"><item name="android:layout_width">250dp</item><item name="android:layout_height">wrap_content</item><item name="android:layout_marginLeft">10dp</item><item name="android:layout_marginTop">10dp</item><item name="android:gravity">center_vertical</item></style><style name="style_calendar_title_gregorian_text"><item name="android:layout_width">164dp</item><item name="android:layout_height">wrap_content</item><item name="android:textSize">36sp</item><item name="android:textStyle">bold</item><item name="android:textColor">@color/color_calendar_title_gregorian</item><item name="android:layout_marginLeft">25dp</item></style><style name="style_calendar_title_detail_container"><item name="android:layout_width">560dp</item><item name="android:layout_height">match_parent</item><item name="android:gravity">bottom</item><item name="android:paddingBottom">10dp</item><item name="android:paddingLeft">20dp</item></style><style name="style_calendar_title_lunar_text"><item name="android:layout_width">350dp</item><item name="android:layout_height">wrap_content</item><item name="android:layout_gravity">bottom|left</item><item name="android:textSize">16sp</item><item name="android:textColor">@color/color_calendar_title_lunar</item></style><style name="style_calendar_title_addition_text"><item name="android:layout_width">100dp</item><item name="android:layout_height">wrap_content</item><item name="android:textSize">16sp</item><item name="android:textColor">@color/color_calendar_title_addition</item></style><style name="style_calendar_title_command_container"><item name="android:layout_width">wrap_content</item><item name="android:layout_height">match_parent</item><item name="android:gravity">bottom|right</item></style><style name="style_calendar_header_container"><item name="android:layout_width">match_parent</item><item name="android:layout_height">wrap_content</item><item name="android:gravity">center</item><item name="android:background">@drawable/shape_calendar_header</item></style><style name="style_calendar_header_text"><item name="android:layout_width">wrap_content</item><item name="android:layout_height">wrap_content</item><item name="android:textStyle">bold</item><item name="android:textSize">16sp</item><item name="android:textColor">#9fff</item><item name="android:padding">5dp</item></style><style name="style_calendar_weekindex_text"><item name="android:layout_width">wrap_content</item><item name="android:layout_height">wrap_content</item><item name="android:textSize">18sp</item><item name="android:textColor">#9fff</item><item name="android:paddingBottom">2dp</item></style><style name="style_calendar_cell"><item name="android:layout_width">match_parent</item><item name="android:layout_height">match_parent</item><item name="android:clickable">true</item><item name="android:focusable">true</item><item name="android:focusableInTouchMode">true</item><item name="android:onClick">onCellClick</item><item name="android:orientation">vertical</item></style><style name="style_calendar_cell.normal"><item name="android:background">@drawable/shape_calendar_cell_normal</item></style><style name="style_calendar_cell.outrange"><item name="android:background">@drawable/shape_calendar_cell_outrange</item></style><style name="style_calendar_cell.today"><item name="android:background">@drawable/shape_calendar_cell_today</item></style><style name="style_calendar_cell.weekindex"><item name="android:gravity">center_horizontal</item><item name="android:background">@drawable/shape_calendar_cell_weekindex</item></style><style name="style_calendar_cell.weekend"><item name="android:background">@drawable/shape_calendar_cell_weekend</item></style><style name="style_calendar_gregorian"><item name="android:layout_width">wrap_content</item><item name="android:layout_height">wrap_content</item><item name="android:layout_gravity">center_horizontal</item><item name="android:textSize">36sp</item><item name="android:textStyle">bold</item></style><style name="style_calendar_gregorian.normal"><item name="android:textColor">@color/color_calendar_normal_gregorian</item></style><style name="style_calendar_gregorian.outrange"><item name="android:textColor">@color/color_calendar_outrange</item></style><style name="style_calendar_gregorian.today"><item name="android:textColor">@color/color_calendar_today_gregorian</item></style><style name="style_calendar_gregorian.weekend"><item name="android:textColor">@color/color_calendar_weekend</item></style><style name="style_calendar_lunar"><item name="android:layout_width">wrap_content</item><item name="android:layout_height">wrap_content</item><item name="android:layout_gravity">center_horizontal</item><item name="android:textSize">16sp</item><item name="android:paddingBottom">2dp</item></style><style name="style_calendar_lunar.normal"><item name="android:textColor">@color/color_calendar_normal_lunar</item></style><style name="style_calendar_lunar.outrange"><item name="android:textColor">@color/color_calendar_outrange</item></style><style name="style_calendar_lunar.today"><item name="android:textColor">@color/color_calendar_today_lunar</item></style><style name="style_calendar_lunar.weekend"><item name="android:textColor">@color/color_calendar_weekend</item></style></resources>

对于 style 的 name 属性，可以用点分隔来实现继承，如上面的 style_calendar_lunar.today，就是从 style_calendar_lunar 继承而来，然后新增或修改特点属性。

当前状态下的 string.xml

<?xml version="1.0" encoding="utf-8"?><resources><string name="app_name">Pure Lunar Calendar</string><string name="menu_settings">Settings</string><string name="desc_previous_month">previous month</string><string name="desc_next_month">next month</string><string name="desc_today">return to today</string><string name="desc_popup_menu">Popup menu</string><string name="desc_cell_hint">cell hint</string><string name="chinese_week">周</string><string name="demo">demo</string><string name="calendar_sunday">星期日</string><string name="calendar_monday">星期一</string><string name="calendar_tuesday">星期二</string><string name="calendar_wednsday">星期三</string><string name="calendar_thursday">星期四</string><string name="calendar_firday">星期五</string><string name="calendar_saturday">星期六</string><string-array name="gregorianFestivals"><item>元旦</item><item>情人节</item><item>妇女节</item><item>植树节</item><item>消费者权益日</item><item>愚人节</item><item>国际劳动节</item><item>国际儿童节</item><item>教师节</item><item>国庆节</item><item>万圣节</item><item>平安夜</item><item>圣诞节</item></string-array></resources>

[待续] 下节开始编写代码