文档章节

Android Layout

fx_zsl
 fx_zsl
发布于 2015/01/08 11:08
字数 1812
阅读 34
收藏 0

布局(Layout)的概念是针对Activity的,Activity就是布满整个Android设备的窗口或者悬浮于其他窗口上的交互界面。在一个应用程序中通常由多个Activity构成,每个需要显示的Activity都需要在AndroidManifest.xml文件之中声明。

通常情况下,开发人员可以使用两种方式来创建UI组件,一种方式是使用XML方式来配置UI组件的相关属性,然后装载这些UI组件,这也是最常用的方式。但是有些特殊情况下,需要动态生成UI组件,则需要使用第二种方式,完全使用Java代码来创建UI组件。


Android应用的绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中,Android应用的所有UI组件都继承了View类。View类还有一个重要的子类:ViewGroup,ViewGroup类是所有布局管理器的父类。

对于View的尺寸,android提供了三种单位供选择使用:
px:像素。
dp:dpi,表示屏幕实际的像素。
sp:与scale无关的像素,与dp类似。

尺寸单位选择的技巧:如果设置长度、高度等属性时可以使用dp或sp,但是如果设置字体,需要使用px。如果使用dp或sp,系统会根据屏幕密度的变化进行转换。

详细px、dp、sp区别:http://www.cnblogs.com/wangjianhui/articles/2059960.html

                                        http://www.imyukin.com/?p=277

 

Android提供了五种布局规范

1.FrameLayout(帧布局)
2.LinearLayout(线性布局)

3.RelativeLayout(相对布局)
4.TableLayout(表格布局)
5.AbsoluteLayout(绝对布局)

 

1 帧布局(FrameLayout)

帧布局是最简单的布局方式,所有添加到这个布局中的视图都是以层叠的方式显示,并且后声明的遮挡先声明的控件。
  帧布局容器为每个加入其中的组件创建一个空白的区域(称为一帧),所有每个子组件占据一帧,这些帧都会根据gravity属性执行自动对齐。
  下面通过一个例子说明帧布局,以一个经典的渐变色条为例,在FrameLayout中以此添加多个TextView,赋予不同尺寸和颜色,会叠加显示。

 示例:

<FrameLayout 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:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:width="210px"

        android:height="50px"

        android:background="#ff0000"

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:width="180px"

        android:height="50px"

        android:background="#dd0000"

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:width="150px"

        android:height="50px"

        android:background="#bb0000"

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:width="120px"

        android:height="50px"

        android:background="#990000"

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:width="90px"

        android:height="50px"

        android:background="#770000"

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:width="60px"

        android:height="50px"

        android:background="#550000"

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:width="30px"

        android:height="50px"

        android:background="#330000"

        />

</FrameLayout>

 

 效果:

 

 

2.LinearLayout(线性布局)

LinearLayout是最常用的布局方式,在XML文件中使用<LinearLayout>标记。它会将容器里的UI组件一个一个挨着排列起来。但是LinearLayout不会换行,当UI组件超出屏幕之后,则不会被显示出来。LinearLayout有两个重要的XML属性:android:gravity(对齐方式);android:orientation(排列方式)。
  android:orientation(排列方式),设定了LinearLayout中包含的UI组件的排列方式,有两个选项vertical(竖向)、horizontal(横向,默认值)
  android:gravity(对齐方式),设定LinearLayout中包含UI组件的对齐方式,其选项很多,常用上(top)、下(bottom)、左(left)、右(right)。


 

示例:

<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"

    tools:context=".MainActivity" android:orientation="horizontal" android:gravity="bottom">

    <Button        

        android:layout_weight="1"

        android:text="button"

         android:layout_width="wrap_content"

    android:layout_height="wrap_content"/>

<Button

        android:text="button"

        android:layout_gravity="top"

         android:layout_weight="1"

         android:layout_width="wrap_content"

    android:layout_height="wrap_content"/>

<Button

        android:text="button"

         android:layout_weight="1"

         android:layout_width="wrap_content"

    android:layout_height="wrap_content"/>

</LinearLayout>

    效果:

 

 

 

