Android UI 开发·界面布局开发·案例分析

news2024/12/26 3:50:31

目录

​编辑

1.  线性布局（LinearLayout）

2.  相对布局（RelativeLayout）

3.  表格布局（TableLayout）

4.  帧布局（FrameLayout）

5.  网格布局（GridLayout）

6.  绝对布局（AbsoluteLayout）

补充内容：关于selector状态选择器

1.  线性布局（LinearLayout）

        LinearLayout线性布局是一种最简单的布局方式，它有垂直和水平两种布局方向，使用“android:orientation="vertical"”属性设置可以指定布局方式为垂直，使用“android:orientation= "horizontal"”属性设置可以指定布局方式为水平。

        下面我们将通过一个案例了解LinearLayout这种布局方式。

<?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:orientation="vertical" >
	<!-- 第一个内嵌布局为相对布局 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:background="@android:color/white" >
    </RelativeLayout>

<!-- 第二个内嵌布局为相对布局 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/black" >
    </RelativeLayout>
</LinearLayout>

LinearLayout有两个非常相似的属性： android:gravity和android:layout_ gravity。

        它们都是用来设置对齐方式的，可选值包括left（左对齐）、right（右对齐）、top（上对齐）、bottom（下对齐）、center（居中）、center_horizontal（水平居中）和center_vertical（垂直居中）等，这些值还可以组合使用，中间用“|”分开。

android:gravity和android:layout_gravity的区别在于：

（1）android:gravity：用于设置该View内部内容的对齐方式。

（2）android:layout_gravity：用于设置该View在其父View中的对齐方式。

2.  相对布局（RelativeLayout）

        相对布局中的视图组件是按相互之间的相对位置来确定的，并不是线性布局中的必须按行或按列单个显示，在此布局中的子元素里与位置相关的属性将生效。

        例如“android：layout_below”、“android:layout_above”等。注意在指定位置关系时，引用的ID必须在引用之前，先被定义，否则将出现异常。RelativeLayout是Android布局结构中最灵活的一种布局结构，比较适合一些复杂界面的布局。

<?xml version="1.0" encoding="utf-8"?>
<!-- 最外面的布局文件为相对布局，控件纵向摆放 -->
<RelativeLayout 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" >
 
    <!-- 定义一个EditText，用来接收用户输入 -->
    <EditText
        android:id="@+id/et"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:inputType="text" />

<!-- 定义一个TextView，用来显示文本信息 -->
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@+id/et"/>
 
    <!-- 定义一个Button，用来响应用户点击 -->
    <Button
        android:id="@+id/bt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv"
        android:layout_toRightOf="@+id/et"
        android:text="确认" />
<!-- 定义一个Button，用来响应用户点击 -->
    <Button
        android:id="@+id/bt_clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/bt_ok"
        android:layout_toRightOf="@+id/bt_ok"
        android:layout_marginLeft="25dp"
        android:text="清除" />
</RelativeLayout>

/* 复写监听器对象的onClick方法，完成点击后的事件处理，参数为被点击的按钮 */
	@Override
	public void onClick(View v) {
		//根据按钮控件的id区分不同按钮的点击
		switch (v.getId()) {
		case R.id.bt_ok:
			//获取界面控件EditText的输入内容
			String _Text = mEditText.getText().toString();
			//给界面控件TextView的文本设置为输入内容
			mTextView.setText(_Text);
			break;
		case R.id.bt_clear:
			//清空界面控件EditText的文本输入内容
			mEditText.setText("");
			break;
		}
	}
}

3.  表格布局（TableLayout）

        TableLayout属于行和列形式的管理控件，适用于多行多列的布局格式，每行为一个TableRow对象，也可以是一个View对象。在TableRow中还可以继续添加其他的控件，每添加一个子控件就成为一列。TableLayout不会生成边框。

        表格布局的风格跟HTML中的表格比较接近，只是所采用的标签不同。<TableLayout> 是顶级元素，说明采用的是表格布局，<TableRow>定义一个行，而具体控件则定义一个单元格的内容。

