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

已于 2022-07-02 11:38:15 修改
阅读量453 收藏 1
点赞数 1
分类专栏： 安卓编程基础 文章标签： android android studio
于 2022-07-01 21:41:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64018773/article/details/125565126
版权

目录

一、线性布局的常用属性

针对布局的属性

针对子控件的属性

二、演示案例

提出要求

布局分析

主布局资源文件

运行效果

三、网格APP布局练习

提出要求

布局分析

主布局资源文件

实现效果

一、线性布局的常用属性

针对布局的属性

  • rowCount：行数
  • columnCount：列数

针对子控件的属性

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

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

二、演示案例

提出要求

布局分析

主布局资源文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/background"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:columnCount="5"
        android:padding="15dp"
        android:rowCount="7">

        <TextView
            android:layout_width="320dp"
            android:layout_height="50dp"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_columnSpan="5"
            android:layout_marginBottom="30dp"
            android:background="@drawable/custom_border"
            android:gravity="right"
            android:text="@string/text"
            android:textColor="#0000ff"
            android:textSize="25sp" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="0"
            android:text="@string/mc" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="1"
            android:text="@string/mr" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="2"
            android:text="@string/ms" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="3"
            android:text="@string/mm" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="4"
            android:text="@string/mmm" />

        <Button
            android:layout_width="65dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="0"
            android:text="@string/tuiwei" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="1"
            android:text="@string/ce" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="2"
            android:text="@string/c" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="3"
            android:text="@string/add_sub" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="4"
            android:text="@string/gen" />

        <Button
            android:layout_width="65dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="0"
            android:text="@string/seven" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="1"
            android:text="@string/eight" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="2"
            android:text="@string/nine" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="3"
            android:text="@string/chu" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="4"
            android:text="@string/quyu" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="0"
            android:text="@string/four" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="1"
            android:text="@string/five" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="2"
            android:text="@string/six" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="3"
            android:text="@string/cheng" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="4"
            android:text="@string/fen" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="0"
            android:text="@string/one" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="1"
            android:text="@string/two" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="2"
            android:text="@string/three" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="3"
            android:text="@string/sub" />

        <Button
            android:layout_width="65dp"
            android:layout_height="95dp"
            android:layout_row="5"
            android:layout_rowSpan="2"
            android:layout_column="4"
            android:text="@string/deng" />

        <Button
            android:layout_width="130dp"
            android:layout_row="6"
            android:layout_column="0"
            android:layout_columnSpan="2"
            android:text="@string/zero" />

        <Button
            android:layout_width="65dp"
            android:layout_row="6"
            android:layout_column="2"
            android:text="@string/point" />

        <Button
            android:layout_width="65dp"
            android:layout_row="6"
            android:layout_column="3"
            android:text="@string/add" />
    </GridLayout>

</LinearLayout>

运行效果

三、网格APP布局练习

提出要求

布局分析

主布局资源文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rowCount="4"
        android:columnCount="3">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/xcly"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="携程旅游"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/qq"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="QQ"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/tk"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="图库"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/wb"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="微博"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/wx"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="微信"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/wyy"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="网易云音乐"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/zgyh"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中国银行"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/zy"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="最右"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/elm"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="饿了吗"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/keep"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Keep"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/dh"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="电话"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/ys"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="影视"
                android:gravity="center"
                android:textSize="20sp">
            </TextView>
        </LinearLayout>



    </GridLayout>

</LinearLayout>

实现效果

