Android UI学习 - Linear Layout, RelativeLayout

简介:

1. 一些常用的公共属性介绍

1) layout_width - 宽
    fill_parent: 宽度和父元素相同,wrap_content: 宽度随本身的内容所调整,或者指定 px 值来设置宽
 
2) layout_height - 高
    fill_parent: 高度和父元素相同,wrap_content: 高度随本身的内容所调整,或者指定 px 值来设置高
 
3) background - 设置背景图
 
4) padding - 设置边距
    可以具体设置paddingBottom,paddingLeft,paddingRight,paddingTop来设定不同的px值
 
5) id - 该object的id号
     @+id/id1 代表添加新的id名为id1,  @id/id1 代表引用id1的控件
 
6) layout_weight - 重要度
     个人理解为显示的优先级。默认为0(最高),数值越大,优先级越低!参考下面的Linear Layout例子。要让layout_weight生效,需要父层或父父层的相应layout_width/layout_height = "fill_parent",否则wrap_content会压缩到最小足够空间!
 
7) layout_gravity - Container组件的对齐方式
     组件在layout里面的对齐方式。
 
8) gravity - 文字在组件里的对齐方式
    例如设置button里面的文字在button中居中显示。
 
* 大多数属性是可以调用对应的函数来动态改变状态的,请查看SDK Doc。
 

2. Linear Layout 线形布局

      orientation - 容器内元素的排列方式。vertical: 子元素们垂直排列,horizontal: 子元素们水平排列。在代码里可通过setOrientation()进行动态改变,值分别为HORIZONTAL或者VERTICAL。
     * 在Linear Layout,  宽度/高度都是按着组件的次序逐个占用的!所以当某个组件设置"fill_parent",在没有设置Layout_weight的情况下,该组件会占用了余下的空间,那么在它后面的组件就会显示不出来。如下图的EditText如果没有设置android:layout_weight="1", 它下面的其他组件就看不见了!
 
      baselineAligned 一般情况下,这个属性默认为true,代表在同一方向的组件都基于第一个组件对齐。所以可以看到下图的text1, button1, text2是在同一水平线的。当不需要这效果时,可以设置为false。
 

LinearLayout

 xml代码:


  
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:orientation="vertical" 
  4.     android:layout_width="fill_parent" 
  5.     android:layout_height="fill_parent" > 
  6.  
  7.     <TextView 
  8.         android:text="@string/hello" 
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         /> 
  12.     <EditText 
  13.         android:layout_width="fill_parent" 
  14.         android:layout_height="wrap_content" 
  15.         android:layout_weight="1" 
  16.         android:id="@+id/edittext" 
  17.         /> 
  18.  
  19.     <LinearLayout 
  20.         android:id="@+id/LinearLayout01"  
  21.         android:layout_width="fill_parent"  
  22.         android:layout_height="wrap_content"  
  23.         android:orientation="horizontal"> 
  24.         <TextView  
  25.             android:text="text1"  
  26.             android:id="@+id/TextView01"  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content" 
  29.             /> 
  30.         <Button android:text="Button01"  
  31.             android:id="@+id/Button01"  
  32.             android:layout_width="fill_parent"  
  33.             android:layout_height="wrap_content" 
  34.             android:layout_weight="1" 
  35.             /> 
  36.         <TextView  
  37.             android:text="text2"  
  38.             android:id="@+id/TextView02"  
  39.             android:layout_width="wrap_content"  
  40.             android:layout_height="wrap_content" 
  41.             /> 
  42.     </LinearLayout> 
  43.  
  44.     <TextView 
  45.         android:layout_width="wrap_content" 
  46.         android:layout_height="wrap_content" 
  47.         android:text="buttom" 
  48.         /> 
  49.  
  50. </LinearLayout> 
 

3. RelativeLayout  相对定位布局

     这个布局比较易懂,但组件间容易存在依赖关系,“牵一发而动全身“,所以在确定组件间布局关系不会再变动时,可以考虑采用!先看看xml代码:

  
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout 
  3.   xmlns:android="http://schemas.android.com/apk/res/android" 
  4.   android:layout_width="wrap_content" 
  5.   android:layout_height="wrap_content" 
  6.   android:id="@+id/relativelayout"> 
  7.  
  8.     <ImageView 
  9.         android:id="@+id/image" 
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content" 
  12.         android:src="@drawable/icon" 
  13.         /> 
  14.     <TextView 
  15.         android:id="@+id/text1" 
  16.         android:layout_width="fill_parent" 
  17.         android:layout_height="wrap_content" 
  18.         android:text="@string/hello" 
  19.         android:layout_toRightOf="@id/image" 
  20.         /> 
  21.     <Button 
  22.         android:id="@+id/button1" 
  23.         android:layout_width="fill_parent" 
  24.         android:layout_height="wrap_content" 
  25.         android:text="button1" 
  26.         android:layout_toRightOf="@id/image" 
  27.         android:layout_below="@id/text1" 
  28.         /> 
  29. </RelativeLayout> 