<?xml version="1.0" encoding="utf-8"?>
<!-- 最外面的布局文件为表格布局 -->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="0,1,2,3" >

<!-- 表格布局中第一行TableRow -->
    <TableRow>
	<!-- 第一行的第一列控件TextView -->
        <TextView
            android:gravity="center"
            android:padding="3dip"
            android:text="姓名" />
		<!-- 第一行的第二列控件TextView -->
        <TextView
            android:gravity="center"
            android:padding="3dip"
            android:text="性别" />
		<!-- 第一行的第三列控件TextView -->
        <TextView
            android:gravity="center"
            android:padding="3dip"
            android:text="年龄" />
<!-- 第一行的第四列控件TextView -->
        <TextView
            android:gravity="center"
            android:padding="3dip"
            android:text="电话" />
    </TableRow>
<!-- 表格布局中第二行TableRow -->
    <TableRow>
	<!-- 第二行的第一列控件TextView -->
        <TextView
            android:gravity="center"
            android:padding="3dip"
            android:text="小明" />
	<!-- 第二行的第二列控件TextView -->
        ......
    </TableRow>
<!-- 表格布局中第三行TableRow -->
    <TableRow>
	<!-- 第三行的第一列控件TextView -->
        <TextView
            android:gravity="center"
            android:padding="3dip"
            android:text="小王" />
	<!-- 第三行的第二列控件TextView -->
         ......
    </TableRow>
</TableLayout>

4.  帧布局（FrameLayout）

        帧布局中的每一个组件都代表一个画面，默认以屏幕左上角作为（0, 0）坐标，按组件定义的先后顺序依次逐屏显示，后面出现的会覆盖前面的画面。用该布局可以实现动画效果。

<?xml version="1.0" encoding="utf-8"?>
<!-- 最外面的布局文件为帧布局 -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height=“wrap_content” >
	<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A Text" >
    </TextView>
	<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A Button" >
    </Button>
</FrameLayout>

5.  网格布局（GridLayout）

        GridLayout提供了一种新的布局方式，它可以将子视图放入到一个矩形网格中。GridLayout有以下两个构造函数：

（1）public GridLayout() 建立一个默认的GridLayout布局；

（2）public GridLayout(int numColumns,  boolean makeColumnsEqualWidth)

        建立一个GridLayout布局，拥有numColumns列。如果makeColumnsEqualWidth为true，则全部组件将拥有相同的宽度。

        GridLayout中的元素一般不采用layout_width和layout_height来界定大小，而是采用“layout_gravity=" fill_horizontal"”或”fill_vertical”，并配合GridLayout的“android:orientation”属性来定义它里面的视图元素的大小。默认情况下，它里面的元素大小为“wrap_content”。

        GridLayout中的“android:orientation”属性，决定了其中的视图元素的摆放方式，如果为“vertical”，则先摆第一列，然后第二列，以此类推；如果为“horizontal”，则先摆第一行，然后第二行，以此类推。

<?xml version="1.0" encoding="utf-8"?>  
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:rowCount="5"                                                  
    android:columnCount="4">                                             
   	 <Button
	   android:id="@+id/one"
	   android:text="1" />
　　<Button  
        android:id="@+id/two"  
        android:text="2"/>  
　　<Button  
        android:id="@+id/three"  
        android:text="3"/>  
<Button  
        android:id="@+id/devide"  
        android:text="/"/> 
	 <Button  
        android:id="@+id/four"  
        android:text="4"/>  
　　<Button  
        android:id="@+id/five"  
        android:text="5"/>  
　　<Button  
        android:id="@+id/six"  
        android:text="6"/>  
　　<Button  
        android:id="@+id/multiply"  
        android:text="×"/>
 <Button  
        android:id="@+id/seven"  
        android:text="7"/>  
