用PickerView仿電臺頻道切換

前面用ScrollView寫了一個，存在很多缺陷，選擇目標只能是最中間，還不能循環，有點坑。於是還換過ViewPager來進行循環切換，這個也有點坑，不適用於我想要效果，ViewPager的切換效果可以參考這裏和這裏。

上面的效果圖參考PickerView修改而來的，如果滿意，且喜歡這種效果就往下看，實現原理還是去參考原作者的吧，且我也只分析怎麼從PickerView變過來。

將PickerView變成橫向

mMoveLenX += event.getX() - mLastDownX;
// 省略源碼
mLastDownX = event.getX();

修改選中 text

mMinTextSize = (float) (mViewHeight * 0.2);
mMaxTextSize = (float) (mViewHeight * 0.25);
mViewItemWidth = (float) (mViewHeight * 1.5);

先定義一下字體的大小，和Item的寬度，選中放大字體爲高度的0.25倍，正常字體爲高度的0.2倍，子View寬度爲高度的1.5倍

// 繪製選中的text
float scale = parabola(mMaxTextSize, mMoveLenX);
float size = (mMaxTextSize - mMinTextSize) * scale + mMinTextSize;
mPaint.setTextSize(size);
mPaint.setAlpha((int) ((mMaxTextAlpha - mMinTextAlpha) * scale + mMinTextAlpha));
// --- text居中繪製，注意baseline的計算才能達到居中，y值是text中心座標
float x = (float) (mViewWidth / 2.0 + mMoveLenX);
FontMetricsInt fmi = mPaint.getFontMetricsInt();
float baseline = (float) (mViewHeight - size - (fmi.bottom / 2.0 + fmi.top / 2.0));
String text = mDataList.get(mCurrentSelected);
canvas.drawText(text, x, baseline, mPaint);

if (bgScaleX == -1) {
    bgScaleX = mViewItemWidth / bg.getWidth();
    bgScaleY = getHeight() * 0.5f / bg.getHeight();
    pointScale = getHeight() * 1.0f / point.getHeight();
}
mMatrix.setScale(bgScaleX, bgScaleY);
mMatrix.postTranslate(x - mViewItemWidth / 2, getHeight() * 0.125f);
canvas.drawBitmap(bg, mMatrix, mPaint);

再繪製選中的Text，我將Text內容放在了底部 - (float) (mViewHeight - size - (fmi.bottom / 2.0 + fmi.top / 2.0))，接下來就是放了電臺底圖在上半部，正好是一半，圖片起始位從1/8H - 0.125f開始

修改左右兩測Text

/**
 * @param canvas
 * @param position 距離mCurrentSelected的差值
 * @param type     1表示左測繪製，-1表示右測繪製
 */
private void drawOtherText(Canvas canvas, int position, int type) {
    float d = mViewItemWidth * position + type * mMoveLenX;
    float x = (float) (mViewWidth / 2.0 + type * d);
    if (x < -mViewItemWidth || x > mViewItemWidth + mViewWidth) {
        return;
    }

    float scale = parabola(mMaxTextSize, d);
    float size = (mMaxTextSize - mMinTextSize) * scale + mMinTextSize;
    mPaint.setTextSize(size);
    mPaint.setAlpha((int) ((mMaxTextAlpha - mMinTextAlpha) * scale + mMinTextAlpha));
    FontMetricsInt fmi = mPaint.getFontMetricsInt();
    float baseline = (float) (mViewHeight - size - (fmi.bottom / 2.0 + fmi.top / 2.0));
    canvas.drawText(mDataList.get(mCurrentSelected + type * position), x, baseline, mPaint);

    mMatrix.setScale(bgScaleX, bgScaleY);
    mMatrix.postTranslate(x - mViewItemWidth / 2, getHeight() * 0.125f);
    canvas.drawBitmap(bg, mMatrix, mPaint);
}

再接下來繪製左右兩測的圖片，原理和繪製中間的差不多，就是多添加了一項過濾，當需要繪製的View超過的邊界一個ItemView的距離時，直接return掉了 - if (x < -mViewItemWidth || x > mViewItemWidth + mViewWidth) {return;}

下載源碼

參考：
http://blog.csdn.net/zhongkejingwang/article/details/38513301