Android 高仿三星日历

1.效果图：

Gif图片有利有弊啊，很想形象地展示效果，但是Gif图片不断地在动，不断循环也是会影响文章阅读。三星的日历做的非常好，点击右上角的点，下面会产生平移动画，非常酷，今天仿了一个。

2.Android 中的动画

这里使用了ObjectAnimator中的下面的方法
public static ObjectAnimatorofFloat(Object target, String propertyName, float... values)

target	要进行动画的控件
propertyName	要更改的属性名称，一般控件里SetXX后面的值，比如一个控件可以SetRotation,那么Rotation就是一个属性名称
values	属性更改的两个值，从开始到结束

具体代码：

[cpp] view plain copy

1. // 旋转动画,从控件已经旋转的角度到180  
2.         ObjectAnimator animRightRotation = ObjectAnimator.ofFloat(  
3.                 mTabFrameLayout, "rotation", mTabFrameLayout.getRotation(),  
4.                 180f).setDuration(1000);  
5.         // 向左平移动画,从控件已经平移的位置到给定宽度  
6.         ObjectAnimator animLeftMove = ObjectAnimator.ofFloat(mLinearLayout,  
7.                 "x", mLinearLayout.getX(), -54).setDuration(  
8.                 1000);  
9.   
10.         animRightRotation.start();  
11.         animLeftMove.start();  

重新点击圆圈的动画代码也是类似的非常简单。

3.谈下这次的布局

主要难点就是要用HorizontalScrollView这个控件，因为我们在超出屏幕范围内的地方存在布局，如上图所示。把HorizontalScrollView弄上一个空的Touch事件，这样手动就不会使它滑动。

下面是缩减版的布局代码。

[html] view plain copy

1. <!-- 超出屏幕水平宽度的布局需要放在HorizontalScrollView中 -->  
2.    <HorizontalScrollView  
3.        android:id="@+id/scrollLayout"  
4.        android:layout_width="match_parent"  
5.        android:layout_height="match_parent"  
6.        android:scrollbarSize="0dp"  
7.        >  
8.    <!-- 左边加右边的整体布局,会向左进行平移动画 -->  
9.    <LinearLayout  
10.        android:id="@+id/animationLayout"   
11.        android:layout_width="wrap_content"  
12.        android:layout_height="match_parent"  
13.        android:orientation="horizontal"  
14.        >  
15.      <!-- 左边布局,默认会显示处理 -->  
16.      <LinearLayout  
17.          android:id="@+id/leftLayout"   
18.          android:layout_width="320dp"  
19.          android:layout_height="match_parent"  
20.          android:orientation="vertical">  
21.         <ImageView   
22.            android:layout_width="wrap_content"  
23.            android:layout_height="wrap_content"  
24.            android:src="@drawable/ss_calendar_top"  
25.            />  
26.        <View   
27.            android:layout_width="match_parent"  
28.            android:layout_height="match_parent"  
29.            android:background="@drawable/ss_calendar"  
30.            />  
31.     </LinearLayout>  
32.      
33.      
34.     <!-- 右边默认在屏幕视野外的部分 -->  
35.     <LinearLayout  
36.         android:layout_width="@dimen/right_container_width"  
37.         android:layout_height="match_parent">  
38.         <include   
39.             layout="@layout/right_container"  
40.             />  
41.     </LinearLayout>  
42.     </LinearLayout>  
43.     </HorizontalScrollView>  

4.再说下右边的文字旋转90度显示

网上有很多种方式实现，有用动画，有重新TextView的OnDraw方法，我这里只是简单地设置rotation等于90。宽度和高度设置成一样的，但由于布局宽度限制，看起来也只是一半。下面的代码只有两个TextView，多个添加即可，主要要把它们放在一个TabWidget中，这样设置某一个TextView为高亮状态比较容易。

[html] view plain copy

1. <TabWidget xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:id="@+id/rightTab"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical">  
6.   
7.     <TextView  
8.         android:id="@+id/yearLabel"  
9.         android:text="@string/year"  
10.         android:layout_width="76dip"  
11.         android:layout_height="76dip"  
12.         android:rotation="90"  
13.         android:paddingTop="5dp"  
14.         android:gravity="center|bottom"  
15.         />  
16.       <TextView  
17.         android:id="@+id/monthLabel"  
18.         android:text="@string/month"  
19.         android:layout_width="76dip"  
20.         android:layout_height="76dip"  
21.         android:rotation="90"  
22.         android:paddingTop="5dp"  
23.         android:gravity="center|bottom"  
24.         />  
25.     
26. </TabWidget>  

项目下载地址：
http://www.waitingfy.com/?attachment_id=650
文章源地址：

http://www.waitingfy.com/?p=646