　　<Button  
        android:id="@+id/eight"  
        android:text="8"/>  
　　<Button  
        android:id="@+id/nine"  
        android:text="9"/>  
    <Button  
        android:id="@+id/minus"  
        android:text="-"/> 
 	<Button  
        android:id="@+id/zero"  
        android:layout_columnSpan="2"  
        android:layout_gravity="fill"  
        android:text="0"/>  

<Button  
        android:id="@+id/point"  
        android:text="."/>  
    <Button  
        android:id="@+id/plus"  
        android:layout_rowSpan="2"  
        android:layout_gravity="fill"  
        android:text="+"/>  
    <Button  
        android:id="@+id/equal"  
        android:layout_columnSpan="3"  
        android:layout_gravity="fill"  
        android:text="="/>    
</GridLayout>

6.  绝对布局（AbsoluteLayout）

        AbsoluteLayout，又可以叫做坐标布局，是直接按照控件的横纵坐标在界面中进行布局。

        绝对布局使用“android:layout_x”属性来确定X坐标，以左上角为顶点。使用“android: layout_y”属性确定Y坐标，以左上角为顶点。在绝对定位中，如果子元素不设置layout_x和layout_y，那么它们的默认值是0，也就是说它会像在FrameLayout一样，这个元素会出现在屏幕的左上角。

补充内容：关于selector状态选择器

        selector状态选择器一般使用在各种操作状态下，主要体现在字体，背景的切换方面。

        以Xml方式写出状态选择器，然后将写好的selector存在放res - drawable 或 res - color 文件夹下，较为常用。

状态设置常用类型：

//设置是否按压状态，一般在true时设置该属性，表示已按压状态，默认为false

android:state_pressed

//设置是否选中状态，true表示已选中，false表示未选中

android:state_selected

//设置是否勾选状态，主要用于CheckBox和RadioButton，true表示已被勾选，false表示未被勾选

android:state_checked

//设置是否获得焦点状态，true表示获得焦点，默认为false，表示未获得焦点

android:state_focused

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/login_btn2" android:state_pressed="true"/>
    <item android:drawable="@drawable/login_btn1"/>
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/tb_on" /> <!-- pressed -->
    <item android:drawable="@drawable/tb_off" /> <!-- default/unchecked -->
</selector>

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

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

相关文章

AI：68-基于深度学习的身份证号码识别

AI：68-基于深度学习的身份证号码识别

🚀 本文选自专栏：AI领域专栏 从基础到实践，深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家，通过案例和项目实践，掌握核心概念和实用技能。每篇案例都包含代码实例，详细讲解供大家学习。 📌📌📌在这个漫长的过程，中途遇到了不少问题，但是…
阅读更多...
C语言编写一个程序采集招聘信息

C语言编写一个程序采集招聘信息

因为在这里无法详细解释每行代码和步骤。但是&#xff0c;我可以给大家一个使用Python和requests库编写的简单爬虫程序的例子&#xff0c;它可以从网站上获取招聘信息。你可以根据这个例子&#xff0c;将其改写为使用C语言编写的爬虫程序。 import requests# 指定爬虫IP信息 pr…
阅读更多...
二叉树的OJ题——C++

二叉树的OJ题——C++

一、根据二叉树创建字符串 题目链接&#xff1a; 606. 根据二叉树创建字符串 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 前序遍历二叉树&#xff0c;并且将结果存入到一个string中&#xff0c;并且要使用括号去分割和表示每个节点和子树之间的关系&…
阅读更多...
大漠插件（二、Qt使用插件时注意事项）

大漠插件（二、Qt使用插件时注意事项）

本章目的 在上篇已经注册完毕大漠&#xff0c;那么怎么使用大漠来制作脚本&#xff0c;我选择了我最熟悉的Qt来开发&#xff0c;毕竟只是小软件&#xff0c;用脚本或者c都差不了多少。本章就是开发途中的一些坑。 本人开发环境是 win11 64、Qt 5.15.2安装了5.10.0的msvc2015 32…
阅读更多...
接口测试工具的实验，Postman、Swagger、knife4j（黑马头条）

