android 開發(fā)教程之日歷項目實踐(三)

更新時間：2013年01月03日 15:19:57 作者：

決定開始學(xué)習(xí) Android 平臺下的軟件開發(fā)，以日歷作為實踐項目，進行一周后，基本完成,有需要的朋友可以參考下

二、創(chuàng)建樣式

日歷顯示的表格線，使用 Cell 填充圖形的邊框來實現(xiàn)，為了統(tǒng)一，我們先定義邊框線的顏色及線條精細。

另外還要定義一系統(tǒng)填充樣式等。

創(chuàng)建 color：

color_calendar_border 表格線
color_calendar_title_gregorian 標題欄日期年月文字的顏色color_calendar_title_lunar 標題欄農(nóng)歷color_calendar_title_startcolor_calendar_title_endcolor_calendar_title_addition 標題欄節(jié)日，節(jié)氣color_calendar_weekindex 年單位周序號color_calendar_weekindex_backgroundcolor_calendar_weekend 周末color_calendar_weekend_backgroundcolor_calendar_header 表頭color_calendar_header_backgroundcolor_calendar_outrange 非本月日期color_calendar_outrange_backgroundcolor_calendar_normal_gregorian 公歷日期color_calendar_normal_lunar 農(nóng)歷日期color_calendar_normal_backgroundcolor_calendar_today_gregorian 今天公歷日期color_calendar_today_lunar 今天農(nóng)歷日期color_calendar_today_backgroundcolor_calendar_solarterm 節(jié)氣color_calendar_festival 節(jié)日color_calendar_pressed 點擊單元格填充背景
color_calendar_focused 焦點單元格填充背景

點擊下圖菜單 Search 下面的圖標(New Android XML File)

選擇 Resource Type -> Values，輸入文件名 -> colors，選擇 Root Element -> resources，點擊 Finish。

定義 color_calendar_border

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<color name="color_calendar_border">#3fff</color> 
<color name="color_calendar_title_gregorian">#cfff</color> 
<color name="color_calendar_title_lunar">#cfff</color> 
<color name="color_calendar_title_start">#c000</color> 
<color name="color_calendar_title_end">#6000</color> 
<color name="color_calendar_title_addition">#f63</color> 
<color name="color_calendar_weekindex">#3fff</color> 
<color name="color_calendar_weekindex_background">#369f</color> 
<color name="color_calendar_weekend">#9fff</color> 
<color name="color_calendar_weekend_background">#3f99</color> 
<color name="color_calendar_header">#9fff</color> 
<color name="color_calendar_header_background">#6000</color> 
<color name="color_calendar_outrange">#3fff</color> 
<color name="color_calendar_outrange_background">#3fff</color> 
<color name="color_calendar_normal_gregorian">#cfff</color> 
<color name="color_calendar_normal_lunar">#9fff</color> 
<color name="color_calendar_normal_background">#0000</color> 
<color name="color_calendar_today_gregorian">#cfff</color> 
<color name="color_calendar_today_lunar">#9fff</color> 
<color name="color_calendar_today_background">#06c</color> 
<color name="color_calendar_solarterm">#c0c3</color> 
<color name="color_calendar_festival">#cf90</color> 
<color name="color_calendar_pressed">#306c</color> 
<color name="color_calendar_focused">#606c</color> 
</resources> 

Color 的值由四部分組成：透明度，Red, Green, Blue，每部分可以用一位或兩位十六進制數(shù)字表示，透明度可以省略。

如：

ffff 或 ffffffff 表示不透明白色，前面的透明度可以省略：fff 或 ffffff

7f00 表示半透明的紅色

更多請查看：http://developer.android.com/guide/topics/resources/more-resources.html#Color

將顏色定義統(tǒng)一放在一個文件中，是出于兩點考慮，一是多處用到同一種顏色定義，這樣一處修改，相應(yīng)的位置都會跟著變，另外則是為了修改方便，無須到處去找某一個文件。上面的 color_calendar_border 被表格的各種狀態(tài)填充圖形用到，而像 color_calendar_weelndex_background 只有一處用到，如果不想統(tǒng)一管理，也可以不在這里定義，在定義 shape 時，直接使用固定值。

