如何制作表格(三)——GridView + RecyclerView.GridLayoutManager

  到现在，其实我们已经能够制作各种各样的表格了。但是当我们想做一个表格的单元格宽度和高度相同。如果是使用GridLayout来进行制作的话我们需要在代码中获取GridLayout的宽。然后根据GridLayout的列数通过计算，获取每个格子的宽度。然后让View的宽高设置为格子的宽度。并且还需要自己设置对于格子的点击事件。那么有什么方便的方法能够制作出一个简单的表格呢?

一、GridView的使用

GridView其实用法跟ListView的用法是一致的，只是不同的地方显示出来的布局是不同的(ListView是行，GridView是表格而已)。

GridView显示的原理：首先设置GridView的列数(numColumns= "数量")，单元格的 宽度 = 高度 = GridView的宽度/列数。按照先填满一行再填满下一行的顺序执行。

那么我们就按照ListView的方式，来使用GridView吧~~

    <GridView
        android:id="@+id/main_gv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="4">
    </GridView>

    private GridView mGridView;
    private ArrayAdapter<String> mAdapter;
    private List<String> mStrList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mGridView = (GridView) findViewById(R.id.main_gv);
        mStrList = new ArrayList<>();
        for(int i=0; i<10; ++i){
            mStrList.add("#测试 "+i);
        }

        mAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,mStrList);
        mGridView.setAdapter(mAdapter);
    }

结果：

那么我想纵向数据，而不是横向显示数据，该怎么办？   答案是没有办法，GridView只支持行的操作

额，好吧，那么我该怎么设置分割线？   答案：还是没有办法 = =，GridView自身不提供设置分割线的功能。

如果一定要使用GridView设置分割线，那么可以将每个View设置一个分割线的背景。

或者重写GridView的dispatchDrawale()方法，来设置分割线。

那合并单元格总该没问题吧？               答案：还是没有这个功能。 

(ノಠ益ಠ)ノ彡┻━┻什么辣鸡控件，只能够显示简单的表格。

所以，Google又出了RecyclerView.GridLayoutManager来满足以上的各种要求。

二、RecyclerView.GridViewLayoutManager

首先请参考一下：RecyclerView的简单使用

相信看过上面文章的伙伴，已经知道了RecyclerView与GridLayoutManager的简单使用了。（达到了类似GridView的程度，这就不演示了）那么接下来，我们来满足刚才提出的要求

①、如何纵向显示数据

 //表示四列
        GridLayoutManager manager = new GridLayoutManager(this,4);
        //表示竖直显示.默认VERTICAL
        manager.setOrientation(GridLayoutManager.HORIZONTAL<span style="font-family: Arial, Helvetica, sans-serif;">);</span>
        //另外的方法：GridLayoutManager manager = new GridLayoutManager(this,4,GridLayoutManager.VERTICAL);

②、如何设置分割线

根据RecyclerView的使用，我们知道了Recycler有个ItemDecoration专门用来制作边框效果的。

public class GridItemDecoration extends RecyclerView.ItemDecoration{
    //分割线的宽度
    private static final int DIVIDER_SIZE = 5;

    private final Paint mPaint = new Paint();

    public GridItemDecoration(){
        init();
    }

    private void init(){
        mPaint.setColor(Color.RED);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        RecyclerView.LayoutManager manager = parent.getLayoutManager();
        if (manager instanceof GridLayoutManager){
            //我们知道表格的边框主要是由分割线和下分割线
            for(int i=0; i<parent.getChildCount(); ++i){
                //获取子元素
                View child = parent.getChildAt(i);
                //我们首先来制作子元素右分割线，或者说纵向分割线
                setUpVerticalDivider(child,c);
                //制作横向分割线
                setUpHorizontalDivider(child,c);
            }
        }
        else {
            throw new IllegalArgumentException("LayoutManager使用错误");
        }
    }

    private void setUpVerticalDivider(View child,Canvas canvas){
        float left = child.getRight();
        float top = child.getTop();
        float right = left + DIVIDER_SIZE;
        float bottom = child.getBottom()+DIVIDER_SIZE;
        canvas.drawRect(left,top,right,bottom,mPaint);
    }

    private void setUpHorizontalDivider(View child,Canvas canvas){
        float left = child.getLeft();
        float top = child.getBottom();
        float right = child.getRight();
        float bottom = top + DIVIDER_SIZE;
        canvas.drawRect(left,top,right,bottom,mPaint);
    }



    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.set(0,0,DIVIDER_SIZE,DIVIDER_SIZE);
    }
}

效果图：

③、如何设置单元合并

        //设置单元格的合并
        GridLayoutManager.SpanSizeLookup span = new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                //表示合并两个单元格 如果是horzontal是竖直合并，如果是vertical是左右合并
                return 2;
            }
        };

        manager.setSpanSizeLookup(span);

效果图：(竖直合并)