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()-1
	private int mCurrentScreen;
	private Scroller mScroller;
	// 速度追踪器，主要是为了通过当前滑动速度判断当前滑动是否为fling
	private 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()设置的是参数，实际滑动，在其里执行，
	@Override
	public 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());
			}
		}
	}

	@Override
	protected 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);
	}

	@Override
	protected void onLayout(boolean changed, int left, int top, int right,
			int bottom) {
		int childLeft = 0;
		// 横向平铺childView
		final 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()处理。
	 */
	@Override
	public 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;
	}

	@Override
	public 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>

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