android動手寫平滑滾動歌詞控制項，android控制項

android動手寫平滑滾動歌詞控制項，android控制項
馬上畢業了，前段時間一直忙自己的畢業設計和畢業論文(蛋疼連著菊花疼)，做的是一個android音樂播放器，今天特意抽出裡面的一塊功能來湊這篇部落格--歌詞的顯示。
看看QQ音樂，歌詞顯示略屌，可惜我們的LRC檔案並不能做到詞的同步，只能做到行的同步，所以，退而求之，今天的歌詞空間只是同步行，那他有什麼功能呢？ 歌詞同步就不說了，切換滑動效果是我後加上的，因為我看著一行行的切換太過生硬。
下面開始進入主題。

1、首先我們來看看如何使用，控制項的使用很簡單，可以在xml中配置使用:

<org.loader.liteplayer.ui.LrcView        xmlns:lrc="http://schemas.android.com/apk/res/org.loader.liteplayer"        android:id="@+id/play_first_lrc_2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:layout_marginBottom="5dp"        lrc:textSize="18sp"        lrc:normalTextColor="@android:color/white"        lrc:currentTextColor="@color/main"        lrc:dividerHeight="20dp"        lrc:rows="9" />

這裡我們來看看幾個以lrc為命名空間的配置項。
textSize不用多說，肯定是文本的大小了；normalTextColor是普通文本的顏色，因為歌詞分為普通的行和當前高亮行，那currentTextColor肯定是高亮行的顏色了;dividerHeight是行間距；rows是顯示多少行歌詞，在該設定檔中是顯示9行的歌詞。配置好了，我們需要在activity或者fragment中來使用它。

...mLrcViewOnSecondPage = (LrcView) lrcView.findViewById(R.id.play_first_lrc_2);...mLrcViewOnSecondPage.setLrcPath(lrcPath);...@Overridepublic void onPublish(int progress) {if(mLrcViewOnSecondPage.hasLrc()) mLrcViewOnSecondPage.changeCurrent(progress);}

第一行代碼去擷取該控制項，接著調用setLrcPath將歌詞檔案載入到記憶體中，在onPushlish方法中不斷調用changeCurrent來更新歌詞，那changeCurrent的參數哪來的呢?這個是音樂播放回調的進度，到這裡，可能會有大神出疑問了， 這樣做是不是會不斷的更新歌詞控制項？就算當前沒有切換歌詞也回去更新？ 這裡先給出回答：當然不是了，我們在changeCurrent方法中做了判斷，所以這裡儘管調用，放心調用！


那接下來，我們開始進入今天的主題：LrcView。


在進入代碼之前，先來看看我的設計思路吧：
當我們傳進一個lrc檔案的path，首先按照行去read檔案，並且利用正則解析出時間和歌詞分別存放。設定完歌詞後，我們通過不斷調用changeCurrent()方法來切換歌詞，那麼changeCurrent又負責了什麼工作呢？ 在changeCurrent中首先判斷下一行開始的時間是不是大於當前傳進來的時間，如果是，直接返回，否則，遍曆所有的時間，找到大於目前時間的上一行的key， 再次通過key找到歌詞，哢哢哢， 顯示出來就ok了。


look code：

