Android实现Excel表格展示数据

立即下载用AI写一个

发布时间：2020-11-19

9人 | 浏览：4976次 | 收藏 |

技术：android

运行环境：androidstudio

概述

Android实现 Excel 表格的例子，可横向和纵向滑动，并保持头部和左侧标题栏固定，支持各个item布局的点击事件

详细

### 前言
在`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. 效果图及项目结构图

先来波效果图
![](/contentImages/image/20201119/A2skgdIsVG0GEMwKPvw.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>
```
#### 四. 效果图及项目结构图 
![](/contentImages/image/20201119/co05iSX6rAltDZ7jSM7.gif)

![](/contentImages/image/20201119/uUKotEqJFgMsLPmFCIe.png)

更多代码大家可以查看demo,这里就不再赘述了。
ok,今天的内容就讲到这里了，谢谢大家。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

Android实现Excel表格展示数据

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子