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

简介: 雨松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个线性布局 一个水平显示 一个垂直显示。


  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"



  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 所以后者就覆盖在了前者上面。










  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的手机分辨率五花八门所以使用绝对布局的话在其它分辨率的手机上就无法正常的显示了。









设置控件的显示坐标点
  1. android:layout_x="50dip" 
  2. android:layout_y="30dip" 



  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 可以设置 表格中每一行显示的内容 以及位置 ,可以设置显示的缩进,对齐的方式。










  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


相关文章
|
4月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
|
6月前
|
移动开发 监控 前端开发
构建高效Android应用:从优化布局到提升性能
【7月更文挑战第60天】在移动开发领域,一个流畅且响应迅速的应用程序是用户留存的关键。针对Android平台,开发者面临的挑战包括多样化的设备兼容性和性能优化。本文将深入探讨如何通过改进布局设计、内存管理和多线程处理来构建高效的Android应用。我们将剖析布局优化的细节,并讨论最新的Android性能提升策略,以帮助开发者创建更快速、更流畅的用户体验。
94 10
|
4月前
|
XML 数据可视化 Android开发
Android应用界面
Android应用界面中的布局和控件使用,包括相对布局、线性布局、表格布局、帧布局、扁平化布局等,以及AdapterView及其子类如ListView的使用方法和Adapter接口的应用。
55 0
Android应用界面
|
5月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
134 1
|
4月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
259 0
|
6月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
125 1
|
7月前
|
Android开发 Kotlin
kotlin开发安卓app,如何让布局自适应系统传统导航和全面屏导航
使用`navigationBarsPadding()`修饰符实现界面自适应,自动处理底部导航栏的内边距,再加上`.padding(bottom = 10.dp)`设定内容与屏幕底部的距离,以完成全面的布局适配。示例代码采用Kotlin。
188 15
|
6月前
|
Android开发 iOS开发 C#
Xamarin.Forms:从零开始的快速入门指南——打造你的首个跨平台移动应用,轻松学会用C#和XAML构建iOS与Android通用界面的每一个步骤
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程并保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用演示了 Xamarin.Forms 的基本功能和工作原理。
158 0
|
7月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
【7月更文挑战第28天】随着移动应用市场的发展,用户对界面设计的要求不断提高。Material Design是由Google推出的设计语言,强调真实感、统一性和创新性,通过模拟纸张和墨水的物理属性创造沉浸式体验。它注重色彩、排版、图标和布局的一致性,确保跨设备的统一视觉风格。Android Studio提供了丰富的Material Design组件库,如按钮、卡片等,易于使用且美观。
223 1
|
6月前
|
XML 数据可视化 API
Android经典实战之约束布局ConstraintLayout的实用技巧和经验
ConstraintLayout是Android中一款强大的布局管理器,它通过视图间的约束轻松创建复杂灵活的界面。相较于传统布局,它提供更高灵活性与性能。基本用法涉及XML定义约束,如视图与父布局对齐。此外,它支持百分比尺寸、偏移量控制等高级功能,并配有ConstraintSet和编辑器辅助设计。合理运用可显著提高布局效率及性能。
327 0

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    Android历史版本与APK文件结构
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 6
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 9
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 10
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
  • 1
    android FragmentManager 删除所有Fragment 重建
    15
  • 2
    Android实战经验之Kotlin中快速实现MVI架构
    21
  • 3
    即时通讯安全篇(一):正确地理解和使用Android端加密算法
    24
  • 4
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
    39
  • 5
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    121
  • 6
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    40
  • 7
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    55
  • 8
    Android历史版本与APK文件结构
    148
  • 9
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    46
  • 10
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    40