AndroidStudio网格布局（制作计算机界面）

news2025/1/24 22:48:03

目录

网格布局特点（类似于表格）

常用属性：

针对布局的属性

针对子控件的属性

实例演示

创建一个安卓应用插入一张背景图片（可以不加）

 打开字符串资源文件  strings.xml改应用标题名字（可不改）

 drawable目录里添加custom_border.xml

 ​编辑 具体代码：

 具体代码

网格布局特点（类似于表格）

1.GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。

2.可以自己设置布局中组件的排列方式

3.可以自定义网格布局有多少行、多少列

4.可以直接设置组件位于某行某列

5.可以设置组件横跨几行或者几列

使用GridLayout类是ViewGroup子类

常用属性：

针对布局的属性

属性含义
rowCount行数
columnCount列数
layout_width布局宽度
layout_height布局高度

针对子控件的属性

属性含义
layout_row子控件在布局的行数
layout_column子控件在布局的列数
layout_rowSpan跨行数
layout_columnSpan跨列数

实例演示

创建一个安卓应用插入一张背景图片（可以不加）

 打开字符串资源文件  strings.xml改应用标题名字（可不改）

 

 drawable目录里添加custom_border.xml

  具体代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="5dp"/>
    <stroke android:width="1dp"
        android:color="#555555"/>
    <padding android:bottom="10dp"
        android:top="10dp"
        android:right="10dp"
        android:left="10dp"/>
    <gradient
        android:endColor="#eeeeee"
        android:startColor="#aaaaaa"/>


</shape>

打开主布局资源文件 activity_main.xml把她的布局改为线性布局并添加修改一些属性

 添加显示运算结果的标签，并设置相关属性

 运行结果

 添加一个网格布局，设置为6行5列

 添加第一行的五个按钮

 查看结果

 添加第二行按钮改变layout_row

 以此类推到第四行，第五行与前面类似不过应为最后一个等号按钮要和并行所以有一点差别

 运行结果为：

 第六行也有一个合并两列的具体改动为：

 最后运行结果为：

 具体代码

<?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="@drawable/img01"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:padding="15dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_border"
        android:text="0123456789"
        android:gravity="right"
        android:textColor="#0000ff"
        android:layout_marginTop="30dp"
        android:textSize="20sp"/>
    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:columnCount="5"
        android:rowCount="6">
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="0"
            android:text="MC"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="1"
            android:text="MR"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="2"
            android:text="MS"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="3"
            android:text="M+"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="4"
            android:text="M-"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <!--...................................-->

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="0"
            android:text="←"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="1"
            android:text="CE"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="2"
            android:text="C"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="3"
            android:text="±"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="4"
            android:text="√"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <!--...................................-->

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="0"
            android:text="7"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="1"
            android:text="8"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="2"
            android:text="9"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="3"
            android:text="/"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="4"
            android:text="%"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <!--...................................-->

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="0"
            android:text="4"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="1"
            android:text="5"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="2"
            android:text="6"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="3"
            android:text="*"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="4"
            android:text="1/x"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <!--...................................-->

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="0"
            android:text="1"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="1"
            android:text="2"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="2"
            android:text="3"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="3"
            android:text="-"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="97dp"
            android:layout_row="4"
            android:layout_column="4"
            android:text="="
            android:layout_marginRight="5dp"
            android:layout_rowSpan="2"
            android:textSize="15sp"/>

        <!--...................................-->

        <Button
            android:layout_width="140dp"
            android:layout_height="wrap_content"
            android:layout_row="5"
            android:layout_column="0"
            android:layout_columnSpan="2"
            android:text="0"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="5"
            android:layout_column="2"
            android:text="."
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>
        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:layout_row="5"
            android:layout_column="3"
            android:text="+"
            android:layout_marginRight="5dp"
            android:textSize="15sp"/>


    </GridLayout>



</LinearLayout>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407853.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp微信公众号h5微信授权登录

uniapp微信公众号h5微信授权登录

