《网格布局》

古城微笑少年丶 2024-04-01 18:16 158阅读 0赞

文章目录

  • 一、学习要点
  • 二、课程记录
    • 1、常用属性
    • 2、创建安卓应用
    • 3、字符串资源文件
    • 4、定义边框配置文件
    • 5、主布局资源文件
    • 6、最终效果

一、学习要点

  1. 网格布局特点
  2. 网格布局常用属性
  3. 案例演示

二、课程记录

1、常用属性










































属性 含义
rowCount 行数
columnCount 列数
layout_rowSpan 跨行数
layout_columnSpan 跨列数
layout_width 布局宽度
layout_height 布局高度
layout_row 子控件在布局的行数
layout_column 子控件在布局的列数

2、创建安卓应用

  • 基于Empty Activity模板创建- GridLayoutCalculator
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3、字符串资源文件

  • strings.xml
    在这里插入图片描述


    网络布局：计算器界面

4、定义边框配置文件

  • 在drawable目录中添加custom_border.xml
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    <?xml version=”1.0” encoding=”utf-8”?>

5、主布局资源文件

  • 约束布局修改为垂直的线性布局并设置对应属性
    在这里插入图片描述
    在这里插入图片描述
  • 添加一个用于显示运算结果的标签
    在这里插入图片描述
    在这里插入图片描述
  • 添加一个网格布局，设置为6行5列
    在这里插入图片描述
  • 为第一行 添加五个按钮
    在这里插入图片描述
  • 预览效果
    在这里插入图片描述
  • 为第二行添加五个按钮
    在这里插入图片描述
  • 预览效果
    在这里插入图片描述
  • 为第三行添加五个按钮
    在这里插入图片描述
  • 预览效果
    在这里插入图片描述
  • 为第四行添加五个按钮
    在这里插入图片描述
  • 预览效果
    在这里插入图片描述
  • 为第五行添加五个按钮（第五个按钮跨两行）
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
  • 为第六行添加三个按钮（第一个按钮跨两列）
    在这里插入图片描述

  • 查看预览
    在这里插入图片描述

    <?xml version=”1.0” encoding=”utf-8”?>

    1. <TextView
    2.     android:layout_width="match_parent"
    3.     android:layout_height="wrap_content"
    4.     android:background="@drawable/custom_border"
    5.     android:layout_marginTop="30dp"
    6.     android:gravity="right"
    7.     android:text="01234567"
    8.     android:textColor="#0000ff"
    9.     android:textSize="15sp"/>
    11. <GridLayout
    12.     android:layout_width="match_parent"
    13.     android:layout_height="wrap_content"
    14.     android:layout_marginTop="10dp"
    15.     android:columnCount="5"
    16.     android:rowCount="6" >
    18.     <Button
    19.         android:layout_width="68dp"
    20.         android:layout_height="wrap_content"
    21.         android:layout_marginRight="5dp"
    22.         android:layout_row="0"
    23.         android:layout_column="0"
    24.         android:text="MC"
    25.         android:textSize="15sp"/>
    26.     <Button
    27.         android:layout_width="68dp"
    28.         android:layout_height="wrap_content"
    29.         android:layout_marginRight="5dp"
    30.         android:layout_row="0"
    31.         android:layout_column="1"
    32.         android:text="MR"
    33.         android:textSize="15sp"/>
    34.     <Button
    35.         android:layout_width="68dp"
    36.         android:layout_height="wrap_content"
    37.         android:layout_marginRight="5dp"
    38.         android:layout_row="0"
    39.         android:layout_column="2"
    40.         android:text="MS"
    41.         android:textSize="15sp"/>
    42.     <Button
    43.         android:layout_width="68dp"
    44.         android:layout_height="wrap_content"
    45.         android:layout_marginRight="5dp"
    46.         android:layout_row="0"
    47.         android:layout_column="3"
    48.         android:text="M+"
    49.         android:textSize="15sp"/>
    50.     <Button
    51.         android:layout_width="68dp"
    52.         android:layout_height="wrap_content"
    53.         android:layout_row="0"
    54.         android:layout_column="4"
    55.         android:text="M-"
    56.         android:textSize="15sp"/>
  1. <!--        -->
  2.         <Button
  3.             android:layout_width="68dp"
  4.             android:layout_height="wrap_content"
  5.             android:layout_marginRight="4dp"
  6.             android:layout_row="1"
  7.             android:layout_column="0"
  8.             android:text="←"
  9.             android:textSize="15sp"/>
  10.         <Button
  11.             android:layout_width="68dp"
  12.             android:layout_height="wrap_content"
  13.             android:layout_marginRight="4dp"
  14.             android:layout_row="1"
  15.             android:layout_column="1"
  16.             android:text="CE"
  17.             android:textSize="15sp"/>
  18.         <Button
  19.             android:layout_width="68dp"
  20.             android:layout_height="wrap_content"
  21.             android:layout_marginRight="4dp"
  22.             android:layout_row="1"
  23.             android:layout_column="2"
  24.             android:text="C"
  25.             android:textSize="15sp"/>
  26.         <Button
  27.             android:layout_width="68dp"
  28.             android:layout_height="wrap_content"
  29.             android:layout_marginRight="4dp"
  30.             android:layout_row="1"
  31.             android:layout_column="3"
  32.             android:text="±"
  33.             android:textSize="15sp"/>
  34.         <Button
  35.             android:layout_width="68dp"
  36.             android:layout_height="wrap_content"
  37.             android:layout_row="1"
  38.             android:layout_column="4"
  39.             android:text="√"
  40.             android:textSize="15sp"/>
  43.         <Button
  44.             android:layout_width="68dp"
  45.             android:layout_height="wrap_content"
  46.             android:layout_marginRight="4dp"
  47.             android:layout_row="2"
  48.             android:layout_column="0"
  49.             android:text="7"
  50.             android:textSize="15sp"/>
  51.         <Button
  52.             android:layout_width="68dp"
  53.             android:layout_height="wrap_content"
  54.             android:layout_marginRight="4dp"
  55.             android:layout_row="2"
  56.             android:layout_column="1"
  57.             android:text="8"
  58.             android:textSize="15sp"/>
  59.         <Button
  60.             android:layout_width="68dp"
  61.             android:layout_height="wrap_content"
  62.             android:layout_marginRight="4dp"
  63.             android:layout_row="2"
  64.             android:layout_column="2"
  65.             android:text="9"
  66.             android:textSize="15sp"/>
  67.         <Button
  68.             android:layout_width="68dp"
  69.             android:layout_height="wrap_content"
  70.             android:layout_marginRight="4dp"
  71.             android:layout_row="2"
  72.             android:layout_column="3"
  73.             android:text="/"
  74.             android:textSize="15sp"/>
  75.         <Button
  76.             android:layout_width="68dp"
  77.             android:layout_height="wrap_content"
  78.             android:layout_row="2"
  79.             android:layout_column="4"
  80.             android:text="%"
  81.             android:textSize="15sp"/>
  82. <!--   4-->
  84.         <Button
  85.             android:layout_width="68dp"
  86.             android:layout_height="wrap_content"
  87.             android:layout_marginRight="4dp"
  88.             android:layout_row="3"
  89.             android:layout_column="0"
  90.             android:text="4"
  91.             android:textSize="20sp"/>
  92.         <Button
  93.             android:layout_width="68dp"
  94.             android:layout_height="wrap_content"
  95.             android:layout_marginRight="4dp"
  96.             android:layout_row="3"
  97.             android:layout_column="1"
  98.             android:text="5"
  99.             android:textSize="15sp"/>
  100.         <Button
  101.             android:layout_width="68dp"
  102.             android:layout_height="wrap_content"
  103.             android:layout_marginRight="4dp"
  104.             android:layout_row="3"
  105.             android:layout_column="2"
  106.             android:text="6"
  107.             android:textSize="15sp"/>
  108.         <Button
  109.             android:layout_width="68dp"
  110.             android:layout_height="wrap_content"
  111.             android:layout_marginRight="4dp"
  112.             android:layout_row="3"
  113.             android:layout_column="3"
  114.             android:text="*"
  115.             android:textSize="15sp"/>
  116.         <Button
  117.             android:layout_width="68dp"
  118.             android:layout_height="wrap_content"
  119.             android:layout_row="3"
  120.             android:layout_column="4"
  121.             android:text="1/x"
  122.             android:textSize="15sp"/>
  123. <!--    5    -->
  125.         <Button
  126.             android:layout_width="68dp"
  127.             android:layout_height="wrap_content"
  128.             android:layout_marginRight="4dp"
  129.             android:layout_row="4"
  130.             android:layout_column="0"
  131.             android:text="1"
  132.             android:textSize="15sp"/>
  133.         <Button
  134.             android:layout_width="68dp"
  135.             android:layout_height="wrap_content"
  136.             android:layout_marginRight="4dp"
  137.             android:layout_row="4"
  138.             android:layout_column="1"
  139.             android:text="2"
  140.             android:textSize="15sp"/>
  141.         <Button
  142.             android:layout_width="68dp"
  143.             android:layout_height="wrap_content"
  144.             android:layout_marginRight="4dp"
  145.             android:layout_row="4"
  146.             android:layout_column="2"
  147.             android:text="3"
  148.             android:textSize="15sp"/>
  149.         <Button
  150.             android:layout_width="68dp"
  151.             android:layout_height="wrap_content"
  152.             android:layout_marginRight="4dp"
  153.             android:layout_row="4"
  154.             android:layout_column="3"
  155.             android:text="-"
  156.             android:textSize="15sp"/>
  157.         <Button
  158.             android:layout_width="68dp"
  159.             android:layout_height="97dp"
  160.             android:layout_row="4"
  161.             android:layout_rowSpan="2"
  162.             android:layout_column="4"
  163.             android:text="="
  164.             android:textSize="15sp"/>
  165. <!--    6    -->
  167.         <Button
  168.             android:layout_width="140dp"
  169.             android:layout_height="wrap_content"
  170.             android:layout_marginRight="4dp"
  171.             android:layout_row="5"
  172.             android:layout_columnSpan="2"
  173.             android:layout_column="0"
  174.             android:text="0"
  175.             android:textSize="15sp"/>
  176.         <Button
  177.             android:layout_width="68dp"
  178.             android:layout_height="wrap_content"
  179.             android:layout_marginRight="4dp"
  180.             android:layout_row="5"
  181.             android:layout_column="2"
  182.             android:text="."
  183.             android:textSize="15sp"/>
  184.         <Button
  185.             android:layout_width="68dp"
  186.             android:layout_height="wrap_content"
  187.             android:layout_marginRight="4dp"
  188.             android:layout_row="5"
  189.             android:layout_column="3"
  190.             android:text="+"
  191.             android:textSize="15sp"/>
  193.     </GridLayout>
  196. </LinearLayout>

6、最终效果

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Grid网格布局

    简介 > Flex布局时一维的布局，即水平或垂直方向的布局。而Grid布局则划分成“行”和“列”，产生单元格，可以看作是二维的布局。Grid布局远比Flex布局强大

    系统管理员系统管理员/ 0 赞/ 283 阅读

    相关 bootstrap之网格布局

    一. 实现原理 　　网格布局是通过容器的大小，平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别。 　　实现步骤如下: 　　(1) 数据行.ro

    矫情吗；*矫情吗；*/ 0 赞/ 339 阅读

    相关 css grid网格布局

    初次认识grid布局，看了官方的文档也很明了（[官方文档][Link 1]），然后通过自己的语言和理解，重新对他进行了总结。 > 摘要：网格布局是网站设计的基础，CSS网格模

    比眉伴天荒比眉伴天荒/ 0 赞/ 486 阅读