仿拼多多、淘宝、水平滚动RecyclerView,自定义滚动条滚动距离

   前几天，产品出了个原型图，直接截图拼多多，可滑动宫格，实现随意水平滑动。于是研究下拼多多的样式，感觉是一个水平滑动的RecyclerView,但是底部的滚动条，瞬间挠头了~~~于是乎研究滚动条，尝试修改RecyclerView自带的滚动条，可把自己折腾坏了，游标的滑动时可以自定义了，但是底部scrollbarTrackHorizontal 的长短修改不了。另寻他法。。。

研究了下源码，有这几个方法可以使用。。。

//当前RcyclerView显示区域的高度。水平列表屏幕从左侧到右侧显示范围
int extent = mRecyclerView.computeHorizontalScrollExtent();

//整体的高度，注意是整体，包括在显示区域之外的。
int range = mRecyclerView.computeHorizontalScrollRange();

//已经向下滚动的距离，为0时表示已处于顶部。
int offset = mRecyclerView.computeHorizontalScrollOffset();

下方滚动条我采用了一个seekbar，没有自定义view,也可以自定义view实现滚动。

看代码注释很详细：

import android.graphics.drawable.GradientDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RainView rainView;
    private Button btnCake;
    private Button btnDog;
    private CustomeRecyclerView mRecyclerView;
    SeekBar seekBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //设置列表可以水平滑动，两行
        final GridLayoutManager layoutManager = new GridLayoutManager(this, 2, GridLayoutManager.HORIZONTAL, false);
//        mRecyclerView = new CustomeRecyclerView(this);
        mRecyclerView = findViewById(R.id.recyclerView);
        mRecyclerView.setLayoutManager(layoutManager);
        final List<String> strings = new ArrayList<>();
        for (int i = 0; i < 12; i++) {
            strings.add("name" + i);
        }
        Adapter adapter = new Adapter(this, strings);
        mRecyclerView.setAdapter(adapter);
        seekBar = findViewById(R.id.slide_indicator_point);
        seekBar.setPadding(0, 0, 0, 0);
        seekBar.setThumbOffset(0);
//        GradientDrawable gradientDrawable =(GradientDrawable) seekBar.getThumb();
//        gradientDrawable.setSize(1440/(strings.size()/2),5);
//        final GradientDrawable mGroupDrawable = (GradientDrawable) seekBar.getThumb();
//        mGroupDrawable.setSize(1000,5);
        //显示区域的高度。
        int extent = mRecyclerView.computeHorizontalScrollExtent();
        //整体的高度，注意是整体，包括在显示区域之外的。
        int range = mRecyclerView.computeHorizontalScrollRange();
        //已经向下滚动的距离，为0时表示已处于顶部。
        int offset = mRecyclerView.computeHorizontalScrollOffset();
//        int screenWidth = this.getWindowManager().getDefaultDisplay().getWidth();
//        int tt =screenWidth/2;
//        seekBar.setMax(tt+100);
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                //显示区域的高度。
                int extent = mRecyclerView.computeHorizontalScrollExtent();
                //整体的高度，注意是整体，包括在显示区域之外的。
                int range = mRecyclerView.computeHorizontalScrollRange();
                //已经向下滚动的距离，为0时表示已处于顶部。
                int offset = mRecyclerView.computeHorizontalScrollOffset();
                Log.i("dx------",range+"****"+extent+"****"+offset);
                //此处获取seekbar的getThumb，就是可以滑动的小的滚动游标
                GradientDrawable gradientDrawable =(GradientDrawable) seekBar.getThumb();
                //根据列表的个数，动态设置游标的大小，设置游标的时候，progress进度的颜色设置为和seekbar的颜色设置的一样的，所以就不显示进度了。
                gradientDrawable.setSize(extent/(strings.size()/2),5);
                //设置可滚动区域
                seekBar.setMax((int)(range-extent));
                if (dx==0){
                    seekBar.setProgress(0);
                }else if (dx>0){
//                    int ss = (int)(tt/2.3f);
                    Log.i("dx------","右滑");
                    seekBar.setProgress(offset);
                }else if (dx<0){
                    Log.i("dx------","左滑");
                    seekBar.setProgress(offset);
                }
            }
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

        });
        rainView = findViewById(R.id.testView);
        btnCake = findViewById(R.id.btn_cake);
        btnDog = findViewById(R.id.btn_dog);
        btnCake.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                rainView.setImgResId(R.mipmap.cake);
                rainView.start(true);
            }
        });
        btnDog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                rainView.setImgResId(R.mipmap.dog);
                rainView.start(true);
            }
        });
    }


    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);

    }

    public int getScollYDistance() {
        GridLayoutManager  layoutManager = (GridLayoutManager ) mRecyclerView.getLayoutManager();
        int position = layoutManager.findFirstVisibleItemPosition();
        View firstVisiableChildView = layoutManager.findViewByPosition(position);
        int itemHeight = firstVisiableChildView.getHeight();
        return (position) * itemHeight - firstVisiableChildView.getLeft();
    }
}

