（二）仿京東頂部伸縮漸變丶自定義viewpager指示器丶viewpager3D回廊丶recyclerview瀑布流

效果圖如下：

demo2.gif

Demo2

1.仿京東首頁頂部輪播圖+搜索欄漸變

public class GradientScrollView extends ScrollView {

    public interface ScrollViewListener {

        void onScrollChanged(GradientScrollView scrollView, int x, int y,
                             int oldx, int oldy);

    }

    private ScrollViewListener scrollViewListener = null;

    public GradientScrollView(Context context) {
        super(context);
    }

    public GradientScrollView(Context context, AttributeSet attrs,
                              int defStyle) {
        super(context, attrs, defStyle);
    }

    public GradientScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }


    @Override
    public void scrollTo(int x, int y) {
        super.scrollTo(x, y);
    }

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }

}

//滑動監(jiān)聽 控制狀態(tài)欄變化
@Override
public void onScrollChanged(GradientScrollView scrollView, int x, int y, int oldx, int oldy) {
    Drawable search_white = ContextCompat.getDrawable(this, R.mipmap.icon_search_white);
    Drawable search_black = ContextCompat.getDrawable(this, R.mipmap.icon_search_black);
    // 這一步必須要做,否則不會顯示.
    search_white.setBounds(0, 0, search_white.getMinimumWidth(), search_white.getMinimumHeight());
    // 這一步必須要做,否則不會顯示.
    search_black.setBounds(0, 0, search_black.getMinimumWidth(), search_black.getMinimumHeight());
    if (y <= 0) {
        llTitle.setBackgroundColor(Color.argb((int) 0, 255, 255, 255));
        rlLeft.setBackgroundResource(R.drawable.oval_shadow);
        rlRight.setBackgroundResource(R.drawable.oval_shadow);
        ivLeft.setImageResource(R.mipmap.icon_ewm);
        ivRight.setImageResource(R.mipmap.icon_ewm);
        tvSearch.setBackgroundResource(R.drawable.rec_shadow_r25);
        tvSearch.setCompoundDrawables(search_white, null, null, null);
        tvSearch.setCompoundDrawablePadding((int) getResources().getDimension(R.dimen.dimen_5));
        tvSearch.setHintTextColor(color(R.color.white));
    } else if (y > 0 && y <= height) {
        float scale = (float) y / height;
        float alpha = (255 * scale);
        llTitle.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
        if (y > 0 && y <= height / 2) {
            rlLeft.setBackgroundResource(R.drawable.oval_shadow);
            rlRight.setBackgroundResource(R.drawable.oval_shadow);
            ivLeft.setImageResource(R.mipmap.icon_ewm);
            ivRight.setImageResource(R.mipmap.icon_ewm);
            tvSearch.setBackgroundResource(R.drawable.rec_shadow_r25);
            tvSearch.setCompoundDrawables(search_white, null, null, null);
            tvSearch.setCompoundDrawablePadding((int) getResources().getDimension(R.dimen.dimen_5));
            tvSearch.setHintTextColor(color(R.color.white));
        } else {
            rlLeft.setBackground(null);
            rlRight.setBackground(null);
            ivLeft.setImageResource(R.mipmap.icon_ewm_black);
            ivRight.setImageResource(R.mipmap.icon_ewm_black);
            tvSearch.setBackgroundResource(R.drawable.rec_gray_r25);
            tvSearch.setCompoundDrawables(search_black, null, null, null);
            tvSearch.setCompoundDrawablePadding((int) getResources().getDimension(R.dimen.dimen_5));
            tvSearch.setHintTextColor(color(R.color.black));
        }
    } else {
        llTitle.setBackgroundColor(Color.argb((int) 255, 255, 255, 255));
        rlLeft.setBackground(null);
        rlRight.setBackground(null);
        ivLeft.setImageResource(R.mipmap.icon_ewm_black);
        ivRight.setImageResource(R.mipmap.icon_ewm_black);
        tvSearch.setBackgroundResource(R.drawable.rec_gray_r25);
        tvSearch.setCompoundDrawables(search_black, null, null, null);
        tvSearch.setCompoundDrawablePadding((int) getResources().getDimension(R.dimen.dimen_5));
        tvSearch.setHintTextColor(color(R.color.black));
    }
}

