Android：空气质量检测界面（布局嵌套），练手推荐。

今天刚好吃了没事，我突然想到今天早上我的语音助手说我这里空气质量不错，于是我就想要是有一个界面可以看看周围环境数据变化就好了，于是我就写了一个界面，用到了网格布局和相对布局的嵌套，大家可以试试：

首先新建一个activity，记得是空的，因为其他的有乱七八糟的东西，不适于我们学习；

我们将默认的约束布局改为网格布局：

关于网格布局，我这里就提一下几个重要的地方：

源代码：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity2"
    android:columnCount="3"
    android:layout_gravity="center_horizontal"
    android:rowCount="2">
    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="#00ff00">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="空气温度"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/myoral"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:text="32"
            android:textSize="25sp"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="#00ff00">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="空气湿度"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/myoval2"
            android:text="80"
            android:textSize="25sp"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="#00ff00">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="光照"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/myoval2"
            android:text="158"
            android:textSize="25sp"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="#00ff00">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="CO2"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/myoval2"
            android:text="32"
            android:textSize="25sp"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="#00ff00">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="PM2.5"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/myoval2"
            android:text="180"
            android:textSize="25sp"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="#00ff00">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="道路状况"
            android:textSize="25sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/myoval2"
            android:text="拥堵"
            android:textSize="25sp" />
    </RelativeLayout>

</GridLayout>

 别看这么长的代码，其实很多都可以复制粘贴的，主要的代码其实只有：

<GridLayout 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:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity2"
    android:columnCount="3"
    android:layout_gravity="center_horizontal"
    android:rowCount="2">
    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="#00ff00">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="空气温度"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/myoral"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:text="32"
            android:textSize="25sp"/>
    </RelativeLayout>
</GridLayout>

关于网格布局的要点只有：

android:rowCount和android:columnCount，这是设置有多少行和多少列的，只要写上数值就可以开始界面的设计了；

我们添加一个 <RelativeLayout>相对布局，里面放了两个<TextView>，一个显示文字，一个显示数字；

为了好看，我将文字设置10dp的外边距：
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"

关于数字，我们需要放在右下角，同样我们用外边距隔开：

            android:layout_alignParentBottom="true" 与父控件下对齐
            android:layout_alignParentRight="true" 与父控件右对齐
            android:background="@drawable/myoral"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"

这里用到了android:background="@drawable/myoral"，其实这个是一个形状，是我自定义的形状，在drawable里面添加一个<shape>详细的请看专栏第一篇：

这里有专门讲如何创建一个形状：

(120条消息) Android ＜Textview＞的高级应用：真的很高级（提高篇）_编程学渣ズ的博客-CSDN博客

 当做好第一个之后是这样的：

 剩下的几个只需要复制粘贴，傻瓜式操作的填写数据就行了；

 是不是很简单？

关注我，更多分享，公众号：代码栈