android吉他谱组件,Android - 自定义View 实现 文本吉他谱的 动态控制 实现

1.背景

前天同学推荐，要做一个吉他谱的显示，与控制功能；想了想，感觉难度有些大，主要有几个难点：

难点1 ：显示：文本吉他谱是txt ，需要 和弦键与对应的文字对应显示出来；

难点2： 控制：需要通过音量键进行动态的控制，+ ，向下控制当前的和弦键，-，向上控制当前的和弦键；(完成)

难点3： 显示：当前控制的和弦键需要放大和变颜色，和当前行歌词颜色，正常行歌词颜色，均不一样；

难点4： 控制：通过和弦键来控制整体歌词的滚动；(完成)

难点5： 回调：需要回调 当前正在使用的和弦键，和下一个和弦键；(完成)

2. 动态控制思路

2.1 普通歌词思路

正常情况下，歌词的控制是通过时间作为切入点进行控制，根据时间的毫秒数与当前播放的时间大小，进行判断，可以控制其播放，暂停，和播放位置的设置；

这是之前写的效果实现：

而文本吉他谱，比如《都是你》的吉他谱的歌谱：

都是你

光良

原　调：1=#F

选　调：1=C

变调夹：6品

C F Dm7 G C

＊谁　改变了我的世界　没有方向　没有日夜

F C Em/B Am Dm G

我看著天　这一刻在想你　是否会对我一样思念

C F Dm7 G C

＃你　曾说我们有一个梦　等到那天　我们来实现

F C Em/B Am Dm G C

我望著天　在心中默默念　下一秒你出现在眼前

F G C

想念的心　装满的都是你

F G C

我的钢琴　弹奏的都是你

F G C Em/B Am

我的日记　写满的都是你的名

F G C

才发现　又另一个黎明

F G C Em/B Am

我的日记　写满的都是你的名

F G C

才发现　又是一个黎明

F G C

这是我　对你爱的累积

上面的英文字母是和弦键，下面的中文为其这首歌的歌词，相比普通的LRC歌词就麻烦对了；

下面分享下我解决的思路 ：

2.2 吉他谱歌词思路

首先是切入点，肯定是和弦键了，通过和弦键的控制，进而对整个歌谱的控制；

实现步骤 ：

(1)读取歌谱 ，将 和弦键 所在行 存储在 List1中(没有和弦的存储为no)，歌词存储在 List2中；

比如：

public void loadLrc(String lrcName) throws Exception {

mLrcTexts.clear();

mLrcKeys.clear();

BufferedReader br = new BufferedReader(new InputStreamReader(

getResources().getAssets().open(lrcName)));

String line;

int index = 0;

while ((line = br.readLine()) != null) {

// 单行加载解析

// 1.判断最后是否有 $ 符号

index = line.lastIndexOf("$");

if (index > 0) {

// 则此行为 和弦行，进行解析，存储下一行数据

// 存储和弦值

line = line.substring(0, index);

mLrcKeys.add(line);

// 存储对应的歌词

line = br.readLine();

if (line != null) {

mLrcTexts.add(line);

} else {

break;

}

} else {

// 没有$符号，存储歌词，存储和弦为no

mLrcKeys.add(MSG_KEY_NO);

mLrcTexts.add(line);

}

}

br.close();

// 记录总行数

rowNums = mLrcTexts.size();

for (int i = 0; i < mLrcKeys.size() - 1; i++) {

Log.d("Lrc", mLrcKeys.get(i));

}

Log.d("Lrc", " mLrcKeys : " + mLrcKeys.size());

Log.d("Lrc", " mLrcTexts : " + mLrcTexts.size());

}

(2)普通显示：通过重写 onDraw() 方法，将文字显示在view上，没有经过处理；如果为no , 则不显示

注意：在drawText的时候，需要将和弦行放在歌词上面，则使得其y坐标，错开50 ，而坐标相等，

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

if (mLrcKeys.isEmpty() || mLrcTexts.isEmpty()) {

return;

}

// 中心Y坐标

float centerY = getHeight() / 2 + mTextSize / 2 + mAnimOffset;

// mCurrentLine=5;

// 画当前行