小鲁不吃猪蹄
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
国赛华北赛区Day1Web1源码+学习说明.zip
01-14
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的竞赛项目学习资料，作为参考学习借鉴。...国赛华北赛区Day1Web1源码+学习说明.zip
android安卓开发常用布局属性归纳整理
技术应让更广泛的人群流入到实际产品开发中才是正统
09-18 740
【代码】android安卓开发常用布局属性归纳整理。
Android布局基础知识
qq_45844792的博客
03-21 2794
布局 布局的创建 UI(User Interface)界面是人与手机之间数据传递的、信息交互的重要媒介和对话窗口，是Android系统的重要组成部分。设计美观的UI界面布局是必不可少的组件。 布局的类型 Linear Layout（线型布局）、Relative Layout （相对布局）、Frame Layout(帧布局)、Table Layout(表格布局)、Absolute Layout（绝对...
Android学习笔记 - 常用的布局
HaveFun_Wine的博客
03-21 3271
Android中有六种的布局方式，分别是：LinearLayout(线性布局)、RelativeLayout(相对布局)、TableLayout(表格布局)、FrameLayout(帧布局)、AbsoluteLayout(绝对布局)、GridLayout(网格布局)。在开发中，我们用的最多的就是线性布局和相对布局。AbsoluteLayout是直接通过X,Y坐标来 控制组件在Activity中的位置的！另外这个但单位是dp!
小白用网格布局实现简单的计算器 ——Android
YanMeiHe的博客
03-16 4367
目的：采用网格布局，实现计算器的简单功能 开发工具：Android Studio3.3.2 开发环境： 实现过程： 第一步，创建一个Android项目，在这我把项目命名为MyApplication。 第二步，打开MyApplication/app/src/main/res/layout/activity_main.xml，使用text模式编写代码。 使用网格布局（...
Android Studio 笔记3.4 网格布局
ZQIR12的博客
11-13 1361
Android Studio 笔记3.4 网格布局。网格布局管理器（区别在于更加灵活，内容可跨列或者跨行显示，超出页面的大小会自动换行）
国赛华北赛区Day1Web2源码+学习说明.zip
01-14
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的竞赛项目学习资料，作为参考学习借鉴。...国赛华北赛区Day1Web2源码+学习说明.zip
【JQuery学习笔记day11】HTML 布局
01-08
布局 网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 布局标签 标签 描述 定义文档区块，块级(block-level) 定义 span，用来组合文档中的行内元素。 网站布局 大多数网站会把内容安排...
Vue基础day3学习资料.zip
03-31
Vue的基础语法是学习Vue开发的关键，而"Vue基础day3学习资料.zip"这个压缩包提供了全面的学习资源，包括案例、笔记、PPT和作业，帮助初学者深入理解Vue的核心概念。 首先，让我们来看看"day03_Vue01-基础语法3.ppt...
Vue基础day4学习资料.zip
03-31
在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是Vue全家桶（包括Vuex状态管理、Vue Router路由管理等）的基础内容。 首先，"day04_Vue01-基础语法3.ppt"很可能包含了...
Android基于Java开发 | 1.计算器布局
weixin_50967737的博客
02-26 992
基于Java的Android开发，以实现计算器为目标，本文仅以计算器布局为主要内容
网格布局（计算器界面设计）
wyb_hardworking的专栏
04-29 4370
最终
学会使用Android Studio网格布局制作计算器界面
RainBow_xiy的博客
11-13 5961
一、网格布局的介绍 1.1GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。 1.2可以自己设置布局中组件的排列方式 1.3可以自定义网格布局有多少行、多少列 1.4可以直接设置组件位于某行某列 1.5可以设置组件横跨几行或者几列
安卓案例：网格布局实现计算器界面
howard2005的专栏
03-06 4464
安卓案例：网格布局实现计算器界面 一、网格布局（GridLayout） GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。 （一）继承关系图 （二）常用属性 1、针对布局的属性 （1）rowCount：行数 （2）columnCount：列数 2、针对子控件的属性 （1）layout_row：子控件在布...
AndroidStudio网格布局（制作计算机界面）
hollow_future的博客
10-25 3983
1.GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。以此类推到第四行，第五行与前面类似不过应为最后一个等号按钮要和并行所以有一点差别。添加显示运算结果的标签，并设置相关属性。添加第二行按钮改变layout_row。3.可以自定义网格布局有多少行、多少列。2.可以自己设置布局中组件的排列方式。添加一个网格布局，设置为6行5列。4.可以直接设置组件位于某行某列。5.可以设置组件横跨几行或者几列。添加第一行的五个按钮。
IDEA Android 网格布局(GridLayout）示例(计算器界面布局)
wh445306
03-03 1936
GridLayout(网格布局)和TableLayout（表格布局）有类似的地方，通俗来讲可以理解为网格布局是表格布局的升级版，这样容易理解。android:layout_gravity : 设置对齐方式，left ，right，center，buttom，也可以同时使用俩个，比如：top | left。android:columnCount=”5”//设置网格布局有5列。android:layout_row =”2”//设置组件位于第3行。android:rowCount=”5”//设置网格布局有5行。
Android Studio实现简单的计算器
热门推荐
振华OPPO的博客世界
06-07 1万+
本次项目主要实现了简单的计算器功能，包括加减乘除基本运算，还有小数点和清零功能。可以算得上是很好的Android界面和按钮点击事件学习实例。刚用模拟器显示hello world的同学或者完全没有接触过Android的同学都可以直接上手。
【PyQt4】学习2 之-BoxLayout布局、网格GridLayout布局，实现计算器界面设计
钱多多先森
07-28 2753
如题，采用计算器的案例，帮助我们对视图的排列产生直观的印象
Android笔记07-常用布局属性
sukii_的博客
08-09 144
Android笔记07-常用布局属性 概述：关于margin啊align啊padding啊之类属性的区分。顺带复习一下五大类布局。 RelativeLayout—相对布局 这种布局就是要确定参考点，然后其他组件相对此参考点摆放 gravity属性：可以设置组件居中、靠左、靠右 ignore_gravity属性：可以设置不受某组件影响 LinearLayout—线性布局 orientation属性：设置垂直（vertical）和水平（horizontal）布局，必要 layout_weight属性：设置不同
[+ashin+@+mayday+she+]$+ifconfig+ens33|+grep+-+w+inetitr+-+d+"[+a+-+zA+-2]"+Itr+-+s+""+Icut+-+d+""-f
最新发布
03-08
1. 打开终端或命令行界面。 2. 输入命令`ifconfig`，它会显示所有网络接口的详细信息。 3. 在`ifconfig`的输出中，找到你感兴趣的网络接口，比如`ens33`。 4. 使用管道符号`|`将命令输出传递给下一个命令。 5. 输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小鲁不吃猪蹄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值