Android实现Excel表格展示数据

前言

在Android开发过程中，我们偶尔会需要将一些数据以Excel表格展示。那么今天就让我们来学习下Excel表格展示相关内容吧

今天涉及的内容：

1. 准备数据model
   1.1 ColumnTitle
   1.2 RowTitle
   1.3 Cell
2. 准备表格布局
   2.1 顶部标题栏布局
   2.2 左侧竖行标题栏布局
   2.3 表头布局
   2.4 表格内容布局
3. 其他属性准备
   3.1 布局宽高属性
   3.2 布局背景
4. 效果图及项目结构图
5. 库依赖
6. 在Activity中使用示例
7. 适配器ExcelAdapter代码

先来波效果图

1.gif

一. 准备数据model

Excel表格展示涉及到三组数据：

• ColumnTitle ： 列数据集合(顶部标题栏)
• RowTitle： 行数据集合(左侧竖列标题栏)
• Cell：表内容数据集合

下面以顶部标题栏显示课程，左侧标题竖列显示第几节课，然后表内容显示每节课的时间为例进行讲解。

1.1 ColumnTitle

课程数据实体类ColumnTitle代码如下：

/**
 * Title: Excel 列bean
 *
 * description:
 * autor:pei
 * created on 2020/10/29
 */
data class ColumnTitle(
    var course:String? //课程
)

1.2 RowTitle

第几节课数据实体类RowTitle代码如下：

/**
 * Title: Excel 行 bean
 * description:
 * autor:pei
 * created on 2020/10/29
 */
data class RowTitle(
    var lesson: String? //课节,如:第一节课,第二节课...
)

1.3 Cell

显示时间的数据实体类Cell代码如下：

/**
 * Title: Excel 表中数据 bean
 * description:
 * autor:pei
 * created on 2020/10/29
 */
data class Cell(
    var time:String? //时间
){}

二.准备表格布局

表格的布局主要涉及到四个layout: 顶部标题栏布局, 左侧竖行标题栏布局，左上角表头布局 和 表格中内容布局
下面依次给出各布局代码：

2.1 顶部标题栏布局

顶部标题栏布局adapter_excel_item_top_cell.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="@dimen/excel_width"
    android:layout_height="@dimen/excel_top_cell_height"
    android:background="@drawable/excel_title_bg">
    <TextView
        android:id="@+id/mTvTopName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="center"
        android:textSize="16sp"
        android:textStyle="bold"
        android:textColor="@color/black"/>
</androidx.constraintlayout.widget.ConstraintLayout>

2.2 左侧竖行标题栏布局

左侧竖行标题栏布局adapter_excel_item_left_cell.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="@dimen/excel_left_cell_width"
    android:layout_height="@dimen/excel_height"
    android:background="@drawable/excel_title_bg">

    <TextView
        android:id="@+id/mTvLeftName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="center"
        android:textSize="16sp"
        android:textStyle="bold"
        android:textColor="@color/black"/>
</androidx.constraintlayout.widget.ConstraintLayout>

2.3 表头布局

左上角表头布局adapter_excel_item_top_left_cell.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="@dimen/excel_left_cell_width"
    android:layout_height="@dimen/excel_top_cell_height"
    android:background="@drawable/excel_title_bg">


    <TextView
        android:id="@+id/mTvLeftTopName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="center"
        android:textSize="16sp"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:text="课节\\课程"/>
</androidx.constraintlayout.widget.ConstraintLayout>

2.4 表格内容布局

最后是表格内容布局adapter_excel_item_cell.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="@dimen/excel_width"
    android:layout_height="@dimen/excel_height"
    android:background="@drawable/excel_cell_bg">

    <TextView
        android:id="@+id/mTvCellName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="center"
        android:textSize="16sp"
        android:textColor="@color/black"/>
</androidx.constraintlayout.widget.ConstraintLayout>

三.其他属性准备

3.1 布局宽高属性

在以上四个布局中会涉及到几个宽高属性值。我们需要在res\values\dimen.xml中添加以下属性值：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="excel_left_cell_width">100dp</dimen>
    <dimen name="excel_width">80dp</dimen>
    <dimen name="excel_height">40dp</dimen>
    <dimen name="excel_top_cell_height">40dp</dimen>
</resources>

具体数值大小的话，大家可以根据实际情况设置，此处只做示例展示。

3.2 布局背景

上面几个布局中会涉及到背景的问题。我写的示例中主要涉及两个背景xml文件:excel_cell_bg.xml和excel_title_bg.xml。
下面贴出excel_cell_bg.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/black"
        android:width="1dp"/>
    <solid android:color="@color/white"/>
</shape>

excel_title_bg.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/black"
        android:width="1dp"/>
    <solid android:color="@color/blue"/>
</shape>

四. 效果图及项目结构图

效果图.gif
项目结构图.png

五. 库依赖

Excel表格展示的实现我们使用的是ExcelPanel库，ExcelPanel库官网地址为：ExcelPanel。那么我们需要在app_model的buid.gradle中添加相关依赖：