String currStr = mLrcTexts.get(mCurrentLine);

String currKey = mLrcKeys.get(mCurrentLine);

float currX = (getWidth() - mCurrentPaint.measureText(currStr)) / 2;

if (!MSG_KEY_NO.equals(currKey)) {

canvas.drawText(currKey, currX, centerY - 50, mCurrentPaint);

}

canvas.drawText(currStr, currX, centerY, mCurrentPaint);

// 画当前行上面的

for (int i = mCurrentLine - 1; i >= 0; i--) {

String upStr = mLrcTexts.get(i);

String upKey = mLrcKeys.get(i);

float upX = (getWidth() - mNormalPaint.measureText(upStr)) / 2;

float upY = centerY - (mTextSize + mDividerHeight)

* (mCurrentLine - i);

if (!MSG_KEY_NO.equals(upKey)) {

canvas.drawText(upKey, upX, upY - 50, mNormalPaint);

}

canvas.drawText(upStr, upX, upY, mNormalPaint);

}

// 画当前行下面的

for (int i = mCurrentLine + 1; i < mLrcKeys.size(); i++) {

String downStr = mLrcTexts.get(i);

String downKey = mLrcKeys.get(i);

float downX = (getWidth() - mNormalPaint.measureText(downStr)) / 2;

float downY = centerY + (mTextSize + mDividerHeight)

* (i - mCurrentLine);

if (!MSG_KEY_NO.equals(downKey)) {

canvas.drawText(downKey, downX, downY - 50, mNormalPaint);

}

canvas.drawText(downStr, downX, downY, mNormalPaint);

}

}

(3)控制实现

基本思路：通过和弦键数组进行判断和切换行；

1) 给其一个计数器chrodsIndex，也是每行和弦数组的的下标：

chrodsIndex=-1 , 则代表这一行没有和弦键 ，切换下一行；

chrodsIndex >-1 ，则代表有和弦键；

2)有和弦，进行解析这一行，获得和弦数组，通过改变 chrodsIndex的值，进行控制

临界值1 ：数组上边界，切换到下一行，同时读取这一行的和弦键；

临界值2：数组下边界，切换到上一行，同时读取这一行的和弦键；

3)控制输入 x : 1 ，切换和弦向下，-1，切换和弦向上；

(4)解析实现

/**

* 1. 解析当前行的和弦

*/

private void parseLine(int isNext) {

if (isNext > 0) {

mNext++;

} else {

mNext--;

}

mCurrentLine = mNext == rowNums ? 0 : mNext;

mCurrentLine = mNext < 1 ? 0 : mNext;

mNext = mCurrentLine;

chords = null;

// 获得当前的和弦

String key = mLrcKeys.get(mCurrentLine);

// 解析

if (MSG_KEY_NO.equals(key)) {

chordsIndex = -1;

// 没有和弦，更新下一行

mHandler.sendEmptyMessage(MSG_NEW_LINE);

} else {

// 有和弦

chords = key.trim().split("\\s+");

// 测试

String t = " ";

for (int i = 0; i < chords.length; i++) {

t += chords[i] + " ";

}

Log.d("Lrc", "和弦 :" + t);

Log.d("Lrc", "歌词 :" + mLrcTexts.get(mCurrentLine));

// 如果进行下一行，则

if (isNext < 0) {

chordsIndex = chords.length;

} else {

chordsIndex = 0;

}

mHandler.sendEmptyMessage(MSG_NEW_LINE);

}

}

(5)获得下一个和弦

// 3. 获得下一个和弦值

/*

* 基本思路：

*

* 根据当前和弦键的下标+1=下一个和弦下标， 如果下标==数组长度， 则向下循环遍历 下面的和弦，取得最近的和弦返回即可

*

* ！=数组长度，返回即可

*/

public void getNextChord() {

if (nextChordsIndex == -1) {

return;

}

if (chords != null) {

if (nextChordsIndex >= chords.length) {

// 当前行+1

nextCurrentRow = mCurrentLine + 1;

for (int i = nextCurrentRow; i < rowNums; i++) {

String lrcKey = mLrcKeys.get(i);

if (lrcKey.equals(MSG_KEY_NO)) {

continue;

} else {

// 有和弦的行，取得第一个返回

nextChord = lrcKey.trim().split("\\s+")[0];

break;

}

}

} else {

if (nextChordsIndex > 0) {

nextChord = chords[nextChordsIndex];

}

}

}

}

