Android仿网易客户端顶部导航栏效果

2019-12-10 17:54:44王振洲

这里用了HorizontalScrollView横向滚动视图主要是为了实现当导航栏个数超出屏幕以后可以实现左右移动的效果,这2个ImageButton则是用来实现左右滚动的操作。HorizontalScrollView里面用的一个框架布局,大家都知道框架布局是一个叠加式的 布局,所以里面的ImageView会在LinearLayout布局下面一层,这个ImageView就是实现动态背景效果的。而LinearLayout里面放的是TextView,这里是在后台程序里面动态添加。

那要怎样实现当我点击一个TextView 后实现后面的ImageView动态移动到我选中的TextView位置呢?这里我们需要为每一个TextView添加onTouchEvent()时间,并且监听ACTION_DOWN时间,也就是手指按下的时候,这时我们就启动一个TranslateAnimation平移动画,在动画结束时,再将ImageView移动到textview的位置。移动textview的位置我这里是动态调整textview的布局来实现的。

下面是实现的代码:

private void translateImage(MotionEvent event) { 
    float x = event.getX(); 
    float rx = event.getRawX(); 
    final float nx = rx - x - 12; 
    TranslateAnimation trans = null; 
    if (nx > lastX) { 
      trans = new TranslateAnimation(0, nx - lastX, 0, 0); 
    } else if (nx < lastX) { 
      trans = new TranslateAnimation(0, (lastX - nx) * -1, 0, 0); 
    } else { 
      return; 
    } 
    trans.setDuration(300); 
 
    trans.setAnimationListener(new AnimationListener() { 
 
      @Override 
      public void onAnimationStart(Animation animation) { 
        // TODO Auto-generated method stub 
 
      } 
 
      @Override 
      public void onAnimationRepeat(Animation animation) { 
        // TODO Auto-generated method stub 
 
      } 
 
      @Override 
      public void onAnimationEnd(Animation animation) { 
        FrameLayout.LayoutParams params = (android.widget.FrameLayout.LayoutParams) column_slide_bar 
            .getLayoutParams(); 
        params.leftMargin = (int) nx; 
        column_slide_bar.setLayoutParams(params); 
      } 
    }); 
    trans.setFillEnabled(true); 
    column_slide_bar.startAnimation(trans); 
    lastX = (int) nx; 
  } 

这个方法的开头我是取到手指按下的textview的坐标位置,而lastX是上一次手指按下的位置,我这里做了判断来确定移动的方向,然后给动画添加了一个动画监听事件,在动画结束时我就动态的把imageview移动到新的坐标位置。setFillEnabled(true);这里的作用主要是避免动画乱跳,这里具体是什么原因我也还不太清楚,但是设置以后动画一切都正常。