Jamendo开源在线音乐播放器源码分析播放界面布局

Jamendo的播放界面做的很不错，如下图：

中间那四个按钮加入了透明度渐变动画，点击桌面会出现这四个Button

中间那个背景的下方还使用了倒影，效果看起来很不错

最后就是使用了SlidingDrawer这几方面都可以学习下。

先说下那四个按钮的布局

 

Java代码  

1. <RelativeLayout android:id="@+id/FourWayMediaLayout"  
2.     android:layout_height="300dip" android:layout_width="300dip"  
3.     android:background="@null" android:layout_centerHorizontal="true"  
4.     android:layout_alignTop="@id/ReflectableLayout">  
5.     <ImageButton android:id="@+id/PlayImageButton"  
6.         android:background="@null" android:src="@drawable/player_play_light"  
7.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
8.         android:layout_centerHorizontal="true" android:layout_marginTop="10dip"  
9.         android:layout_alignParentTop="true" android:visibility="gone"></ImageButton>  
10.     <ImageButton android:id="@+id/StopImageButton"  
11.         android:background="@null" android:src="@drawable/player_stop_light"  
12.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
13.         android:layout_centerHorizontal="true" android:layout_marginBottom="10dip"  
14.         android:layout_alignParentBottom="true" android:visibility="gone"></ImageButton>  
15.     <ImageButton android:id="@+id/NextImageButton"  
16.         android:background="@null" android:src="@drawable/player_next_light"  
17.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
18.         android:layout_centerVertical="true" android:layout_marginRight="10dip"  
19.         android:layout_alignParentRight="true" android:visibility="gone"></ImageButton>  
20.     <ImageButton android:id="@+id/PrevImageButton"  
21.         android:background="@null" android:src="@drawable/player_prev_light"  
22.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
23.         android:layout_centerVertical="true" android:layout_marginLeft="10dip"  
24.         android:layout_alignParentLeft="true" android:visibility="gone"></ImageButton>  
25. </RelativeLayout>  

 fade_in.xml  位置在Res/anmi文件夹下面，我们看到其实即使定义了动画中的alpha通过设置透明度来实现，fade_in.xml主要是从无到有的渐变过程

 

Java代码  

1. <set xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:zAdjustment="bottom" android:fillAfter="false">  
3.   
4.     <alpha android:fromAlpha="0" android:toAlpha="1.0" android:startOffset="400"  
5.         android:duration="400" />  
6.   
7. </set>  

 

fade_out.xml 主要是从有到无的渐变过程

 

Java代码  

1. <set xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:zAdjustment="bottom" android:fillAfter="false">  
3.   
4.     <alpha android:fromAlpha="1.0" android:toAlpha="0"  
5.         android:duration="400" />  
6.   
7. </set>  

之后就是在代码中通过定义监听器

 

Java代码  

