Android Development Tutorial Calendar Project Practice (iii) _android

Second, create a style

The table line that the calendar displays, uses the Cell fills the shape's border to realize, in order to unify, we first defines the border line the color and the line fine.

Also define a system fill style, and so on.

Create color:

Color_calendar_border form Line
Color_calendar_title_gregorian title bar Date month text color Color_calendar_title_lunar title bar lunar color_calendar_title_startcolor_ Calendar_title_endcolor_calendar_title_addition title bar Festival, solar term color_calendar_weekindex annual unit weekly serial number Color_calendar_weekindex_ Backgroundcolor_calendar_weekend Weekend Color_calendar_weekend_backgroundcolor_calendar_header Table Head Color_calendar_ Header_backgroundcolor_calendar_outrange non-monthly date Color_calendar_outrange_backgroundcolor_calendar_normal_gregorian Gregorian date Color_calendar_normal_lunar Lunar date Color_calendar_normal_backgroundcolor_calendar_today_gregorian today Gregorian date Color_ Calendar_today_lunar today's lunar date color_calendar_today_backgroundcolor_calendar_solarterm solar terms Color_calendar_festival Festivals color_calendar_pressed Click cell Fill Background
Color_calendar_focused Focus Cell Fill background

Click on the icon below the Search below (New Android XML File)

Select Resource type-> Values, enter the filename-> colors, select Root Element-> resources, click Finish.

Define Color_calendar_border

Copy Code code 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" > #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>

The value of Color is made up of four parts: transparency, Red, Green, Blue, each part can be expressed in one or two-digit hexadecimal digits, and transparency can be omitted.

Such as:

FFFF or ffffffff represent opaque white, the preceding transparency can be omitted: FFF or FFFFFF

7F00 indicates a translucent red

More please check: Http://developer.android.com/guide/topics/resources/more-resources.html#Color

The color definition unified in a file, is for two points, one is to use the same color definitions, such a change, the corresponding position will follow the change, but also to modify the convenience, do not need to go everywhere to find a file. The above color_calendar_border is used by the various state fill graphs of the table, and as the Color_calendar_weelndex_background only one use, if you do not want to be unified management, can not be defined here, in the definition of shape , using fixed values directly.

Create Dimen：

Click on the icon below the Search below (New Android XML File)

Select Resource type-> Values, enter the filename-> dimens, select Root Element-> resources, click Finish.

Completed XML file contents:

Copy Code code as follows:

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

</resources>

Size of the unit has six main types: DP, SP, PT, PX, MM, in, more information please refer to: http://developer.android.com/guide/topics/resources/more-resources.html# Dimension

Create a Color state List

In our calendar, cells have three states, which are no focus, press, have focus, and in order to display different colors in different states, you can define the color state List.

For more on the Color state List, please refer to: http://developer.android.com/guide/topics/resources/color-list-resource.html.

Color State List List :

Colorlist_calendar_normal
Colorlist_calendar_outrange
Colorlist_calendar_weekend
Colorlist_calendar_today

Click on the icon below the Search below (New Android XML File)

Select Resource type-> drawable, enter filename-> colorlist_calendar_outrange, select Root Element-> selector, click Finish.

completed XML file：

Copy Code code 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.

created by drawable:

Shape_calendar_titlebar.xml main screen title bar fill background shape_calendar_header.xml header fill background shape_calendar_cell_weekindex.xml Year for Cell week ordinal cell fill background shape_calendar_cell_weekend.xml weekend date cell fill background shape_calendar_cell_normal.xml month normal date cell fill background shape_ Calendar_cell_outrange.xml Non-Current month date cell fill background shape_calendar_cell_today.xml today cell fill background

Click on the icon below the Search below (New Android XML File)

Select Resource type-> drawable, enter filename-> shpae_calendar_titlebar, select Root Element-> shape, click Finish.

Enter shape definition :

Copy Code code 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 help us to generate a rounded rectangle with the fill color to the top and bottom gradient.

Radius = fillet Size

Angle = gradient fill direction (number of digits in 45, 0-360,90 for gradient fill from top down)

StartColor, EndColor = starting and ending color definitions for fills

Others are created by this, but the fill rectangle of the table, not rounded, delete radius or set to 0

such as: Shape_calendar_cell_outrange.xml

Copy Code code 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, where you can fill different colors with the color state list defined above.

Stroke = Rectangle border, Width = border line weight, color = border Line Colors

Create style

Open Res/styles.xml and add a style definition. Because the style is related to the picture design, when we design the interface, also must adjust accordingly, so when use, each Add. Here gives a sample:

Copy Code code 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 to
Backward-compatibility can go.
-->
</style>

<!--application theme. -->
<style name= "Apptheme" parent= "Appbasetheme" >
<!--all customizations this are not specific to a particular api-level can go. -->
</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>