Android UI基础之五大布局-程序员宅基地

技术标签: c#  ui  移动开发  

Android  UI基础之五大布局

 

 Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。Android的五大布局分别是LinearLayout(线性布局)、FrameLayout(单帧布局)、RelativeLayout(相对布局)、AbsoluteLayout(绝对布局,Android2.0中标注为已过期)和TableLayout(表格布局)

 

LinearLayout

线性布局

子元素任意

FrameLayout

帧布局

子元素任意

TableLayout

表格布局

子元素为<TableRow>,其中可放各种控件

RelativeLayout

相对布局

子元素任意

AbsoluteLayout

绝对布局

子元素任意

 

公共控件属性:

android:id=

"@+id/***"

控件id

android:layout_width=

android:layout_height=

"wrap_content"

"match_parent"

"fill_parent"

控件的宽度

控件的高度

android:layout_marginLeft=

android:layout_marginRight=

android:layout_marginTop=

android:layout_marginBottom=

“5dip” 

控件各边距离其他控件的距离

android:text=

"***"

控件的文本内容

android:textSize=

 

控件的文本大小

android:textColor=

“#FFFFFFFF”

控件的文本颜色

android:textStyle =

"normal"/"bold"/"italic" 

控件的文本格式

android:background =

“@drawable/background”

“#FFFFFFFF”

控件的背景(图片或颜色)

android:src =

“@drawable/image”

控件的图片

android:visibility=

"visible"

"invisible"

"gone"

"visible"表可见,

"invisible"表不可见,但在布局中占用的位置还在,

"gone"表不可见,完全从布局中消失

android:padding=

“5dip” 

控件内容距离控件边界的距离

android:weight=    

 

控件占有的权重

android:ems=

android:maxEms=

android:minEms=

 

空间的宽度

android:gravity=

“top”,”left”,”start”,”fill”,”center”…

控件元素在控件显示的位置

一、LinearLayout

LinearLayout重要属性

android:orientation=

“horizontal”

“vertaical”

布局中子控件排布方向

 

  LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后。如果是垂直排列,那么将是一个N行单列的结构,每一行只会有一个元素,而不论这个元素的宽度为多少;如果是水平排列,那么将是一个单行N列的结构。如果搭建两行两列的结构,通常的方式是先垂直排列两个元素,每一个元素里再包含一个LinearLayout进行水平排列。

  LinearLayout中的子元素属性android:layout_weight生效,它用于描述该子元素在剩余空间中占有的大小比例。加入一行只有一个文本框,那么它的默认值就为0,如果一行中有两个等长的文本框,那么他们的android:layout_weight值可以是同为1。如果一行中有两个不等长的文本框,那么他们的android:layout_weight值分别为1和2,那么第一个文本框将占据剩余空间的三分之二,第二个文本框将占据剩余空间中的三分之一。android:layout_weight遵循数值越小,重要度越高的原则。显示效果如下:

 

<?xml version="1.0" encoding="utf-8"?>

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

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

     <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="#ff000000"

        android:text="@string/hello"/>

    <LinearLayout

        android:orientation="horizontal"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent">

         <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:background="#ff654321"

            android:layout_weight="1"

            android:text="1"/>

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:background="#fffedcba"

            android:layout_weight="2"

            android:text="2"/>

    </LinearLayout>

</LinearLayout>

 

 

二、FrameLayout:

  FrameLayout是五大布局中最简单的一个布局,在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。显示效果如下,第一个TextView被第二个TextView完全遮挡,第三个TextView遮挡了第二个TextView的部分位置。

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:background="#ff000000" 
        android:gravity="center" 
        android:text="1"/>
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:background="#ff654321" 
        android:gravity="center" 
        android:text="2"/>
    <TextView 
        android:layout_width="50dp" 
        android:layout_height="50dp" 
        android:background="#fffedcba" 
        android:gravity="center" 
        android:text="3"/>
 </FrameLayout> 

 



 

三、AbsoluteLayout:(Android2.0中标注为已过期,不推荐使用)

AbsoluteLayout重要属性

android:layout_X/Y

 

