Android中的常用布局

        布局就是把界面中的控件按照某种规律摆放到指定的位置,主要是为了解决应用程序在不同手机中的显示问题。Android实现布局有两种方式:(1)代码;(2)xml配置文件,都是放在res/layout目录下,注:也可以同时使用xml和代码。

1、线性布局(LinearLayout):线性布局会将其中的控件一个接一个排列,可以横排也可以竖排。

      常用属性:(1)设置排列方向:orientation="vertical"(垂直排列),orientation="horizontal"(水平排列);(2)设置组件的对齐方式:gravity=“center”(居中),gravity=“center|left”(居中并靠左)。

       android:gravity和android:layout_gravity的区别:前者是针对控件里的元素来说的,用来控制元素在该控件里的显示位置;后者是针对控件本身而言,用来控制该控件所在父元素的位置。

<?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:orientation="vertical"
    android:gravity="center|left">

    <Button
        android:layout_width="wrap_content"
        android:layout_gravity="center_horizontal"
        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="按钮2" />
</LinearLayout>

效果图:

2、帧布局(FrameLayout):类似于PS中图层的概念,为每个加入其中的组件创建单独的帧,看上去像是组件叠加到一起。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:background="@drawable/a3"
        android:layout_height="match_parent" />

    <ImageView
        android:layout_width="60dp"
        android:background="@drawable/a2"
        android:layout_gravity="center"
        android:layout_height="60dp" />
</FrameLayout>

效果图:其中a3和a2是两张图片

3、 相对布局(RelativeLayout):相对布局窗口内子组件的位置总是相对兄弟组件、父容器来决定的,因此叫相对布局;如果A组件位置是由B组件的位置决定的,Android要求先定B组件,再定义A组件;每个控件使用LayoutParams规定的参数来定义相对位置,LayoutParams的参数一类的值为true或false,另一类是其他控件的ID,其中参数为Boolean型的是相对于父元素的属性,如android:layout_alignParentRight="true",参数为ID型的是相对于指定元素(根据ID指定)的属性。

@+id和@id的区别:@+id/x1(添加新ID)、@id/x1(引用此ID)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="60dp"
        android:background="@color/red"
        android:layout_height="30dp" />

    <Button
        android:layout_width="60dp"
        android:background="@color/orange"
        android:layout_centerHorizontal="true"
        android:layout_height="30dp" />

    <Button
        android:layout_width="60dp"
        android:background="@color/yellow"
        android:layout_alignParentRight="true"
        android:layout_height="30dp" />

    <Button
        android:layout_width="60dp"
        android:layout_toLeftOf="@id/main_btn_blue"
        android:layout_margin="30dp"
        android:background="@color/green"
        android:layout_centerInParent="true"
        android:layout_height="30dp" />

    <Button
        android:layout_width="60dp"
        android:id="@+id/main_btn_blue"
        android:background="@color/blue"
        android:layout_centerInParent="true"
        android:layout_height="30dp" />

    <Button
        android:layout_width="60dp"
        android:layout_toRightOf="@id/main_btn_blue"
        android:layout_margin="30dp"
        android:background="@color/indianred"
        android:layout_centerInParent="true"
        android:layout_height="30dp" />

    <Button
        android:layout_width="match_parent"
        android:background="@color/violet"
        android:layout_alignParentBottom="true"
        android:layout_height="30dp" />
</RelativeLayout>

效果图:

4、网格布局(GridLayout):该布局使用虚线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列;于HTML中的table非常类似;4.0以上的版本可以直接使用,2.X的版本需要添加一个支持包。

GridLayout布局相关属性:rowCount(总行数)、columnCount(总列数)

GridLayout中子控件相关属性:layout_gravity="fill_horizontal"(水平填充)、layout_gravity="fill_vertical"(垂直填充),主要用于跨行或跨列的时候。

Space标签的作用:挡住控件,让其不超出网格的范围。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:rowCount="2"
    android:columnCount="4"
    android:layout_height="match_parent">

    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="1" />

    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="2" />

    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="3" />

    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_rowSpan="2"
        android:layout_gravity="fill_vertical"
        android:text="4" />

    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="5" />

    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="6" />

    <Space android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</GridLayout>

效果图:

猜你喜欢

转载自blog.csdn.net/weixin_42687829/article/details/82710732