接口测试工具的实验，Postman、Swagger、knife4j（黑马头条）

一、Postman 最常用的接口测试软件&#xff0c;需要注意点&#xff1a;在进行post请求时&#xff0c;需要选择JSON形式发送 输入JSON字符串&#xff0c;比如&#xff1a; {"maxBehotTime": "2021-04-19 00:19:09","minBehotTime": "2021-…
阅读更多...
支持存档的书签服务LinkWarden

支持存档的书签服务LinkWarden

什么是 LinkWarden &#xff1f; Linkwarden 是一个自托管、开源协作书签管理器&#xff0c;用于收集、组织和存档网页。目标是将您在网络上找到的有用网页和文章组织到一个地方&#xff0c;并且由于有用的网页可能会消失&#xff08;参见链接失效的必然性&#xff09;&#xf…
阅读更多...
读者自荐的 4 个 GitHub 项目

读者自荐的 4 个 GitHub 项目

本期推荐的 4 个开源项目&#xff0c;为读者在开源项目 Awesome-GitHub-Repo 的评论区自推的, 如果你开源了不错的项目&#xff0c;想让大家看到&#xff0c;也可以去 Awesome-GitHub-Repo 进行投稿。 本期推荐开源项目目录&#xff1a; 1. DB-GPT 2. 定制中国传统节日头像 3. …
阅读更多...
闪客网盘系统源码，已测试对接腾讯COS及本地和支付（支持限速+按时收费+文件分享+可对接易支付）- 修复版

闪客网盘系统源码，已测试对接腾讯COS及本地和支付（支持限速+按时收费+文件分享+可对接易支付）- 修复版

正文概述 资源入口 支持对文件下载限速 对接易支付 推广赚钱啥的功能 源码非常的好 支持腾讯cos 阿里云cos 本地储存 远程存储 源码仅支持服务器搭建 php7.2 伪静态thinkphp 运行目录public 导入数据库 修改config目录下的database.php数据库信息 后台地址&#xff1a; 域名/ad…
阅读更多...
参考文献管理软件 EndNote 21 mac v21.2中文版特点和功能

参考文献管理软件 EndNote 21 mac v21.2中文版特点和功能

EndNoter mac是一款参考文献管理软件&#xff0c;旨在帮助学术研究者、学生和专业人士有效地管理和引用参考文献。该软件提供了许多功能&#xff0c;使用户可以轻松地组织、搜索和引用各种类型的文献。 EndNoter mac软件特点和功能 1. 参考文献管理&#xff1a;EndNoter允许用户…
阅读更多...
中小企业如何实现数字化转型发展？

中小企业如何实现数字化转型发展？

数字化转型已成为企业未来发展的必然趋势&#xff0c;行业头部企业在此过程中持续投入自动化、信息化及数字化技术。虽然大多数系统投入不能仅基于短期投资回报率决策&#xff0c;且资源投入大见效慢、失败率也高&#xff0c;但数字化转型是不可逆转的过程&#xff0c;未来生存…
阅读更多...
基于Skywalking的全链路跟踪实现

基于Skywalking的全链路跟踪实现

在前文“分布式应用全链路跟踪实现”中介绍了分布式应用全链路跟踪的几种实现方法&#xff0c;本文将重点介绍基于Skywalking的全链路实现&#xff0c;包括Skywalking的整体架构和基本概念原理、Skywalking环境部署、SpringBoot和Python集成Skywalking监控实现等。 1、Skywalki…
阅读更多...
代码随想录算法训练营第四十五天丨 动态规划part08

代码随想录算法训练营第四十五天丨 动态规划part08