控件的X,Y坐标

        

         AbsoluteLayout是绝对位置布局。在此布局中的子元素的android:layout_x和android:layout_y属性将生效,用于描述该子元素的坐标位置。屏幕左上角为坐标原点(0,0),第一个0代表横坐标,向右移动此值增大,第二个0代表纵坐标,向下移动,此值增大。在此布局中的子元素可以相互重叠。在实际开发中,通常不采用此布局格式,因为它的界面代码过于刚性,以至于有可能不能很好的适配各种终端。显示效果如下:

 

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <TextView

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:background="#ffffffff"

        android:gravity="center"

        android:layout_x="50dp"

        android:layout_y="50dp"

        android:text="1"/>

    <TextView

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:background="#ff654321"

        android:gravity="center"

        android:layout_x="25dp"

        android:layout_y="25dp"

        android:text="2"/>

    <TextView

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:background="#fffedcba"

        android:gravity="center"

        android:layout_x="125dp"

        android:layout_y="125dp"

        android:text="3"/>

</AbsoluteLayout>

 

 

四、RelativeLayout

RelativeLayout重要属性

android:layout_alignParentLeft

android:layout_alignParentRight

android:layout_alignParentTop

android:layout_alignParentBottom

“true”

“false”

控件在布局中的相对位置

android:orientation 

“horizontal”

“vertaical”

布局中子控件排布方向

android:layout_toRightOf

android:layout_toLeftOf

android:layout_below

android:layout_above

