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

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



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



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



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

先说下那四个按钮的布局

Java代码



<RelativeLayout android:id="@+id/FourWayMediaLayout"

android:layout_height="300dip" android:layout_width="300dip"

android:background="@null" android:layout_centerHorizontal="true"

android:layout_alignTop="@id/ReflectableLayout">

<ImageButton android:id="@+id/PlayImageButton"

android:background="@null" android:src="@drawable/player_play_light"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:layout_centerHorizontal="true" android:layout_marginTop="10dip"

android:layout_alignParentTop="true" android:visibility="gone"></ImageButton>

<ImageButton android:id="@+id/StopImageButton"

android:background="@null" android:src="@drawable/player_stop_light"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:layout_centerHorizontal="true" android:layout_marginBottom="10dip"

android:layout_alignParentBottom="true" android:visibility="gone"></ImageButton>

<ImageButton android:id="@+id/NextImageButton"

android:background="@null" android:src="@drawable/player_next_light"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:layout_centerVertical="true" android:layout_marginRight="10dip"

android:layout_alignParentRight="true" android:visibility="gone"></ImageButton>

<ImageButton android:id="@+id/PrevImageButton"

android:background="@null" android:src="@drawable/player_prev_light"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:layout_centerVertical="true" android:layout_marginLeft="10dip"

android:layout_alignParentLeft="true" android:visibility="gone"></ImageButton>

</RelativeLayout>

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

Java代码



<set xmlns:android="http://schemas.android.com/apk/res/android"

android:zAdjustment="bottom" android:fillAfter="false">

<alpha android:fromAlpha="0" android:toAlpha="1.0" android:startOffset="400"

android:duration="400" />

</set>

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

Java代码



<set xmlns:android="http://schemas.android.com/apk/res/android"

android:zAdjustment="bottom" android:fillAfter="false">

<alpha android:fromAlpha="1.0" android:toAlpha="0"

android:duration="400" />

</set>

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

Java代码



private ImageButton mPlayImageButton;

private ImageButton mNextImageButton;

private ImageButton mPrevImageButton;

private ImageButton mStopImageButton;

,.............................

private Animation mFadeInAnimation;

private Animation mFadeOutAnimation;

...............................

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

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

mFadeOutAnimation.setAnimationListener(new AnimationListener(){

@Override

public void onAnimationEnd(Animation animation) {

setMediaGone();

}

@Override

public void onAnimationRepeat(Animation animation) {

// nothing here

}

@Override

public void onAnimationStart(Animation animation) {

setFadeOutAnimation();

}

});

mFadeInAnimation.setAnimationListener(new AnimationListener(){

@Override

public void onAnimationEnd(Animation animation) {

new Handler().postDelayed(new Runnable(){

@Override

public void run() {

if(mFadeInAnimation.hasEnded())//judge whether the fadeInAnimation is ended

mPlayImageButton.startAnimation(mFadeOutAnimation);

}

}, 7500);

}

@Override

public void onAnimationRepeat(Animation animation) {

// nothing here

}

@Override

public void onAnimationStart(Animation animation) {

setMediaVisible();

}

});

/**

* Makes 4-way media visible

*/

private void setMediaVisible(){

mPlayImageButton.setVisibility(View.VISIBLE);

mNextImageButton.setVisibility(View.VISIBLE);

mPrevImageButton.setVisibility(View.VISIBLE);

mStopImageButton.setVisibility(View.VISIBLE);

}

/**

* Makes 4-way media gone

*/

private void setMediaGone(){

mPlayImageButton.setVisibility(View.GONE);

mNextImageButton.setVisibility(View.GONE);

mPrevImageButton.setVisibility(View.GONE);

mStopImageButton.setVisibility(View.GONE);

}

/**

* Sets fade out animation to 4-way media

*/

private void setFadeOutAnimation(){

mPlayImageButton.setAnimation(mFadeOutAnimation);

mNextImageButton.setAnimation(mFadeOutAnimation);

mPrevImageButton.setAnimation(mFadeOutAnimation);

mStopImageButton.setAnimation(mFadeOutAnimation);

}

FadeInAnimation);

mStopImageButton.setAnimation(mFadeInAnimation);

}

/**

* Sets fade out animation to 4-way media

*/

private void setFadeInAnimation(){

mPlayImageButton.setAnimation(mFadeInAnimation);

mNextImageButton.setAnimation(mFadeInAnimation);

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代码



protected void onDraw(Canvas canvas) {

if(mReflectableLayout == null){

super.onDraw(canvas);

return;

}

// reflect & copy

canvas.translate(0, mReflectableLayout.getHeight());//先把坐标点移自ReflectiveSurface画布的起点

canvas.scale(1f, -1f);//-1表示方向相反

// render

mReflectableLayout.draw(canvas);//传入经过处理的Canvas

super.onDraw(canvas);

}

Java代码



protected void onDraw(Canvas canvas) {

super.onDraw(canvas);//对传过来的Canvas进行绘制

if(mReflectiveImageView == null)

return;

// We need to notify ImageView to redraw itself

mReflectiveImageView.postInvalidate(); }

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

以上




大小: 47.8 KB




大小: 45.4 KB




大小: 37 KB




大小: 10.5 KB