51. (android开发)线性布局、相对布局、帧布局

android 有多种布局方式。
线性布局（LinearLayout），组件一个跟着一个，或者纵向排列、或者横向排列。这取决于 android:orientation 的设置。
android:orientation="vertical" 是纵向排列
android:orientation="horizontal" 是横向排列

<?xml version="1.0" encoding="utf-8"?>

线性布局LinearLayout
相对布局（RelativeLayout），顾名思义每个控件都有自己定位的一个基点，根据基点确定自己相对于这个基点的存在位置。
这个几点可以是某个控件，也可以是活动的边沿。

<?xml version="1.0" encoding="utf-8"?>

image.png

image.png

上面的代码是直接按照控件的父类边框进行定位。
再看一下根据控件定位的代码。

<?xml version="1.0" encoding="utf-8"?>

这里的Button都是根据Button1定位的。而Button1是根据父控件定位的。

image.png

image.png

当然如果仅仅是这样，那就太呆板了。下面让控件一个跟着一个定位。每个都以上一个控件为基点。
这样，如果移动被作为基点的控件的话，其他控件也会相应的移动位置。
先看代码

<?xml version="1.0" encoding="utf-8"?>

这段代码要复杂一些。每个控件的定位要先找到Start相关的标签，
android:layout_alignParentStart="true"
android:layout_alignStart="@+id/button1"
android:layout_marginStart="43dp"
这个确定了控件的左边起点。
再确定Top
android:layout_alignParentTop="true"
android:layout_alignTop="@+id/button1"
android:layout_marginTop="33dp"
还需要确定的是当前控件的基点。
android:layout_below="@+id/button1"
android:layout_below="@+id/button2"
而第一个控件的基点，依靠父控件来定位。
android:layout_marginStart="58dp"
android:layout_marginTop="68dp"

image.png

image.png

帧布局（FrameLayout），采用层叠布局的方式，所有的组件会压在前面放置的组件上面，如果了解photoshop的图层就更容易理解这种布局了。
为了理解这种布局，这里用三个控件来表现。

<?xml version="1.0" encoding="utf-8"?>

image.png

可以看到图片是压在输入框的上面的。
如果想调整这些组件的位置，就需要设置
android:layout_marginTop
android:layout_marginLeft
如果想调整上下遮盖的顺序，则需要调整活动的xml界面文件。最先出现的组件是在最下面的。这里试着交换一下 EditText 和 ImageView 的代码位置。

<?xml version="1.0" encoding="utf-8"?>

界面就变成了

image.png

这里就可以看到，输入框压在了图片上面。
而图片和文字“我的图片”的位置，是由各自的 marginTop 和 marginLeft 实现的控制。
当然，也可以使用 layout_gravity，这个方法尤其适合设置到右侧和底部等位置。

image.png
百分比布局（PercentFrameLayout、PercentRelativeLayout），由于百分比布局不属于标准布局，所以需要在 app/build.gradle 的 dependencies 内添加百分比布局依赖 implementation 'com.android.support:percent:26.1.0'
在布局文件中，添加四个 button 组件
PercentFrameLayout

<?xml version="1.0" encoding="utf-8"?>

这些按钮的宽高
app:layout_widthPercent
app:layout_heightPercent
由此得出如下界面

image.png

PercentRelativeLayout

<?xml version="1.0" encoding="utf-8"?>

image.png

作为百分比相对布局，自然是要用到 layout_below、layout_toEndOf、layout_alignTop、等属性。

更多相关文章

随机推荐