AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

Android软件开发之盘点界面五大布局

2012-04-08 844
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 雨松MOMO原创文章如转载，请注明：转载自雨松MOMO的博客原文地址:http://blog.csdn.net/xys289187120/article/details/66554941.线性布局(LinearLayout)        线性布局的形式可以分为两种，第一种横向线性布局 第二种纵向线性布局，总而言之都是以线性的形式 一个个排列出来的，纯线性布局的缺点是很不方便修改控件的显示位置，所以开发中经常会 以 线性布局与相对布局嵌套的形式设置布局。
雨松MOMO原创文章如转载，请注明：转载自雨松MOMO的博客原文地址:http://blog.csdn.net/xys289187120/article/details/6655494








1.线性布局(LinearLayout)

        线性布局的形式可以分为两种，第一种横向线性布局 第二种纵向线性布局，总而言之都是以线性的形式 一个个排列出来的，纯线性布局的缺点是很不方便修改控件的显示位置，所以开发中经常会 以 线性布局与相对布局嵌套的形式设置布局。






如图所示 使用了线性布局的水平方向与垂直方向，从图中可以清晰的看出来所有控件都是按照线性的排列方式显示出来的，这就是线性布局的特点。

设置线性布局为水平方向
 android:orientation="horizontal"
设置线性布局为垂直方向
 android:orientation="vertical"
设置正比例分配控件范围
android:layout_weight="1"
设置控件显示位置，这里为水平居中
 android:gravity="center_horizontal"

在xml中我使用了LinearLayout 嵌套的方式 配置了2个线性布局 一个水平显示 一个垂直显示。

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent" 
  6.     android:orientation="vertical" 
  7.     > 
  8. <LinearLayout  
  9.     android:layout_width="fill_parent"  
  10.     android:layout_height="fill_parent" 
  11.     android:orientation="horizontal" 
  12.     android:gravity="center_horizontal" 
  13.     android:layout_weight="2" 
  14.     > 
  15.     <ImageView 
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content" 
  18.         android:src="@drawable/jay" 
  19.     /> 
  20.      
  21.     <TextView 
  22.         android:layout_width="wrap_content"  
  23.         android:layout_height="wrap_content" 
  24.         android:text="雨松MOMO" 
  25.         android:background="#FF0000" 
  26.         android:textColor="#000000"   
  27.         android:textSize="18dip"   
  28.     /> 
  29.     <EditText 
  30.         android:layout_width="wrap_content"  
  31.         android:layout_height="wrap_content" 
  32.         android:text="水平方向" 
  33.     /> 
  34. </LinearLayout> 
  35.  
  36. <LinearLayout  
  37.     android:layout_width="fill_parent"  
  38.     android:layout_height="fill_parent" 
  39.     android:orientation="vertical" 
  40.     android:layout_weight="1" 
  41.     > 
  42.      
  43.     <TextView 
  44.         android:layout_width="wrap_content"  
  45.         android:layout_height="wrap_content" 
  46.         android:text="雨松MOMO" 
  47.         android:background="#FF0000" 
  48.         android:textColor="#000000"   
  49.         android:textSize="18dip"   
  50.     /> 
  51.     <EditText 
  52.         android:layout_width="wrap_content"  
  53.         android:layout_height="wrap_content" 
  54.         android:text="垂直方向" 
  55.     /> 
  56.     <Button 
  57.         android:layout_width="wrap_content"  
  58.         android:layout_height="wrap_content" 
  59.         android:text="雨松MOMO" 
  60.     /> 
  61.     <ImageView 
  62.         android:layout_width="wrap_content"  
  63.         android:layout_height="wrap_content" 
  64.         android:src="@drawable/image" 
  65.     /> 
  66. </LinearLayout> 
  67. </LinearLayout> 


