安卓开发学习笔记_UI开发_详解3种基本布局

LinearLayout

LinearLayout又称作线性布局, 这个布局会将它所包含的控件在线性方向上依次排列.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    ...>
    ...
</LinearLayout>

android:orientation

通过android:orientation指定排列方向

• vertical 垂直方向
• horizontal 水平方向, 默认值

如果排列方向时horizontal, 内部控件的宽度就不能指定为match_parent, 否则, 单独一个控件就会将整个水平方向占满.(反之也相同)

android:layout_gravity

android:layout_gravity用于指定控件在布局中的对齐方式.
当排列方向时horizontal时, 只有垂直方向上的对齐方式才会生效.(反之也相同)

示例代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="Button 1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Button 2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Button 3" />
</LinearLayout>

第一个Button的对齐方式指定为top, 第二个Button的对齐方式指定为center_vertical, 第三个Button的对齐方式指定为bottom.
运行效果如下:

android:layout_weight

这个属性允许我们使用比例的方式指定控件的大小.

编写一个消息发送界面, 需要一个文本编辑框和发送按钮, 代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type something"/>

    <Button
        android:id="@+id/send"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Send"/>

</LinearLayout>

这里EditText和Button的宽度都指定成了0dp, 是因为我们使用了android:layout_weight属性, 此时控件的宽度就不是由android:layout_width来决定了, 所以指定成0dp是一种比较规范的写法.
然后在EditText和Button里将android:layout_weight属性的值指定为1, 这表示EditText和Button将在水平方向平方宽度.

运行效果如下:

系统会先把LinearLayout下所有控件指定的layout_weight值相加, 得到一个总值, 然后每个控件所占大小的比例就是用该控件layout_weight值除以刚才算出的总值.
因此如果想让EditText占据屏幕宽度的3/5，Button占据屏幕宽度的2/5, 只需要将EditText的layout_ weight改成3, Button的layout_weight改成2就可以了.

指定部分控件的layout_weigth

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type something" />
    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"/>

</LinearLayout>

效果如下:

这里我们仅指定了EditText的android:layout_weight属性, 并将Button的宽度改回了wrap_content, 这表示Button的宽度仍然按照wrap_content来计算, 而EditText则会占满屏幕所有的剩余空间. 使用这种方式编写的界面, 不仅可以适配各种屏幕，而且看起来也更加舒服.

RelativeLayout

RelativeLayout又称作相对布局, 它可以通过相对定位的方式让控件出现在布局的任何位置.

对齐父元素

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button 1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button 2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button 3" />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Button 4" />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Button 5" />
</RelativeLayout> 

运行效果如下:

对齐控件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button 3" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text="Button 1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="Button 2" />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text="Button 4" />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="Button 5" />
</RelativeLayout>

运行效果如下:

android:layout_below表示让一个控件位于另一个控件的下方, android:layout_toLeftOf表示让一个控件位于另一个控件的左侧, android:layout_toRightOf表示让一个控件位于另一个控件的右侧,
需要为这个属性指定相对控件id的引用, 填入了@id/button3.

RelativeLayout中还有另外一组相对于控件进行定位的属性, android:layout_alignLeft表示让一个控件的左边缘和另一个控件的左边缘对齐…

FrameLayout

FrameLayout又称作帧布局, 所有的控件都会默认摆放在布局的左上角.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is TextView"
        />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        />
</FrameLayout>

文字和按钮都位于布局的左上角. 由于Button是在TextView之后添加的, 因此按钮压在了文字的上面.

可以使用layout_gravity属性来指定控件在布局中的对齐方式, 代码如下:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="This is TextView"
        />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="Button"
        />
</FrameLayout>

运行效果如下:

参考

郭霖. 《第一行代码 Android 第3版》