139.单词拆分 思路 背包问题 单词就是物品&#xff0c;字符串s就是背包&#xff0c;单词能否组成字符串s&#xff0c;就是问物品能不能把背包装满。 拆分时可以重复使用字典中的单词&#xff0c;说明就是一个完全背包&#xff01; 动规五部曲分析如下&#xff1a; 确定dp…
阅读更多...
java网络通信：Springboot整合Websocket

java网络通信：Springboot整合Websocket

网络通信 什么是webSocket&#xff1f;WebSocket 原理springboot整合websocket过程 网络通信三要素&#xff1a;ip地址&#xff08;ipv4、ipv6&#xff09;、端口号&#xff08;应用程序的唯一标识&#xff09;、协议&#xff08;连接和通信的规则&#xff0c;常用&#xff1a;…
阅读更多...
9 网关的作用

9 网关的作用

1、总结&#xff1a; 1.如果离开本局域网&#xff0c;就需要经过网关&#xff0c;网关是路由器的一个网口。 2.路由器是一个三层设备&#xff0c;里面有如何寻找下一跳的规则 3.经过路由器之后 MAC 头要变&#xff0c;如果 IP 不变&#xff0c;相当于不换护照的欧洲旅游&#…
阅读更多...
Android：Type io.reactivex.android.R is defined multiple times

Android：Type io.reactivex.android.R is defined multiple times

项目直接运行没有问题&#xff0c;但是打正式包会报这个错误&#xff0c; 错误的重点是io.reactivex.android.R这个引用的包与项目中引用的包冲突&#xff0c; 需要改成相同的版本 即可
阅读更多...
Java中对象的比较：复写基类的equals+Comparble接口类的比较+比较器比较+PriorityQueue的比较+源码分析

Java中对象的比较：复写基类的equals+Comparble接口类的比较+比较器比较+PriorityQueue的比较+源码分析

文章目录 Java中对象的比较一、元素的比较二、对象的比较1.复写基类的equals2.基于Comparble接口类的比较3.基于比较器比较三种方法的对比 4. 集合框架中PriorityQueue的比较方式 Java中对象的比较 一、元素的比较 在Java中&#xff0c;基本类型的对象可以直接比较大小。 二、…
阅读更多...
哪款手机便签软件支持存储录音文件并支持转文字?

哪款手机便签软件支持存储录音文件并支持转文字?

手机便签类软件带有存储录音转文字功能是比较实用的&#xff0c;很多人通常会整理很多录音类型的文件&#xff0c;录音文件整合在一起后&#xff0c;后续有需要可以逐条点开播放收听。尤其是在工作中&#xff0c;当领导说一些重点时&#xff0c;大家无法借助灵活的大脑来成功的…
阅读更多...
第20章_Myisam与InnoDB

第20章_Myisam与InnoDB

文章目录 区别如何选择innodb额外补充知识innodb为什么推荐使用自增ID作为主键innodb引擎4大特性 区别 InnoDB支持事务&#xff0c;MyISAM不支持&#xff0c;对于InnoDB每一条SQL语言都默认封装成事务&#xff0c;自动提交&#xff0c;这样会影响速度&#xff0c;所以最好把多条…
阅读更多...
编写MBR主引导记录

编写MBR主引导记录

BIOS 检测&#xff0c;初始化硬件。挑一些重要的&#xff0c;能保证计算机能运行那些硬件的基本IO操作。 唤醒BIOS 唤醒BIOS需要知道其入口地址&#xff0c;在最后将跳转到0x7c00处 接电的一瞬间&#xff0c;cs:ip寄存器被初始化为0xF000:0xFFF0&#xff0c;所以等效地址是0…
阅读更多...
Mybatis-Plus前后端分离多表联查模糊查询分页

Mybatis-Plus前后端分离多表联查模糊查询分页

数据准备 数据库配置: /*Navicat Premium Data TransferSource Server : localhost_3306Source Server Type : MySQLSource Server Version : 80100 (8.1.0)Source Host : localhost:3306Source Schema : test01Target Server Type : MySQLT…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023