用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;}

下载源码

参考：

/article/7618170.html