Calendar project practice in android development tutorial (III)

Ii. Create a style

The table line displayed in the calendar is implemented by filling the border of the graph with Cell. To ensure uniformity, we first define the color and line of the border line.

In addition, you must define a system fill style.

Create color:

Color_calendar_border Table Line
Color_calendar_title_gregorian title bar date and Year text color color_calendar_title_lunar title bar lunar calendar color_calendar_title_startcolor_calendar_title_endcolor_calendar_title_addition title bar holiday, solar color_calendar_weekindex annual unit: weekly No.; weekend; header; non-current month date; Calendar date; lunar calendar date; today's lunar date; solar color_calendar_festival holiday color_calendar_pressed click cell to fill the background
Color_calendar_focused focus cell fill background

Click the icon under the Search menu (New Android XML File)

Select Resource Type-> Values, enter the file name-> colors, select Root Element-> resources, and click Finish.

Define color_calendar_border

Copy codeThe Code is as follows: <? 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"> # 0000f </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>

The Color value consists of four parts: transparency, Red, Green, and Blue. Each part can be represented by a hexadecimal number or two digits. transparency can be omitted.

For example:

Ffff or ffffffff indicates that it is not transparent and white. The transparency of the front can be omitted: fff or ffffff.

7f00 indicates translucent red

For more information, see: http://developer.android.com/guide/topics/resources/more-resources.html#Color

Put the color definition in a single file for two reasons. One is to use the same color definition in multiple places, so that the corresponding position will change accordingly, in addition, you do not need to find a file everywhere for ease of modification. The color_calendar_border above is used by various State filling graphs of the table, and only one such graph is used. If you do not want to manage it in a unified way, you can also define it here. When defining a shape, you can directly use a fixed value.

Create dimen:

Click the icon under the Search menu (New Android XML File)

Select Resource Type-> Values, enter the file name-> dimens, select Root Element-> resources, and click Finish.

Completed xml file content:

Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Resources>
<Dimen name = "dimen_calendar_border"> 1dp </dimen>

</Resources>

The size unit mainly has six kinds: dp, sp, pt, px, mm, in, more Introduction Please refer to: http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

Create Color State List

In our calendar, cells have three states: no focus, press, and focus. To display different colors in different states, you can define a Color State List.

For more information about Color State List, see 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

Click the icon under the Search menu (New Android XML File)

Select Resource Type-> Drawable, enter the file name-> colorlist_calendar_outrange, select Root Element-> selector, and click Finish.

Completed xml file:Copy codeThe Code is as follows: <? 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>

Others are also created.

Drawable created:

Shape_calendar_titlebar.xml fill in the title bar of the main screen with the background shape_calendar_header.xml fill in the header with the background year as the unit's week number cell fill in the background weekend date cell fill in the background shape_calendar_cell_normal.xml month common background shape_calendar_cell_today.xml fill the background with cells today

Click the icon under the Search menu (New Android XML File)

Select Resource Type-> Drawable, enter the file name-> shpae_calendar_titlebar, select Root Element-> shape, and click Finish.

Input shape Definition:

Copy codeThe Code is as follows: <? 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>

This definition code will generate a rounded rectangle, and the fill color is up and down gradient.

Radius = rounded corner size

Angle = gradient fill direction (45 digits, 0-36indicating gradient fill from top to bottom)

StartColor, endColor = Definition of the starting and ending colors for filling

Others are also created based on this, but the table is filled with rectangles. Do not use rounded corners. Delete the radius or set it to 0.

Example: shape_calendar_cell_outrange.xml

Copy codeThe Code is as follows: <? 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 = fill color. Here we use the color state list defined above to fill different colors in different States.

Stroke = rectangular border, width = border line width, color = border line color

Create style

Open res/styles. xml and add a style definition. Because the style is related to the screen design, we need to adjust it when designing the interface, so we can add one by one when using it. Here is a sample:

Copy codeThe Code is as follows: <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
Backward-compatibility can go here.
-->
</Style>

<! -- Application theme. -->
<Style name = "AppTheme" parent = "AppBaseTheme">
<! -- All mizmizations that are NOT specific to a special 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>