10、Dp Notes底部导航栏
程序员文章站
2022-03-11 11:18:22
...
有卡顿的现象(可能模拟器原因),滑动时没有渐变,设置一下渐变,主要是OnPageChangeListener中的onPageScrolled(int position, float offset, …),参数position表示当前页,offset表示位置偏移(0-1)。在函数中处理一下图标的透明度,实现渐变:
根据向哪个方向滑动(offset正负),和当前页(position),来计算一下每个图标的透明度,设置,刷新。还想加一个点击时的效果(水波反馈?)。类似于好多软件中的点击效果(UC菜单点击效果),简单实现原理,按下时画一个圆,半径逐渐扩大,抬起时半径逐渐减小。QEndBar中定义几个变量,boolean isDown,isUp,isMax;int downItem=-1;int colorItemDown;float radius=0;。onTouchEvent中:
根据点击位置设置一些状态。
onDraw中:
根据状态值画出想实现的效果,postInvalidateDelayed(25);延时刷新。比较乱,实现效果还凑合(一周弄了个底部栏,汗(-__-))。
注:这是一个.gif动图,ctrl点击图片查看。
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);延时刷新。比较乱,实现效果还凑合(一周弄了个底部栏,汗(-__-))。
注:这是一个.gif动图,ctrl点击图片查看。
有志竟成——2016/10/28