Android教程-03 常见布局的总结

常见的布局

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

Android的图形用户界面是由多个View和ViewGroup构建出来的。View是通用的UI窗体小组件，比如按钮(Button)或者文本框(text field)，而ViewGroup是不可见的，是用于定义子View布局方式的容器，比如网格部件(grid)和垂直列表部件(list)。
这里写图片描述

Android提供了一个对应于View和ViewGroup子类的一系列XMl标签，我们可以在XML里使用层级视图元素创建自己的UI。

我们常见的布局包括:

  • LinearLayout ( 线性布局 )
  • RelativeLayout ( 相对布局 )
  • FrameLayout ( 帧布局 )
  • GridLayout(网格布局 Android4.0 引入的)

不常见的布局：

  • Tablelayout(表格布局)
  • AbsoluteLayout(绝对布局 废弃了)

我们接下来重点讲下常见的布局，对于不常见的布局，大家了解就可以

LinearLayout

即一行展开或者一列展开，也可以嵌套
重要的属性 android：orentation 方向,包括Vertical(垂直) 和horizontal 水平
这里写图片描述

参考代码

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button1" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button2" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button3" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button4" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <!--layout_weight  比重-->
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="button1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="button2" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="button3" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="button4" />

    </LinearLayout>
</LinearLayout>

RelativeLayout

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

控件显示都是相对于其它布局或者控件
常见的属性:
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

当我们实现下图的界面, 采用相对布局要方便很多
这里写图片描述

参考代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--red green blue-->
    <TextView
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#cc0000"
        android:text="red"
        android:gravity="center"
        />
    <TextView
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ffff00"
        android:text="yellow"
        android:gravity="center"
        />
    <TextView
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff1100"
        android:text="orange"
        android:gravity="center"
        />
    <TextView
        android:id="@+id/tv_center"
        android:layout_centerInParent="true"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff1100"
        android:text="center"
        android:gravity="center"
        />
    <TextView
        android:layout_alignTop="@+id/tv_center"
        android:layout_toLeftOf="@+id/tv_center"
        android:layout_width="100dp"
        android:layout_marginRight="10dp"
        android:layout_height="100dp"
        android:background="#88ff00"
        android:text="left"
        android:gravity="center"
        />
    <TextView
        android:layout_alignTop="@+id/tv_center"
        android:layout_toRightOf="@+id/tv_center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff8800"
        android:layout_marginLeft="10dp"
        android:text="right"
        android:gravity="center"
        />

    <TextView
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#771122"
        android:text="bottom"
        android:gravity="center"
        />
</RelativeLayout>

FrameLayout

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

帧布局，即一层层叠起来，最先在xml总定义的都在最底下,入下图
这里写图片描述

需要注意的是 5.0以上的系统,按钮控件无论定义在前面还是后面,默认都是显示在最上面,不会被遮挡

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!--5.0之前 后添加的控件在之前添加控件的上面  5.0之后 如果有按钮 按钮默认都是在最前面-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="button"
        />
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar"
        android:layout_gravity="left|top" />

</FrameLayout>

GridLayout

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

网格布局
取代TableLayout
GridLayout优势可以避免Linearlayout多层嵌套

需要注意的是,GridLayout是Android4.0引入的布局,如果使用此布局,需要保证当前程序最低兼容版本14

首先它与LinearLayout布局一样，也分为水平和垂直两种方式，默认是水平布局，一个控件挨着一个控件从左到右依次排列。

但是通过指定android:columnCount设置列数的属性后，控件会自动换行进行排列。另一方面，对于GridLayout布局中的子控件，默认按照wrap_content的方式设置其显示，这只需要在GridLayout布局中显式声明即可。

其次，若要指定某控件显示在固定的行或列，只需设置该子控件的android:layout_row和android:layout_column属性即可，但是需要注意：android:layout_row=”0”表示从第一行开始，android:layout_column=”0”表示从第一列开始，这与编程语言中一维数组的赋值情况类似。

最后，如果需要设置某控件跨越多行或多列，只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值，再设置其layout_gravity属性为fill即可，前一个设置表明该控件跨越的行数或列数，后一个设置表明该控件填满所跨越的整行或整列。

这里写图片描述
这个界面建议大家使用GridLayout

参考代码：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="5">
    　　
    <Button
        android:id="@+id/one"
        android:text="1" />
    　　
    <Button
        android:id="@+id/two"
        android:text="2" />
    　　　
    <Button
        android:id="@+id/three"
        android:text="3" />
    <Button
        android:id="@+id/devide"
        android:text="/" />
    <Button
        android:id="@+id/four"
        android:text="4" />
    <Button
        android:id="@+id/five"
        android:text="5" />
    　　

    <Button
        android:id="@+id/six"
        android:text="6" />
    <Button
        android:id="@+id/multiply"
        android:text="×" />
    <Button
        android:id="@+id/seven"
        android:text="7" />

    <Button
        android:id="@+id/eight"
        android:text="8" />

    <Button
        android:id="@+id/nine"
        android:text="9" />

    <Button
        android:id="@+id/minus"
        android:text="-" />

    <Button
        android:id="@+id/zero"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0" />
    　　
    <Button
        android:id="@+id/point"
        android:text="." />

    <Button
        android:id="@+id/plus"
        android:layout_gravity="fill"
        android:layout_rowSpan="2"
        android:text="+" />

    <Button
        android:id="@+id/equal"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="=" />
</GridLayout>

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

posted on 2015-09-28 09:08  如果蜗牛有爱情  阅读(163)  评论(0)  编辑  收藏  举报

导航