(6)控制实现

/**

* 基本思路： 内部计数器，总行数; 1. x=1 ，进行下一个和弦的更新

*

* 2.x=-1，进行上一个和旋的更新 3. 先得到 当前行的所有和弦， 如果有和弦

* ：将和弦进行解析，后有一个计数器，进行计数；当计数器没有等于和弦总个数的时候，进行下一行显示 如果没有和弦，直接进行下一行显示

* 下一行显示之前，先进行和弦判断

*/

// 和弦计数器

private int chordsIndex = -1;

// 当前的和弦键

private String nowChord = MSG_KEY_NO;

// 记录上一次执行的操作

private int preX = 0;

// 下一个和弦键的下标

private int nextChordsIndex = chordsIndex;

// 当前行

private int nextCurrentRow = mCurrentLine;

// 下一个和弦值

private String nextChord = MSG_KEY_NO;

/**

* 2. 当一行的和弦执行全部切换完毕的时候，进行下一行切换

*

* @param x

*/

public synchronized void updateLrc(int x) {

// 最后一行了，不在进行更新操作

if (x > 0) {

if (mNext >= rowNums - 1) {

lrcViewInterface.isPlayToEnd(true);

return;

}

}

Log.d("Lrc", "chordsIndex 1: " + chordsIndex);

if (chordsIndex == -1) {

// 如果chordsIndex等于-1 ，代表着 这一行没有 和弦，则进行滚动到下一行

// x是1还是-1，如果是1，则代表向下一行，是-1则代表向上一行；

parseLine(x);

}

Log.d("Lrc", "chordsIndex 2: " + chordsIndex);

if (chords != null) {

// 判断当前执行的动作和上一次执行的动作是否一样，

// 如果一样，不进行chordsIndex操作，如果不一样，分别对其进行不同的操作

if (preX == -1 && x == 1 && chordsIndex != 0) {

chordsIndex += 1;

} else if (preX == 1 && x == -1) {

chordsIndex -= 1;

}

// 不等于空，开始控制

switch (x) {

case 1:

// 下一个和弦的切换，更新界面，不更新行

// 最后一个和弦

if (chords.length == chordsIndex) {

// 临界值为最大的时候，切换下一行

parseLine(1);

if (chordsIndex > -1) {

nowChord = chords[chordsIndex];

Log.d("Lrc", "和弦 +1 if: " + nowChord);

chordsIndex++;

}

} else {

nowChord = chords[chordsIndex];

Log.d("Lrc", "和弦 +1 else : " + nowChord);

chordsIndex++;

}

Log.d("Lrc", "chordsIndex 3 : " + chordsIndex);

break;

case -1:

chordsIndex--;

chordsIndex = chordsIndex < -1 ? -1 : chordsIndex;

// 上一个和弦的切换，更新界面，不更新行

// Log.d("Lrc", "和弦 -1 执行了");

Log.d("Lrc", "chordsIndex -3: " + chordsIndex);

if (chordsIndex == -1) {

// 临界值为最小的时候，切换上一行

parseLine(-1);

if (chordsIndex > -1) {

chordsIndex--;

nowChord = chords[chordsIndex];

Log.d("Lrc", "和弦 if -1 : " + nowChord);

}

} else {

nowChord = chords[chordsIndex];

Log.d("Lrc", "和弦 else -1 : " + nowChord);

}

Log.d("Lrc", "chordsIndex -4: " + chordsIndex);

break;

}

} else {

Log.d("Lrc", "和弦数组chords 为空了: ");

}

preX = x;

// 获得下一个和弦键

nextChordsIndex = x > 0 ? chordsIndex : chordsIndex + 1;

getNextChord();

// 和弦回调

lrcViewInterface.getNowChordAndNextChord(nowChord, nextChord);

}

(7)回调实现

回调通过接口实现回调，这里就不多说了；

3.效果预览

4.Demo 下载