使用RecyclerView控件实现瀑布流

作者: SpikeKing | 来源:发表于2015-10-26 10:34 被阅读16010次

    欢迎Follow我的GitHub, 关注我的简书. 其余参考Android目录.

    RecyclerView是一种列表容器, 发布很久了, 才想起来写点什么.

    RecyclerView相比于ListView, 在回收重用时更具有灵活性, 也就是低耦合, 并且提供了扩展. 加载多个视图时, 应该多用RecyclerView代替ListView.

    那么我们来看看这东西应该怎么用? 比如生成一个瀑布流的视图.


    瀑布流

    首先我们从一个HelloWorld写起, 看看如何构建一个RecyclerView.

    1. 依赖库

    Gradle配置, 添加Recycler库
    compile 'com.android.support:recyclerview-v7:+'

    2. 资源文件

    资源文件

        <android.support.v7.widget.RecyclerView
            android:id="@+id/test_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    

    3. 代码

    LayoutManager: 管理RecyclerView的结构.
    Adapter: 处理每个Item的显示.
    ItemDecoration: 添加每个Item的装饰.
    ItemAnimator: 负责添加\移除\重排序时的动画效果.

    LayoutManager\Adapter是必须, ItemDecoration\ItemAnimator是可选.

        /**
         * 初始化RecyclerView
         *
         * @param recyclerView 主控件
         */
        private void initRecyclerView(RecyclerView recyclerView) {
            recyclerView.setHasFixedSize(true); // 设置固定大小
            initRecyclerLayoutManager(recyclerView); // 初始化布局
            initRecyclerAdapter(recyclerView); // 初始化适配器
            initItemDecoration(recyclerView); // 初始化装饰
            initItemAnimator(recyclerView); // 初始化动画效果
        }
    

    4. LayoutManager

    管理RecyclerView的布局结构.

        private void initRecyclerLayoutManager(RecyclerView recyclerView) {
            // 错列网格布局
            recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
                    StaggeredGridLayoutManager.VERTICAL));
        }
    

    提供了多种LayoutManager, 瀑布流使用错列网格布局.

    5. Adapter

    适配器, 处理RecyclerView的Item事务.

        private void initRecyclerAdapter(RecyclerView recyclerView) {
            mAdapter = new MyAdapter(getData());
            recyclerView.setAdapter(mAdapter);
        }
    

    对于Adapter, 我们需要展开来说, 先看看类.

    public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {
    
        private List<DataModel> mDataModels;
        private List<Integer> mHeights;
    
        MyAdapter(List<DataModel> dataModels) {
            if (dataModels == null) {
                throw new IllegalArgumentException("DataModel must not be null");
            }
            mDataModels = dataModels;
            mHeights = new ArrayList<>();
        }
    
        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.item_recycler_view, parent, false);
            return new MyViewHolder(itemView);
        }
    
        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            DataModel dataModel = mDataModels.get(position);
    
            // 随机高度, 模拟瀑布效果.
            if (mHeights.size() <= position) {
                mHeights.add((int) (100 + Math.random() * 300));
            }
    
            ViewGroup.LayoutParams lp = holder.getTvLabel().getLayoutParams();
            lp.height = mHeights.get(position);
    
            holder.getTvLabel().setLayoutParams(lp);
    
            holder.getTvLabel().setText(dataModel.getLabel());
            holder.getTvDateTime().setText(new SimpleDateFormat("yyyy-MM-dd", Locale.ENGLISH)
                    .format(dataModel.getDateTime()));
        }
    
        @Override
        public int getItemCount() {
            return mDataModels.size();
        }
    
        public void addData(int position) {
            DataModel model = new DataModel();
            model.setDateTime(getBeforeDay(new Date(), position));
            model.setLabel("No. " + (int) (new Random().nextDouble() * 20.0f));
    
            mDataModels.add(position, model);
            notifyItemInserted(position);
        }
    
        public void removeData(int position) {
            mDataModels.remove(position);
            notifyItemRemoved(position);
        }
    
        /**
         * 获取日期的前一天
         *
         * @param date 日期
         * @param i    偏离
         * @return 新的日期
         */
        private static Date getBeforeDay(Date date, int i) {
            Calendar calendar = Calendar.getInstance();
            calendar.setTime(date);
            calendar.add(Calendar.DAY_OF_YEAR, i * (-1));
            return calendar.getTime();
        }
    }
    

    onCreateViewHolder创建ViewHolder.
    onBindViewHolder绑定每一项数据.
    getItemCount返回列表长度.

    RecyclerView强制使用ViewHolder.

    public class MyViewHolder extends RecyclerView.ViewHolder {
    
        private TextView mTvLabel; // 标签
        private TextView mTvDateTime; // 日期
    
        public MyViewHolder(View itemView) {
            super(itemView);
            mTvLabel = (TextView) itemView.findViewById(R.id.item_text);
            mTvDateTime = (TextView) itemView.findViewById(R.id.item_date);
        }
    
        public TextView getTvLabel() {
            return mTvLabel;
        }
    
        public TextView getTvDateTime() {
            return mTvDateTime;
        }
    
    }
    

    在onCreateViewHolder方法, 创建类; 在onBindViewHolder方法, 绑定数据.

    DataModel

    public class DataModel {
    
        private String mLabel;
        private Date mDateTime;
    
        public String getLabel() {
            return mLabel;
        }
    
        public void setLabel(String label) {
            mLabel = label;
        }
    
        public Date getDateTime() {
            return mDateTime;
        }
    
        public void setDateTime(Date dateTime) {
            mDateTime = dateTime;
        }
    }
    

    6. ItemDecoration

    项的装饰, 比如ListView中的分割线, 在本例中, 左右两条粉线.

        private void initItemDecoration(RecyclerView recyclerView) {
            recyclerView.addItemDecoration(new MyItemDecoration(this));
        }
    

    ItemDecoration, 注意parent和child的使用方式.

    public class MyItemDecoration extends RecyclerView.ItemDecoration {
    
        private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
        private Drawable mDivider;
    
        public MyItemDecoration(Context context) {
            final TypedArray array = context.obtainStyledAttributes(ATTRS);
            mDivider = array.getDrawable(0);
            array.recycle();
        }
    
        @Override
        public void onDraw(Canvas c, RecyclerView parent, State state) {
            drawHorizontal(c, parent);
            drawVertical(c, parent);
        }
    
        // 水平线
        public void drawHorizontal(Canvas c, RecyclerView parent) {
    
            final int childCount = parent.getChildCount();
    
            // 在每一个子控件的底部画线
            for (int i = 0; i < childCount; i++) {
                final View child = parent.getChildAt(i);
    
                final int left = child.getLeft() + child.getPaddingLeft();
                final int right = child.getWidth() + child.getLeft() - child.getPaddingRight();
                final int top = child.getBottom() - mDivider.getIntrinsicHeight() - child.getPaddingBottom();
                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);
                int right = child.getRight() - child.getPaddingRight();
                int left = right - mDivider.getIntrinsicWidth();
                final int top = child.getTop() + child.getPaddingTop();
                final int bottom = child.getTop() + child.getHeight() - child.getPaddingBottom();
    
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    
        // Item之间的留白
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());
        }
    }
    

    本例重写了listDivider

        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            ...
            <item name="android:listDivider">@drawable/divider_bg</item>
        </style>
    
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle">
        <solid android:color="#ff00ff"/>
        <size android:height="4dp"/>
        <size android:width="4dp"/>
    </shape>
    

    7. ItemAnimator

    动画效果比较复杂, 使用默认动画. 如要定制的话, 继承DefaultItemAnimator; 如设置null, 则不显示任何动画.

        private void initItemAnimator(RecyclerView recyclerView) {
            recyclerView.setItemAnimator(new DefaultItemAnimator()); // 默认动画
        }
    

    8. 最终Activity

    public class MainActivity extends AppCompatActivity {
    
        private MyAdapter mAdapter;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
    
            FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                            .setAction("Action", null).show();
                }
            });
    
            // 初始化RecyclerView
            initRecyclerView((RecyclerView) findViewById(R.id.test_recycler_view));
        }
    
        /**
         * 初始化RecyclerView
         *
         * @param recyclerView 主控件
         */
        private void initRecyclerView(RecyclerView recyclerView) {
            recyclerView.setHasFixedSize(true); // 设置固定大小
            initRecyclerLayoutManager(recyclerView); // 初始化LayoutManager
            initRecyclerAdapter(recyclerView); // 初始化Adapter
            initItemDecoration(recyclerView); // 初始化边界装饰
            initItemAnimator(recyclerView); // 初始化动画效果
        }
    
        /**
         * 初始化RecyclerView的LayoutManager
         *
         * @param recyclerView 主控件
         */
        private void initRecyclerLayoutManager(RecyclerView recyclerView) {
            // 错列网格布局
            recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
                    StaggeredGridLayoutManager.VERTICAL));
        }
    
        /**
         * 初始化RecyclerView的Adapter
         *
         * @param recyclerView 主控件
         */
        private void initRecyclerAdapter(RecyclerView recyclerView) {
            mAdapter = new MyAdapter(getData());
            recyclerView.setAdapter(mAdapter);
        }
    
        /**
         * 初始化RecyclerView的(ItemDecoration)项目装饰
         *
         * @param recyclerView 主控件
         */
        private void initItemDecoration(RecyclerView recyclerView) {
            recyclerView.addItemDecoration(new MyItemDecoration(this));
        }
    
        /**
         * 初始化RecyclerView的(ItemAnimator)项目动画
         *
         * @param recyclerView 主控件
         */
        private void initItemAnimator(RecyclerView recyclerView) {
            recyclerView.setItemAnimator(new DefaultItemAnimator()); // 默认动画
        }
    
        /**
         * 模拟的数据
         *
         * @return 数据
         */
        private ArrayList<DataModel> getData() {
            int count = 57;
            ArrayList<DataModel> data = new ArrayList<>();
            for (int i = 0; i < count; i++) {
                DataModel model = new DataModel();
    
                model.setDateTime(getBeforeDay(new Date(), i));
                model.setLabel("No. " + i);
    
                data.add(model);
            }
    
            return data;
        }
    
        /**
         * 获取日期的前一天
         *
         * @param date 日期
         * @param i    偏离
         * @return 新的日期
         */
        private static Date getBeforeDay(Date date, int i) {
            Calendar calendar = Calendar.getInstance();
            calendar.setTime(date);
            calendar.add(Calendar.DAY_OF_YEAR, i * (-1));
            return calendar.getTime();
        }
    
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            // Handle action bar item clicks here. The action bar will
            // automatically handle clicks on the Home/Up button, so long
            // as you specify a parent activity in AndroidManifest.xml.
            int id = item.getItemId();
    
            switch (item.getItemId()) {
                case R.id.id_action_add:
                    mAdapter.addData(1);
                    break;
                case R.id.id_action_delete:
                    mAdapter.removeData(1);
                    break;
            }
    
            //noinspection SimplifiableIfStatement
            if (id == R.id.action_settings) {
                return true;
    
            }
    
            return super.onOptionsItemSelected(item);
        }
    }
    

    为了测试动画, Menu额外添加两个按钮.

    OK, 基本要点就是这些了.

    相关文章

      网友评论

      本文标题:使用RecyclerView控件实现瀑布流

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