Android 布局组件

                                                       布局介绍

  布局用于定义Activity中UI元素的排列结构，Android提供了LinearLayout线性布局、RelativeLayout相对布局 、FrameLayout帧布局 、TableLayout表格布局、AbsoluteLayout坐标布局 共五种布局，可以通过两种方式声明布局：

• 在 XML 中声明 UI 元素。Android 提供了对应于 View 类及其子类的XML 元素

• 运行时实例化布局元素。可以通过编程创建 View 对象和 ViewGroup 对象（并操纵其属性）。

  在 XML 中声明 UI 的优点在于，可以更好地将应用的外观与控制应用行为的代码隔离。UI 描述位于应用代码外部，这意味着在修改或调整描述时无需修改您的源代码并重新编译。例如，可以创建适用于不同屏幕方向、不同设备屏幕尺寸和不同语言的 XML 布局。此外，在 XML 中声明布局还能更轻松地显示 UI 的结构，从而简化问题调试过程。因此，Android应用中普遍采用在XML中布局UI元素。

1.编写布局文件

布局文件都必须只包含一个根元素，并且该元素必须是视图对象或 ViewGroup 对象。定义根元素之后，即可再以子元素的形式添加其他布局对象或UI元素，从而逐步构建定义布局的视图层次结构

 


程序清单2.3-1布局文件的定义

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

<TextView android:id="@+id/text"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:text="Hello, I am a TextView" />

<Button android:id="@+id/button"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Hello, I am a Button" />

</LinearLayout>

在 XML 中声明布局后，请在您的 Android 项目 res/layout/ 目录中以 .xml 扩展名保存文件，以便其能够正确编译。

2.加载布局文件

当编译应用时，每个 XML 布局文件都会编译到一个 View 资源中。应该在 Activity.onCreate() 回调方法中使用应用代码加载布局资源。通过调用 setContentView()，以 R.layout.layout_file_name 形式向其传递对布局资源的引用来执行此操作。


程序清单2.3-2布局文件的定义

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.main_layout);

}

3.线性布局

线性布局常用属性


XML属性
值
备注

android:orientation
horizontal

vertical

 
决定横向排列，还是纵向排列

 

android:layout_weight
int
将父布局中剩余的尺寸按各兄弟元素的weight值比例进行分配，与“wrap_content”配合使用

 

android:layout_margin

 
dp

 
设置对象边缘与父布局的边缘之间的空白

 

android:padding

 
dp

 
设置自身内部元素距离自身边缘的距离

 

android:background
color/drawable
设置整个布局画面的背景

android:gravity
Top,bottom,left,right,center

 
元素在自身所属区域内的对齐方式

 

android:layout_gravity

 
Top,bottom,left,right,center

 
元素在布局中的对齐方式

练习：利用线性布局实现下图所示效果。

代码如下：

<?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:padding="10dip"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户名称"
        android:id="@+id/textView"
        android:textSize="18sp"
        android:textStyle="bold"
        />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:id="@+id/etUserName" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="密码"
        android:id="@+id/textView2"
        android:textSize="18sp"
        android:layout_marginBottom="10dip"
        />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/etPassword" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录"
            android:id="@+id/btLogin"
            android:textSize="18dp"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注册"
            android:id="@+id/btReg"
            android:textSize="18dp"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            />
    </LinearLayout>
</LinearLayout>

4.FrameLayout布局


XML属性
值
备注

android:layout_margin

 
dp

 
设置对象边缘与父布局的边缘之间的空白

 

android:padding

 
dp

 
设置自身内部元素距离自身边缘的距离

 

android:background
color/drawable
设置整个布局画面的背景

android:gravity
Top,bottom,left,right,center

 
元素在自身所属区域内的对齐方式

 

android:layout_gravity

 
Top,bottom,left,right,center

 
元素在布局中的对齐方式

练习：完成如下图所示效果

代码：

