[Android]使用RecyclerView替代ListView（三）

以下内容为原创，转载请注明：

来自天天博客：http://www.cnblogs.com/tiantianbyconan/p/4268097.html 

 

这次来使用RecyclerView实现PinnedListView的效果，效果很常见：

开发的代码建立在上一篇（[Android]使用RecyclerView替代ListView（二）：http://www.cnblogs.com/tiantianbyconan/p/4242541.html）基础之上。

修改布局如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
            android:id="@+id/recycler_view_pinned_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:background="?attr/colorPrimary"
            />
    <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/recycler_view_pinned_srl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

        <com.wangjie.androidbucket.support.recyclerview.pinnedlayout.PinnedRecyclerViewLayout
                android:id="@+id/recycler_view_pinned_layout"
                android:layout_width="match_parent" android:layout_height="match_parent">
            <android.support.v7.widget.RecyclerView
                    android:id="@+id/recycler_view_pinned_rv"
                    android:scrollbars="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#bbccaa"
                    />
            <Button
                    android:id="@+id/recycler_view_pinned_add_btn"
                    android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:background="#abcabc"
                    android:text="add"
                    />

        </com.wangjie.androidbucket.support.recyclerview.pinnedlayout.PinnedRecyclerViewLayout>

    </android.support.v4.widget.SwipeRefreshLayout>

</LinearLayout>

可以看到RecyclerView是被一个PinnedRecyclerViewLayout（https://github.com/wangjiegulu/AndroidBucket/blob/master/src/com/wangjie/androidbucket/support/recyclerview/pinnedlayout/PinnedRecyclerViewLayout.java）包含在里面的。这个在项目AndroidBucket（https://github.com/wangjiegulu/AndroidBucket）中。先看看代码中怎么使用吧，具体实现待会说。

pinnedLayout.initRecyclerPinned(recyclerView, layoutManager, LayoutInflater.from(context).inflate(R.layout.recycler_view_item_float, null));
pinnedLayout.setOnRecyclerViewPinnedViewListener(this);

如上，使用方式很简单：

Line1：初始化绑定PinnedRecyclerViewLayout和RecyclerView，并设置需要被顶上去的pinnedView

Line2：设置OnRecyclerViewPinnedViewListener，作用是在顶部被顶上去替换掉的时候，会回调重新渲染数据，传入的OnRecyclerViewPinnedViewListener是this，显然，此Activity实现了这个接口，实现代码如下：

// 渲染pinnedView数据
    @Override
    public void onPinnedViewRender(PinnedRecyclerViewLayout pinnedRecyclerViewLayout, View pinnedView, int position) {
        switch (pinnedRecyclerViewLayout.getId()) {
            case R.id.recycler_view_pinned_layout:
                TextView nameTv = (TextView) pinnedView.findViewById(R.id.recycler_view_item_float_name_tv);
                nameTv.setText(personList.get(position).getName());
                TextView ageTv = (TextView) pinnedView.findViewById(R.id.recycler_view_item_float_age_tv);
                ageTv.setText(personList.get(position).getAge() + "岁");
                break;
        }
    }

然后，我们来看看PinnedRecyclerViewLayout是怎么实现的。

/**
 * Author: wangjie
 * Email: tiantian.china.2@gmail.com
 * Date: 2/2/15.
 */
public class PinnedRecyclerViewLayout extends RelativeLayout {

    private static final String TAG = PinnedRecyclerViewLayout.class.getSimpleName();

    public static interface OnRecyclerViewPinnedViewListener {
        void onPinnedViewRender(PinnedRecyclerViewLayout pinnedRecyclerViewLayout, View pinnedView, int position);
    }

    private OnRecyclerViewPinnedViewListener onRecyclerViewPinnedViewListener;

    public void setOnRecyclerViewPinnedViewListener(OnRecyclerViewPinnedViewListener onRecyclerViewPinnedViewListener) {
        this.onRecyclerViewPinnedViewListener = onRecyclerViewPinnedViewListener;
    }

