Android实现豆瓣FM的首页效果

实现了豆瓣FM的首页效果，如下：

程序代码结构如下：

 

其中MainActivity是主界面显示，GalleryFlow实现了Gallery的随手势拖动的大小变化，Rotate3dAnimation实现了歌曲封面图片的旋转。

main.xml是主界面的布局文件，总体采用LinearLayout布局，上部是Gallery，中部图片部分采用了FrameLayout，确保了歌曲信息和时间能够覆盖在封面表面，底部采用了横向布局的LinearLayout。具体的Layoutu布局参见Android布局，布局文件代码如下：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical" android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" android:background="@drawable/bg_w">  
5.     <LinearLayout android:orientation="vertical"  
6.         android:layout_width="fill_parent" android:layout_height="wrap_content">  
7.         <TextView android:layout_width="fill_parent"  
8.             android:layout_height="wrap_content" android:gravity="center_horizontal"  
9.             android:text="公共频道" android:layout_marginTop="30px" />  
10.         <com.easymorse.mygallery.GalleryFlow  
11.             android:layout_marginTop="30px" android:id="@+id/mygallery1"  
12.             android:layout_width="fill_parent" android:layout_height="100px"  
13.             android:spacing="70dp" android:gravity="center" />  
14.     </LinearLayout>  
15.     <ImageView android:layout_width="fill_parent"  
16.         android:layout_height="wrap_content" android:src="@drawable/line" />  
17.     <FrameLayout android:layout_width="fill_parent"  
18.         android:layout_height="wrap_content" android:layout_weight="2"  
19.         android:layout_margin="0px" android:gravity="center">  
20.         <LinearLayout android:id="@+id/mContener"  
21.             android:orientation="vertical" android:layout_width="fill_parent"  
22.             android:layout_height="wrap_content"  
23.             android:layout_margin="0px" android:layout_gravity="center" android:gravity="center">  
24.             <ImageView android:layout_width="350px" android:id="@+id/album_corver1"  
25.                 android:layout_height="350px" android:onClick="showContent" />  
26.   
27.             <ImageView android:layout_width="350px" android:id="@+id/album_corver2"  
28.                 android:layout_height="350px" android:visibility="gone"  
29.                 android:onClick="showPicture" />  
30.   
31.         </LinearLayout>  
32.         <TextView android:layout_width="250px" android:layout_height="wrap_content"  
33.             android:text="0:18" android:gravity="center_horizontal"  
34.             android:layout_marginBottom="80px"  
35.             android:layout_gravity="center|bottom" />  
36.         <TextView android:layout_width="250px" android:layout_height="wrap_content"  
37.             android:text=" Warner Bros. Records with Sony BMG"  
38.             android:singleLine="true" android:ellipsize="marquee"  
39.             android:marqueeRepeatLimit="marquee_forever" android:focusable="true"  
40.             android:layout_marginBottom="50px"  
41.             android:focusableInTouchMode="true" android:layout_gravity="center|bottom" />  
42.     </FrameLayout>  
43.     <LinearLayout android:layout_width="fill_parent"  
44.         android:layout_height="wrap_content" android:layout_margin="0px"  
45.         android:orientation="horizontal">  
46.         <ImageView android:layout_width="75px"  
47.             android:layout_weight="1" android:layout_height="75px" android:src="@drawable/trash_1" />  
48.         <ImageView android:layout_width="75px"  
49.             android:layout_weight="1" android:layout_height="75px" android:src="@drawable/heart_1" />  
50.         <ImageView android:layout_width="75px"  
51.             android:layout_weight="1" android:layout_height="75px" android:src="@drawable/skip_1" />  
52.     </LinearLayout>  
53. </LinearLayout>  

关于封面图片的倒影效果参见：Android实现图片的倒影效果。

图片点击后旋转的效果参见：自定义动画实现不同View的切换。

Gallery实现文字显示参见：Android修改Gallery界面布局。

不足之处，头部的Gallery效果和豆瓣FM还有很大区别。

项目源码见：http://bigcateasymorse.googlecode.com/svn/trunk/android-gallery-demo0.1/