用PickerView仿电台频道切换

最新推荐文章于 2022-03-25 19:31:26 发布

xuie0000

最新推荐文章于 2022-03-25 19:31:26 发布

阅读量450

点赞数

分类专栏： Android 开发文章标签： PickerView 频道切换横向循环

本文链接：https://blog.csdn.net/xuie0000/article/details/50380592

版权

Android 开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

前面用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