“@+id/***”

控件和某个控件的位置关系

android:layout_alignTop

android:layout_alignBottom

android:layout_alignLeft

android:layout_alignRight

android:layout_alignBaseline

“@+id/***”

控件与其他控件对齐

android:layout_centerHorizontal

android:layout_centerVirtical

android:layout_centerInParent

 

指定控件位于水平/垂直/父控件的中间位置

 

  RelativeLayout按照各子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效。例如android:layout_below, android:layout_above等。子元素就通过这些属性和各自的ID配合指定位置关系。注意在指定位置关系时,引用的ID必须在引用之前,先被定义,否则将出现异常。

  RelativeLayout是Android五大布局结构中最灵活的一种布局结构,比较适合一些复杂界面的布局。下面示例就展示这么一个情况,第一个文本框与父组件的底部对齐,第二个文本框位于第一个文本框的上方,并且第三个文本框位于第二个文本框的左方。

 

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <TextView 

        android:id="@+id/text_01" 

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:background="#ffffffff"

        android:gravity="center"

        android:layout_alignParentBottom="true" 

        android:text="1"/>

    <TextView 

        android:id="@+id/text_02"

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:background="#ff654321"

        android:gravity="center"

        android:layout_above="@id/text_01" 

        android:layout_centerHorizontal="true" 

        android:text="2"/>

    <TextView 

        android:id="@+id/text_03"

        android:layout_width="50dp"

        android:layout_height="50dp" 

        android:background="#fffedcba"

        android:gravity="center"

        android:layout_toLeftOf="@id/text_02"

        android:layout_above="@id/text_01" 

        android:text="3"/>

</RelativeLayout>

 

 

五、TableLayout

TableLayout重要属性

android:stretchColums

 

指定当一个TableRow中的控件不够填充满整个宽度时,将会被拉伸的条目

 

         TableLayout顾名思义,此布局为表格布局,适用于N行N列的布局格式。一个TableLayout由许多TableRow组成,一个TableRow就代表TableLayout中的一行。

  TableRow是LinearLayout的子类,它的android:orientation属性值恒为horizontal,并且它的android:layout_width和android:layout_height属性值恒为MATCH_PARENT和WRAP_CONTENT。所以它的子元素都是横向排列,并且宽高一致的。这样的设计使得每个TableRow里的子元素都相当于表格中的单元格一样。在TableRow中,单元格可以为空,但是不能跨列。

  下面示例演示了一个TableLayout的布局结构,其中第二行只有两个单元格,而其余行都是三个单元格。

 

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:orientation="vertical" 

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent">

    <TableRow 

        android:layout_width="fill_parent"

        android:layout_height="wrap_content">

        <TextView  

            android:background="#ffffffff"

            android:gravity="center" 

            android:padding="10dp"

            android:text="1"/>

        <TextView 

            android:background="#ff654321"

            android:gravity="center"

            android:padding="10dp" 

            android:text="2"/>

        <TextView  

            android:background="#fffedcba" 

            android:gravity="center" 

            android:padding="10dp"

            android:text="3"/>

    </TableRow>

    <TableRow 

        android:layout_width="fill_parent"

        android:layout_height="wrap_content">

        <TextView 

            android:background="#ff654321"

            android:gravity="center"

            android:padding="10dp" 

            android:text="2"/>

        <TextView 

            android:background="#fffedcba"

            android:gravity="center" 

            android:padding="10dp"

            android:text="3"/>

    </TableRow>

    <TableRow 

        android:layout_width="fill_parent"

        android:layout_height="wrap_content">

        <TextView android:background="#fffedcba" 

            android:gravity="center"

            android:padding="10dp"

            android:text="3"/>

        <TextView  

            android:background="#ff654321"

            android:gravity="center"

            android:padding="10dp" 

            android:text="2"/>

        <TextView 

            android:background="#ffffffff" 

            android:gravity="center" 

            android:padding="10dp" 

            android:text="1"/>

    </TableRow>

</TableLayout>

 

 

 文中部分内容参考博文:http://blog.csdn.net/luckkof

 

转载于:https://www.cnblogs.com/guodongdidi/p/5413109.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dengtuan6285/article/details/101230120

智能推荐

分布式光纤传感器的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告_预计2026年中国分布式传感器市场规模有多大-程序员宅基地

文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势,分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括:FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大

07_08 常用组合逻辑电路结构——为IC设计的延时估计铺垫_基4布斯算法代码-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的:估计模块间的delay,确保写的代码的timing 综合能给到多少HZ,以满足需求!_基4布斯算法代码

OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏5次。OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版

关于美国计算机奥赛USACO,你想知道的都在这_usaco可以多次提交吗-程序员宅基地

文章浏览阅读2.2k次。USACO自1992年举办,到目前为止已经举办了27届,目的是为了帮助美国信息学国家队选拔IOI的队员,目前逐渐发展为全球热门的线上赛事,成为美国大学申请条件下,含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学,越来越多的学生进入了康奈尔,麻省理工,普林斯顿,哈佛和耶鲁等大学,这些同学的共同点是他们都参加了美国计算机科学竞赛(USACO),并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学,高三学生也可以参加12月的第_usaco可以多次提交吗

MySQL存储过程和自定义函数_mysql自定义函数和存储过程-程序员宅基地

文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程

半导体基础知识与PN结_本征半导体电流为0-程序员宅基地

文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0

随便推点

【Unity3d Shader】水面和岩浆效果_unity 岩浆shader-程序员宅基地

文章浏览阅读2.8k次,点赞3次,收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画(无顶点位移),整个mesh由4个顶点构成。实现了水面效果(左图),不动代码稍微修改下参数和贴图可以实现岩浆效果(右图)。有要思路是1,uv按时间去做正弦波移动2,在1的基础上加个凹凸图混合uv3,在1、2的基础上加个水流方向4,加上对雾效的支持,如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader

广义线性模型——Logistic回归模型(1)_广义线性回归模型-程序员宅基地

文章浏览阅读5k次。广义线性模型是线性模型的扩展,它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为:其中g(μY)是条件均值的函数(称为连接函数)。另外,你可放松Y为正态分布的假设,改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后,便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下,线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是,有时候我们要进行非正态因变量的分析,例如:(1)类别型.._广义线性回归模型

HTML+CSS大作业 环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计 网页规划与设计_垃圾分类网页设计目标怎么写-程序员宅基地

文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点,网页的风格主题也很全面:如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题,学生、新手可参考下方页面的布局和设计和HTML源码(有用点赞△) 一套A+的网_垃圾分类网页设计目标怎么写

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁_.net dll 全局目录-程序员宅基地

文章浏览阅读614次,点赞7次,收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录

BRIEF特征点描述算法_breif description calculation 特征点-程序员宅基地

文章浏览阅读1.5k次。本文为转载,原博客地址:http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出,BRIEF是对已检测到的特征点进行描述,它是一种二进制编码的描述子,摈弃了利用区域灰度..._breif description calculation 特征点

房屋租赁管理系统的设计和实现,SpringBoot计算机毕业设计论文_基于spring boot的房屋租赁系统论文-程序员宅基地

文章浏览阅读4.1k次,点赞21次,收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档,可以给应届毕业生提供格式撰写参考,也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文