Android学习随笔(8)------RecyclerView(2)

偏执的太偏执、 2022-06-06 06:42 316阅读 0赞

学习流程来自《第一行代码》(第二版)
在之前的RecyclerView(1)开头给出了对RecyclerView设置的几个模块。在书中只介绍了部分，这边来扩展一下。

GridLayoutManager

RecyclerView能实现的布局有很多，布局都由LayoutManager来控制，可拓展性十分高。

  1. GridLayoutManager layoutManager = new GridLayoutManager(this, 2);

把RecyclerView的LayoutManager设置成GridLayout并传入上下文，和列数这两个参数即可。
Exler
我们仍就靠随机生成TextView的值，但是每个item的排列是网格类型的。

增加分隔线

可以明显的看出之前我们的RecyclerView是没有分隔线的。
addItemDecoration(ItemDecoration decoration) :方法就是用来设置分隔线的。
而ItemDecoration是一个抽象类，所以需要实现

  1. void getItemOffsets ()
  2. void onDraw ()
  3. void onDrawOver ()
    这三个方法。可以看出分隔线是要自己画上去的。添加Divider,主要是找到添加Divider的位置， 而Divider是在drawable文件中写好了的。 利用onDraw和onDrawOver都差不多，所以创建自己的Decoration类继承RecyclerView.ItemDecoration的时候，只要重写getItemOffsets()，还有onDraw()和onDrawOver两者其中之一就可以了.

getItemOffsets()方法，从字面意思就是Item要偏移， 由于我们在Item和Item之间加入了分隔线，线其实本质就是一个长方形，也是用户自定义的，既然线也有长宽高，就画横线来说，上面的Item加入了分隔线，那下面的Item就要往下平移，平移的量就是分隔线的高度。

先来比较两张图
Exler
Exler
可以看到第二张图片中的每个item分隔明显(ChildView，也就是平时用到的ListView，RecyclerView中的getChildAt(int position)这个返回的,这一部分指的是图二中红色的部分，白色的部分属于ChildView的布局。)

一个View对应一个布局

Exler

可以明显的看出我们要画的就是黑色的这一条线。这条线是加在两个布局之间的。

所以我们可以知道我们画分隔线的位置，是在每一个Item的布局之间。

确定画线的具体的坐标位置

分隔线的left, top, right, Bottom.
在Adapter中，我们很容易通过parent(这个parent它其实就是我们能看到的部分)获取每一个childView：

  1. left：parent.getPaddingLeft()
  2. right: parent. getWidth()-parent.getPaddingRight();
  3. top : 就是红线的上面：我们通过ChildView.getBottom()来得到这个Item的底部的高度，也就是蓝线位置，蓝线和红线之间间距：就是这个Item布局文件的：layout_marginBottom， 然后top的位置就是两者之和。
  4. bttom: 就是top加上分隔线的高度：top+线高

Exler
可以看到，在这张图片中两个item之间有了一条系统默认(感觉是布局空出来的背景色)的分割线。
用自定义的样式来填充分隔线。在drawable文件夹下添加一个divider.xml文件。

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  2.     <solid android:color="#00ff00" />
  3.     <size android:height="1dp" />
  4. </shape>

定义一条绿线。
在values文件下的styles.xml文件中style标签之间添加

  1. <item name="android:listDivider">@drawable/divider</item>

把自定义的样式引用进来。

MainActivity.java :

  1. List<String> strings = null;
  3.     @Override
  4.     protected void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.activity_main);
  8.         initStr();
  10.         RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
  11.         LinearLayoutManager manager = new LinearLayoutManager(this);
  12.         manager.setOrientation(LinearLayoutManager.VERTICAL);
  14.         ItemAdapter adapter = new ItemAdapter(this,strings);
  16.         recyclerView.setLayoutManager(manager);
  17.         recyclerView.setAdapter(adapter);
  20.         recyclerView.addItemDecoration(new MyDecoration(this, MyDecoration.VERTICAL_LIST));
  21.             }
  23.     public void initStr() {
  24.         strings = new ArrayList<String>();
  25.         for (int i = 0; i < 50; i++)
  26.             strings.add("Item" + i);
  27.     }

大部分代码与(1)类似 :

  1. 初始化填入的数据
  2. 定义一个LayoutManager，把垂直排列传进去
  3. 定义item的适配器
  4. 定义分隔线(告知是垂直的布局)

ItemAdapter.java

  1. public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ViewHolder> { 
  3.     private List<String> mList;
  4.     private Context mContext;
  6.     public ItemAdapter(Context context, List<String> list) {
  7.         this.mContext = context;
  8.         this.mList = list;
  9.     }
  11.     @Override
  12.     public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  13.         View view = LayoutInflater.from(mContext).inflate(R.layout.item_layout, parent, false);
  14.         return new ViewHolder(view);
  15.     }
  17.     @Override
  18.     public void onBindViewHolder(ViewHolder holder, int position) {
  19.         String str = mList.get(position);
  20.         holder.textView.setText(str);
  21.     }
  23.     @Override
  24.     public int getItemCount() {
  25.         return mList.size();
  26.     }
  28.     class ViewHolder extends RecyclerView.ViewHolder { 
  30.         TextView textView;
  32.         public ViewHolder(View view) {
  33.             super(view);
  34.             textView = (TextView) view.findViewById(R.id.list_item);
  35.         }
  36.     }
  37. }

