Android应用--简、美音乐播放器实现左右切屏功能

Android应用--简、美音乐播放器实现左右切屏功能

2013年6月28日 简、美音乐播放器开发

前言：今天要介绍的是一个实现起来稍微复杂一点的功能，是通过自定义滑动页面类来实现左右切屏效果。小巫也是直接引用别人已经写好的代码，然后再加入自己的应用当中，最后实现功能的。如果让我来写的话，一下子也写不出来，既然已经有人把功能实现了，也没有必要重复制造车轮了，对于我们这种不是专门研究算法的人，我们要看到的是实实在在的产品，如果没有实实在在的东西出来，你就算再会编程别人也不会觉得你有多么厉害。不过，我们也不能以不重复制造车轮为由而放弃学习，只会复制粘帖是不可能成为优秀的程序员的，简单来说我看不起这样的程序员。在实际工作中，我也不清楚真正的编码活动是怎样进行的，我在这里怎么说都是空话。

实现效果：

    

左右手势划屏就可以实现以上专辑图片和歌词之间视图的切换

实现步骤：

1、 自定义划屏类

package com.wwj.sb.custom;import com.wwj.sb.activity.R;import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.VelocityTracker;import android.view.View;import android.view.ViewConfiguration;import android.view.ViewGroup;import android.widget.Scroller;public class FlingGalleryView extends ViewGroup {private static final int SNAP_VELOCITY = 1000;// 记录当前屏幕下标，取值范围是：0 到 getChildCount()-1private int mCurrentScreen;private Scroller mScroller;// 速度追踪器，主要是为了通过当前滑动速度判断当前滑动是否为flingprivate VelocityTracker mVelocityTracker;// 记录滑动时上次手指所处的位置private float mLastMotionX;private float mLastMotionY;// Touch状态值 0：静止 1：滑动private final static int TOUCH_STATE_REST = 0;private final static int TOUCH_STATE_SCROLLING = 1;// 记录当前touch事件状态--滑动（TOUCH_STATE_SCROLLING）、静止（TOUCH_STATE_REST 默认）private int mTouchState = TOUCH_STATE_REST;// 记录touch事件中被认为是滑动事件前的最大可滑动距离private int mTouchSlop;// 手指抛动作的最大速度px/s 每秒多少像素private int mMaximumVelocity;// 滚动到指定屏幕的事件private OnScrollToScreenListener mScrollToScreenListener;// 自定义touch事件private OnCustomTouchListener mCustomTouchListener;//滚动到每个屏幕时是否都要触发OnScrollToScreenListener事件private boolean isEveryScreen=false;public FlingGalleryView(Context context) {super(context);init();mCurrentScreen = 0;}public FlingGalleryView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public FlingGalleryView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.FlingGalleryView, defStyle, 0);mCurrentScreen = a.getInt(R.styleable.FlingGalleryView_defaultScreen, 0);a.recycle();init();}private void init() {mScroller = new Scroller(getContext());final ViewConfiguration configuration = ViewConfiguration.get(getContext());mTouchSlop = configuration.getScaledTouchSlop();mMaximumVelocity = configuration.getScaledMaximumFlingVelocity();}// 保证在同一个屏幕执行一下切屏事件的一些参数private int count = -1;private int defaultScreen = -1;// 当滚动条滑动时调用，startScroll()设置的是参数，实际滑动，在其里执行，@Overridepublic void computeScroll() {// mScroller.computeScrollOffset计算当前新的位置，true表示还在滑动，仍需计算if (mScroller.computeScrollOffset()) {// 返回true，说明scroll还没有停止scrollTo(mScroller.getCurrX(), 0);if(isEveryScreen)singleScrollToScreen();postInvalidate();}}// 保证在同一个屏幕执行一下切屏事件private void singleScrollToScreen() {final int screenWidth = getWidth();int whichScreen = (getScrollX() + (screenWidth / 2)) / screenWidth;if (whichScreen > (getChildCount() - 1)) {return;}if (defaultScreen == -1) {defaultScreen = whichScreen;count = 1;} else {if (defaultScreen == whichScreen && count == 0) {count = 1;} else {if (defaultScreen != whichScreen) {defaultScreen = whichScreen;count = 0;}}}if (count == 0) {if (mScrollToScreenListener != null) {mScrollToScreenListener.operation(whichScreen, getChildCount());}}}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);final int width = MeasureSpec.getSize(widthMeasureSpec);final int widthMode = MeasureSpec.getMode(widthMeasureSpec);if (widthMode != MeasureSpec.EXACTLY) {throw new IllegalStateException("Workspace can only be used in EXACTLY mode.");}final int heightMode = MeasureSpec.getMode(heightMeasureSpec);if (heightMode != MeasureSpec.EXACTLY) {throw new IllegalStateException("Workspace can only be used in EXACTLY mode.");}final int count = getChildCount();for (int i = 0; i < count; i++) {getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);}scrollTo(mCurrentScreen * width, 0);}@Overrideprotected void onLayout(boolean changed, int left, int top, int right,int bottom) {int childLeft = 0;// 横向平铺childViewfinal int count = getChildCount();for (int i = 0; i < count; i++) {final View child = getChildAt(i);child.setOnTouchListener(childTouchListener);if (child.getVisibility() != View.GONE) {final int childWidth = child.getMeasuredWidth();child.layout(childLeft, 0, childLeft + childWidth,child.getMeasuredHeight());childLeft += childWidth;}}}// 设定childView的Touch事件返回true，这样可以在parentView中截获touch（即onInterceptTouchEvent）的move,up等事件private OnTouchListener childTouchListener = new OnTouchListener() {public boolean onTouch(View v, MotionEvent event) {return true;}};// 在系统向该ViewGroup及其各个childView触发onTouchEvent()之前对相关事件进行一次拦截/* * down事件首先会传递到onInterceptTouchEvent()方法 * 如果该ViewGroup的onInterceptTouchEvent()在接收到down事件处理完成之后return * false，那么后续的move, * up等事件将继续会先传递给该ViewGroup，之后才和down事件一样传递给最终的目标view的onTouchEvent()处理。 * 如果该ViewGroup的onInterceptTouchEvent()在接收到down事件处理完成之后return * true，那么后续的move, * up等事件将不再传递给onInterceptTouchEvent()，而是和down事件一样传递给该ViewGroup的onTouchEvent * ()处理，注意，目标view将接收不到任何事件。 * 如果最终需要处理事件的view的onTouchEvent()返回了false，那么该事件将被传递至其上一层次的view的onTouchEvent * ()处理。 如果最终需要处理事件的view * 的onTouchEvent()返回了true，那么后续事件将可以继续传递给该view的onTouchEvent()处理。 */@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {if (mCustomTouchListener != null) {mCustomTouchListener.operation(ev);}final int action = ev.getAction();if ((action == MotionEvent.ACTION_MOVE)&& (mTouchState != TOUCH_STATE_REST)) {return true;}final float x = ev.getX();final float y = ev.getY();switch (action) {case MotionEvent.ACTION_MOVE:// 计算X方向移动的距离final int xDiff = (int) Math.abs(x - mLastMotionX);final int touchSlop = mTouchSlop;if (xDiff > touchSlop) {// 移动方向小于45度时即X方向可以移动if (Math.abs(mLastMotionY - y) / Math.abs(mLastMotionX - x) < 1) {mTouchState = TOUCH_STATE_SCROLLING;}}break;case MotionEvent.ACTION_DOWN:mLastMotionX = x;mLastMotionY = y;mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST: TOUCH_STATE_SCROLLING;break;case MotionEvent.ACTION_CANCEL:case MotionEvent.ACTION_UP:mTouchState = TOUCH_STATE_REST;break;}return mTouchState != TOUCH_STATE_REST;}@Overridepublic boolean onTouchEvent(MotionEvent ev) {if (mVelocityTracker == null) {mVelocityTracker = VelocityTracker.obtain();}mVelocityTracker.addMovement(ev);final int action = ev.getAction();final float x = ev.getX();switch (action) {case MotionEvent.ACTION_DOWN:if (!mScroller.isFinished()) {// 终止滚动条的滑动动画mScroller.abortAnimation();}mLastMotionX = x;count = -1;defaultScreen = -1;break;case MotionEvent.ACTION_MOVE:if (mTouchState == TOUCH_STATE_SCROLLING) {final float t_width = (getWidth() / 4f);// 最后一个屏幕向左移动时，不能超过屏幕的4分之一if (getScrollX() > ((getChildCount() - 1) * getWidth() + t_width)) {break;}// 第一个屏幕向右移动时，不能超过屏幕的4分之一if (getScrollX() < ((t_width) * -1)) {break;}final int deltaX = (int) (mLastMotionX - x);mLastMotionX = x;scrollBy(deltaX, 0);}break;case MotionEvent.ACTION_UP:if (mTouchState == TOUCH_STATE_SCROLLING) {final VelocityTracker velocityTracker = mVelocityTracker;velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);// 使用pix/s为单位int velocityX = (int) velocityTracker.getXVelocity();if (velocityX > SNAP_VELOCITY && mCurrentScreen > 0) {// 向右移动snapToScreen(mCurrentScreen - 1, false);} else if (velocityX < -SNAP_VELOCITY&& mCurrentScreen < getChildCount() - 1) {// 向左移动snapToScreen(mCurrentScreen + 1, false);} else {snapToDestination();}if (mVelocityTracker != null) {mVelocityTracker.recycle();mVelocityTracker = null;}}mTouchState = TOUCH_STATE_REST;break;case MotionEvent.ACTION_CANCEL:mTouchState = TOUCH_STATE_REST;}return true;}// 计算应该去哪个屏private void snapToDestination() {final int screenWidth = getWidth();// 如果超过屏幕的一半就算是下一个屏final int whichScreen = (getScrollX() + (screenWidth / 2))/ screenWidth;snapToScreen(whichScreen, false);}// 切换屏幕private void snapToScreen(int whichScreen, boolean isJump) {// 判断下一个屏幕是否有效，并纠正whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));if (getScrollX() != (whichScreen * getWidth())) {final int delta = whichScreen * getWidth() - getScrollX();count = -1;defaultScreen = -1;// 开始滚动动画mScroller.startScroll(getScrollX(), 0, delta, 0,Math.abs(delta) * 2);final int t_mCurrentScreen = mCurrentScreen;mCurrentScreen = whichScreen;// 判断是否在同一个屏幕，不在则执行切换屏幕if (t_mCurrentScreen != whichScreen) {// 防止重复执行切换屏幕事件if (Math.abs(t_mCurrentScreen - whichScreen) == 1 && !isJump) {doOnScrollToScreen();}}invalidate();}}private void doOnScrollToScreen() {if (mScrollToScreenListener != null) {mScrollToScreenListener.operation(mCurrentScreen, getChildCount());}}/** * 设置切换到的指定下标屏幕0至getChildCount()-1 * */public void setToScreen(int whichScreen, boolean isAnimation) {if (isAnimation) {snapToScreen(whichScreen, true);} else {whichScreen = Math.max(0,Math.min(whichScreen, getChildCount() - 1));mCurrentScreen = whichScreen;// 直接滚动到该位置scrollTo(whichScreen * getWidth(), 0);if (whichScreen != mCurrentScreen) {doOnScrollToScreen();}invalidate();}}/** * 设置默认屏幕的下标 * */public void setDefaultScreen(int defaultScreen) {mCurrentScreen = defaultScreen;}/** * 获取当前屏幕的下标 * */public int getCurrentScreen() {return mCurrentScreen;}/** * 注册滚动到指定屏幕的事件 * */public void setOnScrollToScreenListener(OnScrollToScreenListener scrollToScreenListener) {if (scrollToScreenListener != null) {this.mScrollToScreenListener = scrollToScreenListener;}}/** * 注册自定义Touch事件 * */public void setOnCustomTouchListener(OnCustomTouchListener customTouchListener) {if (customTouchListener != null) {this.mCustomTouchListener = customTouchListener;}}/** * 滚动到指定屏幕的事件（即切屏事件） * */public interface OnScrollToScreenListener {public void operation(int currentScreen, int screenCount);}/** * 自定义的一个Touch事件 * */public interface OnCustomTouchListener {public void operation(MotionEvent event);}/** * 滚动到每个屏幕时是否都要触发OnScrollToScreenListener事件 * */public void setEveryScreen(boolean isEveryScreen) {this.isEveryScreen = isEveryScreen;}}

2、界面布局的改变

player_activity_layout.xml的布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/RelativeLayout1"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/bg_playback" >    <RelativeLayout        android:id="@+id/header_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentTop="true" >        <Button            android:id="@id/repeat_music"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentLeft="true"            android:background="@drawable/repeat_none_selector" />        <Button            android:id="@id/shuffle_music"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"            android:background="@drawable/shuffle_none_selector" />        <TextView            android:id="@+id/musicTitle"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignBaseline="@id/repeat_music"            android:layout_centerHorizontal="true"            android:ellipsize="marquee"            android:focusable="true"            android:focusableInTouchMode="true"            android:gravity="center_horizontal"            android:lines="1"            android:marqueeRepeatLimit="marquee_forever"            android:singleLine="true"            android:text="@string/siger"            android:textAppearance="?android:attr/textAppearanceLarge"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/musicArtist"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_below="@id/musicTitle"            android:layout_centerHorizontal="true"            android:layout_marginTop="15dp"            android:text="@string/artist"            android:textColor="#0F0"            android:textSize="18sp" />    </RelativeLayout>    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/header_layout" >        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="match_parent" >            <!-- 自定义滑动页面类的 -->            <com.wwj.sb.custom.FlingGalleryView                android:id="@+id/fgv_player_main"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:layout_centerInParent="true" >                <include                    android:id="@+id/player_main_album"                    layout="@layout/music_album" />                <include                    android:id="@+id/player_main_lyric"                    layout="@layout/music_lyric" />            </com.wwj.sb.custom.FlingGalleryView>        </RelativeLayout>        <RelativeLayout            android:id="@+id/ll_player_voice"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:background="@drawable/player_progresslayout_bg"            android:visibility="gone" >            <ImageView                android:id="@+id/iv_player_min_voice"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentLeft="true"                android:layout_centerVertical="true"                android:background="@drawable/volume_min_icon" />            <ImageView                android:id="@+id/iv_player_max_voice"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentRight="true"                android:layout_centerVertical="true"                android:background="@drawable/volume_max_icon" />            <SeekBar                android:id="@+id/sb_player_voice"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_toLeftOf="@id/iv_player_max_voice"                android:layout_toRightOf="@id/iv_player_min_voice"                android:background="@drawable/voice_seekbar_bg"                android:paddingLeft="5dp"                android:paddingRight="5dp"                android:progressDrawable="@drawable/voice_seekbar_progress"                android:thumb="@drawable/voice_seekbar_thumb" />        </RelativeLayout>    </FrameLayout>    <RelativeLayout        android:id="@+id/footer_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true" >        <RelativeLayout            android:id="@+id/seekbarLayout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@drawable/player_progresslayout_bg" >            <SeekBar                android:id="@+id/audioTrack"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:background="@drawable/player_progress_bg"                android:progressDrawable="@drawable/seekbar_img"                android:thumb="@drawable/media_player_progress_button" />            <TextView                android:id="@+id/current_progress"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_below="@id/audioTrack" />            <TextView                android:id="@+id/final_progress"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentRight="true"                android:layout_below="@id/audioTrack" />        </RelativeLayout>        <RelativeLayout            android:id="@+id/relativeLayout2"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@+id/seekbarLayout" >            <Button                android:id="@id/play_music"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_above="@+id/relativeLayout2"                android:layout_centerHorizontal="true"                android:background="@drawable/pause_selector" />            <Button                android:id="@id/next_music"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignBaseline="@+id/play_music"                android:layout_toRightOf="@+id/play_music"                android:background="@drawable/next_music_selector" />            <Button                android:id="@id/previous_music"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignBaseline="@+id/play_music"                android:layout_toLeftOf="@+id/play_music"                android:background="@drawable/previous_music_selector" />            <Button                android:id="@+id/play_queue"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignBaseline="@+id/next_music"                android:layout_toRightOf="@+id/next_music"                android:background="@drawable/play_queue_selector" />            <ImageButton                android:id="@+id/ibtn_player_voice"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentLeft="true"                android:layout_alignParentTop="true"                android:background="@drawable/player_btn_voice" />        </RelativeLayout>    </RelativeLayout></RelativeLayout>

专辑图片的布局文件

music_album.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     >    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:orientation="vertical" >        <FrameLayout            android:layout_width="200dp"            android:layout_height="200dp"            android:background="@drawable/ablumlayout_bg" >            <ImageView                android:id="@+id/iv_music_ablum"                android:layout_width="wrap_content"                android:layout_height="wrap_content" />        </FrameLayout>        <FrameLayout            android:layout_width="200dp"            android:layout_height="100dp"            android:background="@drawable/ablumlayout_reflection_bg" >            <ImageView                android:id="@+id/iv_music_ablum_reflection"                android:layout_width="wrap_content"                android:layout_height="wrap_content" />        </FrameLayout>    </LinearLayout></RelativeLayout>

自定义歌词的布局文件

music_lyric.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical" >    <com.wwj.sb.custom.LrcView            android:id="@+id/lrcShowView"            android:layout_width="match_parent"            android:layout_height="200dip"            /></LinearLayout>

嘿嘿，就这样就可以实现左右切屏了。