Java代码(动态添加组件):

  
  
  1. public class RelativeDemo extends Activity { 
  2.  
  3.     @Override 
  4.     public void onCreate(Bundle savedInstanceState) { 
  5.         super.onCreate(savedInstanceState); 
  6.         setContentView(R.layout.relative); 
  7.  
  8.         RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams( 
  9.             ViewGroup.LayoutParams.FILL_PARENT, //width 
  10.             ViewGroup.LayoutParams.WRAP_CONTENT //height 
  11.         ); 
  12.  
  13.         //设置editText layout_below="@id/button1" 
  14.         lp.addRule(RelativeLayout.BELOW, R.id.button1); 
  15.  
  16.         //设置editText layout_alignLeft="@id/image" 
  17.         lp.addRule(RelativeLayout.ALIGN_LEFT, R.id.image); 
  18.  
  19.         ((RelativeLayout) findViewById(R.id.relativelayout)).addView(
  20.         new EditText(this), lp); 
  21.     } 
效果图:

RelativeLayout

     先添加参照物(ImageView),然后就可以依次添加其他组件,定义位置规则rule!位置规则是不分先后的!另外ADT插件提供的预览图,有时候是不准的,未能及时更新,所以最好还是要到模拟器上测试!
 
     RelativeLayout的xml属性很多,总的来说分为2类:
     1) 要指定参照物的,layout_alignBottom,layout_toLeftOf,layout_above,layout_alignBaseline系列的;
          layout_above = ”@id/text1“
     2) 以parent为参照物,设置true/false,layout_centerVertical,layout_alignParentLeft系列的。
          layout_alignParentLeft = ”true“
 
      其中 layout_alignWithParentIfMissing是比较有用且要注意的属性,当设置为true,在指定的参照物找不到的情况下,会使用parent作为新的参照物!
 
       RelativeLayout.LayoutParams是用于设置位置规则的。上述的xml属性均来自此静态类。但它的AddRule(int verb, int anchor),参数的verb动作却是引用RelativeLayout的常量,而这些常量和部分xml属性相对应。参数anchor的值可能是参照物的id,RelativeLayout.TRUE,-1(当不需要指定anchor的verb)。可以这样理解verb和anchor:
xml属性 (verb) = "value" (anchor)
     其中它的构造函数之一: RelativeLayout.LayoutParams(int w, int h),参数指定所要设置子View的宽度和高度。


本文转自 Icansoft 51CTO博客,原文链接: http://blog.51cto.com/android/298345
相关文章
|
3天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
2月前
|
Java Maven 开发工具
第一个安卓项目 | 中国象棋demo学习
本文是作者关于其第一个安卓项目——中国象棋demo的学习记录,展示了demo的运行结果、爬坑记录以及参考资料,包括解决Android Studio和maven相关问题的方法。
第一个安卓项目 | 中国象棋demo学习
|
1月前
|
Web App开发 编解码 视频直播
视频直播技术干货(十二):从入门到放弃,快速学习Android端直播技术
本文详细介绍了Android端直播技术的全貌,涵盖了从实时音视频采集、编码、传输到解码与播放的各个环节。文章还探讨了直播中音视频同步、编解码器选择、传输协议以及直播延迟优化等关键问题。希望本文能为你提供有关Andriod端直播技术的深入理解和实践指导。
44 0
|
2月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
64 1
|
2月前
|
Android开发
Android学习 —— 测试init.rc中的条件触发的处理顺序
Android学习 —— 测试init.rc中的条件触发的处理顺序
|
3月前
|
存储 搜索推荐 Java
探索安卓开发中的自定义视图:打造个性化UI组件Java中的异常处理:从基础到高级
【8月更文挑战第29天】在安卓应用的海洋中,一个独特的用户界面(UI)能让应用脱颖而出。自定义视图是实现这一目标的强大工具。本文将通过一个简单的自定义计数器视图示例,展示如何从零开始创建一个具有独特风格和功能的安卓UI组件,并讨论在此过程中涉及的设计原则、性能优化和兼容性问题。准备好让你的应用与众不同了吗?让我们开始吧!
|
3月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
55 1
|
3月前
|
搜索推荐 Android开发
学习AOSP安卓系统源代码,需要什么样的电脑?不同配置的电脑,其编译时间有多大差距?
本文分享了不同价位电脑配置对于编译AOSP安卓系统源代码的影响,提供了从6000元到更高价位的电脑配置实例,并比较了它们的编译时间,以供学习AOSP源代码时电脑配置选择的参考。
234 0
学习AOSP安卓系统源代码,需要什么样的电脑?不同配置的电脑,其编译时间有多大差距?
|
1月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
109 3
|
20天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
71 8