适配器adapter

import android.content.Context;
import android.media.Image;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import java.util.List;

public class Adapter extends RecyclerView.Adapter {

    private Context mContext;
    private List<String> mStrings;
    LayoutInflater inflater;

    public Adapter(Context mContext, List<String> strings) {
        this.mContext = mContext;
        this.mStrings = strings;
        inflater = LayoutInflater.from(mContext);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new TViewHolder(inflater.inflate(R.layout.adapter_item,parent,false));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        String string = mStrings.get(position);
        TViewHolder viewHolder = (TViewHolder) holder;
        viewHolder.title.setText(string);
        viewHolder.mView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, position+"", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        return mStrings==null? 0 :mStrings.size();
    }

    class TViewHolder extends RecyclerView.ViewHolder{

        private Image iconImg;
        private TextView title;
        View mView;

        public TViewHolder(View itemView) {
            super(itemView);
            title = itemView.findViewById(R.id.tv_title);
            mView = itemView.findViewById(R.id.new_menu_item);
        }
    }
}

activity_main.xmi:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <com.rain.CustomeRecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scrollbarAlwaysDrawHorizontalTrack="true"
            android:scrollbarSize="3px"
            android:scrollbarStyle="outsideInset"
            android:scrollbarThumbHorizontal="@drawable/bg_fast_scroll_bar_thumb"
            android:scrollbarTrackHorizontal="@drawable/bg_fast_scroll_bar_track"
            android:scrollbars="none" />

        <SeekBar
            android:id="@+id/slide_indicator_point"
            android:layout_width="80dp"
            android:layout_height="2dp"
            android:layout_below="@id/recyclerView"
            android:layout_centerHorizontal="true"
            android:focusable="true"
            android:maxHeight="4.0dip"
            android:minHeight="4.0dip"
            android:background="@drawable/tt_bg"
            android:progressDrawable="@drawable/bg_fast_scroll_bar_track"
            android:thumb="@drawable/bg_fast_scroll_bar_thumb"
            android:visibility="visible" />
    <com.rain.RainView
        android:id="@+id/testView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <Button
        android:id="@+id/btn_dog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="真·狗头雨·落！" />

    <Button
        android:id="@+id/btn_cake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/btn_dog"
        android:text="蛋糕雨" />
</RelativeLayout>

bg_fast_scroll_bar_track.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="6dp"/>
    <solid android:color="#CCCCCC" />

    <!--<size-->
        <!--android:width="10px"-->
        <!--android:height="3px" />-->
</shape>

bg_fast_scroll_bar_thumb.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="6dp"/>
    <solid android:color="#ff0000" />
    <size
    android:width="100dp"
    android:height="2dp" />
</shape>

基本就这些，如果用的话可以新建一个项目，直接把代码copy进去,有些代码无用删除即可。写代码的也不好，有疏漏烦请见谅

想要源码在这里