美文网首页
Android基础——布局篇(一)

Android基础——布局篇(一)

作者: 欧西里 | 来源:发表于2021-03-07 20:52 被阅读0次

ViewGroup:布局也可以叫做容器,是承载控件的设备。
Android中的布局有很多种:
LinearLayout线性布局(横着或竖着按顺序排列)
RelativeLayout相对布局(起始坐标时屏幕坐上角,以同级或上级为参考系定位位置)
FrameLayout帧布局(像千层饼一样,一层压着一层)
AbsoluteLayout绝对布局(以屏幕左上角为参考系,定位自己的位置,从android 2.2版本后废弃)
GridLayout网格布局(可以指定行数列数,子控件自动根据行列数进行分配位置,于android 4.0后新增进api中)
TableLayout表格布局(类似于网格布局,以一个TableRow标签定义为一行或一列)
ConstraintLayout约束布局(google于2016年新发布的一种布局方式,以同级或上级的边、点、线为自己的限制的布局,它不在android的基础api包里,需要额外引入)
这些布局除了TableLayout是LinearLayout的子类外,其余都是ViewGroup的子类,包括LinearLayout,也可以说TableLayout是ViewGroup的孙类。

一、LinearLayout

线性布局就是从左到右或从上到下按顺序排列的一种布局。下面讲一讲LinearLayout的基础属性。

(一)、orientation:方向。

方向说的就是线性布局的方向了,也就是这个线性布局到底是水平方向逐个排列还是垂直方向逐个排列。这个属性有两个值vertical(垂直排列),horizontal(水平排列)。
默认值为horizontal

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

</LinearLayout>

(二)、layout_width和layout_height:宽度、高度。

layout_width和layout_height是android中控件的必要属性,分别规定了控件的宽度和高度,这个两个属性的值可以是指定的值,也可以根据内容自适应,还可以填充整个剩余空间。

(1)match_parent:填充剩余窗体。

(2)wrap_content:根据子控件的内容大小自适应。

(3)fill_parent:就是match_parent。

听说从android 2.2以前是没有match_parent的从android 2.2引入match_parent以后,fill_parent就定义为了match_parent,之前的事我也不是太了解了,毕竟我接触android开发时,已经是android 4.4的时期了。

(4)自定义大小:例如50dp、100px。

至于dp、px等单位,以后单独说。

二、效果

只看代码和叙述可能比较难以理解,下面结合图来理解LinearLayout。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF0000"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3" />

</LinearLayout>

我定义了一个垂直的线性布局,里面有三个按钮,按钮以后再说。它们的排列方式是这样的。


android:orientation="vertical".png

如果把android:orientation属性换成horizontal就变成了这样


android:orientation="horizontal".png
这回就更容易理解了,一个是把内部的按钮水平排列,另一个是垂直排列。
再来看看match_parent和wrap_content的区别
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF0000"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3" />

</LinearLayout>
android:layout_width="match_parent".png

为了方便观察,我把LinearLayout的背景设置了一个颜色,这样更方便看出它的大小。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="#FF0000"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3" />

</LinearLayout>
android:layout_width="wrap_content".png

如果把layout_width换成wrap_content,宽度就不会填充满整个屏幕了,就变成了和内部最宽的控件一样宽,高度也类似。


android:layout_width="200dp".png

另外,把layout_width设置成了200dp后就变成了上面这样,它的宽度就被固定了。

相关文章

网友评论

      本文标题:Android基础——布局篇(一)

      本文链接:https://www.haomeiwen.com/subject/ogkofltx.html