Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

[Android布局学习系列]

  1.Android 布局学习之——Layout(布局)详解一

  2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

  3.Android 布局学习之——LinearLayout的layout_weight属性

  4.Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline

   Layout Parameters(布局参数):

在XML文件中,我们经常看到类似与layout_width这样的布局属性(layout attributes),这些属性用来定义

View的布局参数,为了让它适合于ViewGroup。

每个ViewGroup类都实现了一个继承自ViewGroup.LayoutParams的嵌套类。

子类包含定义每个子View大小和位置的属性类型,为了适应于ViewGroup。

下面通过官方文档的一张图片以及一个XML文件来学习一下:

 1 <!-- activity的根布局是LinearLayout 也就是线性布局 -->
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="wrap_content"
 6     android:background="#0f0"
 7     android:orientation="vertical" >
 8     <!-- LinearLayout有个子View是RelativeLayout -->
 9     <RelativeLayout
10       android:layout_width="wrap_content"
11       android:layout_height="wrap_content"
12       android:background="#f00"
13       >
14       <TextView
15           android:id="@+id/textView1InRL"
16           android:background="#fff"
17           android:layout_width="wrap_content"
18           android:layout_height="wrap_content"
19           android:text="TextView" />
20
21     <TextView
22         android:id="@+id/textView2InRL"
23         android:background="#fff"
24         android:layout_width="wrap_content"
25         android:layout_height="wrap_content"
26         android:text="TextView2"
27         android:layout_toRightOf="@id/textView1InRL"
28          />
29      <TextView
30         android:background="#fff"
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:text="TextView3"
34         android:layout_below="@id/textView2InRL"
35          />
36       </RelativeLayout>
37       <Button
38           android:text="Button1InLinearLayout"
39           android:layout_width="wrap_content"
40           android:layout_height="wrap_content"
41           />
42       <Button
43           android:text="Button2InLinearLayout"
44           android:layout_width="wrap_content"
45           android:layout_height="wrap_content"
46           />
47 </LinearLayout>

从上,我们可以看出。布局中的子元素都必须定义使他合适于它的父布局的布局参数,尽管它可能为它的子元素定义不同的布局参数。比如上图中的RelativeLayout,它受父Layout:LinearLayout影响,然后它的布局参数则影响到了它的子元素:三个TextView。

   常见的布局(Common Layouts):

下面介绍Android中常用的布局:

1.线性布局(Linear Layout)

将子元素按垂直方向水平方向线性排列。(如果窗口的长度超过了屏幕的长度,则可以生成一个滚动条)

窗口长度超过屏幕长度,生成滚动条(srollbar)的方法:

用ScrollView包裹线性布局:

 1 <LinearLayout
 2        android:layout_width="fill_parent"
 3        android:layout_height="fill_parent"
 4        xmlns:android="http://schemas.android.com/apk/res/android">
 5        <ScrollView
 6             android:layout_width="fill_parent"
 7             android:layout_height="wrap_content">
 8             <LinearLayout
 9                   android:layout_width="wrap_content"
10                   android:layout_height="wrap_content"
11                   android:orientation="vertical">
12                   <!-- 这里放线性布局中的内容 -->
13             </LinearLayout>
14       </ScrollView>
15  </LinearLayout>

通过一个例子来深入学习一下线性布局:

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="wrap_content"
 5     android:paddingLeft="20dp"
 6     android:paddingRight="20dp"
 7     android:orientation="vertical" >
 8     <ScrollView
 9         android:layout_width="fill_parent"
