文章目录

LinearLayout ：线性布局
- android:layout_gravity ：控件的对齐方式
- android:layout_weight：权重
RelativeLayout ：相对布局
- 相对于父布局进行定位
- 相对于控件进行定位
- 边缘对齐
FrameLayout ：帧布局
Percent ：百分比布局
ConstraintLayout ：约束布局
- 自定义控件
- 封装复用的页面
- 引入封装好的布局
自定义控件

LinearLayout ：线性布局

线性布局有水平、垂直两种排列方式：

android:orientation="vertical" ：垂直方向排列，此时高度不可被指定为 match_parent。
android:orientation="horizontal"：水平方向排列，此时不能将宽度指定为 match_parent。

android:layout_gravity ：控件的对齐方式

如果布局方式选择 horizontal，之后设置 button1 为 top ；button2 为 center_vertical ； button3 为 bottom 。那么呈现效果如下：

android:layout_weight：权重

vertical 垂直布局时，layout_weight 可以覆盖 layout_height 属性，根据权重来分配控件高度：

PS：通过上图应该对 “android:orientation="vertical" ：垂直方向排列，此时高度不可被指定为 match_parent。” 这句话有了深刻了解， match_parent 属性会导致控件占满整个屏幕……

horizontal 水平布局时，layout_weight 可以覆盖 layout_height 属性，根据权重来分配控件高度：

RelativeLayout ：相对布局

通过相对定位的方式可以使控件出现在布局的任何位置。

相对于父布局进行定位

关于位置的属性：

layout_alignParentLeft ：处于父布局的左。
layout_alignParentTop ：处于父布局的上。
layout_alignParentRight ：处于父布局的右。
layout_alignParentBottom ：处于父布局的下。
layout_centerInParent ：处于父布局的居中。

相对于控件进行定位

<?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"tools:context=".SecondActivity"><Buttonandroid:id="@+id/button_1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/button_3"android:layout_toLeftOf="@id/button_3"android:text="Button 1"/><Buttonandroid:id="@+id/button_2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/button_3"android:layout_toRightOf="@id/button_3"android:text="Button 2"/><Buttonandroid:id="@+id/button_3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:text="Button 3"/><Buttonandroid:id="@+id/button_4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/button_3"android:layout_toLeftOf="@id/button_3"android:text="Button 4"/><Buttonandroid:id="@+id/button_5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/button_3"android:layout_toRightOf="@id/button_3"android:text="Button 5"/></RelativeLayout>

运行结果：

layout_above ：处于被引用控件之上。
layout_below ：处于被引用控件之下。
layout_toLeftOf ：处于被引用控件之左。
layout_toRightOf ：处于被引用控件之右。

通过 android:layout_centerInParent 定位 button 3 之后，以其为基准，定位其他四个 button 的位置。

边缘对齐

layout_alignLeft ：该控件左边缘与被引用控件左边缘对齐。
layout_alignRight：该控件右边缘与被引用控件右边缘对齐。
layout_alignTop ：该控件顶部边缘与被引用控件顶部边缘对齐。
layout_alignBottom ：该控件底部边缘与被引用控件底部边缘对齐。

FrameLayout ：帧布局

这种布局没有方便的定位方式，所有的控件都默认的摆放在布局的左上角。但可以类似于 LinearLayout 中通过 layout_gravity 来指定控件在布局中的对齐方式：

Percent ：百分比布局

layout_weight 属性让设计布局变得更方便，但可惜的是只有 LinearLayout 支持该功能，因此提供了 PercentFrameLayout 和 PercentRelativeLayout 分别解帧布局和相对布局的功能局限性。

具体来说，即可以不再使用 wrap_content 和 match_parent 等方式来指定控件大小，而是直接指定控件在布局中所占的百分比。

使用时，由于 Android 将百分比布局定义在了 support 库中，因此只需在 app/build.gradle 文件中添加下面依赖，需要注意的是 support 库在 Androidx 1.0.0 及更高版本中被 AndroidX 库完全取代了……因此添加依赖时需如此实现：

只用完整路径 androidx.percentlayout.widget.PercentFrameLayout 作为标签名，因为百分比布局不像其他三个内置在系统中。
必须定义一个命名空间 app 才能使用百分比布局的自定义属性。
使用 layout_widthPercent 和 layout_heightPercent 两个属性来定义控件长款，值以百分比形式表示。
继承自 FrameLayout ，因此所有控件默认摆放在左上角，可以借助 layout_gravity 来避免控件重叠。