public class LrcView extends View {private static final int SCROLL_TIME = 500;private static final String DEFAULT_TEXT = "暫無歌詞";private List<String> mLrcs = new ArrayList<String>(); // 存放歌詞private List<Long> mTimes = new ArrayList<Long>(); // 存放時間private long mNextTime = 0l; // 儲存下一句開始的時間private int mViewWidth; // view的寬度private int mLrcHeight; // lrc介面的高度private int mRows;      // 多少行private int mCurrentLine = 0; // 當前行private int mOffsetY;   // y上的位移private int mMaxScroll; // 最大滑動距離=一行歌詞高度+歌詞間距private float mTextSize; // 字型private float mDividerHeight; // 行間距private Rect mTextBounds;private Paint mNormalPaint; // 常規的字型private Paint mCurrentPaint; // 當前歌詞的大小private Bitmap mBackground;private Scroller mScroller;public LrcView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public LrcView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mScroller = new Scroller(context, new LinearInterpolator());inflateAttributes(attrs);}...}

這麼多變數！到底是幹嘛用的！只是為了裝B嗎？ NO NO NO， 我們定義它，肯定是需要啦，一個個的來解釋一下吧吧。
常量SCROLL_TIME定義了當歌詞切換時滑動的時間，這裡是500ms。
常量DEFAULT_TEXT定義的是當沒有歌詞的時候顯示的預設文本。
兩個ArrayList，mLrcs儲存的是一行行的歌詞，mTimes儲存的是歌詞對應的時間。
mNextTime表示的是下一行開始的時間。
其他的一些變數，可以看看代碼裡的注釋，這裡就不一一貼出來了。


再來看看構造方法，除了初始化Scroller外，我們調用了inflateAttributes()，那我們跟進inflateAttributes():

// 初始化操作private void inflateAttributes(AttributeSet attrs) {// <begin>// 解析自訂屬性TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.Lrc);mTextSize = ta.getDimension(R.styleable.Lrc_textSize, 50.0f);mRows = ta.getInteger(R.styleable.Lrc_rows, 5);mDividerHeight = ta.getDimension(R.styleable.Lrc_dividerHeight, 0.0f);int normalTextColor = ta.getColor(R.styleable.Lrc_normalTextColor, 0xffffffff);int currentTextColor = ta.getColor(R.styleable.Lrc_currentTextColor, 0xff00ffde);ta.recycle();// </end>// 計算lrc面板的高度mLrcHeight = (int) (mTextSize + mDividerHeight) * mRows + 5;mNormalPaint = new Paint();mCurrentPaint = new Paint();// 初始化paintmNormalPaint.setTextSize(mTextSize);mNormalPaint.setColor(normalTextColor);mNormalPaint.setAntiAlias(true);mCurrentPaint.setTextSize(mTextSize);mCurrentPaint.setColor(currentTextColor);mCurrentPaint.setAntiAlias(true);mTextBounds = new Rect();mCurrentPaint.getTextBounds(DEFAULT_TEXT, 0, DEFAULT_TEXT.length(), mTextBounds);mMaxScroll = (int) (mTextBounds.height() + mDividerHeight);}

5～12行，解析出屬性值，沒有什麼好說的，無非就是擷取使用者配置的顏色啦，字型大小啦，多少行啦。
16行，通過擷取到的屬性，計算出Lrc能顯示下需要多少高度。
然後接下來的一系列動作就是初始化兩個Paint，並擷取Scroller最大滾動的距離，為什麼要計算這個呢？ 因為我們需要知道歌詞每次要滾動多大距離。(廢話！)
初始化完了，就是測量了，我們的測量也是很簡單的。

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);// 重新設定view的高度int measuredHeightSpec = MeasureSpec.makeMeasureSpec(mLrcHeight, MeasureSpec.AT_MOST);super.onMeasure(widthMeasureSpec, measuredHeightSpec);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);// 擷取view寬度mViewWidth = getMeasuredWidth();}

測量，我們只是重新定義了高度，然後在onSizeChanged中擷取了該view的寬度。


按照，進度呢，我們接下來應該看draw了，但是現在我們先不去看onDraw，而是去看看setLrcPath這個方法。

// 外部提供方法// 設定lrc的路徑public void setLrcPath(String path) {reset();File file = new File(path);if (!file.exists()) {postInvalidate();return;}BufferedReader reader = null;try {reader = new BufferedReader(new InputStreamReader(new FileInputStream(file)));String line = "";String[] arr;while (null != (line = reader.readLine())) {arr = parseLine(line);if (arr == null) continue;// 如果解析出來只有一個if (arr.length == 1) {String last = mLrcs.remove(mLrcs.size() - 1);mLrcs.add(last + arr[0]);continue;}mTimes.add(Long.parseLong(arr[0]));mLrcs.add(arr[1]);}} catch (Exception e) {e.printStackTrace();} finally {if(reader != null) {try {reader.close();} catch (IOException e) {e.printStackTrace();}}}}

雖然長了點，但是都是基本的java io，按行去讀取檔案，然後正則匹配。
需要注意的是22～26行，這裡需要說明一下，我們只是匹配了形如：

[05:20.59] 我從天上來

這樣的歌詞。繼續看看parseLine()方法吧。用正則去匹配歌詞。

// 解析每行private String[] parseLine(String line) {Matcher matcher = Pattern.compile("\\[\\d.+\\].+").matcher(line);// 如果形如：[xxx]後面啥也沒有的，則return空if (!matcher.matches()) {System.out.println("throws " + line);return null;}line = line.replaceAll("\\[", "");String[] result = line.split("\\]");result[0] = String.valueOf(parseTime(result[0]));return result;}

只是簡單的正則，沒看懂的可以腦補正則了，這裡我們只匹配[開頭是數位]，如果不是數字，例如：[title:可惜沒如果]，這樣的我們直接拋棄掉。在這個方法中，我們儲存了每一行歌詞，但是時間還需要調用parseTime()方法來處理一下。繼續跟進parseTime()。

// 解析時間private Long parseTime(String time) {// 03:02.12String[] min = time.split(":");String[] sec = min[1].split("\\.");long minInt = Long.parseLong(min[0].replaceAll("\\D+", "").replaceAll("\r", "").replaceAll("\n", "").trim());long secInt = Long.parseLong(sec[0].replaceAll("\\D+", "").replaceAll("\r", "").replaceAll("\n", "").trim());long milInt = Long.parseLong(sec[1].replaceAll("\\D+", "").replaceAll("\r", "").replaceAll("\n", "").trim());return minInt * 60 * 1000 + secInt * 1000 + milInt * 10;}

