android 仿淘宝详情页 滑动顶部渐变 点击跳转到指定位置

最近在做一个商城项目 详情页和淘宝的基本一致,主要功能包括顶部滑动渐变,顶部显示商品,详情,评论然后点击跳转到指定位置,滑动提示文字变幻。讲的再多不如一张gif图看的明白下面上图。
项目地址:https://github.com/CreatNameFy/slide

untitled.gif

此布局使用的是RecyclerView 在此使用的是框架LRecyclerView

功能介绍
1.滑动渐变
采用addOnScrollListener监听滑动距离 ,顶部图片是固定高度 可以使用dp转px算出图片在屏幕的高度 然后根据滑动距离做出渐变效果,接下来上代码



//获取控件在手机的px高度   这里减去了状态栏的高度
(DensityUtil.dp2px(this, 180.0F) - DensityUtil.getStatusBarHeight(this));
/**
     *
     * @param context 上下文
     * @param dpValue dp数值
     * @return dp to  px
     */
    public static int dp2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);

    }
/**
     * 获取状态栏高度
     *
     * @param context context
     * @return 状态栏高度
     */
    public static int getStatusBarHeight(Context context) {
        // 获得状态栏高度
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        return context.getResources().getDimensionPixelSize(resourceId);
    }
//滑动监听
 //        设置渐变的主要代码
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recycler, int dx, int dy) {
                super.onScrolled(recycler, dx, dy);

                //滑动的距离
                totaldy += dy;
             
                //当滑动的距离 <= toolbar高度的时候,改变Toolbar背景色的透明度,达到渐变的效果
                if (totaldy <= mRecyclerFactor) {
//                    如果在显示图片中显示圆图标
//                    算出透明度
                    float scale = (float) totaldy / mRecyclerFactor;
                    float alpha = scale * 255;

                    if (alpha < 160) {
//                        如果透明度小于160设置为顶部是图片
                        
                        StatusBarUtil.setTranslucentForImageView(DetailsActivity.this, (int) alpha, titleBar);
                    } else {
                       
                        StatusBarUtil.setColor(DetailsActivity.this, Color.argb((int) alpha, 255, 255, 255));
                    }
                    titleBar.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
                } else {
//                   已经不显示图片
                    titleBar.setBackgroundColor(Color.parseColor("#ffffff"));
                }

            }
        });

2.滑动改变标题文字颜色 也就是滑到详情详情字体颜色是橙色 具体看gif图。
在adapter布局计算每个item的高度 我这里每个item的高度都是不固定的


    /**
     * 获取每个item的高度
     * @param view  item的跟布局
     * @param type  用于判断是那个item的高度 
     */
  public void getMeasureHeight(final View view, final int type) {
        view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (listener!=null){
                    if(type==1003||type==1004){
                        if(height!=0){
                            height+=view.getHeight();
                            listener.setOnItemHeightListener(height,type);
                        }else{
                            height=view.getHeight();
                        }
                    }else{
                        listener.setOnItemHeightListener(view.getHeight(),type);
                    }

                }
            }
        });
    }
//这里使用监听返回给activity页面 
/**获取到每个item的高度主要用到前两个*/
adapter.setListener(new DetailsAdapter.OnItemHeightListener() {
            @Override
            public void setOnItemHeightListener(int height, int type) {
                if(height!=0){
                    if(type==1001){
                      //这里加了顶部图片  我将图片作为head给了RecyclerView
                        item1=(int) (height+mRecyclerFactor);
                    }else if(type==1002){
                        item2=item1+ (height-DensityUtil.getWidth(mContext));
                    }else{
                        item3=item2+height;
                    }
                }

            }
        });
     recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recycler, int dx, int dy) {
                super.onScrolled(recycler, dx, dy);
                //判断滑动到的位置来提示目前文字显示的位置
                //滑动的距离
                totaldy += dy;
                if(item2!=0&&item1!=0&&item3!=0){
                if(totaldyitem1&&totaldyitem2){
                    titler.setTextColor(res.getColor(R.color.orange));
                    title.setTextColor(res.getColor(R.color.black));
                    titlel.setTextColor(res.getColor(R.color.black));
                }
                }
             

            }
        });

3.点击按钮滑动到指定位置
通过recyclerView.scrollBy();来滑动到指定位置

//当点击商品
//totaldy是已经滑动的距离  改为负数就是减去相应的长度 
 recyclerView.scrollBy(0, (int) -totaldy);
//点击详情
  //  判断滑动距离是否超过商品
                    if (totaldy > item1)
                        
                        recyclerView.scrollBy(0, (int) -(totaldy - item1) + 20);
                    else
                        recyclerView.scrollBy(0, (int) (item1 - totaldy) + 20);
//点击评论
 recyclerView.scrollBy(0, item2);

你可能感兴趣的:(android 仿淘宝详情页 滑动顶部渐变 点击跳转到指定位置)