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

时间:2022-11-01 10:22:30

Jamendo的播放界面做的很不错,如下图:

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

中间那四个按钮加入了透明度渐变动画,点击桌面会出现这四个Button
Jamendo开源在线音乐播放器源码分析播放界面布局

中间那个背景的下方还使用了倒影,效果看起来很不错
Jamendo开源在线音乐播放器源码分析播放界面布局

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

先说下那四个按钮的布局

 

Java代码  Jamendo开源在线音乐播放器源码分析播放界面布局
  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代码  Jamendo开源在线音乐播放器源码分析播放界面布局
  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代码  Jamendo开源在线音乐播放器源码分析播放界面布局
  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代码  Jamendo开源在线音乐播放器源码分析播放界面布局
  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倒影的实现:

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

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

   public class ReflectableLayout extends RelativeLayout 

   public class ReflectiveSurface extends ImageView

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

   下面分析怎么实现倒影的

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

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

    具体实现代码如下:

   

Java代码  Jamendo开源在线音乐播放器源码分析播放界面布局
  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代码  Jamendo开源在线音乐播放器源码分析播放界面布局
  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进行变换

 
   以上

  • Jamendo开源在线音乐播放器源码分析播放界面布局
  • 大小: 47.8 KB
  • Jamendo开源在线音乐播放器源码分析播放界面布局
  • 大小: 45.4 KB
  • Jamendo开源在线音乐播放器源码分析播放界面布局
  • 大小: 37 KB
  • Jamendo开源在线音乐播放器源码分析播放界面布局
  • 大小: 10.5 KB