Android RecyclerView自定义LayoutManager

把握生命里的每一分钟,全力以赴我们心中的梦,不经历风雨 怎么见彩虹,没有人能随随便便成功 -----《真心英雄》

在第一篇中已经讲过,LayoutManager主要用于布局其中的Item,在LayoutManager中能够对每个Item的大小,位置进行更改,将它放在我们想要的位置,在很多优秀的效果中,都是通过自定义LayoutManager来实现的,比如:



可以看到效果非常棒,通过这一节的学习,大家也就理解了自定义LayoutManager的方法,然后再理解这些控件的代码就不再难了。

在这节中,我们先自己制作一个LinearLayoutManager,来看下如何自定义LayoutManager,下节中,我们会通过自定义LayoutManager来制作第一个滚轮翻页的效果。

自定义CustomLayoutManager

先生成一个类CustomLayoutManager,派生自LayoutManager:

public class CustomLayoutManager extends LayoutManager {
    @Override
    public LayoutParams generateDefaultLayoutParams() {
        return null;
    }
}

当我们派生自LayoutManager时,会强制让我们生成一个方法generateDefaultLayoutParams。这个方法就是RecyclerView Item的布局参数,换种说法,就是RecyclerView 子 item 的 LayoutParameters,若是想修改子Item的布局参数(比如:宽/高/margin/padding等等),那么可以在该方法内进行设置。一般来说,没什么特殊需求的话,则可以直接让子item自己决定自己的宽高即可(wrap_content)。

public class CustomLayoutManager extends LayoutManager {
    @Override
    public LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(RecyclerView.LayoutParams.WRAP_CONTENT,
                RecyclerView.LayoutParams.WRAP_CONTENT);
    }
}

如果这时候,我们把上节demo中LinearLayoutManager替换下:

public class LinearActivity extends AppCompatActivity {
    private ArrayList<String> mDatas = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear);

        …………
        RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.linear_recycler_view);
        
        mRecyclerView.setLayoutManager(new CustomLayoutManager());

        RecyclerAdapter adapter = new RecyclerAdapter(this, mDatas);
        mRecyclerView.setAdapter(adapter);
    }
    …………
}

运行一下,发现页面完全空白:


我们说过所有的Item的布局都是在LayoutManager中处理的,很明显,我们目前在CustomLayoutManager中并没有布局任何的Item。当然没有Item出现了。

onLayoutChildren()

在LayoutManager中,所有Item的布局都是在onLayoutChildren()函数中处理的,所以我们在CustomLayoutItem中添加onLayoutChildren()函数:

@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
    //定义竖直方向的偏移量
    int offsetY = 0;
    for (int i = 0; i < getItemCount(); i++) {
        View view = recycler.getViewForPosition(i);
        addView(view);
        measureChildWithMargins(view, 0, 0);
        int width = getDecoratedMeasuredWidth(view);
        int height = getDecoratedMeasuredHeight(view);
        layoutDecorated(view, 0, offsetY, width, offsetY + height);
        offsetY += height;
    }
}

在这个函数中,我主要做了两个事:第一:把所有的item所对应的view加进来:

for (int i = 0; i < getItemCount(); i++) {
    View view = recycler.getViewForPosition(i);
    addView(view);
    …………
}

第二:把所有的Item摆放在它应在的位置:

public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
    //定义竖直方向的偏移量
    int offsetY = 0;
    for (int i = 0; i < getItemCount(); i++) {
        …………
        measureChildWithMargins(view, 0, 0);
        int width = getDecoratedMeasuredWidth(view);
        int height = getDecoratedMeasuredHeight(view);
        layoutDecorated(view, 0, offsetY, width, offsetY + height);
        offsetY += height;
    }
}