前言 在微信客户端中访问第三方网页&#xff0c;公众号可通过微信网页授权机制&#xff0c;来获取用户基本信息&#xff0c;进而实现业务逻辑。 关于公众号网页授权前期准备&#xff1a; 1.微信公众号开发&#xff0c;首先要搞一个公众号&#xff0c;开发阶段可以申请一个公众…
阅读更多...
element ui+vue实现导航栏菜单以及页面跳转

element ui+vue实现导航栏菜单以及页面跳转

关于博主&#xff1a; 不知道算不算的上入门&#xff0c;就是刚刚学习vue框架&#xff0c;断断续续的学习&#xff0c;所以有些地方讲的不正确也欢迎大家批评斧正&#xff0c;希望与大家共同进步 问题描述 对于初学前端的我们来说搭建一个路由导航界面还是比较困难的&#xf…
阅读更多...
Web基础知识

Web基础知识

1&#xff0c;Web基本概念和常识 ①web应用&#xff1a;网站&#xff08;广义上的PC&#xff0c;手机app&#xff09; ②浏览器&#xff08;Browser&#xff09;&#xff1a;也称用户代理&#xff0c;web客户端&#xff0c;主要有IE、Edge、Chrome、Firefox、腾讯浏览器&#x…
阅读更多...
nvm 安装使用及配置淘宝下载镜像

nvm 安装使用及配置淘宝下载镜像

NVM介绍 NVM全称node.js version management &#xff0c;专门针对node版本进行管理的工具&#xff0c;通过它可以安装和切换不同版本的node.js。 MVM下载 githhub下载地址&#xff0c;选择nvm-setup.zip&#xff1a;安装版&#xff0c;推荐使用 https://github.com/coreyb…
阅读更多...
Antv X6 动态连线

Antv X6 动态连线

这是我实际开发项目中&#xff0c;利用 X6 开发的一个关系图。具备连线功能。这里我尽可能全的记录整个开发思路和部分编码&#xff0c;如果你也用了 X6 希望对你有帮助。 创建画布 代码有删减&#xff0c;以下展示的代码全都有删减 index.vue <template><div id&q…
阅读更多...
React组件化的额外知识补充

React组件化的额外知识补充

文章目录React的额外补充Portals的使用Fragment的使用严格模式StrictModeReact的额外补充 Portals的使用 某些情况下&#xff0c;我们希望渲染的内容独立于父组件&#xff0c;甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM 元素上的)。 Portal 提供了一种…
阅读更多...
【vue】 vue-router安装和配置方法

【vue】 vue-router安装和配置方法

vue-router 是 vue.js 官方的路由插件&#xff0c;里面组件和 URL 的映射关系由 vue-route 帮我们管理。 在 vue-router 的单页面应用中&#xff0c;页面的路径的改变就是组件的切换。 第一步&#xff1a; 1.正常初始化项目的时候&#xff0c;会有个 vue-router 供我们选择。…
阅读更多...
在VSCode中配置代码自动 eslint 格式化（修改eslint规则、eslint忽略文件）

在VSCode中配置代码自动 eslint 格式化（修改eslint规则、eslint忽略文件）

一、Eslint Eslint 是用来检测和规范代码格式的工具&#xff0c;应用在工程化项目中&#xff0c;可以保证项目代码格式的一致性和规范性&#xff0c;大大提升了代码的可读性。 二、配置过程 本博客是讲述对一个已经引用 eslint 依赖Nuxt项目&#xff08;vue项目应该相同&…
阅读更多...
vue-cli脚手架的下载安装(靠谱)

vue-cli脚手架的下载安装(靠谱)

找了半天才找到一个靠谱的安装教程&#xff0c;分享给你们。 1. 先下载node.js&#xff0c;下载地址&#xff1a;Download | Node.jsNode.js is a JavaScript runtime built on Chromes V8 JavaScript engine.https://nodejs.org/en/download/直接进入下载电脑对应的版本&…
阅读更多...
vue-cli创建vue项目详细步骤

vue-cli创建vue项目详细步骤

一、安装node环境&#xff08;建议使用LTS&#xff09; Download | Node.js 二、下载vue和vue-cli脚手架 命令&#xff1a;npm i -g vue ; npm i -g vue/cli 三、在想要创建的位置路径下打开cmd&#xff08;直接点击路径输入cmd即可打开当前位置的终端&#xff09; 四、创建v…
阅读更多...
Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)

Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)