10         android:layout_height="wrap_content"
11         >
12         <LinearLayout
13             android:layout_width="wrap_content"
14             android:layout_height="wrap_content"
15             android:orientation="vertical"
16             >
17     <EditText
18         android:layout_width="match_parent"
19         android:layout_height="wrap_content"
20         android:hint="帐号:" />
21     <EditText
22         android:layout_width="match_parent"
23         android:layout_height="wrap_content"
24         android:hint="密码:" />
25     <LinearLayout
26         android:layout_width="wrap_content"
27         android:layout_height="wrap_content"
28         android:orientation="horizontal"
29         >
30         <Button
31            android:layout_width="wrap_content"
32            android:layout_height="wrap_content"
33            android:layout_marginLeft="30dp"
34            android:text="登录"
35             />
36           <Button
37            android:layout_width="wrap_content"
38            android:layout_height="wrap_content"
39            android:layout_marginLeft="100dp"
40            android:text="注册"
41             />
42     </LinearLayout>
43     <ImageView
44         android:layout_width="match_parent"
45         android:layout_height="500dp"
46         android:src="@drawable/ic_launcher"
47         />
48     <TextView
49         android:layout_width="match_parent"
50         android:layout_height="wrap_content"
51         android:text="LinearLayout大小超过屏幕大小的测试"
52         />
53     </LinearLayout>
54     </ScrollView>
55 </LinearLayout>

2.相关布局(Relative Layout)

正如其名,相关布局。我们可以通过让子元素互相相关(比如Button A在TextView B的下面)或与父母相关来指定

它们的位置。

默认地,所有的子View都被放置在布局的左上方(top-left)。

设置子View之间和子View与父母之间关系的参数如下图所示:

同样通过一个例子来学习一下相关布局:

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     tools:context=".MainActivity" >
 6
 7     <!--android:layout_centerHorizontal 设置TextView在水平中心-->
 8         <TextView
 9             android:id="@+id/login"
10             android:layout_width="wrap_content"
11             android:layout_height="wrap_content"
12             android:layout_centerHorizontal="true"
13             android:textSize="20sp"
14             android:text="登录界面" />
15      <!--android:layout_marginTop="24dp" 设置了EditText的顶部上面的空闲空间是24dp -->
16     <EditText
17         android:id="@+id/editText1"
18         android:layout_width="wrap_content"
19         android:layout_height="wrap_content"
20         android:layout_below="@id/login"
21         android:layout_centerHorizontal="true"
22         android:layout_marginTop="24dp"
23         android:hint="username"
24         android:ems="10" >
25
26         <requestFocus />
27     </EditText>
28     <!-- android:layout_below="@+id/editText1"editText2在editText1下面 -->
29     <EditText
30         android:id="@+id/editText2"
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:layout_below="@+id/editText1"
34         android:layout_centerHorizontal="true"
35         android:layout_marginTop="27dp"
36         android:ems="10"
37         android:hint="password"
38         android:inputType="textPassword" />
39       <!--  android:layout_alignRight="@id/editText2"设置cancelButton与
40          editText2的右边缘对齐-->
41     <Button
42         android:id="@+id/cancelButton"
43         android:layout_width="wrap_content"
44         android:layout_height="wrap_content"
45         android:layout_below="@id/editText2"
46         android:layout_alignRight="@id/editText2"
47         android:text="取消"
48         />
49        <!--  android:layout_toLeftOf="@id/cancelButton"设置确定按钮在取消按钮的左边 -->
50         <Button
51         android:id="@+id/confirmButton"
52         android:layout_width="wrap_content"
53         android:layout_height="wrap_content"
54         android:layout_below="@id/editText2"
55         android:layout_toLeftOf="@id/cancelButton"
56         android:text="确定"
57         />
58
59 </RelativeLayout>

希望这篇文章对大家的学习有所帮助,如果你喜欢,请推荐一下,谢谢~

如果转载,请在文章开头处注明本博客地址:http:www.cnblogs.com/JohnTsai

欢迎讨论交流,邮箱:JohnTsai.Work@gmail.com :)

时间: 2024-10-24 14:51:38

Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)的相关文章

Shell学习之Bash变量详解(二)

Shell学习之Bash变量详解 目录 Bash变量 Bash变量注意点 用户自定义变量 环境变量 位置参数变量 预定义变量 Bash变量 用户自定义变量:在Bash中由用户定义的变量. 环境变量:这种变量中主要保存和系统操作环境相关的数据. 位置参数变量:这种变量主要是用来向脚本当中传递参数或数据的,变量名不能自定义,变量作用是固定的. 预定义变量:是Bash中已经定义好的变量,变量名不能自定义,变量作用也是固定的. Bash变量注意点 1.变量名称可以由字母.数字和下划线组成,但是不能以数字

