004 Android XML文件常用五大页面布局方式
1.线性布局（LinearLayout）最常用
<1>使用线性布局，首先在xml文件中修改布局为LinearLayout
修改完成后，可在Component Tree中看见如下内容：
<2>点击LinearLayout,可在右侧的Attributes(属性)中进一步设置是水平放置或者垂直放置
注意：每个控件的大小其实还是需要设置的，即需要设置布局高度(layout_width)和布局宽度(layout_height)，默认采用match_parent
<3>对齐方式设置：即可以在xml文件中输入
android:gravity="center" 设置该线性布局内的组件居中放置
<4> 控件属性设置（attribute）
Plain Test控件设置提示字符
方法：在Attributes中的hint中设置提示字符
<5>设置组件的大小为自适应大小
必须删除xml文件中组件属性里的 android:layout_weight="1"
<6>设置控件的对齐方式、边距
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center_horizontal"> <TextView
android:id="@+id/textView"
android:layout_marginLeft="80dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
(1)在父容器的线性布局中设置属性
android:gravity="center_horizontal"
使得，该线性布局内的所有组件全都水平居中。
(2)在子容器TextView中设置属性
android:layout_marginLeft="80dp"
使得，这个TextView组件在水平居中的基础上，向右移动的80dp（即左边距为80dp）
<7>设置字体的大小、颜色
<TextView
android:id="@+id/tv_login"
android:layout_marginLeft="80dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#044BA3"
android:textSize="20dp"
android:text="TextView" />
(1)在组件中添加
android:textColor="#044BA3"
设置字体的颜色。
(2)在组件中添加
android:textSize="20dp"
设置字体的大小。
<8>设置控件的id
<TextView
android:id="@+id/tv_login"
android:layout_marginLeft="80dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
注意：设置组件的id的命名方法为提取组件的两个驼峰+组件实际功能(例如：TextView---> 变为tv_login)
2.表格布局(TableLayout)
注意：表格布局不推荐使用。
<1>使用表格布局，首先在xml文件中修改布局为TableLayout
<2>外部图片导入工程后的存放位置
任选project 工程名-->app-->src-->main下的一个文件夹
<3>app设置背景图片
在xml文件中输入 android:background="@mipmap/background"
<4>图片组件
palatte-->widgets--->imageview
多个图片设置对齐方式
选择父容器，选择对齐方式(orientation、gratity)
TableLayout布局使用案例(test02)：
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/background"
tools:context=".MainActivity"> <TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@mipmap/blockbg_big"
android:gravity="center"
android:orientation="horizontal"> <TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2019/3/2" />
</LinearLayout> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@mipmap/blockbg_big"
android:gravity="center"
android:orientation="horizontal"> <ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/img01" /> <ImageView
android:id="@+id/imageView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/img07" /> <ImageView
android:id="@+id/imageView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/img06" /> </LinearLayout>
</TableRow> <TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@mipmap/blockbg_big"
android:orientation="horizontal"> <ImageView
android:id="@+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/img05" /> <ImageView
android:id="@+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/img03a" /> <ImageView
android:id="@+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/img02" />
</LinearLayout> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@mipmap/blockbg_big"
android:orientation="horizontal"> <ImageView
android:id="@+id/imageView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/img07" /> <ImageView
android:id="@+id/imageView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/ic_launcher" /> <ImageView
android:id="@+id/imageView10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/img03a" />
</LinearLayout>
</TableRow> <TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="@mipmap/blockbg_big"
android:orientation="horizontal"> <ImageView
android:id="@+id/imageView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@mipmap/email" />
</LinearLayout>
</TableRow>
</TableLayout>
效果图为：
3 约束布局（ConstraintLayout）
<1>图片组件(imageview)分别与约束布局的父容器的上下左右对齐
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
<2>imageview 组件与imageview 组件可以在design中采用拖拽的方式使其对齐(注意：下图的连线方式)
注意：约束布局(ConstraintLayout)最大的特点是可以以拖拽的方式固定组件的位置
案例：test03
4 相对布局(RelativeLayout) 常用
下面是RelativeLayout各个属性 android:layout_above="@id/xxx" --将控件置于给定ID控件之上 android:layout_below="@id/xxx" --将控件置于给定ID控件之下 android:layout_toLeftOf="@id/xxx" --将控件的右边缘和给定ID控件的左边缘对齐 android:layout_toRightOf="@id/xxx" --将控件的左边缘和给定ID控件的右边缘对齐 android:layout_alignLeft="@id/xxx" --将控件的左边缘和给定ID控件的左边缘对齐 android:layout_alignTop="@id/xxx" --将控件的上边缘和给定ID控件的上边缘对齐 android:layout_alignRight="@id/xxx" --将控件的右边缘和给定ID控件的右边缘对齐 android:layout_alignBottom="@id/xxx" --将控件的底边缘和给定ID控件的底边缘对齐 android:layout_alignParentLeft="true" --将控件的左边缘和父控件的左边缘对齐 android:layout_alignParentTop="true" --将控件的上边缘和父控件的上边缘对齐 android:layout_alignParentRight="true" --将控件的右边缘和父控件的右边缘对齐 android:layout_alignParentBottom="true" --将控件的底边缘和父控件的底边缘对齐 android:layout_centerInParent="true" --将控件置于父控件的中心位置 android:layout_centerHorizontal="true" --将控件置于水平方向的中心位置 android:layout_centerVertical="true" --将控件置于垂直方向的中心位置
(1)使用小案例：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".UserGuideActivity"> <Button
android:id="@+id/bt_userguide_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="60dp"
android:text="开始体验"/>
</RelativeLayout>
(2)效果图
(3)代码分析
<1>设置按钮距离底部60dp
android:layout_alignParentBottom="true"
android:layout_marginBottom="60dp"
<2>水平方向居中
android:layout_centerHorizontal="true"
5、网格布局(GridLayout)
典型应用：计算器的布局
源码案例：test16
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="4"
android:orientation="horizontal"
android:rowCount="5"
android:useDefaultMargins="true"
tools:context=".MainActivity"> <Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="0"
android:text="1" /> <Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="1"
android:text="2" /> <Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="2"
android:text="3" /> <Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="3"
android:text="+" /> <Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="0"
android:text="4" /> <Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="1"
android:text="5" /> <Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="2"
android:text="6" /> <Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="3"
android:text="-" /> <Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="0"
android:text="7" /> <Button
android:id="@+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="1"
android:text="8" /> <Button
android:id="@+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="2"
android:text="9" /> <Button
android:id="@+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="3"
android:text="*" /> <Button
android:id="@+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="0"
android:text="0" /> <Button
android:id="@+id/button14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="删除" /> <Button
android:id="@+id/button15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="3"
android:text="/" /> <Button
android:id="@+id/button18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4" android:layout_column="0"
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="clear" /> <Button
android:id="@+id/button20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="2"
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="Button" /> </GridLayout>
004 Android XML文件常用五大页面布局方式的更多相关文章
- maven(4)------maven核心pom.xml文件常用元素分析
在maven项目中,pom文件是核心文件 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <p ...
- 《!--suppress ALL --> 在Android XML 文件中的用途是什么？
<!--suppress ALL --> 在Android XML 文件中的用途是什么? 警告一次又一次地出现在谷歌地图的 XML 文件中,但是当我使用时,所有警告都被禁用.那么压制所有评 ...
- 006 Android XML 文件布局及组件属性设置技巧汇总
1.textview 组件文本实现替换(快速实现字符资源的调用) android 应用资源位置在 project(工程名)--->app--->res--->values 在stri ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- android xml文件
一.布局文件:在layout目录下,使用比较广泛: 我们可以为应用定义两套或多套布局,例如:可以新建目录layout_land(代表手机横屏布局),layout_port(代表手机竖屏布局),系统会根 ...
- Android XML文件解析
在Android平台上可以使用Simple API for XML(SAX) . Document Object Model(DOM)和Android附带的pull解析器解析XML文件. 下面是本例子 ...
- [android] xml文件的序列化
生成xml文件,模拟备份短信,创建短信的业务bean,创建一个domain的包放业务bean,这个业务bean里面,定义成员属性,生成get set方法,生成有参和无参的构造方法. 生成随机数,实例化 ...
- Android--->LinearLayout页面布局方式
main.xml布局方式 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...
- Web页面布局方式小结
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...
随机推荐
- day63-webservice 01.cxf介绍
CXF功能就比较强了.CXF支持soap1.2.CXF和Spring整合的非常密切.它的配置文件基本就是Spring的配置文件了.CXF是要部署在服务器才能用的.CXF得放到Web容器里面去发布.CX ...
- mysql 主键
什么是主键 表中的每一行都应该具有可以唯一标识自己的一列(或一组列).而这个承担标识作用的列称为主键. 任何列都可以作为主键,只要它满足以下条件: • 任何两行都不具有相同的主键值.就是说这列的值都是 ...
- Python04 range()方法的使用、turtle.textinput()方法和write()的使用、turtle.numinput()的使用
1 range() 方法的使用 1.1 range方法介绍 range方法会返回一个range类型的对象,该对象会根据range方法的参数产生一些列整型数据 技巧01:range方法有三个参数,第一个 ...
- 690. Employee Importance员工权限重要性
［抄题］: You are given a data structure of employee information, which includes the employee's unique i ...
- mybatis spring 框架整合
driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/test user=LF password=LF <?xml versi ...
- 在Ubuntu安装Tomcat7.0及开机自动运行
在Ubuntu安装Tomcat7.0及开机自动运行 1.安装装Tomcat7.0 一般都是绿色版的,下载一个tomcat7.0解开到指定的目录上即可 然后进入tomcat目录的bin文件夹,执行 su ...
- 1.介绍templates
我们现在要计算int和double类型数据的平方,我们就需要2个函数: #include <iostream> using namespace std; int square(int x) ...
- Django框架 之 MTV模型、 基本命令、简单配置
浏览目录 MTV模型 Django框架前奏 Django基础必备三件套 Djaogo基本命令 MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Te ...
- 僵固式思维 OR 成长式思维
有意无意中,看到这样的一篇文章,觉得非常富有正能量,而且也比较有同感.而且,不仅仅对于职场暂时失落或者失意的人有帮助,就是对学生,也一样的.故特分享,以共勉之. 我想每个新人进入职场之后都会遇到的第一 ...
- Laravel 测试教程
参考链接:https://laravel-news.com/seeding-data-testing 迁移文件 修改 database/migrations/2014_10_12_000000_cre ...