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文件常用五大页面布局方式的更多相关文章

  1. maven(4)------maven核心pom.xml文件常用元素分析

    在maven项目中,pom文件是核心文件 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <p ...

  2. 《!--suppress ALL --> 在Android XML 文件中的用途是什么？

    <!--suppress ALL --> 在Android XML 文件中的用途是什么? 警告一次又一次地出现在谷歌地图的 XML 文件中,但是当我使用时,所有警告都被禁用.那么压制所有评 ...

  3. 006 Android XML 文件布局及组件属性设置技巧汇总

    1.textview 组件文本实现替换(快速实现字符资源的调用) android 应用资源位置在 project(工程名)--->app--->res--->values 在stri ...

  4. 【Android】纯代码创建页面布局（含异步加载图片）

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  5. android xml文件

    一.布局文件:在layout目录下,使用比较广泛: 我们可以为应用定义两套或多套布局,例如:可以新建目录layout_land(代表手机横屏布局),layout_port(代表手机竖屏布局),系统会根 ...

  6. Android XML文件解析

    在Android平台上可以使用Simple API for XML(SAX) . Document Object Model(DOM)和Android附带的pull解析器解析XML文件. 下面是本例子 ...

  7. [android] xml文件的序列化

    生成xml文件,模拟备份短信,创建短信的业务bean,创建一个domain的包放业务bean,这个业务bean里面,定义成员属性,生成get set方法,生成有参和无参的构造方法. 生成随机数,实例化 ...

  8. Android--->LinearLayout页面布局方式

    main.xml布局方式 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  9. Web页面布局方式小结

    Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...

随机推荐

  1. POJ1039几何

    这道题目要求我们判断光线进入一条管道后可以抵达的最大的x坐标. 这是我做的第一道几何题目,卡了我半天.翻了不少书,才大概明白了些.既然是第一次做,就把所有今天学到的就全部写下好了. 1.如何判断平面上 ...

  2. codeforce452DIV2——F. Letters Removing

    题意:给一个字符串和m个操作,每次给出l,r,c,把字符串中l-r这段区间的字符为c的字符删掉,求最后的字符串.(n,m<=2e5)线段树.注意这个区间修改和普通区间修改的区别. 他们都是用树状 ...

  3. PHP程序员求职经验总结

    这次来深圳找工作,是我人生中第一次正式的求职,也是第一份正式的工作.这几天收获不少,总结一下,"供后人参考"; 从7月23来深圳到今天刚好一个星期,这7天内我发了18封求职邮件,在 ...

  4. Junit问题01 利用 @Autowired 注入失效问题

    1 利用 @Autowired 注入失效问题 1.1 问题描述 在使用Junit作为测试框架的单元测试中,直接了用@Autowired记性依赖注入时总是注入失败 1.2 问题原因 在测试类中没有设定上 ...

  5. Hyperledger子项目

    Hyperledger由五个子项目构成: • BlockChain Explorer 展⽰和查询区块链块.事务和相关数据的 Web应⽤ • Fabric 区块链技术的⼀个实现(主要项目) • STL ...

  6. hdu 2519 新生晚会 （求排列组合时容易溢出）

    #include<stdio.h> #include<algorithm> using namespace std; void cal(int n,int m) { ; m=m ...

  7. 4.python 系统批量运维管理器之paramiko模块

    paramiko paramiko是ssh服务最经常使用的模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. paramiko实现ssh2不外乎两个角度:SSH客户端与服务端 SS ...

  8. 函数有一个特殊的属性 prototype！

    JavaScript 中只有对象,没有类. 实际上,JavaScript 才是真正应该被称为「面向对象」的语言,因为它是少有的可以不通过类,直接创建对象的语言. 函数的 prototype 属性 在 ...

  9. 【JAVA】虚拟机指令集

    [JAVA]虚拟机指令集 – – – 0x00 nop 什么都不做 0x01 aconst_null 将null推送至栈顶 0x02 iconst_m1 将int型-1推送至栈顶 0x03 icons ...

  10. 解决Eclipse+ADT连接夜神模拟器失败问题

    问题1: 运行夜神模拟器,cmd执行 adb devices不显示 答案1: 原因可能是夜神模拟器的adb版本与sdk下的adb版本不一致,拷贝sdk下的adb.exe并改名为nox_adb.exe替 ...