1. private ImageButton mPlayImageButton;  
2. private ImageButton mNextImageButton;  
3. private ImageButton mPrevImageButton;  
4. private ImageButton mStopImageButton;  
5.  ,.............................  
6.                 private Animation mFadeInAnimation;  
7. private Animation mFadeOutAnimation;  
8. ...............................  
9.     mFadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_in);  
10.    mFadeOutAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_out);  
11.    mFadeOutAnimation.setAnimationListener(new AnimationListener(){  
12.   
13.         @Override  
14.         public void onAnimationEnd(Animation animation) {  
15.             setMediaGone();  
16.         }  
17.   
18.         @Override  
19.         public void onAnimationRepeat(Animation animation) {  
20.             // nothing here  
21.         }  
22.   
23.         @Override  
24.         public void onAnimationStart(Animation animation) {  
25.             setFadeOutAnimation();  
26.         }  
27.   
28.     });  
29.   
30.     mFadeInAnimation.setAnimationListener(new AnimationListener(){  
31.   
32.         @Override  
33.         public void onAnimationEnd(Animation animation) {  
34.   
35.             new Handler().postDelayed(new Runnable(){  
36.   
37.                 @Override  
38.                 public void run() {  
39.                     if(mFadeInAnimation.hasEnded())//judge whether the fadeInAnimation is ended   
40.                         mPlayImageButton.startAnimation(mFadeOutAnimation);  
41.                 }  
42.   
43.             }, 7500);  
44.         }  
45.   
46.         @Override  
47.         public void onAnimationRepeat(Animation animation) {  
48.             // nothing here  
49.         }  
50.   
51.         @Override  
52.         public void onAnimationStart(Animation animation) {  
53.             setMediaVisible();  
54.         }  
55.   
56.     });  
57.   
58.   
59. /** 
60.  * Makes 4-way media visible 
61.  */  
62. private void setMediaVisible(){  
63.     mPlayImageButton.setVisibility(View.VISIBLE);  
64.     mNextImageButton.setVisibility(View.VISIBLE);  
65.     mPrevImageButton.setVisibility(View.VISIBLE);  
66.     mStopImageButton.setVisibility(View.VISIBLE);  
67. }  
68.   
69. /** 
70.  * Makes 4-way media gone 
71.  */  
72. private void setMediaGone(){  
73.     mPlayImageButton.setVisibility(View.GONE);  
74.     mNextImageButton.setVisibility(View.GONE);  
75.     mPrevImageButton.setVisibility(View.GONE);  
76.     mStopImageButton.setVisibility(View.GONE);  
77. }  
78.   
79. /** 
80.  * Sets fade out animation to 4-way media 
81.  */  
82. private void setFadeOutAnimation(){  
83.     mPlayImageButton.setAnimation(mFadeOutAnimation);  
84.     mNextImageButton.setAnimation(mFadeOutAnimation);  
85.     mPrevImageButton.setAnimation(mFadeOutAnimation);  
86.     mStopImageButton.setAnimation(mFadeOutAnimation);  
87. }  
88.   
89. FadeInAnimation);  
90.     mStopImageButton.setAnimation(mFadeInAnimation);  
91. }  
92.   
93. /** 
94.  * Sets fade out animation to 4-way media 
95.  */  
96. private void setFadeInAnimation(){  
97.     mPlayImageButton.setAnimation(mFadeInAnimation);  
98.     mNextImageButton.setAnimation(mFadeInAnimation);  
99.     mPrevImageButton.setAnimation(  

   从以上代码中，可以看出其实使用动画的步骤其实还是很容易的：

   1.定义动画xml文件，可以是透明度，移位，缩放OR 旋转等动画效果

   2.调用AnimationUtils的loadAnimation方法来加载动画xml文件

   mFadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_in);
   mFadeOutAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_out);

   3.给需要动画显示效果的控件加上动画

   mPlayImageButton.setAnimation(mFadeOutAnimation);

   ...........

    下面说说布局中那个image倒影的实现：

    
    

    代码中写了了两个自定义View，分别继承自LiearLayout和ImageView

   public class ReflectableLayout extends RelativeLayout 

   public class ReflectiveSurface extends ImageView

   其中ReflectableLayout里面存放有两个继承自ImageView的RemoteImageView

   下面分析怎么实现倒影的

    其实步骤很简单，只要在ReflectiveSurface里面传入经过处理变换的canvas然后调用ReflectableLayout的Ondraw方法就可以

    所谓处理其实就是进行一个坐标变化然后调用scale（1f,-1f）进行绘制

    具体实现代码如下：

   

Java代码  

1. protected void onDraw(Canvas canvas) {        
2.       
3.     if(mReflectableLayout == null){  
4.         super.onDraw(canvas);  
5.         return;  
6.     }  
7.       
8.     // reflect & copy  
9.     canvas.translate(0, mReflectableLayout.getHeight());//先把坐标点移自ReflectiveSurface画布的起点  
10.     canvas.scale(1f, -1f);//-1表示方向相反  
11.     // render  
12.     mReflectableLayout.draw(canvas);//传入经过处理的Canvas  
13.       
14.     super.onDraw(canvas);  
15. }  

  

Java代码  

1. protected void onDraw(Canvas canvas) {  
2.     super.onDraw(canvas);//对传过来的Canvas进行绘制  
3.       
4.     if(mReflectiveImageView == null)  
5.         return;  
6.       
7.     // We need to notify ImageView to redraw itself   
8.     mReflectiveImageView.postInvalidate();  }  

    这里面由于canvas的相对原点是针对要绘制的widget而言，因此，如果想在ReflectiveSurface里进行绘制，必须通过translate进行变换

 
   以上

• 
• 大小: 47.8 KB

• 
• 大小: 45.4 KB

• 
• 大小: 37 KB

• 
• 大小: 10.5 KB