android小程序-电子钢琴-滑动连续响应

原创文字，转载请标明出处：

利用Button实现简单地电子钢琴，可以简单地响应按钮的click事件来发出相应的声音。但是这样不能达到手指在屏幕滑动，而连续发声的效果，就像手指在真实钢琴按键上滑过一样。本文就是为了解决这个问题。思路：通过父控件响应touchevent，在响应函数中判断位置是否在按钮所在位置，或是从一个按钮移动到另一个按钮内，从而进行相应的操作。

形状文件：res/drawable

button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" >
</corners>

<stroke
android:width="2dp"
android:color="#605C59" />

<gradient
android:angle="270"
android:endColor="#FFFFFF"
android:startColor="#F5F5F5" />

</shape>

button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<solid android:color="#A4A4A4" />

<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" >
</corners>

<stroke
android:width="2dp"
android:color="#605C59" />

</shape>

布局文件：res/layout

activitymain.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >

<LinearLayout
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/text"
android:text="电子钢琴 by ZH" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:id="@+id/Keys"
android:layout_height="0dp"
android:layout_weight="5"
android:orientation="horizontal"
android:padding="10dp" >

<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/button"
android:text="1" />

<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/button"
android:text="2" />

<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/button"
android:text="3" />

<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/button"
android:text="4" />

<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/button"
android:text="5" />

<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/button"
android:text="6" />

<Button
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/button"
android:text="7" />
</LinearLayout>

</LinearLayout>

源文件：

MyMusicUtils.java

/**
* 音乐播放帮助类
*/
package com.example.android_simple_piano;

import java.util.HashMap;

import android.content.Context;
import android.media.AudioManager;
import android.media.SoundPool;

public class MyMusicUtils {
// 资源文件
int Music[] = { R.raw.do1, R.raw.re2, R.raw.mi3, R.raw.fa4, R.raw.sol5,
R.raw.la6, R.raw.si7, };
SoundPool soundPool;
HashMap<Integer, Integer> soundPoolMap;

/**
*
* @param context
*            用于soundpool.load
* @param no
*            播放声音的编号
*/
public MyMusicUtils(Context context) {
soundPool = new SoundPool(2, AudioManager.STREAM_MUSIC, 100);
soundPoolMap = new HashMap<Integer, Integer>();
for (int i = 0; i < Music.length; i++) {
soundPoolMap.put(i, soundPool.load(context, Music[i], 1));
}
}

public int soundPlay(int no) {
return soundPool.play(soundPoolMap.get(no), 100, 100, 1, 0, 1.0f);
}

public int soundOver() {
return soundPool.play(soundPoolMap.get(1), 100, 100, 1, 0, 1.0f);
}

@Override
protected void finalize() throws Throwable {
// TODO Auto-generated method stub
soundPool.release();
super.finalize();
}
}

MainActivity.java

package com.example.android_simple_piano;

import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Button;

public class MainActivity extends Activity {
private Button button[];//按钮数组
private MyMusicUtils utils;//工具类
private View parent;//父视图
private int buttonId[];//按钮id
private boolean havePlayed[];//是否已经播放了声音，当手指在同一个按钮内滑动，且已经发声，就为true
private int currentKey;//手指当前所在按钮
private int lastKey;//上一个按钮
private View keys;//按钮们所在的视图

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//新建工具类
utils = new MyMusicUtils(getApplicationContext());

//按钮资源Id
buttonId = new int[7];
buttonId[0] = R.id.button1;
buttonId[1] = R.id.button2;
buttonId[2] = R.id.button3;
buttonId[3] = R.id.button4;
buttonId[4] = R.id.button5;
buttonId[5] = R.id.button6;
buttonId[6] = R.id.button7;

button = new Button[7];
havePlayed = new boolean[7];

//获取按钮对象
for (int i = 0; i < button.length; i++) {
button[i] = (Button) findViewById(buttonId[i]);
button[i].setClickable(false);
havePlayed[i] = false;
}

currentKey = 0;
lastKey = 0;

parent = (View) findViewById(R.id.parent);
parent.setClickable(true);

parent.setOnTouchListener(new OnTouchListener() {

@Override
public boolean onTouch(View v, MotionEvent event) {
int temp;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
temp = isInAnyScale(event.getX(), event.getY(), button);
if (temp != -1) {// 在某个按键范围内
currentKey = temp;
button[currentKey]
.setBackgroundResource(R.drawable.button_pressed);

// 播放音阶
utils.soundPlay(currentKey);
Log.i("--", "sound" + currentKey);
havePlayed[currentKey] = true;
}
break;
case MotionEvent.ACTION_MOVE:
temp = currentKey;
for (int i = temp + 1; i >= temp - 1; i--) {
//当在两端的按钮时，会有一边越界
if (i < 0 || i >= button.length) {
continue;
}
if (isInScale(event.getX(), event.getY(), button[i])) {// 在某个按键内
if (i == currentKey) {
// 在当前按键内且未发音
if (!havePlayed[i]) {
utils.soundPlay(currentKey);
Log.i("--", "sounD" + i);
}
break;
} else {// 在相邻按键内
lastKey = currentKey;
// 设置当前按键
currentKey = i;
button[currentKey]
.setBackgroundResource(R.drawable.button_pressed);
// 发音
utils.soundPlay(currentKey);
Log.i("--", "sound" + currentKey);
havePlayed[currentKey] = true;

// 设置上一个按键
button[lastKey]
.setBackgroundResource(R.drawable.button);
havePlayed[lastKey] = false;
break;
}
}
}
break;
case MotionEvent.ACTION_UP:
lastKey = currentKey;
button[currentKey].setBackgroundResource(R.drawable.button);
havePlayed[currentKey] = false;

break;
}
return true;
}
});

keys = (View) findViewById(R.id.Keys);

}

/**
* 判断某个点是否在某个按钮的范围内
*
* @param x 横坐标
* @param y 纵坐标
* @param button 按钮对象
* @return 在：true；不在：false
*/
private boolean isInScale(float x, float y, Button button) {
//keys.getTop()是获取按钮所在父视图相对其父视图的右上角纵坐标

if (x > button.getLeft() && x < button.getRight()
&& y > button.getTop() + keys.getTop()
&& y < button.getBottom() + keys.getTop()) {
return true;
} else {
return false;
}
}

/**
* 判断某个点是否在一个按钮集合中的某个按钮内
*
* @param x 横坐标
* @param y 纵坐标
* @param button 按钮数组
* @return
*/
private int isInAnyScale(float x, float y, Button[] button) {
//keys.getTop()是获取按钮所在父视图相对其父视图的右上角纵坐标

for (int i = 0; i < button.length; i++) {
if (x > button[i].getLeft() && x < button[i].getRight()
&& y > button[i].getTop() + keys.getTop()
&& y < button[i].getBottom() + keys.getTop()) {
return i;
}
}
return -1;
}
}

效果图：



声音文件：http://pan.baidu.com/s/1hq0xXC4

参考文章：

事件分发：/article/1562152.html

坐标问题：/article/5013452.html