ConstraintLayout ：约束布局

常被视作增强型的相对布局，ConstraintLayout 不仅可以解决 LinearLayout 常有的嵌套布局缺陷，还具备 RelativeLayout 的相对布局功能。

自定义控件

所有控件都是直接或者间接地继承自 View 的，所有布局都是直接或间接继承自 ViewGroup 的。
View 是 Android 中最基本的一种 UI 组件，它可以在屏幕上绘制一块矩形区域，响应这块区域的各种事件，封装好的各种控件其实就是在 View 的基础之上添加了各自特有的功能。
ViewGroup 是一种特殊的 View，可以包含很多的 子View 和 子ViewGroup，是一个放置控件和布局的容器。

封装复用的页面

在前端页面中有许多重复使用频率高的页面，如导航栏、底部栏等，对于这些页面，可以一次编撰代码并封装，之后多次调用以实现复用。

这里通过约束布局实现标题栏布局文件 title.xml ：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/cmy4"><Buttonandroid:id="@+id/title_back"android:layout_width="0dp"android:layout_height="50dp"android:layout_margin="5dp"app:layout_constraintHorizontal_weight="1"android:background="@drawable/cmy1"android:text="Back"android:textColor="#fff"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/title_text" /><TextViewandroid:id="@+id/title_text"android:layout_width="0dp"android:layout_height="wrap_content"android:gravity="center"android:text="Title Text"app:layout_constraintHorizontal_weight="2.5"android:textColor="@color/teal_200"android:textSize="24sp"app:layout_constraintTop_toTopOf="@id/title_back"app:layout_constraintBottom_toBottomOf="@id/title_back"app:layout_constraintLeft_toRightOf="@id/title_back"app:layout_constraintRight_toLeftOf="@id/title_edit" /><Buttonandroid:id="@+id/title_edit"android:layout_width="0dp"android:layout_height="50dp"android:layout_margin="5dp"app:layout_constraintHorizontal_weight="1"android:background="@drawable/cmy1"android:text="Edit"android:textColor="@color/white"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toRightOf="@id/title_text"app:layout_constraintRight_toRightOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

android:background 不生效

在 res/values/themes.xml 中：

修改为：

相对定位

通过形如 layout_constraintTop_toTopOf 的属性来定位控件，该类属性值可为 parent 从而与父布局相适配。举两个例子，上述代码中：

title_back 中 app:layout_constraintLeft_toLeftOf="parent" ：意为将 title_back 的 左边缘 约束到 父布局 的 左边缘。
title_edit 中 app:layout_constraintStart_toEndOf="@id/title_back" ：意为 title_edit 的 起始位置 即 title_back 的 结束位置。

相对定位中的 layout_constraintBaseline_toBaselineOf 意为 文本基线 对齐。

对齐前：对齐后：

通过相对布局实现居中：

用一张图总结相对定位：

链

如果两个或以上控件通过下图的方式约束在一起，就可以认为是他们是一条链（图为横向的链，纵向同理）：

一条链的第一个控件是这条链的链头，当所有控件的 高/宽度 都为 固定值/wrap_content 时，可以在链头中通过设置 layout_constraintHorizontal_chainStyle 来改变 链的样式：

spread ：展开元素 (默认)；
spread_inside ：展开元素，但链的两端贴近 parent；
packed ：链的元素将被打包在一起。

当所有控件的 高/宽度 都为 0dp 时，可以在 每个控件 中通过设置 layout_constraintHorizontal_weight(constraintVertical为纵向) 来改变 链的权重。

界面显示：

引入封装好的布局

在布局文件中加上一句 <include layout="@layout/title"/> ；
隐藏系统自带的标题栏：

ActionBar actionBar = getSupportActionBar();
if (actionBar != null) actionBar.hide();

自定义控件

不光布局会被重复使用，某些控件其功能是固定的，比如返回按钮，都是销毁当前活动。因此也可以对其进行封装复用，创建一个自定义类 TitleLayout.java 继承 LinearLayout，并且重写里面的构造方法：

public class TitleLayout extends LinearLayout {public TitleLayout(Context context, Attributes attrs){super(context, (AttributeSet) attrs);LayoutInflater.from(context).inflate(R.layout.title, this);}
}