前言 本次用element-ui的table组件&#xff0c;简单案例演示下前后端数据交互。 前提声明&#xff1a;如果不知道如何在vue中引入element-ui&#xff0c;可以先看下这篇文章:Vue引入并使用Element-UI组件库的两种方式 静态页面 首先先写一个静态页面吧&#xff0c;数据都是…
阅读更多...
Vue3的vue-router路由详解

Vue3的vue-router路由详解

这篇文章是接着【三分钟快速搭建Vue3webpack项目】的内容做的开发&#xff0c;有基础的可以跳过 【三分钟快速搭建Vue3webpack项目】&#xff0c;直接看以下的内容。 Vue3的vue-router路由详解&#xff1a; 首先安装路由依赖模块&#xff1a; npm install vue-router4 所需…
阅读更多...
618快到了送上自制前端小项目（html css js）

618快到了送上自制前端小项目（html css js）

目录 &#x1f6a9;.自定义播放器 &#x1f3e0;.图片自动消失 ✨.小轮播图 &#x1f383;.旋转音乐盒 前言&#xff1a;这些小项目全都是自创的。 如果需要应用&#xff0c;或则转发的话请与 博主联系&#xff0c;感谢你们的理解&#xff0c; 1.自定义播放器 在页面中放置…
阅读更多...
云化Web IDE,在线开发新模式

云化Web IDE,在线开发新模式

目录 前言 一、初识云IDE 二、CSDN 云IDE 1、如何使用云IDE 2、使用云IDE 三、云IDE的使用感受 四、总结 前言 工欲善其事必先利其器&#xff0c;作为程序员&#xff0c;我们在编写代码的时候&#xff0c;一定会选用一款得心应手的工具。就像行走江湖的侠客&#xff0c;手…
阅读更多...
vue项目打包优化的方法

vue项目打包优化的方法

1.按需加载第三方库 例如 ElementUI、lodash 等 a, 装包 npm install babel-plugin-component -D b, babel.config.js module.exports {"presets": ["vue/cli-plugin-babel/preset"],"plugins": [["component",{"libraryNa…
阅读更多...
uniapp中的分享功能实现(APP,小程序，公众号)

uniapp中的分享功能实现(APP,小程序，公众号)

uniapp中的分享功能实现(APP,小程序&#xff0c;公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share&#xff0c;uni-app的App引擎已经封装了微信、QQ、微博的分享SDK&#xff0c;开发者可以直接调用相关功能。可以分享到微信、QQ、微博&#xff0c;每个…
阅读更多...
【Web前端】一文带你吃透CSS(上篇)

【Web前端】一文带你吃透CSS(上篇)

前端学习路线小总结： 基础入门：HTML CSS JavaScript三大主流框架：VUE REACT Angular深入学习：小程序 Node jQuery TypeScript 前端工程化一起学习CSS吧! 一.CSS简介1.什么是CSS？二.CSS语法1.语法规则2.注释三.CSS选择器
阅读更多...
Vue打包后加载太慢，访问时间太久，记录项目的整个优化过程

Vue打包后加载太慢，访问时间太久，记录项目的整个优化过程

问题背景 最近在做一个Vue项目时&#xff0c;在打包上线的时候发现项目部署完第一次访问时间特别慢&#xff0c;整个登录页面加载用了8-10秒&#xff0c;很明显这个速度达不到项目上线的要求&#xff0c;于是开始了对项目打包之后增快加载速度的研究。 未优化前的项目加载时间…
阅读更多...
Vue3 响应式原理

Vue3 响应式原理

响应式原理 Vue2 使用的是 Object.defineProperty Vue3 使用的是 Proxy 2.0的不足 对象只能劫持 设置好的数据&#xff0c;新增的数据需要Vue.Set(xxx) 数组只能操作七种方法&#xff0c;修改某一项值无法劫持。 reactive和effect的实现 export const reactive <T e…
阅读更多...
Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.

Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.

报错信息 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 您正在使用Vue的仅运行时版本，并而模板编译器不可用。 可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023