子项适配器的代码。

Exler
可以看到item之间有一条淡淡的绿线。
效果不是特别好，可以选择重新绘制一下divider.xml文件

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
  3.     <gradient android:centerColor="#ff00ff00" android:endColor="#ff0000ff" android:startColor="#ffff0000" android:type="linear" />
  4.     <size android:height="4dp"/>
  5. </shape>

Exler
这个效果就是比较好的了。

  1. manager.setOrientation(LinearLayoutManager.HORIZONTAL);
  4.  recyclerView.addItemDecoration(new MyDecoration(this, MyDecoration.HORIZONTAL_LIST));

更改一下这两行代码
并且可以把item_layout.xml的layout_width属性改成固定值，如 :200dp
Exler
item的排列为水平时的竖直分隔线效果图。

  1. public class MyDecoration extends RecyclerView.ItemDecoration { 
  3.     private Context mContext;
  4.     private Drawable mDivider;
  5.     private int mOrientation;
  6.     public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
  7.     public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
  9.     public static final int[] ATRRS  = new int[]{ android.R.attr.listDivider};     //通过获取系统属性中的listDivider来添加，在AndroidManifest.xml中的AppTheme中设置
  11.     public MyDecoration(Context context, int orientation) {
  12.         this.mContext = context;
  13.         final TypedArray ta = context.obtainStyledAttributes(ATRRS);    // TypedArray 用于存放 android 自定义控件 把属性集 和我们自己定义的属性集合建立映射关系
  14.         this.mDivider = ta.getDrawable(0);
  15.         ta.recycle();
  16.         setOrientation(orientation);
  17.     }
  19.     public void setOrientation(int orientation) {    // 设置屏幕方向
  20.         if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
  21.             throw new IllegalArgumentException("invalid orientation");    // 此异常表明向方法传递了一个不合法或不正确的参数
  22.         }
  23.         mOrientation = orientation;
  24.     }
  26.     @Override
  27.     public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
  28.         if (mOrientation == HORIZONTAL_LIST) {    // 水平 画竖线
  29.             drawVerricalLine(c, parent, state);
  30.         } else {    // 子项布局垂直排列时花在两个布局之间(上布局的底部)
  31.             drawHorizontalLine(c, parent, state);
  32.         }
  33.     }
  35.     public void drawHorizontalLine(Canvas c, RecyclerView parent, RecyclerView.State state) {    // 画横线 Android.graphics
  37.         int left = parent.getPaddingLeft();    // 得到布局的左边距
  38.         int right = parent.getWidth() - parent.getPaddingRight();    // 布局右边的终点 parent的宽度-(减去)布局的右边距(此程序得到的是一条占满屏幕宽度的线)
  39.         int childCount = parent.getChildCount();
  40.         for (int i = 0; i < childCount; i++) {
  41.             View child = parent.getChildAt(i);
  43.             RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();    // 获取child的布局信息 params 参数
  44.             int top = child.getBottom() + params.bottomMargin;    // item View(Textview)的底部+布局中的(页下空白)
  45.             int bottom = top +mDivider.getIntrinsicHeight();    // 高度 + Drawable的固有高度 dp为单位
  46.             mDivider.setBounds(left, top, right, bottom);
  47.             mDivider.draw(c);
  48.         }
  49.     }
  51.     public void drawVerricalLine(Canvas c, RecyclerView parent, RecyclerView.State state) {    //画竖线
  52.         int top = parent.getPaddingTop();    // 获取parent的上边距
  53.         int bottom = parent.getHeight() - parent.getPaddingBottom();    //parent的高度-parent的下边距
  54.         int childCount = parent.getChildCount();
  55.         for (int i = 0; i < childCount; i++) {
  56.             View child = parent.getChildAt(i);
  58.             RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)child.getLayoutParams();    // 获得child的布局信息
  59.             int left = child.getRight() + params.rightMargin ;    // 从第一个item(item0)的尾部开始加入分隔线 View的最右边 + 布局的页右空白
  60.             int right = left + mDivider.getIntrinsicHeight() ;    // 两个布局之间的空隙 (此处应该与getItemOffsets()方法中的偏移数值相呼应)
  61.             mDivider.setBounds(left, top, right, bottom);
  62.             mDivider.draw(c);
  63.         }
  64.     }
  66.     @Override
  67.     public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
  68.         if (mOrientation == HORIZONTAL_LIST) {    // 画竖线 往右偏移
  69.             Log.d("admin",""+mDivider.getIntrinsicWidth()+" "+mDivider.getIntrinsicHeight());    // 为何输出Width为负数
  70.             outRect.set(0, 0,mDivider.getIntrinsicHeight(), 0);    // mDivider.getIntrinsicHeight()
  71.         } else {     画横线，往下偏移一个分割线的高度
  72.             outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
  73.         }
  74.     }
  75. }

