Jamendo的播放界面做的很不错,如下图:
中间那四个按钮加入了透明度渐变动画,点击桌面会出现这四个Button
中间那个背景的下方还使用了倒影,效果看起来很不错
最后就是使用了SlidingDrawer这几方面都可以学习下。
先说下那四个按钮的布局
<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主要是从无到有的渐变过程
<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 主要是从有到无的渐变过程
<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>
之后就是在代码中通过定义监听器
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);
}
mFadeInAnimation);
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)进行绘制
具体实现代码如下:
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);
}
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进行变换
以上