3.RelativeLayout(相对布局)

RelativeLayout,其内子组件的位置总是相对兄弟UI组件、父亲容器来决定的。比如UI组件A相对于UI组件B的位置进行定位,那么UI组件B需要在UI组件A之前定义。

 相对布局用到的主要属性:
android:layout_below:在某元素的下方。
android:layout_above:在某元素的上方。
android:layout_toLeftOf:在某元素的左边。
android:layout_toRightOf:在某元素的右边。
android:layout_alignXxx:控制与某元素的边界对其方式。

示例:

<RelativeLayout 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:gravity="top"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    

    <TextView 

        android:id="@+id/view1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="中"

        android:layout_centerInParent="true"

   />

     <TextView 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="上"

        android:layout_above="@id/view1"

        android:layout_alignLeft="@id/view1"

   />

     <TextView 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="下"

        android:layout_below="@id/view1"

        android:layout_alignLeft="@id/view1"

   />

     <TextView 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="左"

        android:layout_toLeftOf="@id/view1"

        android:layout_alignTop="@id/view1"

   />

     <TextView 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="右"

        android:layout_toRightOf="@id/view1"

        android:layout_alignTop="@id/view1"

   />

</RelativeLayout>

   效果:

   

 

4.TableLayout(表格布局)

表格布局,采用行、列的形式来管理UI组件,TableLayout通过TableRow、其他UI组件来控制表格的行数和列数。

  每次向TableLayout中添加一个TableRow,该TableRow就是一个表格行,TableRow也是容器,因此它也可以不断添加其他组件,没添加一个子组件,该表格就增加一列。如果直接向TableLayout中添加组件,那么这个组件将直接占用一行。

  TableLayout支持的XML属性:
 android:collapseColumns:设置需要被隐藏的列序号。
 android:shrinkColumns:设置需要被收缩的列序号。
 android:stretchColumns:设置需要被拉伸的列序号。
 注意:TableLayout中所谓的序列号是从0开始计算的

示例:

<?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" >

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="0,1,2,3" >

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

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

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

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

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="button" />
        </TableRow>

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#00ffff" />
    </TableLayout>

</LinearLayout>

   效果:

  

5.AbsoluteLayout(绝对布局)

对于AbsoluteLayout,android不提供任何布局控制,而是由开发人员自己通过X坐标、Y坐标来控制组件的位置。
 在AbsoluteLayout中,每个子组件都需要通过两个XML属性来确定坐标:layout_x:指定该子组件的X坐标;layout_y:指定该子组件的Y坐标。

示例:

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

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="84dp"
        android:layout_y="20dp"
        android:ems="10" />

    <EditText
        android:id="@+id/EditText01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="84dp"
        android:layout_y="66dp"
        android:ems="10" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="214dp"
        android:layout_y="113dp"
        android:text="重置" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="130dp"
        android:layout_y="113dp"
        android:text="登录" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="33dp"
        android:layout_y="36dp"
        android:text="用户名" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="48dp"
        android:layout_y="80dp"
        android:text="密码" />
</AbsoluteLayout>

     效果:

    

 

帮助大家设计布局的工具:http://www.cnblogs.com/wanlipeng/archive/2010/08/18/1802715.html

© 著作权归作者所有

上一篇: Android Widgets
下一篇: Service详解
fx_zsl
粉丝 2
博文 12
码字总数 15806
作品 0
深圳
程序员
私信 提问
android设置layout的时候为什么大小颠倒了啊

我最后两个layout明明设置的是3:2但是到手机上显示的时候成了2:3了,求教。下面是我的布局文件:

找到组织
2013/01/25
282
0
scrollview tablelayout 使用问题

本人新手,在使用scrollview和tablelayout的时候出现了一个问题,望各位帮忙解惑。 先贴代码 问题描述:tablelayout中的edittext一旦获得到焦点调用出输入法后,上面2个LinearLayout里的图片...

新手螃蟹
2014/09/15
663
1
安卓开发 各种布局xml代码示例 【原创】

垂直线性布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layoutwidth......

bluecoffee
2014/05/18
268
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部