<?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"
    android:background="#000">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/movie"
        android:scaleType="centerCrop"
        android:layout_gravity="center"
        />
    <ImageView
        android:layout_width="48dip"
        android:layout_height="48dip"
        android:src="@mipmap/play"
        android:scaleType="fitCenter"
        android:layout_gravity="center"
        />
</FrameLayout>

5.相对布局RelativeLayout

  一种非常灵活的布局方式，通过指定界面元素与其他元素的相对位置关系，确定界面中所有元素的布局位置。特点：能够最大程度保证在各种屏幕类型的手机上正确显示界面布局表.

  相对布局属性比较多，为了便于理解和记忆通常我们把属性分为三类：

第一类：属性值为true或false

RelativeLayout的常用属性


XML属性
备注

android:layout_centerHrizontal
水平居中

android:layout_centerVertical
垂直居中

android:layout_centerInparent
相对于父元素完全居中

android:layout_alignParentBottom
贴紧父元素的下边缘

android:layout_alignParentLeft
贴紧父元素的左边缘

android:layout_alignParentRight
贴紧父元素的右边缘

android:layout_alignParentTop
贴紧父元素的上边缘

第二类：属性值必须为id的引用名“@id/id-name”,

RelativeLayout的常用属性


XML属性
备注

android:layout_below
在某元素的下方

android:layout_above
在某元素的的上方

android:layout_toLeftOf
在某元素的左边

android:layout_toRightOf
在某元素的右边

android:layout_alignTop
本元素的上边缘和某元素的的上边缘对齐

android:layout_alignLeft
本元素的左边缘和某元素的的左边缘对齐

android:layout_alignBottom
本元素的下边缘和某元素的的下边缘对齐

第三类：属性值为具体的像素值,主要是调整ui元素之间的间距，如表2.3-5所示

表2.3-5RelativeLayout的常用属性


XML属性
备注

android:layout_marginBottom
离某元素底边缘的距离

android:layout_marginLeft
离某元素左边缘的距离

android:layout_marginRight
离某元素右边缘的距离

android:layout_marginTop
离某元素上边缘的距离

android:layout_marginBottom
离某元素底边缘的距离

android:layout_marginLeft
离某元素左边缘的距离

android:layout_marginRight
离某元素右边缘的距离 

练习：完成如下图所示效果

代码：

<?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"
    android:paddingRight="10dp"
    android:paddingLeft="10dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    >
    <ImageView
        android:id="@+id/ivLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_marginRight="5dp"
        />
    <TextView
        android:id="@+id/tvTitle"
        android:layout_toRightOf="@id/ivLogin"
        android:layout_alignTop="@id/ivLogin"
        android:layout_alignBottom="@id/ivLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录" android:textSize="18sp"
        android:gravity="center"
        />
    <TextView
        android:id="@+id/tvSummary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvTitle"
        android:text="欢迎加入杰瑞教育"
        android:layout_toRightOf="@+id/tvTitle"
        />
    <EditText
        android:id="@+id/etName"
        android:hint="账户/邮箱/手机号码"
        android:layout_below="@+id/tvSummary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/etPwd"
        android:hint="密码"
        android:layout_below="@+id/etName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:textSize="16sp"
        android:layout_alignParentBottom="true"
        />

</RelativeLayout>

6.表格布局TableLayout

  Tablelayout以行和列的形式对控件进行管理，每一行为一个TableRow对象，或一个View控件。当TableRow对象时，可在TableRow下添加子控件，默认情况下，每个子控件占据一列。有多少个子控件就有多少列;当为View时，该View将独占一行。

TableLayout的常用属性


XML属性
备注

android:layout_colum
指定该单元格在第几列显示

android:layout_span
指定该单元格占据的列数（未指定时，为1）

android:stretchColumns
设置可伸展的列。该列可向行方向伸展，最多可占据一整行

android:shrinkColumns
设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，那么该子控件的内容将往列方向显示

android:layout_colum
指定该单元格在第几列显示

android:layout_span
指定该单元格占据的列数（未指定时，为1）

android:stretchColumns
设置可伸展的列。该列可向行方向伸展，最多可占据一整行