measureChildWithMargins(view, 0, 0);函数测量这个View,并且通过getDecoratedMeasuredWidth(view)得到测量出来的宽度,需要注意的是通过getDecoratedMeasuredWidth(view)得到的是item+decoration的总宽度。如果你只想得到view的测量宽度,通过View.getMeasuredWidth()就可以得到了。

然后通过layoutDecorated()函数将每个item摆放在对应的位置,每个Item的左右位置都是相同的,从左侧x=0开始摆放,只是y的点需要计算。所以这里有一个变量offsetY,用以累加当前Item之前所有item的高度。从而计算出当前item的位置。这个部分难度不大,就不再细讲了。

在此之后,我们再运行程序,会发现,现在item显示出来了:


添加滚动效果

但是,现在还不能滑动,如果我们要给它添加上滑动,需要修改两个地方:

@Override
public boolean canScrollVertically() {
    return true;
}

@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
    // 平移容器内的item
    offsetChildrenVertical(-dy);
    return dy;
}

我们通过在canScrollVertically()中return true;使LayoutManager具有垂直滚动的功能。然后scrollVerticallyBy中接收每次滚动的距离dy。如果你想使LayoutManager具有横向滚动的功能,可以通过在canScrollHorizontally()中return true;

这里需要注意的是,在scrollVerticallyBy中,dy表示手指在屏幕上每次滑动的位移。

  • 当手指由下往上滑时,dy>0
  • 当手指由上往下滑时,dy<0

当手指向上滑动时,我们需要让所有子Item向上移动,向上移动明显是需要减去dy的。所以,大家经过测试也可以发现,让容器内的item移动-dy距离,才符合生活习惯。在LayoutManager中,我们可以通过public void offsetChildrenVertical(int dy)函数来移动RecycerView中的所有item。

现在我们再运行一下:


这里虽然实现了滚动,但是Item到顶之后,仍然可以滚动,这明显是不对的,我们需要在滚动时添加判断,如果到顶了或者到底了就不让它滚动了。

判断到顶

判断到顶相对比较容易,我们只需要把所有的dy相加,如果小于0,就表示已经到顶了。就不让它再移动就行,代码如下:

private int mSumDy = 0;
@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
    int travel = dy;
    //如果滑动到最顶部
    if (mSumDy + dy < 0) {
        travel = -mSumDy;
    }
    mSumDy += travel;
    // 平移容器内的item
    offsetChildrenVertical(-travel);
    return dy;
}

在这段代码中,通过变量mSumDy 保存所有移动过的dy,如果当前移动的距离<0,那么就不再累加dy,直接让它移动到y=0的位置,因为之前已经移动的距离是mSumdy;
所以计算方法为:
travel+mSumdy = 0;
=> travel = -mSumdy
所以要将它移到y=0的位置,需要移动的距离为-mSumdy.效果如下图所示:


从效果图中可以看到,现在在到顶时,就不会再移动了。下面再来看看到底的问题。

判断到底

判断到底的方法,其实就是我们需要知道所有item的总高度,用总高度减去最后一屏的高度,就是到底的时的偏移值,如果大于这个偏移值就说明超过底部了。

所以,我们首先需要得到所有item的总高度,我们知道在onLayoutChildren中会测量所有的item并且对每一个item布局,所以我们只需要在onLayoutChildren中将所有item的高度相加就可以得到所有Item的总高度了。

private int mTotalHeight = 0;
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
    //定义竖直方向的偏移量
    int offsetY = 0;
    for (int i = 0; i < getItemCount(); i++) {
        View view = recycler.getViewForPosition(i);
        addView(view);
        measureChildWithMargins(view, 0, 0);
        int width = getDecoratedMeasuredWidth(view);
        int height = getDecoratedMeasuredHeight(view);
        layoutDecorated(view, 0, offsetY, width, offsetY + height);
        offsetY += height;
    }
    //如果所有子View的高度和没有填满RecyclerView的高度,
    // 则将高度设置为RecyclerView的高度
    mTotalHeight = Math.max(offsetY, getVerticalSpace());
}
private int getVerticalSpace() {
    return getHeight() - getPaddingBottom() - getPaddingTop();
}