2.相对布局(RelativeLayout)

        相对布局是android布局中最为强大的，首先它可以设置的属性是最多了，其次它可以做的事情也是最多的。android手机屏幕的分辨率五花八门所以为了考虑屏幕自适应的情况所以在开发中建议大家都去使用相对布局 它的坐标取值范围都是相对的所以使用它来做自适应屏幕是正确的。







设置距父元素右对齐
android:layout_alignParentRight="true"
设置该控件在id为re_edit_0控件的下方
android:layout_below="@id/re_edit_0"
设置该控件在id为re_image_0控件的左边
android:layout_toLeftOf="@id/re_iamge_0"
设置当前控件与id为name控件的上方对齐
android:layout_alignTop="@id/name"
设置偏移的像素值
android:layout_marginRight="30dip"


[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent" 
  6.     > 
  7.     <EditText 
  8.         android:id="@+id/re_edit_0" 
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content" 
  11.         android:text="雨松MOMO" 
  12.         android:layout_alignParentRight="true" 
  13.     /> 
  14.     <ImageView 
  15.         android:id="@+id/re_iamge_0" 
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content" 
  18.         android:src="@drawable/jay" 
  19.         android:layout_below="@id/re_edit_0" 
  20.         android:layout_alignParentRight="true" 
  21.     /> 
  22.     <TextView 
  23.         android:layout_width="wrap_content"  
  24.         android:layout_height="wrap_content" 
  25.         android:background="#FF0000" 
  26.         android:text="努力学习" 
  27.         android:textColor="#000000"   
  28.         android:textSize="18dip"   
  29.         android:layout_toLeftOf="@id/re_iamge_0" 
  30.     /> 
  31.     <EditText 
  32.         android:id="@+id/re_edit_1" 
  33.         android:layout_width="wrap_content"  
  34.         android:layout_height="wrap_content" 
  35.         android:text="雨松MOMO" 
  36.         android:layout_alignParentBottom="true" 
  37.     /> 
  38.     <ImageView 
  39.         android:id="@+id/re_iamge_1" 
  40.         android:layout_width="wrap_content"  
  41.         android:layout_height="wrap_content" 
  42.         android:src="@drawable/image" 
  43.         android:layout_above="@id/re_edit_1" 
  44.     /> 
  45.     <TextView 
  46.         android:layout_width="wrap_content"  
  47.         android:layout_height="wrap_content" 
  48.         android:background="#FF0000" 
  49.         android:text="努力工作" 
  50.         android:textColor="#000000"   
  51.         android:textSize="18dip"   
  52.         android:layout_toRightOf="@id/re_iamge_1" 
  53.         android:layout_above="@id/re_edit_1" 
  54.     /> 
  55. </RelativeLayout> 



3.帧布局(FrameLayout)

        原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖，最后绘制的控件会盖住之前的控件。如图所示界面中先绘制的ImageView 然后在绘制的TextView和EditView 所以后者就覆盖在了前者上面。










[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <FrameLayout 
  3.     xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:layout_width="fill_parent" 
  5.     android:layout_height="fill_parent"> 
  6.     <ImageView 
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="wrap_content" 
  9.         android:src="@drawable/g" 
  10.     /> 
  11.     <TextView 
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content" 
  14.         android:text="雨松MOMO" 
  15.         android:background="#FF0000" 
  16.         android:textColor="#000000"   
  17.         android:textSize="18dip"   
  18.     /> 
  19.     <ImageView 
  20.         android:layout_width="wrap_content"  
  21.         android:layout_height="wrap_content" 
  22.         android:src="@drawable/image" 
  23.         android:layout_gravity="bottom" 
  24.     /> 
  25.     <EditText 
  26.         android:layout_width="wrap_content"  
  27.         android:layout_height="wrap_content" 
  28.         android:text="快乐生活每一天喔" 
  29.         android:layout_gravity="bottom" 
  30.     /> 
  31. </FrameLayout> 

4.绝对布局(AbsoluteLayout)

       使用绝对布局可以设置任意控件的 在屏幕中 X Y 坐标点，和帧布局一样后绘制的控件会覆盖住之前绘制的控件，笔者不建议大家使用绝对布局还是那句话因为android的手机分辨率五花八门所以使用绝对布局的话在其它分辨率的手机上就无法正常的显示了。









设置控件的显示坐标点
[html] view plain copy print ?
  1. android:layout_x="50dip" 
  2. android:layout_y="30dip" 



[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"> 
  6.     <ImageView 
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="wrap_content" 
  9.         android:src="@drawable/f" 
  10.         android:layout_x="100dip" 
  11.         android:layout_y="50dip" 
  12.     /> 
  13.     <TextView 
  14.         android:layout_width="wrap_content"  
  15.         android:layout_height="wrap_content" 
  16.         android:text="当前坐标点 x = 100dip y = 50 dip" 
  17.         android:background="#FFFFFF" 
  18.         android:textColor="#FF0000"   
  19.         android:textSize="18dip"   
  20.         android:layout_x="50dip" 
  21.         android:layout_y="30dip" 
  22.     /> 
  23.      
  24.     <ImageView 
  25.         android:layout_width="wrap_content"  
  26.         android:layout_height="wrap_content" 
  27.         android:src="@drawable/h" 
  28.         android:layout_x="50dip" 
  29.         android:layout_y="300dip" 
  30.     /> 
  31.     <TextView 
  32.         android:layout_width="wrap_content"  
  33.         android:layout_height="wrap_content" 
  34.         android:text="当前坐标点 x = 50dip y = 300 dip" 
  35.         android:background="#FFFFFF" 
  36.         android:textColor="#FF0000"   
  37.         android:textSize="18dip"   
  38.         android:layout_x="30dip" 
  39.         android:layout_y="280dip" 
  40.     /> 
  41. </AbsoluteLayout> 

5.表格布局(TableLayout)
      
       在表格布局中可以设置TableRow 可以设置 表格中每一行显示的内容 以及位置 ，可以设置显示的缩进，对齐的方式。






[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:layout_width="fill_parent" 
  4.     android:layout_height="fill_parent" 
  5.     > 
  6.     <ImageView 
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="wrap_content" 
  9.         android:src="@drawable/g" 
  10.         android:layout_gravity="center" 
  11.     /> 
  12.     <TableRow 
  13.         android:layout_width="wrap_content" 
  14.         android:layout_height="fill_parent" 
  15.         android:padding="10dip"> 
  16.         <TextView 
  17.             android:text="姓名"  
  18.             android:gravity="left" 
  19.             /> 
  20.         <TextView 
  21.             android:text="电话" 
  22.             android:gravity="right"/> 
  23.     </TableRow> 
  24.     
  25.     <View 
  26.         android:layout_height="2dip" 
  27.         android:background="#FFFFFF" /> 
  28.     
  29.     <TableRow 
  30.         android:layout_width="wrap_content" 
  31.         android:layout_height="fill_parent" 
  32.         android:padding="10dip"> 
  33.         <TextView 
  34.             android:text="雨松"  
  35.             android:gravity="left" 
  36.             /> 
  37.         <TextView 
  38.             android:text="15810463139" 
  39.             android:gravity="right"/> 
  40.     </TableRow> 
  41.      
  42.     <TableRow 
  43.         android:layout_width="wrap_content" 
  44.         android:layout_height="fill_parent" 
  45.         android:padding="10dip"> 
  46.         <TextView 
  47.             android:text="小可爱"  
  48.             android:gravity="left" 
  49.             /> 
  50.         <TextView 
  51.             android:text="15810463139" 
  52.             android:gravity="right"/> 
  53.     </TableRow> 
  54.  
  55.     <TableRow 
  56.         android:layout_width="wrap_content" 
  57.         android:layout_height="fill_parent" 
  58.         android:padding="10dip"> 
  59.         <TextView 
  60.             android:text="好伙伴"  
  61.             android:gravity="left" 
  62.             /> 
  63.         <TextView 
  64.             android:text="15810463139" 
  65.             android:gravity="right"/> 
  66.     </TableRow> 
  67.  
  68.     <TableRow 
  69.         android:layout_width="wrap_content" 
  70.         android:layout_height="fill_parent" 
  71.         android:padding="10dip" 
  72.         > 
  73.         <TextView 
  74.             android:text="姓名"  
  75.             android:gravity="left" 
  76.             /> 
  77.         <TextView 
  78.             android:text="性别" 
  79.             android:gravity="right"/> 
  80.     </TableRow> 
  81.     
  82.     <View 
  83.         android:layout_height="2dip" 
  84.         android:background="#FFFFFF" /> 
  85.     
  86.     <TableRow 
  87.         android:layout_width="wrap_content" 
  88.         android:layout_height="fill_parent" 
  89.         android:padding="10dip" 
  90.         > 
  91.         <TextView 
  92.             android:text="雨松MOMO"  
  93.             android:gravity="left" 
  94.             /> 
  95.         <TextView 
  96.             android:text="男" 
  97.             android:gravity="right"/> 
  98.     </TableRow> 
  99.      
  100.     <TableRow 
  101.         android:layout_width="wrap_content" 
  102.         android:layout_height="fill_parent" 
  103.         android:padding="10dip"> 
  104.         <TextView 
  105.             android:text="小可爱"  
  106.             android:gravity="left" 
  107.             /> 
  108.         <TextView 
  109.             android:text="女" 
  110.             android:gravity="right"/> 
  111.     </TableRow> 
  112.  
  113.     <TableRow 
  114.         android:layout_width="wrap_content" 
  115.         android:layout_height="fill_parent" 
  116.         android:padding="10dip"> 
  117.         <TextView 
  118.             android:text="好伙伴"  
  119.             android:gravity="left" 
  120.             /> 
  121.         <TextView 
  122.             android:text="男" 
  123.             android:gravity="right"/> 
  124.     </TableRow> 
  125.  
  126. </TableLayout> 




        Android五大布局的基本使用方法已经介绍完，最后笔者在这里强调一下在开发与学习中建议大家使用相对布局，首先它的方法属性是最强大的其次它基本可以实现其它4大布局的效果，当然这里说的不是全部 有时候还是须要使用其他布局， 所以笔者建议大家开发中以实际情况定夺，以上五种布局可以使用布局嵌套的方式可以做出更好看的更美观的布局。



最后如果你还是觉得我写的不够详细 看的不够爽 不要紧我把源代码的下载地址贴出来 欢迎大家一起讨论学习雨松MOMO希望可以和大家一起进步。

下载地址：http://download.csdn.net/source/3490180

文章标签：
Android开发
数据格式
XML
编解码
关键词：
Android布局
Android界面
Android软件开发
Android界面布局
挨踢人生
目录
相关文章
计蒙不吃鱼
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框（华为云APP）
本文介绍了一款自定义输入框的实现，包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局，使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果，支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台，提供完整源码与attrs配置，方便复用与定制。希望对开发者有所帮助。
计蒙不吃鱼
265 0
卓伊凡
|
9月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
卓伊凡
275 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
卓伊凡
|
9月前
|
XML 存储 Java
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
卓伊凡
231 3
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
计蒙不吃鱼
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先，作者自定义了一个圆角图片控件`MellowImageView`，用于绘制圆角矩形图片。接着，通过将布局放入`HorizontalScrollView`中，实现了左右滑动功能，并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例，包括XML布局、动画文件和Java代码，最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
计蒙不吃鱼
516 65
Android自定义view之网易云推荐歌单界面
君子世无双~
|
移动开发 监控 前端开发
构建高效Android应用：从优化布局到提升性能
【7月更文挑战第60天】在移动开发领域，一个流畅且响应迅速的应用程序是用户留存的关键。针对Android平台，开发者面临的挑战包括多样化的设备兼容性和性能优化。本文将深入探讨如何通过改进布局设计、内存管理和多线程处理来构建高效的Android应用。我们将剖析布局优化的细节，并讨论最新的Android性能提升策略，以帮助开发者创建更快速、更流畅的用户体验。
君子世无双~
293 10
游客syv66y3m2ksnc
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
游客syv66y3m2ksnc
1029 0
计蒙不吃鱼
|
Android开发 开发者
Android企业级实战-界面篇-3
本文是《Android企业级实战-界面篇》系列的第三篇，主要介绍分割线和条形跳转框的实现方法，二者常用于设置和个人中心界面。文章通过具体代码示例展示了如何实现这两种UI组件，并提供了效果图。实现前需准备`dimens.xml`、`ids.xml`、`colors.xml`等文件，部分资源可参考系列第一、二篇文章。代码中详细说明了布局文件的配置，如分割线的样式定义和条形跳转框的组件组合，帮助开发者快速上手并应用于实际项目中。
计蒙不吃鱼
160 1
计蒙不吃鱼
|
XML Android开发 数据格式
Android企业级实战-界面篇-2
本文为《Android企业级实战-界面篇》系列第二篇，主要介绍三个UI模块的实现：用户资料模块、关注与粉丝统计模块以及喜欢和收藏功能模块。通过详细的XML代码展示布局设计，包括dimens、ids、colors配置文件的使用，帮助开发者快速构建美观且功能齐全的界面。文章结合实际效果图，便于理解和应用。建议配合第一篇文章内容学习，以获取完整工具类支持。
计蒙不吃鱼
192 0
计蒙不吃鱼
|
算法 Java Android开发
Android企业级实战-界面篇-1
本文详细介绍了Android企业级开发中界面实现的过程，涵盖效果展示、实现前准备及代码实现。作者通过自身经历分享了Android开发经验，并提供了`dimens.xml`、`ids.xml`、`colors.xml`和`strings.xml`等配置文件内容，帮助开发者快速构建规范化的UI布局。文章以一个具体的用户消息界面为例，展示了如何使用线性布局（LinearLayout）和相对布局（RelativeLayout）实现功能模块排列，并附带注意事项及使用方法，适合初学者和进阶开发者参考学习。
计蒙不吃鱼
275 0
nanshaws
|
XML 数据可视化 Android开发
Android应用界面
Android应用界面中的布局和控件使用，包括相对布局、线性布局、表格布局、帧布局、扁平化布局等，以及AdapterView及其子类如ListView的使用方法和Adapter接口的应用。
nanshaws
425 0
Android应用界面

热门文章

最新文章

  • 1
    Android studio怎样修改 包名和AppId,android 加入AIDL进行底层通讯
  • 2
    Android开发1——查找所需要出示权限的内容
  • 3
    Android -- 发送Broadcast、有序无序
  • 4
    android 数据存储几个方式
  • 5
    Android SELinux 参数语法介绍及基础分析
  • 6
    android13(T) 三方APP默认授权
  • 7
    Android10.0 锁屏分析——KeyguardPatternView图案锁分析
  • 8
    《Android游戏开发详解》一2.4　执行Java程序
  • 9
    Android--Activity四种启动模式
  • 10
    Android高级模糊技术[转]
  • 1
    告别手动埋点！Android 无侵入式数据采集方案深度解析
    923
  • 2
    百宝箱开放平台 ✖️ Android 集成说明
    481
  • 3
    【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    1072
  • 4
    【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    404
  • 5
    【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    1536
  • 6
    【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    1150
  • 7
    基于Android的电子记账本系统
    576
  • 8
    【车载Android】模拟Android系统的高负载环境
    773
  • 9
    X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`（Android Debug Bridge）-优雅草卓伊凡
    902
  • 10
    【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
    616

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    小红书笔记详情API深度解析与实战指南（2025年最新版）