练习：完成今日头条界面。

                      需要完成效果                                   已完成效果

 

代码：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="0,1,2,3"
    >

    <TextView
        android:text="今日头条"
        android:textColor="#ffffff"
        android:textSize="30sp"
        android:gravity="center"
        android:background="#ff0000" />
    <TableRow>
        <TextView
            android:text="我的频道"
            android:textSize="20sp"
            android:id="@+id/pindao" />
        <TextView
            android:text="编辑"
            android:textColor="#ff00"
            android:gravity="end"
            android:layout_span="2" />
        <TextView
            android:text="^"
            android:layout_gravity="center"
            android:textSize="20sp"
            android:gravity="end" />
    </TableRow>

    <TableRow>

        <Button android:text="健康" />
        <Button android:text="正能量"/>
        <Button android:text="特卖"/>
        <Button android:text="彩票"/>
    </TableRow>
    <TableRow>
        <Button android:text="旅游"/>
    </TableRow>
    <TextView
        android:text="点击添加频道"
        android:textSize="20sp" />
    <TableRow>
        <Button android:text="电影"/>
        <Button android:text="数码"/>
        <Button android:text="时尚"/>
        <Button android:text="辟谣"/>
    </TableRow>
    <TableRow>
        <Button android:text="奇葩"/>
        <Button android:text="游戏"/>
        <Button android:text="育儿"/>
        <Button android:text="减肥"/>
    </TableRow>
    <TableRow>
        <Button android:text="养生"/>
        <Button android:text="美食"/>
        <Button android:text="政务"/>
        <Button android:text="历史"/>
    </TableRow>
    <TableRow>
        <Button android:text="探索"/>
        <Button android:text="故事"/>
        <Button android:text="美文"/>
        <Button android:text="情感"/>
    </TableRow>
    <TableRow>
        <Button android:text="语录"/>
        <Button android:text="美团"/>
        <Button android:text="房产"/>
        <Button android:text="家居"/>
    </TableRow>
    <TableRow>
        <Button android:text="搞笑"/>
        <Button android:text="星座"/>
        <Button android:text="文化"/>
        <Button android:text="毕业生"/>
    </TableRow>
</TableLayout>

7.绝对布局AbsoluteLayout

  AbsoluteLayout是根据元素指定的x/y坐标值在屏幕上进行显示的布局。容器的坐标系是以左上角为(0, 0)点，当垂直向下为y轴和水平向右为x轴。AbsoluteLayout 没有页边框，允许元素之间互相重叠。

因为需要为元素固定坐标点，使界面代码太过刚性，以导致在不同的设备上兼容性差，开发中我们通常不推荐使用 AbsoluteLayout ，只需简单了解即可。

代码：

<?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">
    <ImageView
        android:layout_x="280px"
        android:layout_y="200px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
    />
    </AbsoluteLayout>

7.GridLayoutbu布局

  GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。而GridLayout使用的其实是跟LinearLayout类似的API，只不过是修改了一下相关的标签而已。GridLayout的布局策略简单分为以下三个部分：

　　首先它与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即可，前一个设置表明该控件跨越的行数或列数，后一个设置表明该控件填满所跨越的整行或整列。

练习：完成如下图所示效果

                需要完成效果                                               已完成效果

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:rowCount="5"
    android:columnCount="4"
    >
<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:text="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        />
    <Button
        android:id="@+id/point"
        android:text="."
        />
    <Button
        android:id="@+id/plus"
        android:text="+"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        />
    <Button
        android:id="@+id/erual"
        android:text="="
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        />
</GridLayout>

　　

　　

　　


时间： 2024-08-03 12:33:47

Android 布局组件的相关文章

Android布局技巧之创建可重用的UI组件_Android

Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个标准的构件结合起来成为一个单独的.可重用的组件. 例如,你可以创建一个可重用的组件包含一个进度条和一个取消按钮,一个Panel包含两个按钮(确定和取消动作),一个Panel包含图标.标题和描述等等.简单的,你可以通过书写一个自定义的View来创建一个UI组件,但更简单的方式是仅使用XML来实现. 在