也是很簡單的，通過分割形如“03:02.12”的時間，並且在最後以毫秒的形式返回。


到目前為止，所有的歌詞和歌詞對應的時間已經儲存起來了，接下來，就是要調用changeCurrent()方法來切換歌詞了。

// 外部提供方法// 傳入當前播放時間public synchronized void changeCurrent(long time) {// 如果目前時間小於下一句開始的時間// 直接returnif (mNextTime > time) {return;}// 每次進來都遍曆存放的時間for (int i = 0; i < mTimes.size(); i++) {// 發現這個時間大於傳進來的時間// 那麼現在就應該顯示這個時間前面的對應的那一行// 每次都重新顯示，是不是要判斷：現在正在顯示就不重新整理了if (mTimes.get(i) > time) {mNextTime = mTimes.get(i);mScroller.abortAnimation();mScroller.startScroll(i, 0, 0, mMaxScroll, SCROLL_TIME);//mNextTime = mTimes.get(i);//mCurrentLine = i <= 1 ? 0 : i - 1;postInvalidate();return;}}}

6～8行判斷一下現在傳進來的時間是不是大於下一行的時間，如果不是，直接返回，避免過度重繪。
接下來，去遍曆所有的時間，如果發現該時間大於傳進來的時間，那麼證明現在要顯示上一行了，儲存這個時間，並開始一個Scroller。startScroll方法的參數我們是這樣設定的。x值在scroll中沒有用，所以我們用來儲存當前key，並且讓他的變化度為0，y的值是從0到mMaxScroll.
接著來看看computeScroll()中怎麼處理的。

@Overridepublic void computeScroll() {if(mScroller.computeScrollOffset()) {mOffsetY = mScroller.getCurrY();if(mScroller.isFinished()) {int cur = mScroller.getCurrX();mCurrentLine = cur <= 1 ? 0 : cur - 1;mOffsetY = 0;}postInvalidate();}}

y的變化值我們作為滑動的位移量，而x呢 當然就是當前行了。


接下來，我們就要開始進入onDraw方法了。

@Overrideprotected void onDraw(Canvas canvas) {// float centerY = (getMeasuredHeight() + mTextBounds.height() - mDividerHeight) / 2;float centerY = (getMeasuredHeight() + mTextBounds.height()) / 2;if (mLrcs.isEmpty() || mTimes.isEmpty()) {canvas.drawText(DEFAULT_TEXT, (mViewWidth - mCurrentPaint.measureText(DEFAULT_TEXT)) / 2,centerY, mCurrentPaint);return;}String currentLrc = mLrcs.get(mCurrentLine);float currentX = (mViewWidth - mCurrentPaint.measureText(currentLrc)) / 2;// 畫當前行canvas.drawText(currentLrc, currentX, centerY - mOffsetY, mCurrentPaint);float offsetY = mTextBounds.height() + mDividerHeight;int firstLine = mCurrentLine - mRows / 2;firstLine = firstLine <= 0 ? 0 : firstLine;int lastLine = mCurrentLine + mRows / 2 + 2;lastLine = lastLine >= mLrcs.size() - 1 ? mLrcs.size() - 1 : lastLine;// 畫當前行上面的for (int i = mCurrentLine - 1,j=1; i >= firstLine; i--,j++) {String lrc = mLrcs.get(i);float x = (mViewWidth - mNormalPaint.measureText(lrc)) / 2;canvas.drawText(lrc, x, centerY - j * offsetY - mOffsetY, mNormalPaint);}// 畫當前行下面的for (int i = mCurrentLine + 1,j=1; i <= lastLine; i++,j++) {String lrc = mLrcs.get(i);float x = (mViewWidth - mNormalPaint.measureText(lrc)) / 2;canvas.drawText(lrc, x, centerY + j * offsetY - mOffsetY, mNormalPaint);}}

首先第4行，我們計算出了該view的中間位置，因為我們的歌詞是從中間往兩邊畫的。
5～10行，如果歌詞為空白，則顯示預設的文本”暫無歌詞“
12～15行是去繪製當前正在歌唱的行，drawText的第三個參數，我們減去了mOffetY，效果就是一個滑動的過程。


繪製完當前行，我們就需要繪製出當前行上面的和下面的。
17行，是每一行佔領的高度。
18、19行，擷取的是當前需要顯示的第一行(並不是歌詞的第一行)。
20、21行，擷取需要顯示的最後一行。
24～28行，去繪製當前行上面的的需要顯示的歌詞，需要注意的drawText的第三個參數，我們是通過中間那行的繪製位置去位移的。
31~35行是去繪製當前行下面的，原理和繪製上面的一樣。
這樣，一個帶有平滑滾動效果的歌詞控制項就完成了。


最後我們來看看最終的效果：

最後，是關於代碼的問題，有人說我的部落格沒有demo下載，這個以後會注意哈， 這次的代碼，等我這個月月底畢業答辯完了，會把音樂播放器一塊開源了。