• 安卓基础学习 Day17|网格布局+计算器界面

    目录

    一、线性布局的常用属性

    针对布局的属性

    针对子控件的属性

    二、演示案例

    提出要求

    布局分析

    主布局资源文件

    运行效果

    三、网格APP布局练习

    提出要求

    布局分析

    主布局资源文件

    实现效果

    一、线性布局的常用属性

    针对布局的属性

    • rowCount：行数
    • columnCount：列数

    针对子控件的属性

    • layout_row：子控件在布局的行数
    • layout_column：子控件在布局的列数
    • layout_rowSpan：跨行数
    • layout_columnSpan：跨列数

    【子元素超过一行的宽度，超过的地方也显示。（比如，父元素上设置了5行，那么子元素不能设置让它显示在第六行）】 

    二、演示案例

    提出要求

    布局分析

    主布局资源文件

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:tools="http://schemas.android.com/tools"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent"
    6.     android:background="@mipmap/background"
    7.     android:gravity="center"
    8.     android:orientation="vertical"
    9.     tools:context=".MainActivity">
    10.  
    11.  
    12.     <GridLayout
    13.         android:layout_width="wrap_content"
    14.         android:layout_height="wrap_content"
    15.         android:layout_marginTop="10dp"
    16.         android:columnCount="5"
    17.         android:padding="15dp"
    18.         android:rowCount="7">
    19.  
    20.         <TextView
    21.             android:layout_width="320dp"
    22.             android:layout_height="50dp"
    23.             android:layout_row="0"
    24.             android:layout_column="0"
    25.             android:layout_columnSpan="5"
    26.             android:layout_marginBottom="30dp"
    27.             android:background="@drawable/custom_border"
    28.             android:gravity="right"
    29.             android:text="@string/text"
    30.             android:textColor="#0000ff"
    31.             android:textSize="25sp" />
    32.  
    33.         <Button
    34.             android:layout_width="65dp"
    35.             android:layout_row="1"
    36.             android:layout_column="0"
    37.             android:text="@string/mc" />
    38.  
    39.         <Button
    40.             android:layout_width="65dp"
    41.             android:layout_row="1"
    42.             android:layout_column="1"
    43.             android:text="@string/mr" />
    44.  
    45.         <Button
    46.             android:layout_width="65dp"
    47.             android:layout_row="1"
    48.             android:layout_column="2"
    49.             android:text="@string/ms" />
    50.  
    51.         <Button
    52.             android:layout_width="65dp"
    53.             android:layout_row="1"
    54.             android:layout_column="3"
    55.             android:text="@string/mm" />
    56.  
    57.         <Button
    58.             android:layout_width="65dp"
    59.             android:layout_row="1"
    60.             android:layout_column="4"
    61.             android:text="@string/mmm" />
    62.  
    63.         <Button
    64.             android:layout_width="65dp"
    65.             android:layout_height="wrap_content"
    66.             android:layout_row="2"
    67.             android:layout_column="0"
    68.             android:text="@string/tuiwei" />
    69.  
    70.         <Button
    71.             android:layout_width="65dp"
    72.             android:layout_row="2"
    73.             android:layout_column="1"
    74.             android:text="@string/ce" />
    75.  
    76.         <Button
    77.             android:layout_width="65dp"
    78.             android:layout_row="2"
    79.             android:layout_column="2"
    80.             android:text="@string/c" />
    81.  
    82.         <Button
    83.             android:layout_width="65dp"
    84.             android:layout_row="2"
    85.             android:layout_column="3"
    86.             android:text="@string/add_sub" />
    87.  
    88.         <Button
    89.             android:layout_width="65dp"
    90.             android:layout_row="2"
    91.             android:layout_column="4"
    92.             android:text="@string/gen" />
    93.  
    94.         <Button
    95.             android:layout_width="65dp"
    96.             android:layout_height="wrap_content"
    97.             android:layout_row="3"
    98.             android:layout_column="0"
    99.             android:text="@string/seven" />
    100.  
    101.         <Button
    102.             android:layout_width="65dp"
    103.             android:layout_row="3"
    104.             android:layout_column="1"
    105.             android:text="@string/eight" />
    106.  
    107.         <Button
    108.             android:layout_width="65dp"
    109.             android:layout_row="3"
    110.             android:layout_column="2"
    111.             android:text="@string/nine" />
    112.  
    113.         <Button
    114.             android:layout_width="65dp"
    115.             android:layout_row="3"
    116.             android:layout_column="3"
    117.             android:text="@string/chu" />
    118.  
    119.         <Button
    120.             android:layout_width="65dp"
    121.             android:layout_row="3"
    122.             android:layout_column="4"
    123.             android:text="@string/quyu" />
    124.  
    125.         <Button
    126.             android:layout_width="65dp"
    127.             android:layout_row="4"
    128.             android:layout_column="0"
    129.             android:text="@string/four" />
    130.  
    131.         <Button
    132.             android:layout_width="65dp"
    133.             android:layout_row="4"
    134.             android:layout_column="1"
    135.             android:text="@string/five" />
    136.  
    137.         <Button
    138.             android:layout_width="65dp"
    139.             android:layout_row="4"
    140.             android:layout_column="2"
    141.             android:text="@string/six" />
    142.  
    143.         <Button
    144.             android:layout_width="65dp"
    145.             android:layout_row="4"
    146.             android:layout_column="3"
    147.             android:text="@string/cheng" />
    148.  
    149.         <Button
    150.             android:layout_width="65dp"
    151.             android:layout_row="4"
    152.             android:layout_column="4"
    153.             android:text="@string/fen" />
    154.  
    155.         <Button
    156.             android:layout_width="65dp"
    157.             android:layout_row="5"
    158.             android:layout_column="0"
    159.             android:text="@string/one" />
    160.  
    161.         <Button
    162.             android:layout_width="65dp"
    163.             android:layout_row="5"
    164.             android:layout_column="1"
    165.             android:text="@string/two" />
    166.  
    167.         <Button
    168.             android:layout_width="65dp"
    169.             android:layout_row="5"
    170.             android:layout_column="2"
    171.             android:text="@string/three" />
    172.  
    173.         <Button
    174.             android:layout_width="65dp"
    175.             android:layout_row="5"
    176.             android:layout_column="3"
    177.             android:text="@string/sub" />
    178.  
    179.         <Button
    180.             android:layout_width="65dp"
    181.             android:layout_height="95dp"
    182.             android:layout_row="5"
    183.             android:layout_rowSpan="2"
    184.             android:layout_column="4"
    185.             android:text="@string/deng" />
    186.  
    187.         <Button
    188.             android:layout_width="130dp"
    189.             android:layout_row="6"
    190.             android:layout_column="0"
    191.             android:layout_columnSpan="2"
    192.             android:text="@string/zero" />
    193.  
    194.         <Button
    195.             android:layout_width="65dp"
    196.             android:layout_row="6"
    197.             android:layout_column="2"
    198.             android:text="@string/point" />
    199.  
    200.         <Button
    201.             android:layout_width="65dp"
    202.             android:layout_row="6"
    203.             android:layout_column="3"
    204.             android:text="@string/add" />
    205.     </GridLayout>
    206.  
    207. </LinearLayout>

    运行效果

    三、网格APP布局练习

    提出要求

    布局分析

    主布局资源文件

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:tools="http://schemas.android.com/tools"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent"
    6.     android:gravity="center"
    7.     android:orientation="vertical"
    8.     tools:context=".MainActivity">
    9.  
    10.  
    11.     <GridLayout
    12.         android:layout_width="wrap_content"
    13.         android:layout_height="wrap_content"
    14.         android:rowCount="4"
    15.         android:columnCount="3">
    16.  
    17.         <LinearLayout
    18.             android:layout_width="wrap_content"
    19.             android:layout_height="wrap_content"
    20.             android:gravity="center"
    21.             android:orientation="vertical">
    22.             <ImageView
    23.             android:layout_width="100dp"
    24.             android:layout_height="100dp"
    25.             android:src="@mipmap/xcly"/>
    26.             <TextView
    27.                 android:layout_width="wrap_content"
    28.                 android:layout_height="wrap_content"
    29.                 android:text="携程旅游"
    30.                 android:gravity="center"
    31.                 android:textSize="20sp">
    32.             </TextView>
    33.         </LinearLayout>
    34.  
    35.         <LinearLayout
    36.             android:layout_width="wrap_content"
    37.             android:layout_height="wrap_content"
    38.             android:gravity="center"
    39.             android:orientation="vertical">
    40.             <ImageView
    41.                 android:layout_width="100dp"
    42.                 android:layout_height="100dp"
    43.                 android:src="@mipmap/qq"/>
    44.             <TextView
    45.                 android:layout_width="wrap_content"
    46.                 android:layout_height="wrap_content"
    47.                 android:text="QQ"
    48.                 android:gravity="center"
    49.                 android:textSize="20sp">
    50.             </TextView>
    51.         </LinearLayout>
    52.  
    53.         <LinearLayout
    54.             android:layout_width="wrap_content"
    55.             android:layout_height="wrap_content"
    56.             android:gravity="center"
    57.             android:orientation="vertical">
    58.             <ImageView
    59.                 android:layout_width="100dp"
    60.                 android:layout_height="100dp"
    61.                 android:src="@mipmap/tk"/>
    62.             <TextView
    63.                 android:layout_width="wrap_content"
    64.                 android:layout_height="wrap_content"
    65.                 android:text="图库"
    66.                 android:gravity="center"
    67.                 android:textSize="20sp">
    68.             </TextView>
    69.         </LinearLayout>
    70.  
    71.         <LinearLayout
    72.             android:layout_width="wrap_content"
    73.             android:layout_height="wrap_content"
    74.             android:gravity="center"
    75.             android:orientation="vertical">
    76.             <ImageView
    77.                 android:layout_width="100dp"
    78.                 android:layout_height="100dp"
    79.                 android:src="@mipmap/wb"/>
    80.             <TextView
    81.                 android:layout_width="wrap_content"
    82.                 android:layout_height="wrap_content"
    83.                 android:text="微博"
    84.                 android:gravity="center"
    85.                 android:textSize="20sp">
    86.             </TextView>
    87.         </LinearLayout>
    88.  
    89.         <LinearLayout
    90.             android:layout_width="wrap_content"
    91.             android:layout_height="wrap_content"
    92.             android:gravity="center"
    93.             android:orientation="vertical">
    94.             <ImageView
    95.                 android:layout_width="100dp"
    96.                 android:layout_height="100dp"
    97.                 android:src="@mipmap/wx"/>
    98.             <TextView
    99.                 android:layout_width="wrap_content"
    100.                 android:layout_height="wrap_content"
    101.                 android:text="微信"
    102.                 android:gravity="center"
    103.                 android:textSize="20sp">
    104.             </TextView>
    105.         </LinearLayout>
    106.  
    107.         <LinearLayout
    108.             android:layout_width="wrap_content"
    109.             android:layout_height="wrap_content"
    110.             android:gravity="center"
    111.             android:orientation="vertical">
    112.             <ImageView
    113.                 android:layout_width="100dp"
    114.                 android:layout_height="100dp"
    115.                 android:src="@mipmap/wyy"/>
    116.             <TextView
    117.                 android:layout_width="wrap_content"
    118.                 android:layout_height="wrap_content"
    119.                 android:text="网易云音乐"
    120.                 android:gravity="center"
    121.                 android:textSize="20sp">
    122.             </TextView>
    123.         </LinearLayout>
    124.  
    125.         <LinearLayout
    126.             android:layout_width="wrap_content"
    127.             android:layout_height="wrap_content"
    128.             android:gravity="center"
    129.             android:orientation="vertical">
    130.             <ImageView
    131.                 android:layout_width="100dp"
    132.                 android:layout_height="100dp"
    133.                 android:src="@mipmap/zgyh"/>
    134.             <TextView
    135.                 android:layout_width="wrap_content"
    136.                 android:layout_height="wrap_content"
    137.                 android:text="中国银行"
    138.                 android:gravity="center"
    139.                 android:textSize="20sp">
    140.             </TextView>
    141.         </LinearLayout>
    142.  
    143.         <LinearLayout
    144.             android:layout_width="wrap_content"
    145.             android:layout_height="wrap_content"
    146.             android:gravity="center"
    147.             android:orientation="vertical">
    148.             <ImageView
    149.                 android:layout_width="100dp"
    150.                 android:layout_height="100dp"
    151.                 android:src="@mipmap/zy"/>
    152.             <TextView
    153.                 android:layout_width="wrap_content"
    154.                 android:layout_height="wrap_content"
    155.                 android:text="最右"
    156.                 android:gravity="center"
    157.                 android:textSize="20sp">
    158.             </TextView>
    159.         </LinearLayout>
    160.  
    161.         <LinearLayout
    162.             android:layout_width="wrap_content"
    163.             android:layout_height="wrap_content"
    164.             android:gravity="center"
    165.             android:orientation="vertical">
    166.             <ImageView
    167.                 android:layout_width="100dp"
    168.                 android:layout_height="100dp"
    169.                 android:src="@mipmap/elm"/>
    170.             <TextView
    171.                 android:layout_width="wrap_content"
    172.                 android:layout_height="wrap_content"
    173.                 android:text="饿了吗"
    174.                 android:gravity="center"
    175.                 android:textSize="20sp">
    176.             </TextView>
    177.         </LinearLayout>
    178.  
    179.         <LinearLayout
    180.             android:layout_width="wrap_content"
    181.             android:layout_height="wrap_content"
    182.             android:gravity="center"
    183.             android:orientation="vertical">
    184.             <ImageView
    185.                 android:layout_width="100dp"
    186.                 android:layout_height="100dp"
    187.                 android:src="@mipmap/keep"/>
    188.             <TextView
    189.                 android:layout_width="wrap_content"
    190.                 android:layout_height="wrap_content"
    191.                 android:text="Keep"
    192.                 android:gravity="center"
    193.                 android:textSize="20sp">
    194.             </TextView>
    195.         </LinearLayout>
    196.  
    197.         <LinearLayout
    198.             android:layout_width="wrap_content"
    199.             android:layout_height="wrap_content"
    200.             android:gravity="center"
    201.             android:orientation="vertical">
    202.             <ImageView
    203.                 android:layout_width="100dp"
    204.                 android:layout_height="100dp"
    205.                 android:src="@mipmap/dh"/>
    206.             <TextView
    207.                 android:layout_width="wrap_content"
    208.                 android:layout_height="wrap_content"
    209.                 android:text="电话"
    210.                 android:gravity="center"
    211.                 android:textSize="20sp">
    212.             </TextView>
    213.         </LinearLayout>
    214.  
    215.         <LinearLayout
    216.             android:layout_width="wrap_content"
    217.             android:layout_height="wrap_content"
    218.             android:gravity="center"
    219.             android:orientation="vertical">
    220.             <ImageView
    221.                 android:layout_width="100dp"
    222.                 android:layout_height="100dp"
    223.                 android:src="@mipmap/ys"/>
    224.             <TextView
    225.                 android:layout_width="wrap_content"
    226.                 android:layout_height="wrap_content"
    227.                 android:text="影视"
    228.                 android:gravity="center"
    229.                 android:textSize="20sp">
    230.             </TextView>
    231.         </LinearLayout>
    232.  
    233.  
    234.  
    235.     </GridLayout>
    236.  
    237. </LinearLayout>

    实现效果

  • 相关阅读:
    Javascript知识【JS方法和事件&正则&JS注册案例】
    什么是视频内容推荐引擎？
    WebDAV之葫芦儿·派盘 + ES文件浏览器
    【Docker】实现JMeter分布式压测
    Oracle EBS Interface/API(42) -会计账户组合交叉验证规则标准API和客制化API
    nginx配置详解
    docker 安装oracle 19c
    ​SAP MM 使用两个STO实现免关税跨国公司间转储
    进程状态和优先级【Linux】
    使用json-bigint库处理后端返回数值型数据精度丢失问题
  • 原文地址：https://blog.csdn.net/m0_64018773/article/details/125565126