此时，在布局中引入 TitleLayout 控件就会调用这个构造函数，因此使用 LayoutInflater 来实现动态加载，from() 方法可以构建出一个 LinearLayout 对象，然后调用 inflate 可以动态加载一个布局文件，里面传入两个参数：

加载布局文件的 id；
参数一的父布局。

现在可以在其他 xml 文件中（比如 second_layout.xml）添加这个自定义控件：

<com.example.activitytest.TitleLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"></com.example.activitytest.TitleLayout>

com.example.activitytest 是 TitleLayout 文件所在的完整路径名。如此一来即可把 title 布局界面直接搬到 second_layout 布局中，那么 SecondActivity 其显示的布局自然就是 title.xml 的样子。

此时我们可以为布局中的控件注册点击事件：

Android入门（八） | 常用的界面布局及自定义控件相关推荐

Android 入门第二讲03-约束布局ConstraintLayout（可视化介绍，Chains链，MATCH_CONSTRAIN，百分比布局，圆形定位，Guideline，Barrier）
Android 入门第二讲03-约束布局ConstraintLayout(可视化介绍,Chains链,MATCH_CONSTRAIN,百分比布局,圆形定位,Guideline,Barrier) 1.可 ...
Android入门教程：ConstraintLayout约束布局
原文首发自掘金芦苇APP团队,转载到自己小号上再发一遍~ 翻译By Leelion6.关于 ConstraintLayout 的文章其实已经不少了,不过看到这篇文章写的很有趣,以及在翻译的过程中,感受 ...
Android和iPhone应用程序界面布局示例
下图是根据Android和iPhone这两个平台的"生产内容型的应用程序"整理出来的界面布局示例.所对比的4个点,均是两大平台的应用程序常规界面元素. 状态栏: Android ...
duilib教程之duilib入门简明教程9.界面布局
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...
Android入门（二）——常见布局与控件
文章目录一.常见界面布局 1.线性布局 LinearLayout 2.相对布局 RelativeLayout 3.表格布局 TableLayout 4.帧布局 FrameLayout 二.常见界面控 ...
Android入门之常用控件
今天复习android 基础入门突然心血来潮,然后... 首先布局: 具体代码: import android.app.AlertDialog; import android.app.Progress ...
【Android开发学习24】界面布局之表格布局TableLayout+TableRow
一.基础知识: TableLayout置底,TableRow在TableLayout的上面,而Button.TextView等控件就在TableRow之上, 另外,TableLayout之上也可以单独 ...
Android入门实例三注册界面的设计与实现
注册界面的设计与实现 1.简介这次小实验通过RadioButton(单选按钮).CheckBox(复选框)等组件实现一些个人信息的录入,同时介绍了如何使用带图片的Toast反馈信息. 2.源码 2. ...
android 可以上下左右滑动的界面布局
1.我使用的是ScrollView嵌套HorizontalScrollView让ScrollView负责上下滑动HorizontalScrollView负责左右滑动 2.以下代码提供了思路和完成手段, ...

Android入门（八） | 常用的界面布局及自定义控件

文章目录

LinearLayout ：线性布局

android:layout_gravity ：控件的对齐方式

android:layout_weight：权重

RelativeLayout ：相对布局

相对于父布局进行定位

相对于控件进行定位

边缘对齐

FrameLayout ：帧布局

Percent ：百分比布局

ConstraintLayout ：约束布局

自定义控件

封装复用的页面

引入封装好的布局

自定义控件

Android入门（八） | 常用的界面布局及自定义控件相关推荐

最新文章

热门文章

Android入门（八） | 常用的界面布局 及 自定义控件

文章目录

LinearLayout ：线性布局

android:layout_gravity ：控件的对齐方式

android:layout_weight：权重

RelativeLayout ：相对布局

相对于父布局进行定位

相对于控件进行定位

边缘对齐

FrameLayout ：帧布局

Percent ：百分比布局

ConstraintLayout ：约束布局

自定义控件

封装复用的页面

引入封装好的布局

自定义控件

Android入门（八） | 常用的界面布局 及 自定义控件相关推荐

最新文章

热门文章

Android入门（八） | 常用的界面布局及自定义控件

Android入门（八） | 常用的界面布局及自定义控件相关推荐