这就是添加分隔线的代码，具体的代码解释含在注释里了，大致上是

  1. 定义一个drawable，
  2. 判断屏幕方向，调用相应的画线方法
  3. 设定item之间的偏移

item的增加删除

有时候item不是单一不变的，有时候会有添加和删除的需求。
先在布局中添加两个button

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
  3.     <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" >
  4.     <Button android:id="@+id/add_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Add" android:layout_margin="15dp"/>
  5.     <Button android:id="@+id/delete_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Delete" android:layout_margin="15dp"/>
  6.     </LinearLayout>
  7.     <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="wrap_content">
  8.     </android.support.v7.widget.RecyclerView>
  9. </LinearLayout>

在适配器代码中添加增加和移除功能 :

  1. public void addData(int position) {    // 添加item
  2.         String str = "新增item";
  3.         mList.add(position, str);
  4.         notifyItemInserted(position);
  5.         notifyDataSetChanged();
  6.         notifyItemRangeChanged(position, mList.size());
  7.     }
  9.     public void removeData(int position) {    // 删除item
  10.         mList.remove(position);
  12.         notifyItemRemoved(position);
  13.         notifyItemRangeChanged(position, mList.size());
  14.     }

在MainActivity.java中 调用 适配器实例的增加和移除的方法 :

  1. Button addData = (Button) findViewById(R.id.add_btn);
  2. Button deleteData = (Button) findViewById(R.id.delete_btn);
  3. RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
  4. LinearLayoutManager manager = new LinearLayoutManager(this);
  5. final ItemAdapter adapter = new ItemAdapter(this,strings);
  7. manager.setOrientation(LinearLayoutManager.VERTICAL);
  8. recyclerView.setLayoutManager(manager);
  9. recyclerView.setAdapter(adapter);
  11. recyclerView.setItemAnimator(new DefaultItemAnimator());    // 设置默认动画
  13. addData.setOnClickListener(new View.OnClickListener() {
  14.     @Override
  15.     public void onClick(View view) {
  16.         adapter.addData(0);
  17.     }
  18. });
  20. deleteData.setOnClickListener(new View.OnClickListener() {
  21.     @Override
  22.     public void onClick(View view) {
  23.         adapter.removeData(0);
  24.     }
  25. });

这边没有显示我们增加的分隔线。
运行点击Add按钮，可以看到有新增item加入 :
Exler

点击移除 :
Exler
移除的时候还会出现我们在配置RecyclerView时调用的setItemAnimator(new DefaultItemAnimator()); 使用的默认动画。

参考

http://www.jianshu.com/p/4eff036360da
http://blog.csdn.net/lmj623565791/article/details/45059587
http://blog.csdn.net/qq_21071977/article/details/78001509

遗留问题

1.

在LinearLayoutManager为垂直的时候，画竖分隔线

  1. public void drawVerricalLine(Canvas c, RecyclerView parent, RecyclerView.State state) {    //画竖线
  2.         int top = parent.getPaddingTop();    // 获取parent的上边距
  3.         int bottom = parent.getHeight() - parent.getPaddingBottom();    //parent的高度-parent的下边距
  4.         int childCount = parent.getChildCount();
  5.         for (int i = 0; i < childCount; i++) {
  6.             View child = parent.getChildAt(i);
  8.             RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)child.getLayoutParams();    // 获得child的布局信息
  9.             int left = child.getRight() + params.rightMargin ;    // 从第一个item(item0)的尾部开始加入分隔线 View的最右边 + 布局的页右空白
  10.             int right = left + mDivider.getIntrinsicHeight() ;    // 两个布局之间的空隙 (此处为何用mDivider.getIntrinsicHeight())
  11.             mDivider.setBounds(left, top, right, bottom);
  12.             mDivider.draw(c);
  13.         }
  14.     }

获取了一下mDivider.getIntrinsicWidth()方法的数值为负。
Exler

为何此数值为负数

2.

添加item时，position = 0，自定义的List可以列表更新，但是界面上却没有显示出这个新增item(只是整个RecyclerView闪动了一下)，删除的时候也能发现需要多删一下。就是不能在position=0 的位置显示新增item。(position = 1之后一切正常)

增加notifyDataSetChanged();可以在position=0处显示出新增item，但是不出现新增动画。

删除功能一切正常。

此博文为个人学习笔记，仅供个人学习使用，希望对大家有帮助。

发表评论

表情：
评论列表 （有 0 条评论，316人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android学习随笔(1)

    学习流程来自《第一行代码》(第二版) 最近开始了Android的学习，看到很多人都推荐这一本书，就决定按照这一本书的讲解流程熟悉一下Android。 环境配置 ![

    秒速五厘米秒速五厘米/ 0 赞/ 317 阅读

    相关 Android RecyclerView

    该文章是一个系列文章，是本人在Android开发的漫漫长途上的一点感想和记录，我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索》以及《深入理解

    小鱼儿小鱼儿/ 0 赞/ 386 阅读