Android中的六大布局
继承关系图:
![]()
布局XML文件中常用属性:
android:layout_width 宽度
android:layout_height 高度
可能的取值为match_parent,wrap_content或者固定的像素值。
android:orientation 方向
可能的取值为 horizontal水平 vertical 垂直
android:gravity
用来确定View中的控件在View中的停靠位置。
android:layout_gravity
用来确定View在其父控件中的停靠位置
android:padding
padding是控件中的内容相对控件的边缘的边距.
android:layout_margin
layout_margin是控件边缘相对父空间的边距
android:baselineAligned
该属性设置为false,将会阻止该布局管理器与它的子元素的基线对齐
android:divider
设置垂直布局时两个组件之间的分隔条
一.LinearLayout线性布局
水平方向:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" > <TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="row1"
android:layout_weight="1"
android:background="#0000FF"/> <TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="row2"
android:layout_weight="1"
android:background="#00FF00"/> <TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="row3"
android:layout_weight="1"
android:background="#FF0000"/> </LinearLayout>
输出结果:
垂直方向:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" > <TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="row1"
android:layout_weight="1"
android:background="#0000FF"/> <TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="row2"
android:layout_weight="1"
android:background="#00FF00"/> <TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="row3"
android:layout_weight="1"
android:background="#FF0000"/> </LinearLayout>
输出结果:
二.FrameLayout单帧布局
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" > <TextView android:layout_width="80dp"
android:layout_height="80dp"
android:text="row3"
android:background="#FF0000"/> <TextView android:layout_width="60dp"
android:layout_height="60dp"
android:text="row2"
android:background="#00FF00"/> <TextView android:layout_width="40dp"
android:layout_height="40dp"
android:text="row1"
android:background="#0000FF"/> </FrameLayout>
输出结果:
三.RelativeLayout相对布局
android:layout_centerInParent
定义组件在父容器中间
android:layout_centerVertical
定义组件在父容器垂直居中
android:layout_centerHorizontal
定义组件在父容器水平居中
android:layout_alignParentBottom
定义组件与父容器下对齐
(上对齐,左对齐,右对齐略)
android:layout_above
定义在组件的上方
android:layout_below
定义在组件的下方
android:layout_toLeftOf
定义在组件的左边
android:layout_toRightOf
定义在组件的右边
android:layout_alignTop
本元素的上边缘和某元素的的上边缘对齐
(下对齐,右对齐,左对齐略 ...)
<?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/view01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_centerInParent="true"
/>
<!-- 定义该组件位于view01组件的上方 -->
<TextView
android:id="@+id/view02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_above="@id/view01"
android:layout_alignLeft="@id/view01"
/>
<!-- 定义该组件位于view01组件的下方 -->
<TextView
android:id="@+id/view03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_below="@id/view01"
android:layout_alignLeft="@id/view01"
/>
<!-- 定义该组件位于view01组件的左边 -->
<TextView
android:id="@+id/view04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_toLeftOf="@id/view01"
android:layout_alignTop="@id/view01"
/>
<!-- 定义该组件位于view01组件的右边 -->
<TextView
android:id="@+id/view05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_toRightOf="@id/view01"
android:layout_alignTop="@id/view01"
/>
</RelativeLayout>
输出结果:
四.TableLayout表格布局
<?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"
>
<!-- 定义第一个表格布局,指定第2列允许收缩,第3列允许拉伸 -->
<TableLayout android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1"
android:stretchColumns="2"
>
<!-- 直接添加按钮,它自己会占一行 -->
<Button android:id="@+id/ok1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="独自一行的按钮"
/>
<!-- 添加一个表格行 -->
<TableRow>
<!-- 为该表格行添加3个按钮 -->
<Button android:id="@+id/ok2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮"
/>
<Button android:id="@+id/ok3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="收缩的按钮"
/>
<Button android:id="@+id/ok4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拉伸的按钮"
/>
</TableRow>
</TableLayout>
<!-- 定义第二个表格布局 ,指定第二列隐藏-->
<TableLayout android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:collapseColumns="1"
>
<!-- 直接添加按钮,它自己会占一行 -->
<Button android:id="@+id/ok5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 独自一行的按钮 "
/>
<!--定义一个表格行-->
<TableRow>
<!-- 为该表格行添加3个按钮 -->
<Button android:id="@+id/ok6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮1"
/>
<Button android:id="@+id/ok7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="被隐藏的按钮"
/>
<Button android:id="@+id/ok8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮 3"
/>
</TableRow>
</TableLayout>
<!-- 定义第三个表格布局 ,指定第2、3两列可以被拉伸-->
<TableLayout android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1,2"
>
<!-- 直接添加按钮,它自己会占一行 -->
<Button android:id="@+id/ok9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="独自一行的按钮"
/>
<!--定义一个表格行-->
<TableRow>
<!-- 为该表格行添加3个按钮 -->
<Button android:id="@+id/ok10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮"
/>
<Button android:id="@+id/ok11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拉伸的按钮"
/>
<Button android:id="@+id/ok12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拉伸的按钮"
/>
</TableRow>
<!--定义一个表格行-->
<TableRow>
<!-- 为该表格行添加2个按钮 -->
<Button android:id="@+id/ok13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮"
/>
<Button android:id="@+id/ok14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拉伸的按钮"
/>
</TableRow>
</TableLayout>
</LinearLayout>
输出结果:
五.GridLayout九宫格布局(Android4.0加入)
android:rowCount
定义总行数
android:columnCount
定义总列数
用一个计算器界面的例子来演示:
<?xml version="1.0" encoding="utf-8" ?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="6"
android:columnCount="4"
android:id="@+id/root"
>
<!-- 定义一个横跨4列的文本框,
并设置该文本框的前景色、背景色等属性 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:textSize="50sp"
android:layout_marginLeft="4px"
android:layout_marginRight="4px"
android:padding="5px"
android:layout_gravity="right"
android:background="#eee"
android:textColor="#000"
android:text="0"/>
<!-- 定义一个横跨4列的按钮 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:text="清除"/>
</GridLayout>
package com.light.study.android; import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.Button;
import android.widget.GridLayout; public class MainActivity extends Activity {
GridLayout gridLayout;
// 定义16个按钮的文本
String[] chars = new String[]
{
"7" , "8" , "9" , "÷",
"4" , "5" , "6" , "×",
"1" , "2" , "3" , "-",
"." , "0" , "=" , "+"
};
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridLayout = (GridLayout) findViewById(R.id.root); for(int i = 0 ; i < chars.length ; i++)
{
Button bn = new Button(this);
bn.setText(chars[i]);
// 设置该按钮的字体大小
bn.setTextSize(40);
// 指定该组件所在的行
GridLayout.Spec rowSpec = GridLayout.spec(i / 4 + 2);
// 指定该组件所在列
GridLayout.Spec columnSpec = GridLayout.spec(i % 4);
GridLayout.LayoutParams params = new GridLayout.LayoutParams(
rowSpec , columnSpec);
// 指定该组件占满父容器
params.setGravity(Gravity.FILL);
gridLayout.addView(bn , params);
}
} }
输出结果:
Android中的六大布局的更多相关文章
- Android中的LinearLayout布局
LinearLayout : 线性布局 在一般情况下,当有很多控件需要在一个界面列出来时,我们就可以使用线性布局(LinearLayout)了, 线性布局是按照垂直方向(vertical)或水平方向 ...
- Android中的五大布局
Android中的五大布局 1.了解布局 一个丰富的界面总是要由很多个控件组成的,那我们如何才能让各个控件都有条不紊地 摆放在界面上,而不是乱糟糟的呢?这就需要借助布局来实现了.布局是一种可用于放置很 ...
- android中的常用布局管理器(三)
接上篇博客 (5)TableLayout 表格布局管理器 在android中,线性布局和表格布局用的是最多的. 在很多的输出操作中,往往会使用表格的形式对显示的数据进行排版,tablelayo ...
- Android中常用的布局
一般分为5大类. Android中所有的空间第一字母都是大写 1.线性布局 LinearLayout 2.相对布局 RelativeLayout 3.帧布局--分层显示 FrameLayout 4. ...
- Android中的五大布局和logcat打印日志
在android中的布局有五大类,有的时候你可能用到一种,但有的时候你也可能需要两种或者三种布局同时一起使用.这五种布局为别为:LinearLayout(线性布局),FrameLayout(框架布局) ...
- android中的五大布局(控件的容器,可以放button等控件)
一.android中五大布局相当于是容器,这些容器里可以放控件也可以放另一个容器,子控件和布局都需要制定属性. 1.相对布局:RelativeLayout @1控件默认堆叠排列,需要制定控件的相对位置 ...
- android中常用的布局管理器
Android中的几种常用的布局,主要介绍内容有: View视图 RelativeLayout 相对布局管理器 LinearLayout 线性布局管理器 FrameLayout ...
- Android中的flexboxlayout布局
提到FlexboxLayout大家估计有点模糊,它是谷歌最近开源的一个android排版库,它的前身Flexbox是2009年W3C提出了一种新的布局,可以简便.完整.响应式的实现页面布局,Flexb ...
- Android 中常用的布局
一.线性布局----LinearLayout horizontal 水平 <?xml version="1.0" encoding="utf-8"?& ...
随机推荐
- wamp配置虚拟主机
================================================================= 来源参考一:http://wenku.baidu.com/link? ...
- 纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
- ASP.NET MVC(二) 理解MVC
MVC模型同时提供对HTML.CSS以及JavaScript的完整控制. MVC模型通过三个逻辑层来定义WEB应用程序: (一)Business layer(业务层.模型逻辑) 模型(Model) 模 ...
- C# HTTP 请求
public class HttpHelper { /// <summary> /// 创建GET方式的HTTP请求 /// </summary> public static ...
- web.config详解(配置文件节点说明)
转载:http://www.zzzj.com/html/20081110/67614.html web.config文件是一个XML文件,它的根结点是<configuration>,在&l ...
- (转)C#中的Dictionary字典类介绍
关键字:C# Dictionary 字典 作者:txw1958原文:http://www.cnblogs.com/txw1958/archive/2012/11/07/csharp-dictionar ...
- 学习笔记_过滤器详细_2(过滤器JavaWeb三大组件之一)
过滤器详细 5 四种拦截方式 我们来做个测试,写一个过滤器,指定过滤的资源为b.jsp,然后我们在浏览器中直接访问b.jsp,你会发现过滤器执行了! 但是,当我们在a.jsp中request.getR ...
- VBA 打印设置相关属性及方法
打印设置说明,以下均为默认值. With ActiveSheet.PageSetup .PrintTitleRows = "" '工作表打印标题:顶端标题行(R) .PrintTi ...
- 01_JavaMail_01_邮件服务器简述
[收发邮件简单流程] 过程大致是: 发邮件时从客户端发邮件发送到邮件服务器,收邮件就是把邮件服务器的邮件下载到客户端. [邮件协议] * SMTP:(Simple Mail Transfer Prot ...
- git ignore已经checked in files
对于untracked file, 可以使用.gitignore 对于已经checked in file,可以使用git update-index #隐藏 git update-index --ass ...