2.viewpager+自定義指示器

  public class PageIndicator extends View {

  private int count;

  private int selection = 0;

  private Paint mSelectedPaint;
  private Paint mUnSelectedPaint;

  private int selectedW;
  private int unSelectedW;
  private int height;
  private int gapW;
  private int unSelectedColor;
  private int selectedColor;

  public PageIndicator(Context context) {
      this(context,null);
  }

  public PageIndicator(Context context, @Nullable AttributeSet attrs) {
      this(context, attrs,0);
  }

  public PageIndicator(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
      super(context, attrs, defStyleAttr);
      TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.PageIndicator);
      unSelectedColor = ta.getColor(R.styleable.PageIndicator_unselected_color, ContextCompat.getColor(context,R.color.grayCC));
      selectedColor = ta.getColor(R.styleable.PageIndicator_selected_color, ContextCompat.getColor(context,R.color.black));
      count=ta.getInt(R.styleable.PageIndicator_count,3);
      ta.recycle();
      init(context);
  }

  private void init(Context context){
      mSelectedPaint = new Paint();
      mSelectedPaint.setColor(selectedColor);
      mSelectedPaint.setAntiAlias(true);
      mSelectedPaint.setStyle(Paint.Style.FILL);

      mUnSelectedPaint = new Paint();
      mUnSelectedPaint.setColor(unSelectedColor);
      mUnSelectedPaint.setAntiAlias(true);
      mUnSelectedPaint.setStyle(Paint.Style.FILL);

      selectedW = PhoneUtil.dp2px(context,20f);
      unSelectedW = PhoneUtil.dp2px(context,10f);
      height = PhoneUtil.dp2px(context,2f);
      gapW = PhoneUtil.dp2px(context,5f);
  }

  public void setCount(int count){
      this.count = count;
      requestLayout();
      invalidate();
  }

  public void setSelection(int position){
      selection = position;
      invalidate();
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      int width = (count - 1)*(unSelectedW + gapW) + selectedW;
      setMeasuredDimension(width,height);
  }

  @Override
  protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);

      boolean isHasSelect = false;
      for (int i = 0; i < count ; i ++){
          if (i == selection){
              isHasSelect = true;
              RectF rectF = new RectF(i*(unSelectedW + gapW),0,i*(unSelectedW + gapW) + selectedW,height);
              canvas.drawRoundRect(rectF,200,200,mSelectedPaint);
          }else {
              if (isHasSelect){
                  RectF rectF = new RectF((i-1)*(unSelectedW + gapW)+(selectedW + gapW),0,(i-1)*(unSelectedW + gapW)+(selectedW + gapW) + unSelectedW,height);
                  canvas.drawRoundRect(rectF,200,200,mUnSelectedPaint);
              }else {
                  RectF rectF = new RectF(i*(unSelectedW + gapW),0,i*(unSelectedW + gapW) + unSelectedW,height);
                  canvas.drawRoundRect(rectF,200,200,mUnSelectedPaint);
              }
          }
      }
  }


}
3.viewpager3D效果

private PagerAdapter pagerAdapter = new PagerAdapter() {
    @Override
    public int getCount() {
        return imgIds.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        ClipView clipView;
        if (imageViewList.containsKey(position)) {
            clipView = imageViewList.get(position);
        } else {
            clipView = (ClipView) View.inflate(mActivity, R.layout.item_image, null);
            ImageView imageView = (ImageView) clipView.findViewById(R.id.iv_img);
            TextView tvTitle = clipView.findViewById(R.id.tv_title);
            imageView.setImageResource(imgIds[position]);
            imageViewList.put(position, clipView);

        }
        container.addView(clipView);
        clipView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.normal("點擊了" + (position + 1));
                fvpPagers.setCurrentItem(position, true);
            }
        });
        return clipView;
    }
};

4.recyclerview瀑布流

     <android.support.v7.widget.RecyclerView
                    android:overScrollMode="never"
                    android:layout_marginTop="@dimen/dimen_10"
                    android:layout_marginLeft="@dimen/dimen_10"
                    android:id="@+id/demo_list"
                    app:spanCount="2"
                    app:layoutManager="android.support.v7.widget.StaggeredGridLayoutManager"
                    tools:listitem="@layout/item_demo2_list"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

   @Override
     public void setData(List<String> data) {
        super.setData(data);
        heightList = new ArrayList<>();
        for (int i = 0; i < data.size(); i++) {
            int height = new Random().nextInt(300) + 650;//隨機數(shù)控制高度
            heightList.add(height);
         }
     }

    @Override
    protected void fillData(BGAViewHolderHelper helper, int position, String model) {
        CardView layout=helper.getView(R.id.layout);
        ViewGroup.LayoutParams layoutParams=layout.getLayoutParams();
        layoutParams.height=heightList.get(position);
        layout.setLayoutParams(layoutParams);
    }

其他文章鏈接地址：
（一）高斯模糊實現(xiàn)毛玻璃效果丶共享元素動畫丶地址選擇器
 （三）RxJava2常用操作符merge、flatmap、zip--結(jié)合MVP架構(gòu)講解
 （四）仿支付寶首頁頂部伸縮滑動/中間層下拉刷新
 （五）TabLayout+ViewPager懸浮吸頂及刷新數(shù)量動畫顯示
 （六）仿QQ首頁drawer/側(cè)滑刪除/浮動imgaeView/角標拖拽
 （七）仿微信發(fā)布朋友圈拖拽刪除

將持續(xù)更新.. 不喜勿噴蜓竹，僅個人分享事格，希望能幫助到你

源碼地址：Github傳送門

（二） 仿京東頂部伸縮漸變丶自定義viewpager指示器丶viewpager3D回廊丶recyclerview瀑布流

（二）仿京東頂部伸縮漸變丶自定義viewpager指示器丶viewpager3D回廊丶recyclerview瀑布流