Android RecyclerView網格布局（支持多種分割線）詳解(2)

2019-12-12 03:35:54

字體：大中小

來源：轉載

供稿：網友

上篇Android RecyclerView 詳解(1)―線性布局

記錄了下RecyclerView的使用方法，并且講述了線性布局列表的使用方法，在此基礎上加上了萬能分割線，支持顏色分割線和圖片分割線，同時支持對分割線設置線寬。
這篇是總結一下網格布局的使用，同樣也支持兩種分割線和線寬的設置。

主要的相關類：

1. RecyclerView.Adapter

2. GridLayoutManager 網格布局管理器

3. RecycleView.ItemDecoration 分割線

下面就直接通過一個例子來展示：

先上效果圖：

(1) 顏色分割線

這里寫圖片描述

看起來還不錯吧，根據item的數量去顯示格子，當然如果你需要的樣式不是三列，這個很簡單，只需要在設置
GridLayoutManager的時候設置相應的列數即可，即：

mManagerLayout = new GridLayoutManager(getActivity(), 3);

(2) 圖片分割線

這里寫圖片描述

可能有人會說你的列表四周都有分割線，其實在不做特殊處理時左邊和上面默認是沒有分割線的。后面我會加上四周沒有分割線的，其實這兩種形式在實際開發中都是常見的，先來看四周都有邊線的。

由于RecycleView是高度解耦的控件，繪制分割線只和 RecycleView.ItemDecoration 有關，所以我們只需關心怎么去繼承 RecycleView.ItemDecoration 去實現我們所需的分割線，如下：

這里需要說明的是：顏色分割線和圖片分割線原理是完全一樣的，圖片分割線只是將一張很細的圖片傳入即可。