getVerticalSpace()函数可以得到RecyclerView用于显示Item的真实高度。而相比上面的onLayoutChildren,这里只添加了一句代码:mTotalHeight = Math.max(offsetY, getVerticalSpace());这里只所以取最offsetY和getVerticalSpace()的最大值是因为,offsetY是所有item的总高度,而当item填不满RecyclerView时,offsetY应该是比RecyclerView的真正高度小的,而此时的真正的高度应该是RecyclerView本身所设置的高度。

接下来就是在scrollVerticallyBy中判断到底并处理了:

public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
    int travel = dy;
    //如果滑动到最顶部
    if (mSumDy + dy < 0) {
        travel = -mSumDy;
    } else if (mSumDy + dy > mTotalHeight - getVerticalSpace()) {
        travel = mTotalHeight - getVerticalSpace() - mSumDy;
    }

    mSumDy += travel;
    // 平移容器内的item
    offsetChildrenVertical(-travel);
    return dy;
}

mSumDy + dy > mTotalHeight - getVerticalSpace()中:
mSumDy + dy 表示当前的移动距离,mTotalHeight - getVerticalSpace()表示当滑动到底时滚动的总距离;

当滑动到底时,此次的移动距离要怎么算呢?
算法如下:
travel + mSumDy = mTotalHeight - getVerticalSpace();
即此将将要移动的距离加上之前的总移动距离,应该是到底的距离。
=> travel = mTotalHeight - getVerticalSpace() - mSumDy;

现在再运行一下代码,可以看到,这时候的垂直滑动列表就完成了:


从列表中可以看出,现在到顶和到底可以继续滑动的问题就都解决了。下面贴出完整的CustomLayoutManager代码,供大家参考:

package com.example.myrecyclerview;

import android.util.Log;
import android.view.View;

import androidx.recyclerview.widget.RecyclerView;

public class CustomLayoutManager extends RecyclerView.LayoutManager {

    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(RecyclerView.LayoutParams.WRAP_CONTENT,
                RecyclerView.LayoutParams.WRAP_CONTENT);
    }

    private int mTotalHeight = 0;

    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        //定义竖直方向的偏移量
        int offsetY = 0;
        for (int i = 0; i < getItemCount(); i++) {
            View view = recycler.getViewForPosition(i);
            addView(view);
            measureChildWithMargins(view, 0, 0);
            int width = getDecoratedMeasuredWidth(view);
            int height = getDecoratedMeasuredHeight(view);
            layoutDecorated(view, 0, offsetY, width, offsetY + height);
            offsetY += height;
        }
        //如果所有子View的高度和没有填满RecyclerView的高度,
        // 则将高度设置为RecyclerView的高度
        mTotalHeight = Math.max(offsetY, getVerticalSpace());
    }

    private int getVerticalSpace() {
        return getHeight() - getPaddingBottom() - getPaddingTop();
    }


    @Override
    public boolean canScrollVertically() {
        return true;
    }

    private int mSumDy = 0;

    @Override
    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
        int travel = dy;
        //如果滑动到最顶部
        if (mSumDy + dy < 0) {
            travel = -mSumDy;
        } else if (mSumDy + dy > mTotalHeight - getVerticalSpace()) {
            travel = mTotalHeight - getVerticalSpace() - mSumDy;
        }
        mSumDy += travel;
        // 平移容器内的item
        offsetChildrenVertical(-travel);
        return dy;
    }
}

项目地址 https://github.com/githubwwj/MyRecyclerView

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,306评论 4 370
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,657评论 2 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,928评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,688评论 0 220
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,105评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,024评论 1 225
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,159评论 2 318
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,937评论 0 212
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,689评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,851评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,325评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,651评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,364评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,192评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,985评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,154评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,955评论 2 279