Android仿即刻首页垂直滚动图,炫酷到底！

2019-12-12 05:19:26

字体：大中小

来源：转载

供稿：网友

项目地址：https://github.com/JeasonWong/JikeGallery

话不多说，先上效果。

这个效果是在即刻app上看到，觉得很不错，遂仿之。

先说下我的实现思路（以上方的图片滚动为例，下方的文字实现效果类似）：

自定义ViewGroup
装载两个ImageView和一个阴影View
通过一定规律交替控制两个ImageView和它们的marginTop，在onLayout()中实现
marginTop的具体值由属性动画控制，不断调用requestLayout()

接下来依次说明

一、自定义ViewGroup

 //滑动状态 protected static final int STATUS_SMOOTHING = 0; //停止状态 protected static final int STATUS_STOP = 1; //ViewGroup宽高 protected int mWidth, mHeight; //变化的marginTop值 protected int mSmoothMarginTop; //默认状态 protected int mStatus = STATUS_STOP; //滚动时间间隔 protected int mDuration = 500; //重复次数 protected int mRepeatTimes = 0; ... @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {  super.onSizeChanged(w, h, oldw, oldh);  mWidth = w;  mHeight = h;  mSmoothMarginTop = -h;  initView(); } protected abstract void initView(); ... /**  * 是否是奇数圈  *  * @return 结果  */ protected boolean isOddCircle() {  return mRepeatTimes % 2 == 1; }

先了解下成员变量，其中最重要的一个就是mSmoothMarginTop，相信很多人都知道一个View的marginTop可以设为负数，这个负数可以给我们带来太多的方便。

上图的图0就是我们展现在屏幕上的ImageView，图1则是屏幕外marginTop为-height的ImageView，这个一定要明白，接下来才好继续实现。

二、装载两个ImageView和一个阴影View

 private List<String> mImgList = new ArrayList<>(); private ImageView[] mImgs = new ImageView[2]; private View mShadowView; ... @Override protected void initView() {  //如果没有内容，则不进行初始化操作  if (mImgList.size() == 0) {   return;  }  removeAllViews();  MarginLayoutParams params = new MarginLayoutParams(mWidth, mHeight);  //两个ImageView加载前两张图  for (int i = 0; i < mImgs.length; i++) {   mImgs[i] = new ImageView(getContext());   addViewInLayout(mImgs[i], -1, params, true);   Glide.with(getContext()).load(getImgPath(i)).centerCrop().into(mImgs[i]);  }  //创建阴影View  mShadowView = new View(getContext());  mShadowView.setBackgroundColor(Color.parseColor("#60000000"));  mShadowView.setAlpha(0);  addViewInLayout(mShadowView, -1, params, true); } ... /**  * 获取图片地址  *   * @param position 位置  * @return 图片地址  */ private String getImgPath(int position) {  position = position % mImgList.size();  return mImgList.get(position); }

关键点说明：

MarginLayoutParams 为了之后方便取出margin值
addViewInLayout() 为了对requestLayout的绝对控制
getImgPath() 为了实现循环滚动
这样一来，我们需要的View都已经创建好了。

三、通过一定规律交替控制两个ImageView和它们的marginTop，在onLayout()中实现

 @Override protected void onLayout(boolean changed, int l, int t, int r, int b) {  int cCount = getChildCount();  MarginLayoutParams cParams;  for (int i = 0; i < cCount; i++) {   View childView = getChildAt(i);   cParams = (MarginLayoutParams) childView.getLayoutParams();   int cl = 0, ct = 0, cr, cb;   if (isOddCircle()) {    if (i == 1) {     cl = cParams.leftMargin;     ct = mSmoothMarginTop + mHeight;    } else if (i == 0) {     cl = cParams.leftMargin;     ct = mSmoothMarginTop;    }   } else {    if (i == 0) {     cl = cParams.leftMargin;     ct = mSmoothMarginTop + mHeight;    } else if (i == 1) {     cl = cParams.leftMargin;     ct = mSmoothMarginTop;    }   }   //控制shadowView   if (i == 2) {    cl = cParams.leftMargin;    ct = mSmoothMarginTop + mHeight;   }   cr = cl + mWidth;   cb = ct + mHeight;   childView.layout(cl, ct, cr, cb);  } }

以上实现的就是不断的替换图1和图2谁上谁下，阴影和下方的图保持同步。

四、marginTop的具体值由属性动画控制，不断调用requestLayout()

先看基类ViewGroup

 /**  * 开启滑动  *  */ public void startSmooth() {  if (mStatus != STATUS_STOP) {   return;  }  ValueAnimator animator = ValueAnimator.ofFloat(-mHeight, 0);  animator.setDuration(mDuration);  animator.setInterpolator(new AccelerateDecelerateInterpolator());  animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {   @Override   public void onAnimationUpdate(ValueAnimator animation) {    float marginTop = (float) animation.getAnimatedValue();    mSmoothMarginTop = (int) marginTop;    if (marginTop == 0) {     postDelayed(new Runnable() {      @Override      public void run() {       mRepeatTimes++;       mSmoothMarginTop = -mHeight;       doAnimFinish();       mStatus = STATUS_STOP;      }     }, 50);    } else {     doAnim();    }   }  });  animator.start();  mStatus = STATUS_SMOOTHING; } //动画结束 protected abstract void doAnimFinish(); //动画进行时 protected abstract void doAnim();

关键点说明：

属性动画控制着mSmoothMarginTop在[-mHeight, 0]中变化
每完成一圈，mRepeatTimes自增1

再来看看Gallery实现类

 @Override protected void doAnimFinish() {  if (isOddCircle()) {   Glide.with(getContext()).load(getImgPath(mRepeatTimes + 1)).centerCrop().into(mImgs[0]);  } else {   Glide.with(getContext()).load(getImgPath(mRepeatTimes + 1)).centerCrop().into(mImgs[1]);  }  mShadowView.setAlpha(0); } @Override protected void doAnim() {  mShadowView.setAlpha(((1 - (-mSmoothMarginTop) / (float) mHeight)));  requestLayout(); }

关键点说明：

通过mSmoothMarginTop与mHeight的比值控制阴影View的透明度
每次动画完成时，下方的图（此时下方的图已经超出屏幕了，而上方图显示在屏幕内）需要加载第三张图，使用getImgPath()取出
pic1