Android布局技巧之创建可重用的UI组件

Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个标准的构件结合起来成为一个单独的.可重用的组件. 例如,你可以创建一个可重用的组件包含一个进度条和一个取消按钮,一个Panel包含两个按钮(确定和取消动作),一个Panel包含图标.标题和描述等等.简单的,你可以通过书写一个自定义的View来创建一个UI组件,但更简单的方式是仅使用XML来实现. 在

Android布局优化

categories: Android 在Android开发中,我们常用的布局方式主要有LinearLayout.RelativeLayout.FrameLayout等,通过这 些布局我们可以实现各种各样的界面.与此同时,如何正确.高效的使用这些布局方式来组织UI控件,是我们 构建优秀Android App的主要前提之一.本篇内容就主要围绕Android布局优化来讨论在日常开发中我们使用常 用布局需要注意的一些方面,同时介绍一款SDK自带的UI性能检测工具HierarchyViewer. 布局原

Android组件系列----Android Service组件深入解析

[前言] 花了周末两天的时间,整理了一下作为Android四大组件之一的Service的基础知识,通过这篇文章,应该可以明白:对Service的理解.在什么地方使用.怎么使用.要注意哪些问题等. [本文主要内容] 一.Service的基本概念(四大组件之一)二.定义(启动)一个Service 1.如何定义(启动)一个Service: 2.停止一个started服务有两种方法 3.onStartCommand方法的返回值 三.IntentService 1.IntentService的引入 2.I

Android UI组件

Android UI组件实例源码下载学习,对你的学习帮助是直接的,以下是下载包中的资料. 1.Android显示GIF动画 GifView GifView 是一个为了解决android中现在没有直接显示gif的view,只能通过mediaplay来显示这个问题的项目,其用法和 ImageView一样,支持gif图片使用方法:1-把GifView.jar加入你的项目.2-在xml中配置GifView的基本属性,GifView继承自View类,和Button.ImageView一样是一个UI控件.

XCoreRedux框架:Android UI组件化与Redux实践

XCoreRedux框架:Android UI组件化与Redux实践 @author: 莫川 https://github.com/nuptboyzhb/ XCoreRedux源码+Demo:https://github.com/nuptboyzhb/XCoreRedux 使用android studio打开该项目. 目录结构 demo 基于xcore框架写的一个小demo xcore XCoreRedux核心代码库 pics 文档的pic资源 前言 Android开发当中的Code Archi

Android四大组件之——Activity的生命周期（图文详解）

      转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai       联系方式:JohnTsai.Work@gmail.com       [Android四大组件学习系列Activity篇]       1.Android四大组件之--Activity(一)定义.状态和后退栈(图文详解)       2.Android四大组件之--Activity的生命周期(图文详解)      上一篇文章讲了Activity的定义.状态和后退栈,现在讲讲A

Android布局技巧之使用ViewStub_Android

多亏了<include />标签,在Android里,很容易就能做到共享和重用UI组件.在Android开发中,很容易就能创建出复杂的UI结构,结果呢,用了很多的View,且其中的一些很少使用.针对这种情况,谢天谢地,Android还为我们提供了一个特别的构件--ViewStub,它可以使你充分享受<include />的好处而不会造成无用View的浪费. ViewStub是一个看不见的,轻量级的View.它没有尺寸,也不会绘制以及以某种形式参与到布局中来.这意味着ViewStub

Android布局之LinearLayout线性布局_Android

LinearLayout是线性布局控件:要么横向排布,要么竖向排布 常用属性: android:gravity------------设置的是控件自身上面的内容位置 android:layout_gravity-----设置控件本身相对于父控件的显示位置 android:layout_weight----- 给控件分配剩余空间 先给大家展示一下导图: 知识点详解(演示效果方便组件没有设置id) (1)gravity和Layout_gravity android:gravity 属性是对该view