android自定义View之3D索引效果

QQ图片20161211090532.png

效果图：

这里写图片描述

我的小霸王太卡了。

最近工作比较忙，今天搞了一下午才搞出来这个效果，这种效果有很多种实现方式，最常见的应该是用贝塞尔曲线实现的。今天我们来看另一种不同的实现方式，只需要用到 canvas.scale()，有没有很好奇是怎么实现的呢。

首先来说一下思路，只要有了思路剩下的就是往里面套代码了。
通过观察上面的效果图我们发现可以把右边的字母分为三种类型
1、 手指没触摸的地方显示正常的样式
2、手指触摸的位置 显示最大且完全不透明
3、手指触摸位置的上下附近位置 有放大且有透明度变化

对这个效果有了直观的认识后，我们就可以在ondraw里面根据不同的条件来分别画出这三种状态，这里主要难理解的就是这些条件。这需要结合代码看下。

so 我们开始撸码吧，

1、先初始化一些需要的变量

private void init(Context context) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.GRAY);
        mLetters = context.getResources().getStringArray(R.array.letter_list);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        mDensity  = getContext().getResources().getDisplayMetrics().density;
        setPadding(0,dip2px(20),0,dip2px(20));
    }

 private int dip2px(int dipPx){
        return (int)(dipPx*mDensity+0.5);
    }

相信上面这些应该没什么难度吧。 另外把一些需要的宽高属性赋值一下，因为下面会用到它们

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mHeight = h - getPaddingTop() - getPaddingBottom();
        mWidth = w - dip2px(16);
        mLetterHeight = mHeight / mLetters.length;
        int textSize = (int)(mLetterHeight*0.7);
        mPaint.setTextSize(textSize);
        mIsDownRect.set(w-dip2px(32),0,w,h);
    }

这里主要就是mIsDownRect这个要注意一下它是索引列表的范围，但是我们并不需要画出它。
2、在ontouch方法中对触摸事件进行必要的处理

public boolean onTouchEvent(MotionEvent event) {
       int action = event.getAction();
        switch (action){
            case MotionEvent.ACTION_DOWN:
                mIsBeingDragger = false;
                float initDownY = event.getY();
                if(!mIsDownRect.contains(event.getX(),event.getY())){
                    return false;
                }
                mInitDownY = initDownY;
                break;
            case MotionEvent.ACTION_MOVE:
                float y = event.getY();
                float diff = Math.abs(y - mInitDownY);
                if(diff>mTouchSlop&&!mIsBeingDragger){
                    mIsBeingDragger = true;
                }
                if(mIsBeingDragger){
                    mY = y;
                    float moveY = y - getPaddingTop();
                    int chartIndex = (int) (moveY / mHeight * mLetters.length);//获取索引位置的index
                    if(mChoose!=chartIndex){
                        if(chartIndex>=0&&chartIndex 
  
 
   
 
     
   
 
  
 
  

    这里写图片描述 
  
 
 

这些都计算好后就可以画了

 canvas.save();
            canvas.scale(diff,diff,mWidth*1.2f+diffX,lettersPos+diffY);
            if(diff ==1){
                mPaint.setAlpha(255);
                mPaint.setTypeface(Typeface.DEFAULT);

            }else {
                int alpha = (int) (255*(1-Math.min(0.9,diff -1)));
                if(mChoose == i){
                    alpha = 255;

                }
                mPaint.setAlpha(alpha);
                mPaint.setTypeface(Typeface.DEFAULT_BOLD);
            }

可以发现canvas.scale(diff,diff,mWidth*1.2f+diffX,lettersPos+diffY); 这一句才是整个自定义view的关键 它前两个参数是x轴和y轴的缩放系数，后两个参数是x轴和y轴的锚点，我主要是试出来的,这两个参数比较难理解,还需要多家学习。到这里就已经实现了我们最上面的效果了。

家里没有github的环境所以只传CSDN了。

源码