創(chuàng)建 dimen：

點擊下圖菜單 Search 下面的圖標(New Android XML File)

選擇 Resource Type -> Values，輸入文件名 -> dimens，選擇 Root Element -> resources，點擊 Finish。

完成的 xml 文件內(nèi)容：

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<dimen name="dimen_calendar_border">1dp</dimen> 

</resources> 

尺寸的單位主要有六種：dp, sp, pt, px, mm, in，更多介紹請參照：http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

創(chuàng)建 Color State List

在我們的日歷中，單元格有三種狀態(tài)，分別是無焦點，按下，有焦點，為了在不同的狀態(tài)下顯示不同的顏色，可以定義 Color State List。

關(guān)于 Color State List，更多請參照：http://developer.android.com/guide/topics/resources/color-list-resource.html。

Color State List 列表：

colorlist_calendar_normal
colorlist_calendar_outrange
colorlist_calendar_weekend
colorlist_calendar_today

點擊下圖菜單 Search 下面的圖標(New Android XML File)

選擇 Resource Type -> Drawable，輸入文件名 -> colorlist_calendar_outrange，選擇 Root Element -> selector，點擊 Finish。

完成的 xml 文件：

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_pressed="true" android:color="@color/color_calendar_pressed"/> 
<item android:state_focused="true" android:color="@color/color_calendar_focused"/> 
<item android:color="@color/color_calendar_outrange_background"/> 
</selector> 

其它也同樣創(chuàng)建。

創(chuàng)建的 drawable：

shape_calendar_titlebar.xml 主畫面標題欄填充背景shape_calendar_header.xml 表頭填充背景shape_calendar_cell_weekindex.xml 年為單元的周序號單元格填充背景shape_calendar_cell_weekend.xml 周末日期單元格填充背景shape_calendar_cell_normal.xml 當月普通日期單元格填充背景shape_calendar_cell_outrange.xml 非當前月日期單元格填充背景shape_calendar_cell_today.xml 今天單元格填充背景

點擊下圖菜單 Search 下面的圖標(New Android XML File)

選擇 Resource Type -> Drawable，輸入文件名 -> shpae_calendar_titlebar，選擇 Root Element -> shape，點擊 Finish。

輸入 shape 定義：

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<corners android:radius="3dp" /> 
<gradient android:angle="90" 
android:startColor="@color/color_calendar_title_start" 
android:endColor="@color/color_calendar_title_end" 
/> 
</shape> 

這段定義代碼會幫我們生成一個圓角矩形，填充顏色是上下漸變的。

radius = 圓角大小

angle = 漸變填充方向(45的位數(shù)，0-360，90 表示從上往下漸變填充)

startColor, endColor = 填充的起始與終止顏色定義

其它的也按此一一創(chuàng)建，但表格的填充矩形，不要圓角，刪除 radius 或設(shè)為 0

如：shape_calendar_cell_outrange.xml

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="@color/colorlist_calendar_outrange" /> 
<stroke android:width="@dimen/dimen_calendar_border" 
android:color="@color/color_calendar_border" /> 
</shape> 

solid = 填充色，這里用前面定義的 color state list，來實現(xiàn)不同狀態(tài)下，填充不同顏色。

stroke = 矩形邊框，width = 邊框線粗細， color = 邊框線顏色

創(chuàng)建 style

打開 res/styles.xml，添加樣式定義。由于樣式與畫面設(shè)計相關(guān)，在我們設(shè)計界面時，還要相應(yīng)調(diào)整，所以在使用時，一一添加。這里給出一個 sample：

復(fù)制代碼代碼如下:

<resources xmlns:android="http://schemas.android.com/apk/res/android"> 

<!-- 
Base application theme, dependent on API level. This theme is replaced 
by 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 in 
res/values-vXX/styles.xml, while customizations related to 
backward-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_title"> 
<item name="android:background">@drawable/shape_calendar_titlebar</item> 
</style> 

<style name="style_calendar_title_gregorian"> 
<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> 
... ... 
</resources> 