    public PinnedRecyclerViewLayout(Context context) {
        super(context);
        init(context);
    }

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

    public PinnedRecyclerViewLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
    }

    private View pinnedView;
    private ABaseLinearLayoutManager layoutManager;

    public void initRecyclerPinned(RecyclerView recyclerView, ABaseLinearLayoutManager layoutManager, View pinnedView) {
        this.pinnedView = pinnedView;
        this.layoutManager = layoutManager;
        this.addView(this.pinnedView);
        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        this.pinnedView.setLayoutParams(lp);
        layoutManager.getRecyclerViewScrollManager().addScrollListener(recyclerView, new OnRecyclerViewScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                refreshPinnedView();
            }
        });
        pinnedView.setVisibility(GONE);
    }

    // 保存上次的position
    private int lastPosition = RecyclerView.NO_POSITION;

    public void refreshPinnedView() {
        if (null == pinnedView || null == layoutManager) {
            Logger.e(TAG, "Please init pinnedView and layoutManager with initRecyclerPinned method first!");
            return;
        }
        if (VISIBLE != pinnedView.getVisibility()) {
            pinnedView.setVisibility(VISIBLE);
        }
        int curPosition = layoutManager.findFirstVisibleItemPosition();
        if (RecyclerView.NO_POSITION == curPosition) {
            return;
        }
        View curItemView = layoutManager.findViewByPosition(curPosition);
        if (null == curItemView) {
            return;
        }
        // 如果当前的curPosition和上次的lastPosition不一样，则说明需要重新刷新数据，避免curPosition一样的情况下重复刷新相同数据
        if (curPosition != lastPosition) {
            if (null != onRecyclerViewPinnedViewListener) {
                onRecyclerViewPinnedViewListener.onPinnedViewRender(this, pinnedView, curPosition);
            }
            lastPosition = curPosition;
        }

        int displayTop;
        int itemHeight = curItemView.getHeight();
        int curTop = curItemView.getTop();
        int floatHeight = pinnedView.getHeight();
        if (curTop < floatHeight - itemHeight) {
            displayTop = itemHeight + curTop - floatHeight;
        } else {
            displayTop = 0;
        }
        RelativeLayout.LayoutParams lp = (LayoutParams) pinnedView.getLayoutParams();
        lp.topMargin = displayTop;
        pinnedView.setLayoutParams(lp);
        pinnedView.invalidate();
    }


}

 

这个PinnedRecyclerViewLayout 是继承RelativeLayout的，因为我们需要在里面添加一个被顶上去的pinnedView，需要覆盖在RecyclerView上面。

Line44：把传进来的pinnedView增加到PinnedRecyclerViewLayout 里面

Line47～56：在ABaseLinearLayoutManager中增加一个滚动的监听器，因为我们需要在滚动的时候动态的改变pinnedView的位置，这样才能模拟顶上去的效果。并滚动时调用refreshPinnedView来刷新pinnedView的位置。

Line57：因为在调用initRecyclerPinned方法时，RecyclerView可能还没有数据源，所以不需要显示这个pinnedView，等到真正滚动的时候再显示就可以了。

refreshPinnedView()方法的作用是在滚动的同时用来刷新pinnedView的位置和显示的数据：

Line71～78：通过layoutManager获取当前第一个显示的数据position，然后根据position获取当前第一个显示的View。

Line79~85：如果当前的curPosition和上次的lastPosition不一样，则说明需要重新刷新数据，避免curPosition一样的情况下重复刷新相同数据。

Line87～95：根据当前第一个显示的View，根据它的top、它的高度和pinnedView的高度计算出pinnedView需要往上移动的距离（画个几何图一目了然了）。

Line96～99：刷新pinnedView的位置

 

示例代码：

https://github.com/wangjiegulu/RecyclerViewSample

 

[Android]使用RecyclerView替代ListView（一）：

http://www.cnblogs.com/tiantianbyconan/p/4232560.html

 

[Android]使用RecyclerView替代ListView（二）： 

http://www.cnblogs.com/tiantianbyconan/p/4242541.html