Android《第六章:RecycleView》

作者: 泅渡者 | 来源:发表于2017-09-30 10:22 被阅读82次

    在这一章我会主要介绍一些比较新的组件的使用,这里相信大家好多人都已经在使用RecyclerView了吧?那我这里会简单的应用下RecyclerView。
    RecyclerView是support.v7包中的控件,可以说是ListView和GridView的增强升级版。

    RecyclerView的基本用法

    RecyclerView 主要是用来显示大量数据集合时防止视图多次渲染。它提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecoration , ItemAnimator实现令人瞠目的效果。
    我们来创建一个示例项目RecycleViewTest:
    首先我们需要获得Recycle View的支持:

    image.png

    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.bsoft.recycleviewtest.MainActivity">
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/ryc_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
          />
    </LinearLayout>
    

    item_home.xml

    <?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="wrap_content">
        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="match_parent"
            android:layout_height="49dp"
            android:text=""
            android:gravity="center"/>
    </LinearLayout>
    

    我们为了演示就不再去写特别复杂的界面了,接下来我们看看MainActivity.class。

    
    public class MainActivity extends AppCompatActivity {
    
        private RecyclerView ryc_view;
        private TestAdapter adapter;
        private List<String> mDatas;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            initData();
            adapter = new TestAdapter(this, mDatas);
            ryc_view = (RecyclerView) findViewById(R.id.ryc_view);
            ryc_view.setLayoutManager(new LinearLayoutManager(this));
            ryc_view.setAdapter(adapter);
        }
    
        private void initData() {
    
            mDatas = new ArrayList<String>();
            for (int i = 'A'; i < 'z'; i++) {
                mDatas.add("" + (char) i);
            }
    
        }
    }
    

    TestAdapter.class

    /**
     * Created by 泅渡者
     * Created on 2017/9/30.
     */
    
    class TestAdapter extends RecyclerView.Adapter<TestAdapter.ViewHolder> {
        private Context mcontext;
        private List<String> mdata;
    
        public TestAdapter(Context mcontext, List<String> mdata) {
            this.mcontext = mcontext;
            this.mdata = mdata;
        }
    
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    
    
            ViewHolder holder = new ViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.item_home, parent,
                    false));
            return holder;
        }
    
        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            holder.tv_desc.setText(mdata.get(position));
        }
    
        @Override
        public int getItemCount() {
            return mdata.size();
        }
    
        public class ViewHolder extends RecyclerView.ViewHolder {
    
            TextView tv_desc;
    
            public ViewHolder(View itemView) {
                super(itemView);
                tv_desc = (TextView) itemView.findViewById(R.id.tv_desc);
            }
        }
    }
    

    到这里我们的第一个RecyclerView例子就已经可以运行了。

    image.png

    是不是很丑,对了我们发现RecycleView怎么没有分割线呢。但是RecycleView组件是没有Divider来设置的,这时大部分人想到的是我会在Item布局底部加一条线,同样也能解决问题。
    但其实RecycleView 是有提供使用的mRecyclerView.addItemDecoration() ;
    代码如下:

    /**
     * This class is from the v7 samples of the Android SDK. It's not by me!
     *
     * See the license above for details.
     */
    public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    
        private static final int[] ATTRS = new int[]{
                android.R.attr.listDivider
        };
    
        public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
    
        public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
    
        private Drawable mDivider;
    
        private int mOrientation;
    
        public DividerItemDecoration(Context context, int orientation) {
            final TypedArray a = context.obtainStyledAttributes(ATTRS);
            mDivider = a.getDrawable(0);
            a.recycle();
            setOrientation(orientation);
        }
    
        public void setOrientation(int orientation) {
            if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
                throw new IllegalArgumentException("invalid orientation");
            }
            mOrientation = orientation;
        }
    
        @Override
        public void onDraw(Canvas c, RecyclerView parent) {
    
            if (mOrientation == VERTICAL_LIST) {
                drawVertical(c, parent);
            } else {
                drawHorizontal(c, parent);
            }
    
        }
    
    
        public void drawVertical(Canvas c, RecyclerView parent) {
            final int left = parent.getPaddingLeft();
            final int right = parent.getWidth() - parent.getPaddingRight();
    
            final int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++) {
                final View child = parent.getChildAt(i);
                android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(parent.getContext());
                final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                        .getLayoutParams();
                final int top = child.getBottom() + params.bottomMargin;
                final int bottom = top + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    
        public void drawHorizontal(Canvas c, RecyclerView parent) {
            final int top = parent.getPaddingTop();
            final int bottom = parent.getHeight() - parent.getPaddingBottom();
    
            final int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++) {
                final View child = parent.getChildAt(i);
                final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                        .getLayoutParams();
                final int left = child.getRight() + params.rightMargin;
                final int right = left + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    
        @Override
        public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
            if (mOrientation == VERTICAL_LIST) {
                outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
            } else {
                outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
            }
        }
    }
    
    

    运行结果如下:

    image.png

    可以看到我们要完成一个ListView效果事如此的麻烦那么为什么官方还在大力推荐呢?接着往下看!

    LayoutManager

    上面实现了类似ListView样子的Demo,通过使用其默认的LinearLayoutManager。

    RecyclerView.LayoutManager吧,这是一个抽象类,好在系统提供了3个实现类:

    LinearLayoutManager 现行管理器,支持横向、纵向。
    GridLayoutManager 网格布局管理器
    StaggeredGridLayoutManager 瀑布就式布局管理器
    上面我们已经初步体验了下LinearLayoutManager,接下来看GridLayoutManager。

    GridLayoutManager
    我们尝试去实现类似GridView,秒秒钟的事情:

    //mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
    mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));

    只需要修改LayoutManager即可,还是很nice的。
    当然了,改为GridLayoutManager以后,对于分割线,前面的DividerItemDecoration就不适用了,因为每个Item一行,这样是没问题的。而GridLayoutManager时,一行有多个childItem,这样就多次绘制了,并且GridLayoutManager时,Item如果为最后一列(则右边无间隔线)或者为最后一行(底部无分割线)。
    针对上述,我们编写了DividerGridItemDecoration。

    public class DividerGridItemDecoration extends RecyclerView.ItemDecoration
    {
    
        private static final int[] ATTRS = new int[] { android.R.attr.listDivider };
        private Drawable mDivider;
    
        public DividerGridItemDecoration(Context context)
        {
            final TypedArray a = context.obtainStyledAttributes(ATTRS);
            mDivider = a.getDrawable(0);
            a.recycle();
        }
    
        @Override
        public void onDraw(Canvas c, RecyclerView parent, State state)
        {
    
            drawHorizontal(c, parent);
            drawVertical(c, parent);
    
        }
    
        private int getSpanCount(RecyclerView parent)
        {
            // 列数
            int spanCount = -1;
            LayoutManager layoutManager = parent.getLayoutManager();
            if (layoutManager instanceof GridLayoutManager)
            {
    
                spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
            } else if (layoutManager instanceof StaggeredGridLayoutManager)
            {
                spanCount = ((StaggeredGridLayoutManager) layoutManager)
                        .getSpanCount();
            }
            return spanCount;
        }
    
        public void drawHorizontal(Canvas c, RecyclerView parent)
        {
            int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++)
            {
                final View child = parent.getChildAt(i);
                final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                        .getLayoutParams();
                final int left = child.getLeft() - params.leftMargin;
                final int right = child.getRight() + params.rightMargin
                        + mDivider.getIntrinsicWidth();
                final int top = child.getBottom() + params.bottomMargin;
                final int bottom = top + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    
        public void drawVertical(Canvas c, RecyclerView parent)
        {
            final int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++)
            {
                final View child = parent.getChildAt(i);
    
                final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                        .getLayoutParams();
                final int top = child.getTop() - params.topMargin;
                final int bottom = child.getBottom() + params.bottomMargin;
                final int left = child.getRight() + params.rightMargin;
                final int right = left + mDivider.getIntrinsicWidth();
    
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    
        private boolean isLastColum(RecyclerView parent, int pos, int spanCount,
                int childCount)
        {
            LayoutManager layoutManager = parent.getLayoutManager();
            if (layoutManager instanceof GridLayoutManager)
            {
                if ((pos + 1) % spanCount == 0)// 如果是最后一列,则不需要绘制右边
                {
                    return true;
                }
            } else if (layoutManager instanceof StaggeredGridLayoutManager)
            {
                int orientation = ((StaggeredGridLayoutManager) layoutManager)
                        .getOrientation();
                if (orientation == StaggeredGridLayoutManager.VERTICAL)
                {
                    if ((pos + 1) % spanCount == 0)// 如果是最后一列,则不需要绘制右边
                    {
                        return true;
                    }
                } else
                {
                    childCount = childCount - childCount % spanCount;
                    if (pos >= childCount)// 如果是最后一列,则不需要绘制右边
                        return true;
                }
            }
            return false;
        }
    
        private boolean isLastRaw(RecyclerView parent, int pos, int spanCount,
                int childCount)
        {
            LayoutManager layoutManager = parent.getLayoutManager();
            if (layoutManager instanceof GridLayoutManager)
            {
                childCount = childCount - childCount % spanCount;
                if (pos >= childCount)// 如果是最后一行,则不需要绘制底部
                    return true;
            } else if (layoutManager instanceof StaggeredGridLayoutManager)
            {
                int orientation = ((StaggeredGridLayoutManager) layoutManager)
                        .getOrientation();
                // StaggeredGridLayoutManager 且纵向滚动
                if (orientation == StaggeredGridLayoutManager.VERTICAL)
                {
                    childCount = childCount - childCount % spanCount;
                    // 如果是最后一行,则不需要绘制底部
                    if (pos >= childCount)
                        return true;
                } else
                // StaggeredGridLayoutManager 且横向滚动
                {
                    // 如果是最后一行,则不需要绘制底部
                    if ((pos + 1) % spanCount == 0)
                    {
                        return true;
                    }
                }
            }
            return false;
        }
    
        @Override
        public void getItemOffsets(Rect outRect, int itemPosition,
                RecyclerView parent)
        {
            int spanCount = getSpanCount(parent);
            int childCount = parent.getAdapter().getItemCount();
            if (isLastRaw(parent, itemPosition, spanCount, childCount))// 如果是最后一行,则不需要绘制底部
            {
                outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
            } else if (isLastColum(parent, itemPosition, spanCount, childCount))// 如果是最后一列,则不需要绘制右边
            {
                outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
            } else
            {
                outRect.set(0, 0, mDivider.getIntrinsicWidth(),
                        mDivider.getIntrinsicHeight());
            }
        }
    }
    

    那我们看看运行结果:

    image.png

    Click and LongClick

    RecyclerView虽然好,但是并没有提供ClickListener和LongClickListener。 不过我们也可以自己去添加,只是会多了些代码而已。
    示例代码如下

    class TestAdapter extends RecyclerView.Adapter<TestAdapter.ViewHolder> {
        private Context mcontext;
        private List<String> mdata;
    
        public interface OnItemClickLitener
        {
            void onItemClick(View view, int position);
            void onItemLongClick(View view , int position);
        }
    
        private OnItemClickLitener mOnItemClickLitener;
    
        public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
        {
            this.mOnItemClickLitener = mOnItemClickLitener;
        }
    
        public TestAdapter(Context mcontext, List<String> mdata) {
            this.mcontext = mcontext;
            this.mdata = mdata;
        }
    
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            ViewHolder holder = new ViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.item_home, parent,
                    false));
            return holder;
        }
    
        @Override
        public void onBindViewHolder(final ViewHolder holder, int position) {
            holder.tv_desc.setText(mdata.get(position));
            if (mOnItemClickLitener != null)
            {
                holder.itemView.setOnClickListener(new View.OnClickListener()
                {
                    @Override
                    public void onClick(View v)
                    {
                        int pos = holder.getLayoutPosition();
                        mOnItemClickLitener.onItemClick(holder.itemView, pos);
                    }
                });
    
                holder.itemView.setOnLongClickListener(new View.OnLongClickListener()
                {
                    @Override
                    public boolean onLongClick(View v)
                    {
                        int pos = holder.getLayoutPosition();
                        mOnItemClickLitener.onItemLongClick(holder.itemView, pos);
                        return false;
                    }
                });
            }
        }
    
        @Override
        public int getItemCount() {
            return mdata.size();
        }
    
        public class ViewHolder extends RecyclerView.ViewHolder {
    
            TextView tv_desc;
    
            public ViewHolder(View itemView) {
                super(itemView);
                tv_desc = (TextView) itemView.findViewById(R.id.tv_desc);
            }
        }
    }
    
    
      adapter.setOnItemClickLitener(new TestAdapter.OnItemClickLitener() {
    
                @Override
                public void onItemClick(View view, int position) {
                    Toast.makeText(MainActivity.this, position + " click",
                            Toast.LENGTH_SHORT).show();
                }
    
                @Override
                public void onItemLongClick(View view, int position) {
                    Toast.makeText(MainActivity.this, position + " long click",
                            Toast.LENGTH_SHORT).show();
                }
            });
    

    自此RecyclerView的基本用法就做了大概的介绍,现在如果要使用我们大可以找一些封装好的库,使用也方便。

    相关文章

      网友评论

      • ACTT:tools:layout_editor_absoluteY 有什么用啊 模拟器测试的时候根本没有效果啊
        ACTT: @泅渡者 哈哈 谢谢楼主了!我刚开始自学,每次设置布局match_parent 就跳出来这个 不能全屏而且模拟的时候没有实际效果 超级烦 现在知道怎么去掉了
        泅渡者:已经修改。。。
        泅渡者:@ACTT 抱歉这个是 我大意了,这个是当外根部局为android.support.constraint.ConstraintLayout时起到约束作用的,由于我的版本使用的SDK版本太高,默认创建项目时会使用ConstraintLayou,个人不喜欢用拖拽,所以没删干净。。。

      本文标题:Android《第六章:RecycleView》

      本文链接:https://www.haomeiwen.com/subject/vgjiextx.html