欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

10、Dp Notes底部导航栏

程序员文章站 2022-03-11 11:18:52
...
        有卡顿的现象(可能模拟器原因),滑动时没有渐变,设置一下渐变,主要是OnPageChangeListener中的onPageScrolled(int position, float offset, …),参数position表示当前页,offset表示位置偏移(0-1)。在函数中处理一下图标的透明度,实现渐变:
if(position>=0&&position<=3){
    if(offset>0){
        alphaItem[position]=(int)(255-255*offset);
        alphaItem[position+1]=(int)(255*offset);
        if(position==0){
            alphaItem[2]=0;
            alphaItem[3]=0;
        }
        else if(position==1){
            alphaItem[0]=0;
            alphaItem[3]=0;
        }
        else if(position==2){
            alphaItem[0]=0;
            alphaItem[1]=0;
        }
        else{
            alphaItem[0]=0;
            alphaItem[1]=0;
            alphaItem[2]=0;
        }
    }
    else if(offset<0){
        alphaItem[position]=(int)(255-255*offset);
        alphaItem[position-1]=(int)(255*offset);
        if(position==0){
            alphaItem[1]=0;
            alphaItem[2]=0;
            alphaItem[3]=0;
        }
        else if(position==1){
            alphaItem[2]=0;
            alphaItem[3]=0;
        }
        else if(position==2){
            alphaItem[0]=0;
            alphaItem[3]=0;
        }
        else{
            alphaItem[0]=0;
            alphaItem[1]=0;
        }
    }
    postInvalidate();
}

        根据向哪个方向滑动(offset正负),和当前页(position),来计算一下每个图标的透明度,设置,刷新。还想加一个点击时的效果(水波反馈?)。类似于好多软件中的点击效果(UC菜单点击效果),简单实现原理,按下时画一个圆,半径逐渐扩大,抬起时半径逐渐减小。QEndBar中定义几个变量,boolean isDown,isUp,isMax;int downItem=-1;int colorItemDown;float radius=0;。onTouchEvent中:
case MotionEvent.ACTION_DOWN:
    isDown=true;
    radius=widthItem/4;
    isUp=false;
    touchX=(int)event.getX();	//记录点击位置
    touchY=(int)event.getY();
    if(Math.abs(touchX-positionItem[0])<widthItem/2){
        itemDown=0;
    }
    else if(Math.abs(touchX-positionItem[1])<widthItem/2){
        itemDown=1;
    }
    else if(Math.abs(touchX-widthAll/2)<widthItem/2){
        itemDown=4;												//点击中间图标
    }
    else if(Math.abs(touchX-positionItem[2])<widthItem/2){
        itemDown=2;
    }
    else if(Math.abs(touchX-positionItem[3])<widthItem/2){
        itemDown=3;
    }
    postInvalidate();
    break;
case MotionEvent.ACTION_UP:
    isDown=false;
    isUp=true;
    ……

        根据点击位置设置一些状态。

        onDraw中:


paintOther.setColor(colorItemDown);
int alpha=colorItemDown>>24;
paintOther.setAlpha((int)(alpha*radius/widthItem*2));
if(isDown){
    if(radius<widthItem/2){
        if(itemDown==0){
            canvas.drawCircle(positionItem[0], heightAll/2, radius, paintOther);
            radius+=widthItem/4/10;
            postInvalidateDelayed(10);
        }
        else if(itemDown==1){
            ……
        }
        else if(itemDown==2){
            ……
        }
        else if(itemDown==3){
            ……
        }
        else if(itemDown==4){
            ……
        }
    }
    else{
        isMax=true;
        if(itemDown==0){
            canvas.drawCircle(positionItem[0], heightAll/2, radius, paintOther);
        }
        else if(itemDown==1){
            ……
        }
        else if(itemDown==2){
            ……
        }
        else if(itemDown==3){
            ……
        }
        else if(itemDown==4){
            ……
        }
    }
}
else if(isUp){
    if(!isMax){
        if(itemDown==0){
            canvas.drawCircle(positionItem[0], heightAll/2, radius, paintOther);
            radius+=widthItem/4/10;
            postInvalidateDelayed(10);
        }
        else if(itemDown==1){
            ……
        }
        else if(itemDown==2){
            ……
        }
        else if(itemDown==3){
            ……
        }
        else if(itemDown==4){
            ……
        }
        if(radius<widthItem/2){
            isMax=false;
        }
        else{
            isMax=true;
        }
    }
    else{
        if(radius>widthItem/4){
            if(itemDown==0){
                canvas.drawCircle(positionItem[0], heightAll/2, radius, paintOther);
                radius-=widthItem/4/5;
                postInvalidateDelayed(10);
            }
            else if(itemDown==1){
                ……
            }
            else if(itemDown==2){
                ……
            }
            else if(itemDown==3){
                ……
            }
            else if(itemDown==4){
                ……
            }
        }
        else{
            isUp=false;
            itemDown=-1;
            isMax=false;
            postInvalidateDelayed(10);
        }
    }
}

根据状态值画出想实现的效果,postInvalidateDelayed(25);延时刷新。比较乱,实现效果还凑合(一周弄了个底部栏,汗(-__-))。
10、Dp Notes底部导航栏
            
    
    博客分类: Code/Android/Dp Notes 安卓学习总结安卓开发安卓实例Dp Notes 
注:这是一个.gif动图,ctrl点击图片查看。

有志竟成——2016/10/28




  • 10、Dp Notes底部导航栏
            
    
    博客分类: Code/Android/Dp Notes 安卓学习总结安卓开发安卓实例Dp Notes 
  • 大小: 221.6 KB