public class GridDivider extends RecyclerView.ItemDecoration {  private Drawable mDividerDarwable;  private int mDividerHight = 1;  private Paint mColorPaint;  public final int[] ATRRS = new int[]{android.R.attr.listDivider};  public GridDivider(Context context) {    final TypedArray ta = context.obtainStyledAttributes(ATRRS);    this.mDividerDarwable = ta.getDrawable(0);    ta.recycle();  }  /*   int dividerHight 分割線的線寬   int dividerColor 分割線的顏色   */  public GridDivider(Context context, int dividerHight, int dividerColor) {    this(context);    mDividerHight = dividerHight;    //繪制顏色分割線的畫筆    mColorPaint = new Paint();    mColorPaint.setColor(dividerColor);  }  /*   int dividerHight 分割線的線寬   Drawable dividerDrawable 圖片分割線   */  public GridDivider(Context context, int dividerHight, Drawable dividerDrawable) {    this(context);    mDividerHight = dividerHight;    mDividerDarwable = dividerDrawable;  }  @Override  public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {    super.onDraw(c, parent, state);    //畫水平和垂直分割線    drawHorizontalDivider(c, parent);    drawVerticalDivider(c, parent);  }  public void drawVerticalDivider(Canvas c, RecyclerView parent) {    // 這里傳入的parent是recycleview，通過它我們可以獲取列表的所有的元素，    // 這里我們遍歷列表中的每一個元素，對每一個元素繪制垂直分割線    final int childCount = parent.getChildCount();    for (int i = 0; i < childCount; i++) {      final View child = parent.getChildAt(i);      //獲取當前item布局參數，通過它可以知道該item的精確位置，我們通過這個位置去繪制它的分割線      final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();      final int top = child.getTop() - params.topMargin;      final int bottom = child.getBottom() + params.bottomMargin;      int left = 0;      int right = 0;      //左邊第一列，      if ((i % 3) == 0) {        //item左邊分割線        left = child.getLeft();        right = left + mDividerHight;        mDividerDarwable.setBounds(left, top, right, bottom);        mDividerDarwable.draw(c);        if (mColorPaint != null) {//如果是顏色分割線          c.drawRect(left, top, right, bottom, mColorPaint);        }        //item右邊分割線        left = child.getRight() + params.rightMargin - mDividerHight;        right = left + mDividerHight;      } else {        //非左邊第一列        left = child.getRight() + params.rightMargin - mDividerHight;        right = left + mDividerHight;      }      //畫分割線      mDividerDarwable.setBounds(left, top, right, bottom);      mDividerDarwable.draw(c);      if (mColorPaint != null) {        c.drawRect(left, top, right, bottom, mColorPaint);      }    }  }  //....水平分割線與垂直分割線類似，完整代碼見下。}

下面是完整代碼：

1. MainActivity

public class MainActivity extends AppCompatActivity {  private GridFragment mGridFragment;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    //網格    mGridFragment = new GridFragment();    getFragmentManager().beginTransaction().replace(R.id.activity_main, mGridFragment).commit();  }

activity_main

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/activity_main"  android:layout_width="match_parent"  android:layout_height="match_parent"></FrameLayout>

2. GridFragment

public class GridFragment extends Fragment implements View.OnClickListener{  private RecyclerView mRecycleViewDrawable;  private RecyclerView mRecycleViewColor;  private LinearLayoutManager mManagerColor;  private LinearLayoutManager mManagerDrawable;  private List<String> mData;  private Button mDrawable;  private Button mColor;  private MyRecycleViewAdapter mRecycleViewAdapter;  @Nullable  @Override  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {    View view = inflater.inflate(R.layout.fragment_grid_layout, container, false);    mRecycleViewDrawable = (RecyclerView) view.findViewById(R.id.recycleview_drawable);    mRecycleViewColor = (RecyclerView) view.findViewById(R.id.recycleview_color);    mDrawable = (Button) view.findViewById(R.id.btn_drawable);    mDrawable.setOnClickListener(this);    mColor = (Button) view.findViewById(R.id.btn_color);    mColor.setOnClickListener(this);    //設置顏色分割線    mManagerColor = new GridLayoutManager(getActivity(), 3);    mRecycleViewColor.setLayoutManager(mManagerColor);    mRecycleViewColor.addItemDecoration(new GridDivider(getActivity(), 20, this.getResources().getColor(R.color.colorAccent)));    //設置圖片分割線    mManagerDrawable = new GridLayoutManager(getActivity(), 3);    mRecycleViewDrawable.setLayoutManager(mManagerDrawable);    Drawable drawable = ContextCompat.getDrawable(getActivity(), R.mipmap.divider);    mRecycleViewDrawable.addItemDecoration(new GridDivider(getActivity(), 20, drawable));    //初始化數據    mData = new ArrayList<String>();    initData(mData);    mRecycleViewAdapter = new MyRecycleViewAdapter(getActivity(), R.layout.item_grid_recycleview, mData);    mRecycleViewColor.setAdapter(mRecycleViewAdapter);    mRecycleViewDrawable.setAdapter(mRecycleViewAdapter);    return view;  }  private void initData(List<String> dataList) {    for (int i = 0; i < 16; i++) {      dataList.add("item" + i);    }  }  @Override  public void onClick(View view) {    int id = view.getId();    switch (id){      case R.id.btn_drawable:        mRecycleViewColor.setVisibility(View.INVISIBLE);        mRecycleViewDrawable.setVisibility(View.VISIBLE);        break;      case R.id.btn_color:        mRecycleViewColor.setVisibility(View.VISIBLE);        mRecycleViewDrawable.setVisibility(View.INVISIBLE);        break;    }  }}

3.分割線 GridDivider

直接繼承 RecyclerView.ItemDecoration

public class GridDivider extends RecyclerView.ItemDecoration {  private Drawable mDividerDarwable;  private int mDividerHight = 1;  private Paint mColorPaint;  public final int[] ATRRS = new int[]{android.R.attr.listDivider};  public GridDivider(Context context) {    final TypedArray ta = context.obtainStyledAttributes(ATRRS);    this.mDividerDarwable = ta.getDrawable(0);    ta.recycle();  }  /*   int dividerHight 分割線的線寬   int dividerColor 分割線的顏色   */  public GridDivider(Context context, int dividerHight, int dividerColor) {    this(context);    mDividerHight = dividerHight;    mColorPaint = new Paint();    mColorPaint.setColor(dividerColor);  }  /*   int dividerHight 分割線的線寬   Drawable dividerDrawable 圖片分割線   */  public GridDivider(Context context, int dividerHight, Drawable dividerDrawable) {    this(context);    mDividerHight = dividerHight;    mDividerDarwable = dividerDrawable;  }  @Override  public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {    super.onDraw(c, parent, state);    //畫水平和垂直分割線    drawHorizontalDivider(c, parent);    drawVerticalDivider(c, parent);  }  public void drawVerticalDivider(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;      int left = 0;      int right = 0;      //左邊第一列      if ((i % 3) == 0) {        //item左邊分割線        left = child.getLeft();        right = left + mDividerHight;        mDividerDarwable.setBounds(left, top, right, bottom);        mDividerDarwable.draw(c);        if (mColorPaint != null) {          c.drawRect(left, top, right, bottom, mColorPaint);        }        //item右邊分割線        left = child.getRight() + params.rightMargin - mDividerHight;        right = left + mDividerHight;      } else {        //非左邊第一列        left = child.getRight() + params.rightMargin - mDividerHight;        right = left + mDividerHight;      }      //畫分割線      mDividerDarwable.setBounds(left, top, right, bottom);      mDividerDarwable.draw(c);      if (mColorPaint != null) {        c.drawRect(left, top, right, bottom, mColorPaint);      }    }  }  public void drawHorizontalDivider(Canvas c, RecyclerView parent) {    final int childCount = parent.getChildCount();    for (int i = 0; i < childCount; i++) {      final View child = parent.getChildAt(i);      RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();      final int left = child.getLeft() - params.leftMargin - mDividerHight;      final int right = child.getRight() + params.rightMargin;      int top = 0;      int bottom = 0;      // 最上面一行      if ((i / 3) == 0) {        //當前item最上面的分割線        top = child.getTop();        //當前item下面的分割線        bottom = top + mDividerHight;        mDividerDarwable.setBounds(left, top, right, bottom);        mDividerDarwable.draw(c);        if (mColorPaint != null) {          c.drawRect(left, top, right, bottom, mColorPaint);        }        top = child.getBottom() + params.bottomMargin;        bottom = top + mDividerHight;      } else {        top = child.getBottom() + params.bottomMargin;        bottom = top + mDividerHight;      }      //畫分割線      mDividerDarwable.setBounds(left, top, right, bottom);      mDividerDarwable.draw(c);      if (mColorPaint != null) {        c.drawRect(left, top, right, bottom, mColorPaint);      }    }  }}

4. Adapter

public class MyRecycleViewAdapter extends RecyclerView.Adapter<MyRecycleViewAdapter.MyViewHolder> {  private LayoutInflater mLayoutInflater;  private List<String> mDataList;  private int mItemLayout;  public MyRecycleViewAdapter(Context context, int itemLayout, List<String> datalist) {    mLayoutInflater = LayoutInflater.from(context);    mItemLayout = itemLayout;    mDataList = datalist;  }  @Override  public MyRecycleViewAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {    return new MyViewHolder(mLayoutInflater.inflate(mItemLayout, parent, false));  }  @Override  public void onBindViewHolder(MyRecycleViewAdapter.MyViewHolder holder, int position) {    holder.mTextView.setText(mDataList.get(position));  }  @Override  public int getItemCount() {    return mDataList.size();  }  class MyViewHolder extends RecyclerView.ViewHolder {    private TextView mTextView;    public MyViewHolder(View itemView) {      super(itemView);      mTextView = (TextView) itemView.findViewById(R.id.tv);    }  }}

adapter 的item布局

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="wrap_content">  <TextView    android:id="@+id/tv"    android:gravity="center"    android:layout_width="match_parent"    android:layout_height="60dp"/></FrameLayout>

未完待續……

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。

上一篇：android多媒體音樂（MediaPlayer）播放器制作代碼

下一篇：Android Handler移除Message詳解及實例代碼