Android进度条(星级评分)使用详解(二)

一.SeekBar拖动条使用 SeekBar继承于ProgressBar,ProgressBar所支持的XML属性和方法完全适用于SeekBar.拖动条和进度条的区别是:进度条采用颜色填充来表明进度完成的程度,而拖动条则通过滑块位置来标识数值并且运行用户拖动滑块来改变值.因此,拖动条通常用于对系统的某种数值进行调节,比如调节音量.图片的透明度等. 1.拖动条效果 2.代码实现 功能:通过拖动滑块该动态改变图片的透明度 public class MainActivity extends Actio

[转载] java多线程学习-java.util.concurrent详解(二)Semaphore/FutureTask/Exchanger

转载自http://janeky.iteye.com/blog/770393 ----------------------------------------------------------------------------- 3. Semaphore     我们先来学习一下JDK1.5 API中关于这个类的详细介绍: “一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可可用前会阻塞每一个 acquire(),然后再获取该许可.每个 release() 添加一个许可,从

【转】Android中measure过程、WRAP_CONTENT详解以及xml布局文件解析流程浅析(下)

转载请注明出处:http://blog.csdn.net/qinjuning 上篇文章<<Android中measure过程.WRAP_CONTENT详解以及xml布局文件解析流程浅析(上)>>中,我们 了解了View树的转换过程以及如何设置View的LayoutParams的.本文继续沿着既定轨迹继续未完成的job. 主要知识点如下:                 1.MeasureSpc类说明                 2.measure过程详解(揭秘其细节);   

Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)

 [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   3.Android 布局学习之--LinearLayout的layout_weight属性   4.Android 布局学习之--LinearLayout属性baselineAligned的作用及baseline    Layout Parameters(布局參数): 在XML文件里,我们常常看到类

Android实习札记(6)---ViewPager使用详解

Android实习札记(6)---ViewPager使用详解                                    --转载请注明出处:coder-pig 札记(5)中介绍了Fragment构建简单的底部导航栏,在结尾的时候说要在下一节中,结合Viewpager 实现进入软件时的引导界面,说到ViewPager,很多朋友都用过,不过只知道粘贴复制,连一些基本的 东西都不知道,那是不行的,在本节中就先讲下ViewPager的一些基本概念吧! 1.首先ViewPager在哪个包下?

Android ViewGroup触摸屏事件派发机制详解与源码分析

PS一句:最终还是选择CSDN来整理发表这几年的知识点,该文章平行迁移到CSDN.因为CSDN也支持MarkDown语法了,牛逼啊! [工匠若水 http://blog.csdn.net/yanbober] 该篇承接上一篇<Android View触摸屏事件派发机制详解与源码分析>,阅读本篇之前建议先阅读. 1 背景 还记得前一篇<Android View触摸屏事件派发机制详解与源码分析>中关于透过源码继续进阶实例验证模块中存在的点击Button却触发了LinearLayout的事

【Android UI设计】Dialog对话框详解(二)

上一篇我们介绍了Dialog的基本使用方法,[Android UI设计]Dialog对话框详解(一)今天继续介绍,废话不多说,今天主要实现ProgressDialog和透明Dialog两种效果,最后介绍一下github上的一个Dialog动画开源库,里面包含多种动画特效,效果图如下: 一.ProgressDialog基本使用 1.ProgressDialog关键代码 mProgressDialog = new ProgressDialog(MainActivity.this); // 圆形pro

Android开发技巧之viewstub用法详解及实现延迟加载

这一篇是接着上面的include标签的例子来讲的,地址http://blog.csdn.net/jason0539/article/details/26131831 上一篇的布局中间就用了viewstub这个控件,现在来说一下其作用和用法 " ViewStub 是一个不可见的,大小为0的View,最佳用途就是实现View的延迟加载,避免资源浪费,在需要的时候才加载View " 需要注意的是,加载view之后,viewstub本身就会被新加载进来的view替换掉 上代码了,看完就理解了