RecyclerView样式(一)

作者: 难得糊涂与君勉 | 来源:发表于2017-03-09 17:34 被阅读572次

    前言

    本文介绍了如何将RecyclerView展示成为ListView和GridView的风格
    其他参考
    RecyclerView加点击事件(二)
    RecyclerView的滑动监听(三)
    RecyclerView之横向展示(四)
    RecyclerView之瀑布流(五)
    RecyclerView优化

    ListView样式

    导入依赖

    compile 'com.android.support:recyclerview-v7:25.2.0'
    

    如何使用
    第一步:

        <android.support.v7.widget.RecyclerView
            android:id="@+id/myRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>
    //在这里,高度宽度也可以是固定宽高
    

    第二步:代码中配置

    myRecyclerView = (RecyclerView) findViewById(R.id.myRecyclerView); //找到RecyclerView
    //找到控件
    RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(MainActivity.this);
     //表示展示成为listview的形式
    myRecyclerView.setLayoutManager(layoutManager);
    //关键代码,告诉RecyclerView它自己要展示成为什么样子
    

    第三步:准备适配器

    public class LikeListViewAdapter extends RecyclerView.Adapter<LikeListViewAdapter.MyViewHodler> {
    
        private List<beans1> list ;  //表示数据源
        private Context context;  //表示上下文,用来创建视图
    
        public LikeListViewAdapter(Context context) {
                this.context = context;
               list = new ArrayList<>();
        }
    
        /**此方法是必要的方法,在这里面完成构建视图,相当于ListView中getView()方法中第一步
            参数是ViewGroup 与 viewType(用于RecyclerView的多套布局),返回值是MyViewHolder对象*/
        @Override
        public MyViewHodler onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(context).inflate(R.layout.item1,parent,false);
            MyViewHodler m  = new MyViewHodler(view);
            return m;//这三步之间是通过MyViewHolder对象进行传递的
        }
        /**在这里面完成配置数据源给相应的视图,相当于ListView中getView()方法中第三步
           */
        @Override
        public void onBindViewHolder(MyViewHodler holder, int position) {
                holder.name.setText(list.get(position).getName());
                holder.time.setText(list.get(position).getTime());
        }
      //告诉RecyclerView有多少条目
        @Override
        public int getItemCount() {
            return list.size();
        }
        //前面提到的MyViewHolder对象,相当于ListView中getView()第二步
        public class MyViewHodler extends RecyclerView.ViewHolder
           {
               TextView name,time;
                //必须要重写其构造方法,发现参数是View,可以认为是每一个条目的View(视图)
            public MyViewHodler(View itemView) {
                 super(itemView);
                name = (TextView) itemView.findViewById(R.id.textview_name);
                time = (TextView) itemView.findViewById(R.id.textview_time);
                //完成findViewById的过程
            }
        };
    
        //还需要给外界暴露,使其可以改变里面list的内容
        public void setList(List<beans1> list){
            this.list = list;
    //      notifyDataSetChanged(); //没有什么效果
            notifyItemRangeChanged(0,20); //也没有什么动画效果
        }
    }
    
    我认为这里面的数据使用过MyViewHolder对象来进行传递,将这三个步骤串联起来。
    

    第四步:将适配器交给RecyclerView

    liAdater = new LikeListViewAdapter(MainActivity.this);  //得到适配器对象
     myRecyclerView.setAdapter(liAdater);  //交给RecyclerView,此时是没有数据的
    

    第五步 :配置展示的数据

    for (int i = 0; i < 20; i++) {
                beans1 b = new beans1();
                b.setName("项"+i);
                b.setTime(""+i);
                list.add(b);
            }
            liAdater.setList(list); //通知更新界面
    

    如图所示:

    device-2017-03-09-102511_看图王.png

    解释说明

    (1)如图所示,里面是没有红线的,那个是在布局的时候画上的,不和ListView一样自带分割线,这样给了很大的自主性。
    
     (2)你在每一个条目的布局中展示成什么样子,那么他就会是什么样子,你给他多高,那么在屏幕上展示就有多高,比如我设置
        RecyclerView的高度是200dp,每一条目都是match_parent,那么刚好在RecyclerView可见区域展示,但只能是一条item.
        如果我设置每一item的高度是300dp,RecyclerView依旧是200dp那么高,但是里面内容会展示不全,因为其不会压缩item,
        所以呢,在RecyclerView可见视图上,只能展示一部分。那么可以模仿成为淘宝一样翻转的广告页面。
    
     (3)对于宽度,如果每一个item 宽度小于RecyclerView的宽度,那么都会展示出来见下图一:
           如果每一个item的宽度大于RecyclerView的宽度,那么就会展示不全,如图二:
    
     (4)其实,如果你的Item 设计成宽度和高度都是match_parent,表示,宽高和RecyclerView一样,那么只能展示一条item.
    
    ![Uploading 图一_380282.png . . .] 图一.png

    GridView样式

    代码
    别的做法和前面一样,唯一不同的是,告诉ReyclerView展示成为什么样子时候用下面这句(上面第二步)

     GridLayoutManager gridLayoutamnager = new GridLayoutManager(MainActivity.this,3);//将一行平分成为3份空间
     gridLayoutamnager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup(){
                @Override
                public int getSpanSize(int position) {
                    if (position%4==0){
                        return 2;
                        //表示%4==0的position,其可以独占该行按照比例划分空间的2个位置,但是如果要是,一行就划分了3份空间,但是要让其占有比这个
                        //会怎么样,如图,图三:
                        //会显示Item at position 0 requires 5 spans but GridLayoutManager has only 3 spans.
                        //就是如果你将行空间划分为三份,但是你这里return 4那么就会程序就会崩溃
                    }
                    return 1;//其他的表示就占一份空间就好
                }
            });
            myRecyclerView.setLayoutManager(gridLayoutamnager);
          //如果要是没有上述setSpanSizeLookup()方法,效果如图四:
    
    
    图四.png 图三.png

    说明

    (1)如果你每个条目设计的宽度设计成match_parent,高度也是,那么高度不会压缩,但是,宽度会有变,如前面图四
    (2)如果你的宽度是自己定义的,如果宽度大于屏幕的宽度,那么每一部分只会显示item的一部分,如果要是小于屏幕的宽度,
        那么就会出现相互重叠的效果如下图
    
    device-2017-03-09-172945_看图王.png

    相关文章

      网友评论

        本文标题:RecyclerView样式(一)

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