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

目录

​编辑

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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

05【保姆级】-GO语言的标识符

之前我学过C、Java、Python语言时总结的经验&#xff1a; 先建立整体框架&#xff0c;然后再去抠细节。先Know how&#xff0c;然后know why。先做出来&#xff0c;然后再去一点点研究&#xff0c;才会事半功倍。适当的囫囵吞枣。因为死抠某个知识点很浪费时间的。对于GO语言&a…

Android 10.0 系统默认打开OEM解锁开关功能实现

1.前言 在10.0的系统定制中,在9.0系统以后为了设备的安装,系统开始启用oem机制,所以在adb push文件就需要先oem解锁,然后才可以 进行相关操作,所以就需要默认打开oem解锁的开关,来方便oem解锁功能的实现 如图: 2.系统默认打开OEM解锁开关功能实现的核心类 packages\ap…

初步了解 RabbitMQ

目录 ​编辑一、MQ 概述 1、MQ 的简介 2、MQ 的用途 &#xff08;1&#xff09;限流削峰 &#xff08;2&#xff09;异步解耦 (3)数据收集 二、RabbitMQ 概述 1、RabbitMQ 简介 2、四大核心概念 3、RabbitMQ 的核心部分 ​编辑 4、名词解释&#xff1a; 三、Hello …

ESP32 C3 smartconfig一键配网报错

AP配网 在调试我的esp32c3的智能配网过程中&#xff0c;发现ap配网使用云智能App是可以正常配置的。 切记用户如果在menu菜单里使能AP配网&#xff0c;默认SSID名字为adh_PK值_MAC后6位。用户可以修改这个apssid的键值&#xff0c;但是要使用云智能app则这个名字的开头必须为ad…

香港金融科技周VERTU CSO Sophie谈Web3.0的下一个风口 手机虚拟货币移动支付

10月31日&#xff0c;香港金融科技周正式拉开帷幕。这项香港金融科技界地年度盛事今年已经踏入了第八届&#xff0c;本届活动吸引超过数百位金融科技专业人士、创业者和行业领袖现场参与&#xff0c;线上参与观众超过10万人次。 在金融科技周的圆桌会议上&#xff0c;VERTU首席…

Java-继承

1 继承 1.1 为什么需要继承 Java中使用类对现实世界中实体来进行描述&#xff0c;类经过实例化之后的产物对象&#xff0c;则可以用来表示现实中的实体&#xff0c;但是现实世界错综复杂&#xff0c;事物之间可能会存在一些关联&#xff0c;那在设计程序是就需要考虑。 以下…

Vulnhub靶场之Funbox

正如该靶场的描述所说&#xff0c;它对初学者来说非常简单。 项目地址&#xff1a;Funbox: Scriptkiddie ~ VulnHub 所需工具&#xff1a; KaliLinux即可。 0x00 信息收集 打开虚拟机后使用nmap扫描一下网段存活&#xff0c;这里我给的虚拟机的范围是100-253,其中kali的IP是10…

Git 安全警告修复手册:解决 `fatal: detected dubious ownership in repository at ` 问题 ️

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

postman接口测试

postman使用 开发中经常用postman来测试接口&#xff0c;一个简单的注册接口用postman测试&#xff1a; 接口正常工作只是最基本的要求&#xff0c;经常要评估接口性能&#xff0c;进行压力测试。 postman进行简单压力测试 下面是压测数据源&#xff0c;支持json和csv两个格式…

论文阅读——变化检测

Viewpoint Integration and Registration with Vision Language Foundation Model for Image Change Understanding 只有fused adapter image encoder, viewpoint registration flow, semantic emphasizing module, 和 fully connected layer 训练&#xff0c;其他参数冻结。 F…

Linux内核有什么之内存管理子系统有什么第三回 —— 小内存分配(1)

接前一篇文章&#xff1a;Linux内核有什么之内存管理子系统有什么第二回 —— 单刀直入 本文内容参考&#xff1a; 内存分配不再神秘&#xff1a;深入剖析malloc函数实现原理与机制 系统调用与内存管理&#xff08;sbrk、brk、mmap、munmap&#xff09; 特此致谢&#xff01;…

CCF ChinaSoft 2023 论坛巡礼 | NASAC青年软件创新奖论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…

RabbitMQ 死信队列

在MQ中&#xff0c;当消息成为死信&#xff08;Dead message&#xff09;后&#xff0c;消息中间件可以将其从当前队列发送到另一个队列中&#xff0c;这个队列就是死信队列。而在RabbitMQ中&#xff0c;由于有交换机的概念&#xff0c;实际是将死信发送给了死信交换机&#xf…

策略模式(Stragedy)

简介 策略模式将策略&#xff08;方法&#xff09;与实体类相分离&#xff0c;使用聚合/组合替代继承。 思想&#xff1a;少用耦合性高的继承&#xff0c;尽量用聚合/组合来代替。 优点&#xff1a;将策略独立于实体类&#xff0c;策略的实现更加灵活&#xff0c;易于理解扩展…

从TCP到Socket,彻底理解网络编程是怎么回事

进行程序开发的同学&#xff0c;无论Web前端开发、Web后端开发&#xff0c;还是搜索引擎和大数据&#xff0c;几乎所有的开发领域都会涉及到网络编程。比如我们进行Web服务端开发&#xff0c;除了Web协议本身依赖网络外&#xff0c;通常还需要连接数据库&#xff0c;而数据库连…

20231108在Ubuntu22.04下编译安装cmake-3.27.7.tar.gz

20231108在Ubuntu22.04下编译安装cmake-3.27.7.tar.gz 2023/11/8 17:28 缘起&#xff0c;编译cv180zb的时候提示说cmake的版本低&#xff01; OBJCOPY platform/generic/firmware/payloads/test.bin OBJCOPY platform/generic/firmware/fw_dynamic.bin OBJCOPY platfor…

ts面试题总结

文章目录 前言ts和js的区别&#xff1f;什么是Typescript的方法重载&#xff1f;Typescript中never 和 void 的区别&#xff1f;typescript 中的 is 关键字有什么用&#xff1f;TypeScript支持的访问修饰符有哪些&#xff1f;如何定义一个数组&#xff0c;它的元素可能是字符串…

数据中台之数据分析

效果界面 技术方案 Notebook集成 在您的数据平台上,创建一个能够与Jupyter Notebook通讯的服务。通过Jupyter Notebook的HTTP API与Notebook实例进行交互,执行代码、获取输出等。用户界面 在数据开发/数据分析的代码框右上方,添加一个机器人样式的图标,用户点击后可以调起…

RISC Zero的Bonsai证明服务

1. 引言 Bonsai为通用ZKP网络&#xff0c;其支持任意链、任意协议、以及任意应用&#xff0c;利用ZKP来扩容、隐私和互操作。Bonsai的目标是为每条链都提供无限计算的能力。 借助Bonsai&#xff0c;可仅需数天的开发&#xff0c;即可实现对以太坊、L1链、Cosmos app链、L2 ro…

VMware网络设置 桥接模式 NAT VMNET0 1 8

1.桥接模式 虚拟机与主机并列 可拥有独立IP 主机与虚拟机之间&#xff0c;以及各虚拟机之间都可以互访。对应虚拟机就被当成主机所在以太网上的一个独立物理机来看待&#xff0c;各虚拟机通过默认的 VMnet0 网卡与主机以太网连接&#xff0c;虚拟机间的虚拟网络为 VMnet0。这…